@futdevpro/dynamo-e2e 1.18.10 → 1.18.11

package/dogfood/generated-full/sandbox-viewport-audit.spec.ts

@@ -1,4643 +0,0 @@
-/**
- * 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 });
-
-  });
-});
-
-});