From 175ef07c44a7e11368a6da61514e5cd1164bbcfe Mon Sep 17 00:00:00 2001
From: Dani Sandoval <dani.sandoval@clickhouse.com>
Date: Wed, 27 May 2026 11:18:15 -0600
Subject: [PATCH 1/3] test(Separator): add visual regression baseline before
 CSS Modules migration

---
 .../Separator/Separator.stories.tsx           |  93 ++++++
 tests/utils/separator.spec.ts                 | 312 ++++++++++++++++++
 ...efault-orientation-dark-chromium-linux.png | Bin 0 -> 267 bytes
 ...fault-orientation-light-chromium-linux.png | Bin 0 -> 270 bytes
 ...ator-horizontal-lg-dark-chromium-linux.png | Bin 0 -> 303 bytes
 ...tor-horizontal-lg-light-chromium-linux.png | Bin 0 -> 306 bytes
 ...ator-horizontal-md-dark-chromium-linux.png | Bin 0 -> 267 bytes
 ...tor-horizontal-md-light-chromium-linux.png | Bin 0 -> 270 bytes
 ...ator-horizontal-sm-dark-chromium-linux.png | Bin 0 -> 249 bytes
 ...tor-horizontal-sm-light-chromium-linux.png | Bin 0 -> 252 bytes
 ...ator-horizontal-xl-dark-chromium-linux.png | Bin 0 -> 338 bytes
 ...tor-horizontal-xl-light-chromium-linux.png | Bin 0 -> 340 bytes
 ...ator-horizontal-xs-dark-chromium-linux.png | Bin 0 -> 222 bytes
 ...tor-horizontal-xs-light-chromium-linux.png | Bin 0 -> 223 bytes
 ...tor-horizontal-xxl-dark-chromium-linux.png | Bin 0 -> 374 bytes
 ...or-horizontal-xxl-light-chromium-linux.png | Bin 0 -> 376 bytes
 ...arator-vertical-lg-dark-chromium-linux.png | Bin 0 -> 214 bytes
 ...rator-vertical-lg-light-chromium-linux.png | Bin 0 -> 217 bytes
 ...arator-vertical-md-dark-chromium-linux.png | Bin 0 -> 215 bytes
 ...rator-vertical-md-light-chromium-linux.png | Bin 0 -> 218 bytes
 ...arator-vertical-sm-dark-chromium-linux.png | Bin 0 -> 210 bytes
 ...rator-vertical-sm-light-chromium-linux.png | Bin 0 -> 212 bytes
 ...arator-vertical-xl-dark-chromium-linux.png | Bin 0 -> 264 bytes
 ...rator-vertical-xl-light-chromium-linux.png | Bin 0 -> 268 bytes
 ...arator-vertical-xs-dark-chromium-linux.png | Bin 0 -> 188 bytes
 ...rator-vertical-xs-light-chromium-linux.png | Bin 0 -> 190 bytes
 ...rator-vertical-xxl-dark-chromium-linux.png | Bin 0 -> 282 bytes
 ...ator-vertical-xxl-light-chromium-linux.png | Bin 0 -> 286 bytes
 28 files changed, 405 insertions(+)
 create mode 100644 tests/utils/separator.spec.ts
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-default-orientation-dark-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-default-orientation-light-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-horizontal-lg-dark-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-horizontal-lg-light-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-horizontal-md-dark-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-horizontal-md-light-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-horizontal-sm-dark-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-horizontal-sm-light-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-horizontal-xl-dark-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-horizontal-xl-light-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-horizontal-xs-dark-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-horizontal-xs-light-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-horizontal-xxl-dark-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-horizontal-xxl-light-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-vertical-lg-dark-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-vertical-lg-light-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-vertical-md-dark-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-vertical-md-light-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-vertical-sm-dark-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-vertical-sm-light-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-vertical-xl-dark-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-vertical-xl-light-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-vertical-xs-dark-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-vertical-xs-light-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-vertical-xxl-dark-chromium-linux.png
 create mode 100644 tests/utils/separator.spec.ts-snapshots/separator-vertical-xxl-light-chromium-linux.png

