@futdevpro/dynamo-e2e 1.5.0

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

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