/**
 * Auto-generated by @futdevpro/dynamo-e2e — FormSuite Generator
 * Form key: viewport-audit
 * Route:    /c/text-field-new, /c/textarea-field-new, /c/number-field-new, /c/password-field-new, /c/slider-field-new, /c/slider-range-field-new, /c/checkbox-field-new, /c/select-field-new, /c/multiselect-field-new, /c/radio-select-field-new, /c/date-field-new, /c/datetime-field-new, /c/date-range-field-new
 * Built at: WAVE-2-STAMP
 *
 * DO NOT EDIT BY HAND. Re-emit via `dc e2e generate-form-suite` or
 * `DyE2E_FormSuite_Generator.emit({...})` consumer-script.
 */

import { test, expect } from '@playwright/test';

test.describe('Sandbox viewport audit', (): void => {

test.describe('Route: Sandbox text-field-new (/c/text-field-new)', (): void => {
  test('text-field-new × mobile-s × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/text-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/text-field-new/mobile-s-dark.png', fullPage: true });

  });

  test('text-field-new × mobile-s × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/text-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/text-field-new/mobile-s-light.png', fullPage: true });

  });

  test('text-field-new × mobile-m × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/text-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/text-field-new/mobile-m-dark.png', fullPage: true });

  });

  test('text-field-new × mobile-m × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/text-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/text-field-new/mobile-m-light.png', fullPage: true });

  });

  test('text-field-new × mobile-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/text-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/text-field-new/mobile-l-dark.png', fullPage: true });

  });

  test('text-field-new × mobile-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/text-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/text-field-new/mobile-l-light.png', fullPage: true });

  });

  test('text-field-new × tablet-p × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/text-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/text-field-new/tablet-p-dark.png', fullPage: true });

  });

  test('text-field-new × tablet-p × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/text-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/text-field-new/tablet-p-light.png', fullPage: true });

  });

  test('text-field-new × tablet-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/text-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/text-field-new/tablet-l-dark.png', fullPage: true });

  });

  test('text-field-new × tablet-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/text-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/text-field-new/tablet-l-light.png', fullPage: true });

  });

  test('text-field-new × desktop × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/text-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/text-field-new/desktop-dark.png', fullPage: true });

  });

  test('text-field-new × desktop × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/text-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/text-field-new/desktop-light.png', fullPage: true });

  });

  test('text-field-new × desktop-wide × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/text-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/text-field-new/desktop-wide-dark.png', fullPage: true });

  });

  test('text-field-new × desktop-wide × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/text-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/text-field-new/desktop-wide-light.png', fullPage: true });

  });
});

test.describe('Route: Sandbox textarea-field-new (/c/textarea-field-new)', (): void => {
  test('textarea-field-new × mobile-s × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/textarea-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/textarea-field-new/mobile-s-dark.png', fullPage: true });

  });

  test('textarea-field-new × mobile-s × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/textarea-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/textarea-field-new/mobile-s-light.png', fullPage: true });

  });

  test('textarea-field-new × mobile-m × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/textarea-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/textarea-field-new/mobile-m-dark.png', fullPage: true });

  });

  test('textarea-field-new × mobile-m × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/textarea-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/textarea-field-new/mobile-m-light.png', fullPage: true });

  });

  test('textarea-field-new × mobile-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/textarea-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/textarea-field-new/mobile-l-dark.png', fullPage: true });

  });

  test('textarea-field-new × mobile-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/textarea-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/textarea-field-new/mobile-l-light.png', fullPage: true });

  });

  test('textarea-field-new × tablet-p × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/textarea-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/textarea-field-new/tablet-p-dark.png', fullPage: true });

  });

  test('textarea-field-new × tablet-p × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/textarea-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/textarea-field-new/tablet-p-light.png', fullPage: true });

  });

  test('textarea-field-new × tablet-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/textarea-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/textarea-field-new/tablet-l-dark.png', fullPage: true });

  });

  test('textarea-field-new × tablet-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/textarea-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/textarea-field-new/tablet-l-light.png', fullPage: true });

  });

  test('textarea-field-new × desktop × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/textarea-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/textarea-field-new/desktop-dark.png', fullPage: true });

  });

  test('textarea-field-new × desktop × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/textarea-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/textarea-field-new/desktop-light.png', fullPage: true });

  });

  test('textarea-field-new × desktop-wide × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/textarea-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/textarea-field-new/desktop-wide-dark.png', fullPage: true });

  });

  test('textarea-field-new × desktop-wide × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/textarea-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/textarea-field-new/desktop-wide-light.png', fullPage: true });

  });
});