diff --git a/src/components/Separator/Separator.stories.tsx b/src/components/Separator/Separator.stories.tsx
index 2fae836c0..edee4c484 100644
--- a/src/components/Separator/Separator.stories.tsx
+++ b/src/components/Separator/Separator.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { Separator } from '@/components/Separator';
+import type { SeparatorProps } from './Separator.types';
 
 const meta: Meta<typeof Separator> = {
   component: Separator,
@@ -11,9 +12,101 @@ export default meta;
 
 type Story = StoryObj<typeof Separator>;
 
+const HorizontalHarness = ({ size }: { size: SeparatorProps['size'] }) => (
+  <div
+    data-testid="separator-harness"
+    style={{
+      display: 'inline-flex',
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      width: '160px',
+      background: '#888',
+    }}
+  >
+    <div style={{ height: '24px', background: '#222' }} />
+    <Separator
+      size={size}
+      orientation="horizontal"
+    />
+    <div style={{ height: '24px', background: '#222' }} />
+  </div>
+);
+
+const VerticalHarness = ({ size }: { size: SeparatorProps['size'] }) => (
+  <div
+    data-testid="separator-harness"
+    style={{
+      display: 'inline-flex',
+      flexDirection: 'row',
+      alignItems: 'stretch',
+      height: '80px',
+      background: '#888',
+    }}
+  >
+    <div style={{ width: '24px', background: '#222' }} />
+    <Separator
+      size={size}
+      orientation="vertical"
+    />
+    <div style={{ width: '24px', background: '#222' }} />
+  </div>
+);
+
 export const Playground: Story = {
   args: {
     size: 'xs',
     orientation: 'horizontal',
   },
 };
+
+export const HorizontalXs: Story = {
+  render: () => <HorizontalHarness size="xs" />,
+};
+
+export const HorizontalSm: Story = {
+  render: () => <HorizontalHarness size="sm" />,
+};
+
+export const HorizontalMd: Story = {
+  render: () => <HorizontalHarness size="md" />,
+};
+
+export const HorizontalLg: Story = {
+  render: () => <HorizontalHarness size="lg" />,
+};
+
+export const HorizontalXl: Story = {
+  render: () => <HorizontalHarness size="xl" />,
+};
+
+export const HorizontalXxl: Story = {
+  render: () => <HorizontalHarness size="xxl" />,
+};
+
+export const VerticalXs: Story = {
+  render: () => <VerticalHarness size="xs" />,
+};
+
+export const VerticalSm: Story = {
+  render: () => <VerticalHarness size="sm" />,
+};
+
+export const VerticalMd: Story = {
+  render: () => <VerticalHarness size="md" />,
+};
+
+export const VerticalLg: Story = {
+  render: () => <VerticalHarness size="lg" />,
+};
+
+export const VerticalXl: Story = {
+  render: () => <VerticalHarness size="xl" />,
+};
+
+export const VerticalXxl: Story = {
+  render: () => <VerticalHarness size="xxl" />,
+};
+
+export const DefaultOrientation: Story = {
+  render: () => <HorizontalHarness size="md" />,
+};
diff --git a/tests/utils/separator.spec.ts b/tests/utils/separator.spec.ts
new file mode 100644
index 000000000..0e8118889
--- /dev/null
+++ b/tests/utils/separator.spec.ts
@@ -0,0 +1,312 @@
+import { test as it, expect } from '@playwright/test';
+import { getStoryUrl } from './index';
+
+const { describe, use } = it;
+
+const harnessLocator = '[data-testid="separator-harness"]';
+
+describe('Separator Visual Regression', () => {
+  describe('Light Theme (Storybook Global)', () => {
+    describe('Horizontal Size Variants', () => {
+      it('xs size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-xs', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-xs-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('sm size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-sm', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-sm-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('md size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-md', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-md-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('lg size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-lg', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-lg-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('xl size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-xl', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-xl-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('xxl size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-xxl', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-xxl-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+
+    describe('Vertical Size Variants', () => {
+      it('xs size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-xs', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-xs-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('sm size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-sm', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-sm-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('md size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-md', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-md-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('lg size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-lg', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-lg-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('xl size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-xl', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-xl-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('xxl size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-xxl', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-xxl-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+
+    describe('Default Orientation', () => {
+      it('default orientation matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--default-orientation', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-default-orientation-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+  });
+
+  describe('Dark Theme (System prefers-color-scheme)', () => {
+    use({ colorScheme: 'dark' });
+
+    describe('Horizontal Size Variants', () => {
+      it('xs size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-xs'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-xs-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('sm size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-sm'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-sm-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('md size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-md'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-md-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('lg size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-lg'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-lg-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('xl size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-xl'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-xl-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('xxl size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-xxl'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-xxl-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+
+    describe('Vertical Size Variants', () => {
+      it('xs size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-xs'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-xs-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('sm size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-sm'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-sm-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('md size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-md'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-md-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('lg size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-lg'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-lg-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('xl size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-xl'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-xl-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('xxl size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-xxl'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-xxl-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+
+    describe('Default Orientation', () => {
+      it('default orientation matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--default-orientation'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-default-orientation-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+  });
+});
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-default-orientation-dark-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-default-orientation-dark-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..521bfd3f3d0a4930483c659a6d43a11da50a8732
GIT binary patch
literal 267
zcmeAS@N?(olHy`uVBq!ia0vp^3xL>>g9%99+-eaEqz-txIEGZrd2`2+m&K5W#qqtS
z2a{p~lj0vmnf@@*)@wgrZv8H|tIm1WfkLL^oHFVKbBJZE{eJI4>OoXp-{%&$tt)*m
zyKBx1i^j(+eZm%g55SDyHcr`_AxyX!F^u2L3=IGOXK^#X2Kt2!<QHZJJAD?}NpF4r
Q07V!)UHx3vIVCg!092M^7XSbN

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-default-orientation-light-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-default-orientation-light-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..d560d417c779efb8b5f0d9bf958a38298057306d
GIT binary patch
literal 270
zcmeAS@N?(olHy`uVBq!ia0vp^3xL>>g9%99+-eaEqz-$!IEGZrd2=U__ppHg>p|~S
z6}I%KQ0{f15iQ5F+77+C`+V)*?-#yGU1I4Iw(xsk(fF8HM&8`wHa%`sT{~WX-`~FO
z>)$=?dg@lFrs?%xxTQmy4PXQ0fWG+uKT$j`9mrq<d54){p*Xv2+3cvNKoJH{S3j3^
HP6<r_Yuslq

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-lg-dark-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-horizontal-lg-dark-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6ef8979aea514aa8c6c960d535c6da6cf03ec19
GIT binary patch
literal 303
zcmeAS@N?(olHy`uVBq!ia0vp^3xGI~g9%99O13%%q@H-XIEGZrd2`p1m&K5W#qqtS
z2a{p~lj0vmnf@@*)@wgrZ~ZQ}tIm1WfkLL^oHFVKbBJZE{eJI4>On%fzRxXgTUYvC
zcGsL27LAWt`h+d~9^hd7wmFuy8J8qJeas9D|Nkrc__G21%Lei<GXs|`i|xsbk~=^V
N22WQ%mvv4FO#q<maPR;C

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-lg-light-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-horizontal-lg-light-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4598c55a7a9fa4d20dfb294c214dd250b06e679
GIT binary patch
literal 306
zcmeAS@N?(olHy`uVBq!ia0vp^3xGI~g9%99O13%%q@H`aIEGZrd2=_A_ppHg>p|~S
z6}I%KQ0{f15iQ5F+77+C`+n`-?-#yGU1I4Iw(xsk(fF8HM&8`wHa%`ax^}$&zQ29l
z*S~w(_0+8hnXlKs@s<v0t^gY;2lVOx|69K-as@KjKwf5MXg|Sj>sR^X5Kx4{)78&q
Iol`;+0Neg}J^%m!

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-md-dark-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-horizontal-md-dark-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..521bfd3f3d0a4930483c659a6d43a11da50a8732
GIT binary patch
literal 267
zcmeAS@N?(olHy`uVBq!ia0vp^3xL>>g9%99+-eaEqz-txIEGZrd2`2+m&K5W#qqtS
z2a{p~lj0vmnf@@*)@wgrZv8H|tIm1WfkLL^oHFVKbBJZE{eJI4>OoXp-{%&$tt)*m
zyKBx1i^j(+eZm%g55SDyHcr`_AxyX!F^u2L3=IGOXK^#X2Kt2!<QHZJJAD?}NpF4r
Q07V!)UHx3vIVCg!092M^7XSbN

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-md-light-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-horizontal-md-light-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..d560d417c779efb8b5f0d9bf958a38298057306d
GIT binary patch
literal 270
zcmeAS@N?(olHy`uVBq!ia0vp^3xL>>g9%99+-eaEqz-$!IEGZrd2=U__ppHg>p|~S
z6}I%KQ0{f15iQ5F+77+C`+V)*?-#yGU1I4Iw(xsk(fF8HM&8`wHa%`sT{~WX-`~FO
z>)$=?dg@lFrs?%xxTQmy4PXQ0fWG+uKT$j`9mrq<d54){p*Xv2+3cvNKoJH{S3j3^
HP6<r_Yuslq

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-sm-dark-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-horizontal-sm-dark-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f4667813791dda8e1ee439816075b695e1f057f
GIT binary patch
literal 249
zcmeAS@N?(olHy`uVBq!ia0vp^3xL>?g9%959oha7NUig9aSW-L^X9fAFN+}$i{pDu
z4<^L~CdEIBGW}tqt=E1$-}+r{SDo{$1BFb-Ic3xf<`BzR`~BX9)PrDM-{%&$tt)*m
zyKBx1i^j(+eZOrQwnq|g65QIqj0_C_|J%+x90+td8_4C%3<tim@Mcv;wg5#KJYD@<
J);T3K0RXSsTgCtY

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-sm-light-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-horizontal-sm-light-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..36db9ddaca887bb5fdaa6f24b89d767315fc0c92
GIT binary patch
literal 252
zcmeAS@N?(olHy`uVBq!ia0vp^3xL>?g9%959oha7NNx0VaSW-L^X7IS?_mQ0)`Q-u
zDs1Udq1@|2BU+AUwH<nO_x{?w-!FWXy2R2aY~lC7qVX}YjJ&zUZF<~bT{~WX-`~FO
z>)$=?dg@kSL-hC`<ci6t7tA?O$aI{Ocm_Yv&Hw+0JX=~0WUzr8&&)7wDm(9!L|2dq
NgQu&X%Q~loCIHbuUPS-^

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xl-dark-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xl-dark-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c3572259a3354c1d1fd5c42c8e6d413439772bc
GIT binary patch
literal 338
zcmeAS@N?(olHy`uVBq!ia0vp^3xGJ0g9%99leEodU|?kTba4!+nDgceBQJ}h0E^?h
z=1Ef<Bvc;6ANu_wB=W_XH!~wk{)%NX9p{u$FPL+nkXXj{`_<ig+<n3peh(}fAF~k6
z*ztbO<`=iV-*cVbO|%}k1v~Q7#A3xrb12wX^}qo6|Np>muRA~n8z@Ma8D><l#6CS#
R+yE3|@O1TaS?83{1OOABe-How

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xl-light-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xl-light-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..25061a9bf7cd0a210f9eca7361bf9ee98b05967f
GIT binary patch
literal 340
zcmeAS@N?(olHy`uVBq!ia0vp^3xGJ0g9%99leEodU|{6*ba4!+nDgceBQKMq0L#JJ
zPhMenZYnA8HF4LJtkNk-dv{lMmz?vg1BFb-Ic3xf<`B!c`+UyA(@l?A`h+d~9#}LI
z&3N~#rr!Db-#XiNJ#kqQ?1MV)`a8Z@F;d(K)mIM;lK=nBe$FWZGT1<Y!pvZ>l|A;p
SyT~q}2!p4qpUXO@geCyqx_f~D

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xs-dark-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xs-dark-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..b71d96b650a898d830adae47b195a533e78fb3a6
GIT binary patch
literal 222
zcmeAS@N?(olHy`uVBq!ia0vp^3xL>=g9%7pnr=D=NKN*1aSW-L^X3X8=K%wO0|(MW
z989n5-!a`l{^2<%h39+COKP2G9Vlcv&MBi_Fo#&i-0JriO3TV$Y<gkQ_?V?n*uw7t
r(Tv}W3=IGOhwRpt0y>Wk<UD2uSwZIWn#>D3fg%i^u6{1-oD!M<rS?yv

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xs-light-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xs-light-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..10f648b319152388a23a1ca54ebae1f4be421359
GIT binary patch
literal 223
zcmeAS@N?(olHy`uVBq!ia0vp^3xL>=g9%7pnr=D=NKNr{aSW-L^X8T#Z-avX%R$?w
zNnh7<H*wdLtkNklTEDZr{Kc*|lg7s^eZm%g4=jjfSfBsR8+-iY-m@;pIc3xf<{T(w
sBARiBpMl~3|66CQwgTP9267)W!`4RTr|l&VU4bGDp00i_>zopr0PH7GHUIzs

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xxl-dark-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xxl-dark-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..68bce67a74a178c90a01cceb6c64887282b53015
GIT binary patch
literal 374
zcmeAS@N?(olHy`uVBq!ia0vp^3xK$gg9%99J#YVkfq_xm)5S5QV$Pc@jJzz00xXX2
znkP+dkWhILf9Us%kjNKj-pq_F`74&mbevO0y<pCPLSh-)?^k#0arX&Z_&u;_e9S@t
zW5@eBn_t}ee$RD!HwC7^9kC-nO)OT7G|zy2UJnek|Nldr=FR{z*g(O?%<$qpORewu
R*o8n522WQ%mvv4FO#nFzj%@${

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xxl-light-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xxl-light-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..f57cc114b634a4b8f4050af722a66c948f5837f9
GIT binary patch
literal 376
zcmeAS@N?(olHy`uVBq!ia0vp^3xK$gg9%99J#YVkfq_xi)5S5QV$Pc@jJ!;a0xSn>
zKY4}Sxv8YU*Th{@vP!2U?cH73U2@K|4iqvS=af+|m_sb%?(;bdPd7bg=@Yi_dtlK>
z0ps1TntJE!f9q`9^~7aKZ~;!|UVq0ID@KZ6peEG=gYEzSMSd*HfDATJz%et-KF?mO
TuIdg9N(Kf`S3j3^P6<r_s*s9w

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-lg-dark-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-vertical-lg-dark-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..de102f71e3566a061c96af3985bf5348dcd356e5
GIT binary patch
literal 214
zcmeAS@N?(olHy`uVBq!ia0vp^fj}I<!2~4VZR9%wq`Ey_978JRyg6^kd&Gc&#qsr5
z51vy3K-6O-p|o`N++XW%{GU@?llcB`R{i_f?7h3@6dx0>I~=@uVVd*VwpqNU(phF#
va#q|7pje;+=$ilk(?mVi0U2x{XE8G{K4a&cs?%2m6k+gm^>bP0l+XkKp#M^D

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-lg-light-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-vertical-lg-light-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..3fa5998c2ddce320b884564217a3ca03aa2d3e28
GIT binary patch
literal 217
zcmeAS@N?(olHy`uVBq!ia0vp^fj}I<!2~4VZR9%wr20Hv978JRyg9#-_pkv2v!mh(
z6)7D@Dc+@O8`Qt@u-&;E?<@9yUU8rLnyq<n?eE{O{F5L1?cQU~^$%Cx4A{Id&G~HG
zEM8OTEVC;)D<~F-0Xpda|E721hk*<>kjt1E{+qLN*5BLk5-7sp>FVdQ&MBb@04!uw
A@&Et;

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-md-dark-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-vertical-md-dark-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..1cafa6c5567dfa881bb5e262d232a2cc175069ea
GIT binary patch
literal 215
zcmeAS@N?(olHy`uVBq!ia0vp^jzAp1!2~2v%J=I4sUA-k$B>FSZ_XR?G8;0mIBIhV
zH5;)2(PExP{rxvQjGxACy>I!v;_$uSh5Ns++bXxd_*})|^gs5zyi!soCK(wQE-YB+
x=-k}KMzO$Qeg=mB{}Zn!)dStd267iO!<O0XoR3$Yz6cay@O1TaS?83{1OVWHNml>>

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-md-light-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-vertical-md-light-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e8bb7450f6fea37283befdcf197c9beb11a4897
GIT binary patch
literal 218
zcmeAS@N?(olHy`uVBq!ia0vp^jzAp1!2~2v%J=I4seVrv$B>FSZ_aPzJ><Z^a!`EH
zBz+#2Pp-913xdoaTsRmti}U@W+H;o2MXyCI|NZ*!&;R?DU%yu!^U&~}zjJdN8!xYv
zl!-}3#)S(D7CKTaPylq%|Nq?U&R+yF*g#HWX4v?fopa8D4~Kyw44$rjF6*2UngIO(
BPl^Bl

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-sm-dark-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-vertical-sm-dark-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..550f574ae2a5cf6c3e6d1ed5618ae80370c012a0
GIT binary patch
literal 210
zcmeAS@N?(olHy`uVBq!ia0vp^mOvc9!2~3A8oeBVRJ*5(V@SoEH|Gp_nGG3O9JRTG
znvGb1XtB?Cj=F9S<EydT?^`~vIDGH-&F}ZNUMoIt`IvY9NBb>i)P!|Fm;C?#PwlHW
ekiiCW5;H^ZUv^HV3#T)HA`G6celF{r5}E-1txnPa

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-sm-light-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-vertical-sm-light-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..de1c76181e1850396b6f2b8a3e00ab53a238300b
GIT binary patch
literal 212
zcmeAS@N?(olHy`uVBq!ia0vp^mOvc9!2~3A8oeBVRHvtlV@SoEH|I9;9&%t{IViqp
zl0J{iC)e7h1wrZS4oFAL>U_7U_MGK$(Q8r9>-O6JzyEzt_4~rs<2(4*@=_7@GBYsz
l|9{iuV+hbuY#>K5GjzwYbKX0A@(NId!PC{xWt~$(699}BOpgEn

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-xl-dark-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-vertical-xl-dark-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..63965bd86cc0540c267325ab11e6f9d68a6c16d2
GIT binary patch
literal 264
zcmeAS@N?(olHy`uVBq!ia0vp^i9j5{!2~4RoO=EMslA>qjv*Cu-dr#gWKm>bFnsoW
zssa~hhZB>Q{~@y}oh^T!&w1Rs_j|>|d%Lem>CY)X#=YOM@QRG7``N(afu^?dGcf%B
kZ+2?&MW9F6KptUc@K<8ztZ<zF0w}`Z>FVdQ&MBb@08xTuYXATM

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-xl-light-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-vertical-xl-light-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..46546cb9459eca06e9e2a7738bedac4b18e7176e
GIT binary patch
literal 268
zcmeAS@N?(olHy`uVBq!ia0vp^i9j5{!2~4RoO=EMse_&_jv*Cu-dr%`J#4_h;J8{#
zh&lV}(FJ=#I4?Q;IQm$&rTV<(an9_ug@>O1-o5_6MdEu~zY5;2#m`n)X7$Y)aLN|w
mhyVXO&TqdCWUzre!_45*#Ll_7CpQf!!r<xZ=d#Wzp$Py<f_o+a

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-xs-dark-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-vertical-xs-dark-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..77cb7509bc74d7b5812c36d1012e8d5ff8c61b56
GIT binary patch
literal 188
zcmeAS@N?(olHy`uVBq!ia0vp^hCm#^!2~4j!??BpsX|W|$B>FSZ_XL=9xxDK*tkNg
zA%Ua5fPbM#-iZqb-5z|OvpMfZ_4zZq9!CCue8s}luQ!+?>MT10!~g&O$4+hrTFwTt
aoSC84lZDgw%#8y;5e83JKbLh*2~7amQ%F+)

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-xs-light-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-vertical-xs-light-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..45324e8b87d5eaaf0db7e5cfd7670cf695f12822
GIT binary patch
literal 190
zcmeAS@N?(olHy`uVBq!ia0vp^hCm#^!2~4j!??BpsbWtT$B>FSZ_XL=HW)B49Bf;#
zM33V{djdDNeM!QO;DX<Ciq{m_zb}<bZq5DEAN=@=g{faJMU*_y*8l&1FHX4yWUzs(
aXJ%+#$->z*J@X4tgu&C*&t;ucLK6V?P(}s-

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-xxl-dark-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-vertical-xxl-dark-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a15b1b49c095d751022519ac36cdc41c06d2263
GIT binary patch
literal 282
zcmeAS@N?(olHy`uVBq!ia0vp^g+Ls@!2~21zTp)CQs+Hg978JRyt&}Wdq9DK!Elog
z=b{M>8Y&Bl)OOtub-Hi)T;SWi$Nt~%ZN2v6vSm8Q`HpKVuMb-Iosogz|NrYIJLQ31
dV*`1OnPE;GJEx$x#A=`jgQu&X%Q~loCIIa&o<RTr

literal 0
HcmV?d00001

diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-xxl-light-chromium-linux.png b/tests/utils/separator.spec.ts-snapshots/separator-vertical-xxl-light-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..174a595f782a76202f960834e84200c68cf3d152
GIT binary patch
literal 286
zcmeAS@N?(olHy`uVBq!ia0vp^g+Ls@!2~21zTp)CQkOkl978JRyt%NEm&s7XVWa*L
z6-geK$qO$j%=j|xL+N?tA3Lu}CBC;Uui9(>|9<(ql5>&|4KG@K9lTHv=&S$#|L-#l
f05aG>-eYE%xsRQ*zudwSD8k_B>gTe~DWM4f@q37b

literal 0
HcmV?d00001


From a9f6430c5c60314bb3f89221346124c7df297222 Mon Sep 17 00:00:00 2001
From: Dani Sandoval <dani.sandoval@clickhouse.com>
Date: Wed, 27 May 2026 11:21:37 -0600
Subject: [PATCH 2/3] chore(Separator): migrate styling from styled-components
 to CSS Modules

---
 .../migrate-separator-to-css-modules.md       |  5 ++
 src/components/Separator/Separator.module.css | 81 +++++++++++++++++++
 src/components/Separator/Separator.tsx        | 49 ++++++-----
 3 files changed, 115 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/migrate-separator-to-css-modules.md
 create mode 100644 src/components/Separator/Separator.module.css

diff --git a/.changeset/migrate-separator-to-css-modules.md b/.changeset/migrate-separator-to-css-modules.md
new file mode 100644
index 000000000..acdb59e6e
--- /dev/null
+++ b/.changeset/migrate-separator-to-css-modules.md
@@ -0,0 +1,5 @@
+---
+'@clickhouse/click-ui': patch
+---
+
+Migrate Separator from styled-components to css modules with no change in behavior
diff --git a/src/components/Separator/Separator.module.css b/src/components/Separator/Separator.module.css
new file mode 100644
index 000000000..c0f8be873
--- /dev/null
+++ b/src/components/Separator/Separator.module.css
@@ -0,0 +1,81 @@
+.separator[data-orientation='horizontal'] {
+  width: 100%;
+  border-top: 0.0625rem solid var(--click-separator-color-stroke-default);
+}
+
+.separator[data-orientation='vertical'] {
+  height: 100%;
+  border-right: 0.0625rem solid var(--click-separator-color-stroke-default);
+}
+
+.separator_variant_horizontal-xs {
+  margin:
+    var(--click-separator-horizontal-space-y-xs)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-sm {
+  margin:
+    var(--click-separator-horizontal-space-y-sm)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-md {
+  margin:
+    var(--click-separator-horizontal-space-y-md)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-lg {
+  margin:
+    var(--click-separator-horizontal-space-y-lg)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-xl {
+  margin:
+    var(--click-separator-horizontal-space-y-xl)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-xxl {
+  margin:
+    var(--click-separator-horizontal-space-y-xxl)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_vertical-xs {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xs);
+}
+
+.separator_variant_vertical-sm {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-sm);
+}
+
+.separator_variant_vertical-md {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-md);
+}
+
+.separator_variant_vertical-lg {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-lg);
+}
+
+.separator_variant_vertical-xl {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xl);
+}
+
+.separator_variant_vertical-xxl {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xxl);
+}
diff --git a/src/components/Separator/Separator.tsx b/src/components/Separator/Separator.tsx
index c6c35c4e0..8ccd23f34 100644
--- a/src/components/Separator/Separator.tsx
+++ b/src/components/Separator/Separator.tsx
@@ -1,27 +1,36 @@
-import { styled } from 'styled-components';
 import * as RadixSeparator from '@radix-ui/react-separator';
+import { cn, cva } from '@/lib/cva';
 import { SeparatorProps } from './Separator.types';
-const CUISeparator = styled(RadixSeparator.Root)<SeparatorProps>`
-  ${({ theme, size, orientation }) => `
-    &[data-orientation="horizontal"] {
-      width: 100%;
-      border-top: 0.0625rem solid ${theme.click.separator.color.stroke.default};
-    }
-    &[data-orientation="vertical"] {
-      height: 100%;
-      border-right: 0.0625rem solid ${theme.click.separator.color.stroke.default};
-    }
-    margin: ${
-      orientation === 'horizontal'
-        ? `${theme.click.separator.horizontal.space.y[size]} ${theme.click.separator.horizontal.space.x.all}`
-        : `${theme.click.separator.vertical.space.y.all} ${theme.click.separator.vertical.space.x[size]}`
-    }
-  `}
-`;
+import styles from './Separator.module.css';
 
-export const Separator = ({ orientation = 'horizontal', ...props }: SeparatorProps) => (
-  <CUISeparator
+const separatorVariants = cva(styles.separator, {
+  variants: {
+    variant: {
+      'horizontal-xs': styles['separator_variant_horizontal-xs'],
+      'horizontal-sm': styles['separator_variant_horizontal-sm'],
+      'horizontal-md': styles['separator_variant_horizontal-md'],
+      'horizontal-lg': styles['separator_variant_horizontal-lg'],
+      'horizontal-xl': styles['separator_variant_horizontal-xl'],
+      'horizontal-xxl': styles['separator_variant_horizontal-xxl'],
+      'vertical-xs': styles['separator_variant_vertical-xs'],
+      'vertical-sm': styles['separator_variant_vertical-sm'],
+      'vertical-md': styles['separator_variant_vertical-md'],
+      'vertical-lg': styles['separator_variant_vertical-lg'],
+      'vertical-xl': styles['separator_variant_vertical-xl'],
+      'vertical-xxl': styles['separator_variant_vertical-xxl'],
+    },
+  },
+});
+
+export const Separator = ({
+  orientation = 'horizontal',
+  size,
+  className,
+  ...props
+}: SeparatorProps) => (
+  <RadixSeparator.Root
     orientation={orientation}
     {...props}
+    className={cn(separatorVariants({ variant: `${orientation}-${size}` }), className)}
   />
 );

From 5269b82a5fb8aae523b1897c9e38693ef6805293 Mon Sep 17 00:00:00 2001
From: Dani Sandoval <dani.sandoval@clickhouse.com>
Date: Wed, 27 May 2026 11:35:48 -0600
Subject: [PATCH 3/3] chore(Separator): address Copilot review on PR #1046

- Move tests/utils/separator.spec.ts to tests/display/ (and matching
  snapshots). tests/utils/ is reserved for shared helpers like
  getStoryUrl; component specs belong in component-family folders.
- Replace DefaultOrientation's HorizontalHarness render with a new
  DefaultHarness that omits the `orientation` prop entirely, so the
  story actually exercises the component's default-orientation
  behavior instead of explicitly setting `orientation="horizontal"`.

Visual regression remains byte-for-byte: 26/26 snapshots match without
regeneration (default-orientation rendering is identical to the
explicit `horizontal` form since Radix's default is `horizontal`, which
is exactly what the test is now correctly verifying).
---
 .../Separator/Separator.stories.tsx           |  19 +++++++++++++++++-
 tests/{utils => display}/separator.spec.ts    |   2 +-
 ...efault-orientation-dark-chromium-linux.png | Bin
 ...fault-orientation-light-chromium-linux.png | Bin
 ...ator-horizontal-lg-dark-chromium-linux.png | Bin
 ...tor-horizontal-lg-light-chromium-linux.png | Bin
 ...ator-horizontal-md-dark-chromium-linux.png | Bin
 ...tor-horizontal-md-light-chromium-linux.png | Bin
 ...ator-horizontal-sm-dark-chromium-linux.png | Bin
 ...tor-horizontal-sm-light-chromium-linux.png | Bin
 ...ator-horizontal-xl-dark-chromium-linux.png | Bin
 ...tor-horizontal-xl-light-chromium-linux.png | Bin
 ...ator-horizontal-xs-dark-chromium-linux.png | Bin
 ...tor-horizontal-xs-light-chromium-linux.png | Bin
 ...tor-horizontal-xxl-dark-chromium-linux.png | Bin
 ...or-horizontal-xxl-light-chromium-linux.png | Bin
 ...arator-vertical-lg-dark-chromium-linux.png | Bin
 ...rator-vertical-lg-light-chromium-linux.png | Bin
 ...arator-vertical-md-dark-chromium-linux.png | Bin
 ...rator-vertical-md-light-chromium-linux.png | Bin
 ...arator-vertical-sm-dark-chromium-linux.png | Bin
 ...rator-vertical-sm-light-chromium-linux.png | Bin
 ...arator-vertical-xl-dark-chromium-linux.png | Bin
 ...rator-vertical-xl-light-chromium-linux.png | Bin
 ...arator-vertical-xs-dark-chromium-linux.png | Bin
 ...rator-vertical-xs-light-chromium-linux.png | Bin
 ...rator-vertical-xxl-dark-chromium-linux.png | Bin
 ...ator-vertical-xxl-light-chromium-linux.png | Bin
 28 files changed, 19 insertions(+), 2 deletions(-)
 rename tests/{utils => display}/separator.spec.ts (99%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-default-orientation-dark-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-default-orientation-light-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-horizontal-lg-dark-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-horizontal-lg-light-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-horizontal-md-dark-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-horizontal-md-light-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-horizontal-sm-dark-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-horizontal-sm-light-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-horizontal-xl-dark-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-horizontal-xl-light-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-horizontal-xs-dark-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-horizontal-xs-light-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-horizontal-xxl-dark-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-horizontal-xxl-light-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-vertical-lg-dark-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-vertical-lg-light-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-vertical-md-dark-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-vertical-md-light-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-vertical-sm-dark-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-vertical-sm-light-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-vertical-xl-dark-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-vertical-xl-light-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-vertical-xs-dark-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-vertical-xs-light-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-vertical-xxl-dark-chromium-linux.png (100%)
 rename tests/{utils => display}/separator.spec.ts-snapshots/separator-vertical-xxl-light-chromium-linux.png (100%)

diff --git a/src/components/Separator/Separator.stories.tsx b/src/components/Separator/Separator.stories.tsx
index edee4c484..4f103ca12 100644
--- a/src/components/Separator/Separator.stories.tsx
+++ b/src/components/Separator/Separator.stories.tsx
@@ -32,6 +32,23 @@ const HorizontalHarness = ({ size }: { size: SeparatorProps['size'] }) => (
   </div>
 );
 
+const DefaultHarness = ({ size }: { size: SeparatorProps['size'] }) => (
+  <div
+    data-testid="separator-harness"
+    style={{
+      display: 'inline-flex',
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      width: '160px',
+      background: '#888',
+    }}
+  >
+    <div style={{ height: '24px', background: '#222' }} />
+    <Separator size={size} />
+    <div style={{ height: '24px', background: '#222' }} />
+  </div>
+);
+
 const VerticalHarness = ({ size }: { size: SeparatorProps['size'] }) => (
   <div
     data-testid="separator-harness"
@@ -108,5 +125,5 @@ export const VerticalXxl: Story = {
 };
 
 export const DefaultOrientation: Story = {
-  render: () => <HorizontalHarness size="md" />,
+  render: () => <DefaultHarness size="md" />,
 };
diff --git a/tests/utils/separator.spec.ts b/tests/display/separator.spec.ts
similarity index 99%
rename from tests/utils/separator.spec.ts
rename to tests/display/separator.spec.ts
index 0e8118889..90ffd0de2 100644
--- a/tests/utils/separator.spec.ts
+++ b/tests/display/separator.spec.ts
@@ -1,5 +1,5 @@
 import { test as it, expect } from '@playwright/test';
-import { getStoryUrl } from './index';
+import { getStoryUrl } from '../utils';
 
 const { describe, use } = it;
 
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-default-orientation-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-default-orientation-dark-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-default-orientation-dark-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-default-orientation-dark-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-default-orientation-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-default-orientation-light-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-default-orientation-light-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-default-orientation-light-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-lg-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-lg-dark-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-horizontal-lg-dark-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-horizontal-lg-dark-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-lg-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-lg-light-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-horizontal-lg-light-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-horizontal-lg-light-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-md-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-md-dark-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-horizontal-md-dark-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-horizontal-md-dark-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-md-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-md-light-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-horizontal-md-light-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-horizontal-md-light-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-sm-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-sm-dark-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-horizontal-sm-dark-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-horizontal-sm-dark-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-sm-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-sm-light-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-horizontal-sm-light-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-horizontal-sm-light-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xl-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xl-dark-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-horizontal-xl-dark-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-horizontal-xl-dark-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xl-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xl-light-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-horizontal-xl-light-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-horizontal-xl-light-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xs-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xs-dark-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-horizontal-xs-dark-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-horizontal-xs-dark-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xs-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xs-light-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-horizontal-xs-light-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-horizontal-xs-light-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xxl-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xxl-dark-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-horizontal-xxl-dark-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-horizontal-xxl-dark-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-horizontal-xxl-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xxl-light-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-horizontal-xxl-light-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-horizontal-xxl-light-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-lg-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-lg-dark-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-vertical-lg-dark-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-vertical-lg-dark-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-lg-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-lg-light-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-vertical-lg-light-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-vertical-lg-light-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-md-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-md-dark-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-vertical-md-dark-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-vertical-md-dark-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-md-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-md-light-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-vertical-md-light-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-vertical-md-light-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-sm-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-sm-dark-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-vertical-sm-dark-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-vertical-sm-dark-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-sm-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-sm-light-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-vertical-sm-light-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-vertical-sm-light-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-xl-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-xl-dark-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-vertical-xl-dark-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-vertical-xl-dark-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-xl-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-xl-light-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-vertical-xl-light-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-vertical-xl-light-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-xs-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-xs-dark-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-vertical-xs-dark-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-vertical-xs-dark-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-xs-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-xs-light-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-vertical-xs-light-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-vertical-xs-light-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-xxl-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-xxl-dark-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-vertical-xxl-dark-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-vertical-xxl-dark-chromium-linux.png
diff --git a/tests/utils/separator.spec.ts-snapshots/separator-vertical-xxl-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-xxl-light-chromium-linux.png
similarity index 100%
rename from tests/utils/separator.spec.ts-snapshots/separator-vertical-xxl-light-chromium-linux.png
rename to tests/display/separator.spec.ts-snapshots/separator-vertical-xxl-light-chromium-linux.png