test.describe('Route: Sandbox number-field-new (/c/number-field-new)', (): void => {
  test('number-field-new × mobile-s × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/number-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/number-field-new/mobile-s-dark.png', fullPage: true });

  });

  test('number-field-new × mobile-s × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/number-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/number-field-new/mobile-s-light.png', fullPage: true });

  });

  test('number-field-new × mobile-m × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/number-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/number-field-new/mobile-m-dark.png', fullPage: true });

  });

  test('number-field-new × mobile-m × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/number-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/number-field-new/mobile-m-light.png', fullPage: true });

  });

  test('number-field-new × mobile-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/number-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/number-field-new/mobile-l-dark.png', fullPage: true });

  });

  test('number-field-new × mobile-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/number-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/number-field-new/mobile-l-light.png', fullPage: true });

  });

  test('number-field-new × tablet-p × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/number-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/number-field-new/tablet-p-dark.png', fullPage: true });

  });

  test('number-field-new × tablet-p × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/number-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/number-field-new/tablet-p-light.png', fullPage: true });

  });

  test('number-field-new × tablet-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/number-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/number-field-new/tablet-l-dark.png', fullPage: true });

  });

  test('number-field-new × tablet-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/number-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/number-field-new/tablet-l-light.png', fullPage: true });

  });

  test('number-field-new × desktop × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/number-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/number-field-new/desktop-dark.png', fullPage: true });

  });

  test('number-field-new × desktop × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/number-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/number-field-new/desktop-light.png', fullPage: true });

  });

  test('number-field-new × desktop-wide × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/number-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/number-field-new/desktop-wide-dark.png', fullPage: true });

  });

  test('number-field-new × desktop-wide × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/number-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/number-field-new/desktop-wide-light.png', fullPage: true });

  });
});

test.describe('Route: Sandbox password-field-new (/c/password-field-new)', (): void => {
  test('password-field-new × mobile-s × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/password-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/password-field-new/mobile-s-dark.png', fullPage: true });

  });

  test('password-field-new × mobile-s × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/password-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/password-field-new/mobile-s-light.png', fullPage: true });

  });

  test('password-field-new × mobile-m × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/password-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/password-field-new/mobile-m-dark.png', fullPage: true });

  });

  test('password-field-new × mobile-m × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/password-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/password-field-new/mobile-m-light.png', fullPage: true });

  });

  test('password-field-new × mobile-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/password-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/password-field-new/mobile-l-dark.png', fullPage: true });

  });

  test('password-field-new × mobile-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/password-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/password-field-new/mobile-l-light.png', fullPage: true });

  });

  test('password-field-new × tablet-p × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/password-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/password-field-new/tablet-p-dark.png', fullPage: true });

  });

  test('password-field-new × tablet-p × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/password-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/password-field-new/tablet-p-light.png', fullPage: true });

  });

  test('password-field-new × tablet-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/password-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/password-field-new/tablet-l-dark.png', fullPage: true });

  });

  test('password-field-new × tablet-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/password-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/password-field-new/tablet-l-light.png', fullPage: true });

  });

  test('password-field-new × desktop × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/password-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/password-field-new/desktop-dark.png', fullPage: true });

  });

  test('password-field-new × desktop × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/password-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/password-field-new/desktop-light.png', fullPage: true });

  });

  test('password-field-new × desktop-wide × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/password-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/password-field-new/desktop-wide-dark.png', fullPage: true });

  });

  test('password-field-new × desktop-wide × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/password-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/password-field-new/desktop-wide-light.png', fullPage: true });

  });
});

test.describe('Route: Sandbox slider-field-new (/c/slider-field-new)', (): void => {
  test('slider-field-new × mobile-s × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/slider-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-field-new/mobile-s-dark.png', fullPage: true });

  });

  test('slider-field-new × mobile-s × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/slider-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-field-new/mobile-s-light.png', fullPage: true });

  });

  test('slider-field-new × mobile-m × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/slider-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-field-new/mobile-m-dark.png', fullPage: true });

  });

  test('slider-field-new × mobile-m × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/slider-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-field-new/mobile-m-light.png', fullPage: true });

  });

  test('slider-field-new × mobile-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/slider-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-field-new/mobile-l-dark.png', fullPage: true });

  });

  test('slider-field-new × mobile-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/slider-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-field-new/mobile-l-light.png', fullPage: true });

  });

  test('slider-field-new × tablet-p × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/slider-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-field-new/tablet-p-dark.png', fullPage: true });

  });

  test('slider-field-new × tablet-p × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/slider-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-field-new/tablet-p-light.png', fullPage: true });

  });

  test('slider-field-new × tablet-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/slider-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-field-new/tablet-l-dark.png', fullPage: true });

  });

  test('slider-field-new × tablet-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/slider-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-field-new/tablet-l-light.png', fullPage: true });

  });

  test('slider-field-new × desktop × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/slider-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-field-new/desktop-dark.png', fullPage: true });

  });

  test('slider-field-new × desktop × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/slider-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-field-new/desktop-light.png', fullPage: true });

  });

  test('slider-field-new × desktop-wide × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/slider-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-field-new/desktop-wide-dark.png', fullPage: true });

  });

  test('slider-field-new × desktop-wide × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/slider-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-field-new/desktop-wide-light.png', fullPage: true });

  });
});

test.describe('Route: Sandbox slider-range-field-new (/c/slider-range-field-new)', (): void => {
  test('slider-range-field-new × mobile-s × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/slider-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-range-field-new/mobile-s-dark.png', fullPage: true });

  });

  test('slider-range-field-new × mobile-s × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/slider-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-range-field-new/mobile-s-light.png', fullPage: true });

  });

  test('slider-range-field-new × mobile-m × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/slider-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-range-field-new/mobile-m-dark.png', fullPage: true });

  });

  test('slider-range-field-new × mobile-m × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/slider-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-range-field-new/mobile-m-light.png', fullPage: true });

  });

  test('slider-range-field-new × mobile-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/slider-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-range-field-new/mobile-l-dark.png', fullPage: true });

  });

  test('slider-range-field-new × mobile-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/slider-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-range-field-new/mobile-l-light.png', fullPage: true });

  });

  test('slider-range-field-new × tablet-p × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/slider-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-range-field-new/tablet-p-dark.png', fullPage: true });

  });

  test('slider-range-field-new × tablet-p × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/slider-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-range-field-new/tablet-p-light.png', fullPage: true });

  });

  test('slider-range-field-new × tablet-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/slider-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-range-field-new/tablet-l-dark.png', fullPage: true });

  });

  test('slider-range-field-new × tablet-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/slider-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-range-field-new/tablet-l-light.png', fullPage: true });

  });

  test('slider-range-field-new × desktop × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/slider-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-range-field-new/desktop-dark.png', fullPage: true });

  });

  test('slider-range-field-new × desktop × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/slider-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-range-field-new/desktop-light.png', fullPage: true });

  });

  test('slider-range-field-new × desktop-wide × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/slider-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-range-field-new/desktop-wide-dark.png', fullPage: true });

  });

  test('slider-range-field-new × desktop-wide × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/slider-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/slider-range-field-new/desktop-wide-light.png', fullPage: true });

  });
});

test.describe('Route: Sandbox checkbox-field-new (/c/checkbox-field-new)', (): void => {
  test('checkbox-field-new × mobile-s × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/checkbox-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/checkbox-field-new/mobile-s-dark.png', fullPage: true });

  });

  test('checkbox-field-new × mobile-s × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/checkbox-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/checkbox-field-new/mobile-s-light.png', fullPage: true });

  });

  test('checkbox-field-new × mobile-m × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/checkbox-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/checkbox-field-new/mobile-m-dark.png', fullPage: true });

  });

  test('checkbox-field-new × mobile-m × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/checkbox-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/checkbox-field-new/mobile-m-light.png', fullPage: true });

  });

  test('checkbox-field-new × mobile-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/checkbox-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/checkbox-field-new/mobile-l-dark.png', fullPage: true });

  });

  test('checkbox-field-new × mobile-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/checkbox-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/checkbox-field-new/mobile-l-light.png', fullPage: true });

  });

  test('checkbox-field-new × tablet-p × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/checkbox-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/checkbox-field-new/tablet-p-dark.png', fullPage: true });

  });

  test('checkbox-field-new × tablet-p × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/checkbox-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/checkbox-field-new/tablet-p-light.png', fullPage: true });

  });

  test('checkbox-field-new × tablet-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/checkbox-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/checkbox-field-new/tablet-l-dark.png', fullPage: true });

  });

  test('checkbox-field-new × tablet-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/checkbox-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/checkbox-field-new/tablet-l-light.png', fullPage: true });

  });

  test('checkbox-field-new × desktop × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/checkbox-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/checkbox-field-new/desktop-dark.png', fullPage: true });

  });

  test('checkbox-field-new × desktop × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/checkbox-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/checkbox-field-new/desktop-light.png', fullPage: true });

  });

  test('checkbox-field-new × desktop-wide × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/checkbox-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/checkbox-field-new/desktop-wide-dark.png', fullPage: true });

  });

  test('checkbox-field-new × desktop-wide × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/checkbox-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/checkbox-field-new/desktop-wide-light.png', fullPage: true });

  });
});

test.describe('Route: Sandbox select-field-new (/c/select-field-new)', (): void => {
  test('select-field-new × mobile-s × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/select-field-new/mobile-s-dark.png', fullPage: true });

  });

  test('select-field-new × mobile-s × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/select-field-new/mobile-s-light.png', fullPage: true });

  });

  test('select-field-new × mobile-m × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/select-field-new/mobile-m-dark.png', fullPage: true });

  });

  test('select-field-new × mobile-m × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/select-field-new/mobile-m-light.png', fullPage: true });

  });

  test('select-field-new × mobile-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/select-field-new/mobile-l-dark.png', fullPage: true });

  });

  test('select-field-new × mobile-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/select-field-new/mobile-l-light.png', fullPage: true });

  });

  test('select-field-new × tablet-p × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/select-field-new/tablet-p-dark.png', fullPage: true });

  });

  test('select-field-new × tablet-p × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/select-field-new/tablet-p-light.png', fullPage: true });

  });

  test('select-field-new × tablet-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/select-field-new/tablet-l-dark.png', fullPage: true });

  });

  test('select-field-new × tablet-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/select-field-new/tablet-l-light.png', fullPage: true });

  });

  test('select-field-new × desktop × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/select-field-new/desktop-dark.png', fullPage: true });

  });

  test('select-field-new × desktop × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/select-field-new/desktop-light.png', fullPage: true });

  });

  test('select-field-new × desktop-wide × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/select-field-new/desktop-wide-dark.png', fullPage: true });

  });

  test('select-field-new × desktop-wide × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/select-field-new/desktop-wide-light.png', fullPage: true });

  });
});

test.describe('Route: Sandbox multiselect-field-new (/c/multiselect-field-new)', (): void => {
  test('multiselect-field-new × mobile-s × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/multiselect-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/multiselect-field-new/mobile-s-dark.png', fullPage: true });

  });

  test('multiselect-field-new × mobile-s × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/multiselect-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/multiselect-field-new/mobile-s-light.png', fullPage: true });

  });

  test('multiselect-field-new × mobile-m × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/multiselect-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/multiselect-field-new/mobile-m-dark.png', fullPage: true });

  });

  test('multiselect-field-new × mobile-m × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/multiselect-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/multiselect-field-new/mobile-m-light.png', fullPage: true });

  });

  test('multiselect-field-new × mobile-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/multiselect-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/multiselect-field-new/mobile-l-dark.png', fullPage: true });

  });

  test('multiselect-field-new × mobile-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/multiselect-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/multiselect-field-new/mobile-l-light.png', fullPage: true });

  });

  test('multiselect-field-new × tablet-p × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/multiselect-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/multiselect-field-new/tablet-p-dark.png', fullPage: true });

  });

  test('multiselect-field-new × tablet-p × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/multiselect-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/multiselect-field-new/tablet-p-light.png', fullPage: true });

  });

  test('multiselect-field-new × tablet-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/multiselect-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/multiselect-field-new/tablet-l-dark.png', fullPage: true });

  });

  test('multiselect-field-new × tablet-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/multiselect-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/multiselect-field-new/tablet-l-light.png', fullPage: true });

  });

  test('multiselect-field-new × desktop × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/multiselect-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/multiselect-field-new/desktop-dark.png', fullPage: true });

  });

  test('multiselect-field-new × desktop × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/multiselect-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/multiselect-field-new/desktop-light.png', fullPage: true });

  });

  test('multiselect-field-new × desktop-wide × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/multiselect-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/multiselect-field-new/desktop-wide-dark.png', fullPage: true });

  });

  test('multiselect-field-new × desktop-wide × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/multiselect-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/multiselect-field-new/desktop-wide-light.png', fullPage: true });

  });
});

test.describe('Route: Sandbox radio-select-field-new (/c/radio-select-field-new)', (): void => {
  test('radio-select-field-new × mobile-s × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/radio-select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/radio-select-field-new/mobile-s-dark.png', fullPage: true });

  });

  test('radio-select-field-new × mobile-s × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/radio-select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/radio-select-field-new/mobile-s-light.png', fullPage: true });

  });

  test('radio-select-field-new × mobile-m × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/radio-select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/radio-select-field-new/mobile-m-dark.png', fullPage: true });

  });

  test('radio-select-field-new × mobile-m × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/radio-select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/radio-select-field-new/mobile-m-light.png', fullPage: true });

  });

  test('radio-select-field-new × mobile-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/radio-select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/radio-select-field-new/mobile-l-dark.png', fullPage: true });

  });

  test('radio-select-field-new × mobile-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/radio-select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/radio-select-field-new/mobile-l-light.png', fullPage: true });

  });

  test('radio-select-field-new × tablet-p × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/radio-select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/radio-select-field-new/tablet-p-dark.png', fullPage: true });

  });

  test('radio-select-field-new × tablet-p × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/radio-select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/radio-select-field-new/tablet-p-light.png', fullPage: true });

  });

  test('radio-select-field-new × tablet-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/radio-select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/radio-select-field-new/tablet-l-dark.png', fullPage: true });

  });

  test('radio-select-field-new × tablet-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/radio-select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/radio-select-field-new/tablet-l-light.png', fullPage: true });

  });

  test('radio-select-field-new × desktop × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/radio-select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/radio-select-field-new/desktop-dark.png', fullPage: true });

  });

  test('radio-select-field-new × desktop × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/radio-select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/radio-select-field-new/desktop-light.png', fullPage: true });

  });

  test('radio-select-field-new × desktop-wide × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/radio-select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/radio-select-field-new/desktop-wide-dark.png', fullPage: true });

  });

  test('radio-select-field-new × desktop-wide × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/radio-select-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/radio-select-field-new/desktop-wide-light.png', fullPage: true });

  });
});

test.describe('Route: Sandbox date-field-new (/c/date-field-new)', (): void => {
  test('date-field-new × mobile-s × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/date-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-field-new/mobile-s-dark.png', fullPage: true });

  });

  test('date-field-new × mobile-s × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/date-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-field-new/mobile-s-light.png', fullPage: true });

  });

  test('date-field-new × mobile-m × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/date-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-field-new/mobile-m-dark.png', fullPage: true });

  });

  test('date-field-new × mobile-m × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/date-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-field-new/mobile-m-light.png', fullPage: true });

  });

  test('date-field-new × mobile-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/date-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-field-new/mobile-l-dark.png', fullPage: true });

  });

  test('date-field-new × mobile-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/date-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-field-new/mobile-l-light.png', fullPage: true });

  });

  test('date-field-new × tablet-p × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/date-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-field-new/tablet-p-dark.png', fullPage: true });

  });

  test('date-field-new × tablet-p × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/date-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-field-new/tablet-p-light.png', fullPage: true });

  });

  test('date-field-new × tablet-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/date-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-field-new/tablet-l-dark.png', fullPage: true });

  });

  test('date-field-new × tablet-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/date-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-field-new/tablet-l-light.png', fullPage: true });

  });

  test('date-field-new × desktop × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/date-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-field-new/desktop-dark.png', fullPage: true });

  });

  test('date-field-new × desktop × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/date-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-field-new/desktop-light.png', fullPage: true });

  });

  test('date-field-new × desktop-wide × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/date-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-field-new/desktop-wide-dark.png', fullPage: true });

  });

  test('date-field-new × desktop-wide × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/date-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-field-new/desktop-wide-light.png', fullPage: true });

  });
});

test.describe('Route: Sandbox datetime-field-new (/c/datetime-field-new)', (): void => {
  test('datetime-field-new × mobile-s × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/datetime-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/datetime-field-new/mobile-s-dark.png', fullPage: true });

  });

  test('datetime-field-new × mobile-s × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/datetime-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/datetime-field-new/mobile-s-light.png', fullPage: true });

  });

  test('datetime-field-new × mobile-m × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/datetime-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/datetime-field-new/mobile-m-dark.png', fullPage: true });

  });

  test('datetime-field-new × mobile-m × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/datetime-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/datetime-field-new/mobile-m-light.png', fullPage: true });

  });

  test('datetime-field-new × mobile-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/datetime-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/datetime-field-new/mobile-l-dark.png', fullPage: true });

  });

  test('datetime-field-new × mobile-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/datetime-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/datetime-field-new/mobile-l-light.png', fullPage: true });

  });

  test('datetime-field-new × tablet-p × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/datetime-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/datetime-field-new/tablet-p-dark.png', fullPage: true });

  });

  test('datetime-field-new × tablet-p × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/datetime-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/datetime-field-new/tablet-p-light.png', fullPage: true });

  });

  test('datetime-field-new × tablet-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/datetime-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/datetime-field-new/tablet-l-dark.png', fullPage: true });

  });

  test('datetime-field-new × tablet-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/datetime-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/datetime-field-new/tablet-l-light.png', fullPage: true });

  });

  test('datetime-field-new × desktop × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/datetime-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/datetime-field-new/desktop-dark.png', fullPage: true });

  });

  test('datetime-field-new × desktop × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/datetime-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/datetime-field-new/desktop-light.png', fullPage: true });

  });

  test('datetime-field-new × desktop-wide × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/datetime-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/datetime-field-new/desktop-wide-dark.png', fullPage: true });

  });

  test('datetime-field-new × desktop-wide × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/datetime-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/datetime-field-new/desktop-wide-light.png', fullPage: true });

  });
});

test.describe('Route: Sandbox date-range-field-new (/c/date-range-field-new)', (): void => {
  test('date-range-field-new × mobile-s × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/date-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-range-field-new/mobile-s-dark.png', fullPage: true });

  });

  test('date-range-field-new × mobile-s × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 320, height: 568 });
    const response = await page.goto('/c/date-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-range-field-new/mobile-s-light.png', fullPage: true });

  });

  test('date-range-field-new × mobile-m × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/date-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-range-field-new/mobile-m-dark.png', fullPage: true });

  });

  test('date-range-field-new × mobile-m × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 375, height: 667 });
    const response = await page.goto('/c/date-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-range-field-new/mobile-m-light.png', fullPage: true });

  });

  test('date-range-field-new × mobile-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/date-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-range-field-new/mobile-l-dark.png', fullPage: true });

  });

  test('date-range-field-new × mobile-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 414, height: 896 });
    const response = await page.goto('/c/date-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-range-field-new/mobile-l-light.png', fullPage: true });

  });

  test('date-range-field-new × tablet-p × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/date-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-range-field-new/tablet-p-dark.png', fullPage: true });

  });

  test('date-range-field-new × tablet-p × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 768, height: 1024 });
    const response = await page.goto('/c/date-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-range-field-new/tablet-p-light.png', fullPage: true });

  });

  test('date-range-field-new × tablet-l × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/date-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-range-field-new/tablet-l-dark.png', fullPage: true });

  });

  test('date-range-field-new × tablet-l × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1024, height: 768 });
    const response = await page.goto('/c/date-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    const tooSmall = await page.evaluate((minPx: number): number => {
      const tappable: NodeListOf<HTMLElement> = document.querySelectorAll('button, a, [role="button"], input[type="checkbox"], input[type="radio"]');
      let undersize: number = 0;
      tappable.forEach((el: HTMLElement): void => {
        const rect = el.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0 && (rect.width < minPx || rect.height < minPx)) {
          undersize++;
        }
      });
      return undersize;
    }, 44);
    expect(tooSmall, 'tappable elements smaller than 44px').toBe(0);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-range-field-new/tablet-l-light.png', fullPage: true });

  });

  test('date-range-field-new × desktop × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/date-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-range-field-new/desktop-dark.png', fullPage: true });

  });

  test('date-range-field-new × desktop × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1440, height: 900 });
    const response = await page.goto('/c/date-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-range-field-new/desktop-light.png', fullPage: true });

  });

  test('date-range-field-new × desktop-wide × dark', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/date-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.add('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-range-field-new/desktop-wide-dark.png', fullPage: true });

  });

  test('date-range-field-new × desktop-wide × light', async ({ page }): Promise<void> => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    const response = await page.goto('/c/date-range-field-new');
    expect(response?.ok()).toBeTruthy();
    await page.evaluate((): void => { document.documentElement.classList.remove('dark'); });
    await page.waitForLoadState('networkidle');
    const overflow = await page.evaluate((): { scrollWidth: number; innerWidth: number } => ({
      scrollWidth: document.documentElement.scrollWidth,
      innerWidth: window.innerWidth,
    }));
    expect(overflow.scrollWidth, 'horizontal overflow detected').toBeLessThanOrEqual(overflow.innerWidth);

    await page.screenshot({ path: 'e2e/screenshots/sandbox/date-range-field-new/desktop-wide-light.png', fullPage: true });

  });
});

});