@clickhouse/click-ui 0.6.0 → 0.6.1-rc2

package/dist/esm/components/Link/index.js

@@ -1,21 +1,45 @@
+import "./Link.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { styled } from 'styled-components';
-import { linkStyles } from './common.js';
+import { cn } from '../../lib/cva.js';
+import styles from './Link.module.css.js';
 import { Icon as SvgImage } from '../Icon/index.js';
+import { cva } from 'class-variance-authority';
 
-const CuiLink = styled.a.withConfig({
-  componentId: "sc-1bwz77u-0"
-})(["", ""], linkStyles);
-const IconWrapper = styled.span.withConfig({
-  componentId: "sc-1bwz77u-1"
-})([".external-icon{height:", ";width:", ";}"], ({
-  $size,
-  theme
-}) => $size === "xs" || $size === "sm" ? theme.click.link.icon.size.sm.height : theme.click.link.icon.size.md.height, ({
-  $size,
-  theme
-}) => $size === "xs" || $size === "sm" ? theme.click.link.icon.size.sm.width : theme.click.link.icon.size.md.width);
+const linkVariants = cva(styles.link, {
+  variants: {
+    size: {
+      xs: styles["link_size_xs"],
+      sm: styles["link_size_sm"],
+      md: styles["link_size_md"],
+      lg: styles["link_size_lg"]
+    },
+    weight: {
+      normal: styles["link_weight_normal"],
+      medium: styles["link_weight_medium"],
+      semibold: styles["link_weight_semibold"],
+      bold: styles["link_weight_bold"],
+      mono: styles["link_weight_mono"]
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    weight: "normal"
+  }
+});
+const externalIconVariants = cva("", {
+  variants: {
+    size: {
+      xs: styles["external-icon_size_xs"],
+      sm: styles["external-icon_size_sm"],
+      md: styles["external-icon_size_md"],
+      lg: styles["external-icon_size_lg"]
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
 const _Link = ({
   size = "md",
   weight = "normal",
@@ -23,11 +47,20 @@ const _Link = ({
   icon,
   children,
   component,
+  className,
   ...props
-}, ref) => /* @__PURE__ */ jsxs(CuiLink, { ref, $size: size, $weight: weight, as: component ?? "a", onClick, ...props, children: [
-  children,
-  icon && /* @__PURE__ */ jsx(IconWrapper, { $size: size, children: /* @__PURE__ */ jsx(SvgImage, { name: icon, className: "external-icon", "data-testid": icon }) })
-] });
+}, ref) => {
+  const Component = component ?? "a";
+  return /* @__PURE__ */ jsxs(Component, { ref, onClick, ...props, className: cn(linkVariants({
+    size,
+    weight
+  }), className), children: [
+    children,
+    icon && /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(SvgImage, { name: icon, className: cn("external-icon", externalIconVariants({
+      size
+    })), "data-testid": icon }) })
+  ] });
+};
 const Link = forwardRef(_Link);
 
 export { Link };

package/dist/esm/components/Link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactEventHandler,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { styled } from 'styled-components';\nimport { linkStyles } from './common';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n  /** The font size of the link text */\n  size?: TextSize;\n  /** The font weight of the link text */\n  weight?: TextWeight;\n  /** Click event handler */\n  onClick?: ReactEventHandler;\n  /** The content to display inside the link */\n  children?: React.ReactNode;\n  /** Optional icon to display after the link text */\n  icon?: IconName;\n  /** Custom component to render as the link element */\n  component?: T;\n}\n\nconst CuiLink = styled.a<{ $size: TextSize; $weight: TextWeight }>`\n  ${linkStyles}\n`;\n\nconst IconWrapper = styled.span<{ $size: TextSize }>`\n  .external-icon {\n    height: ${({ $size, theme }) =>\n      $size === 'xs' || $size === 'sm'\n        ? theme.click.link.icon.size.sm.height\n        : theme.click.link.icon.size.md.height};\n    width: ${({ $size, theme }) =>\n      $size === 'xs' || $size === 'sm'\n        ? theme.click.link.icon.size.sm.width\n        : theme.click.link.icon.size.md.width};\n  }\n`;\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n  props: Omit<ComponentProps<T>, keyof T> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n  {\n    size = 'md',\n    weight = 'normal',\n    onClick,\n    icon,\n    children,\n    component,\n    ...props\n  }: Omit<ComponentProps<T>, keyof T> & LinkProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <CuiLink\n    ref={ref}\n    $size={size}\n    $weight={weight}\n    as={component ?? 'a'}\n    onClick={onClick}\n    {...props}\n  >\n    {children}\n    {icon && (\n      <IconWrapper $size={size}>\n        <Icon\n          name={icon}\n          className=\"external-icon\"\n          data-testid={icon}\n        />\n      </IconWrapper>\n    )}\n  </CuiLink>\n);\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["CuiLink","styled","a","withConfig","componentId","linkStyles","IconWrapper","span","$size","theme","click","link","icon","size","sm","height","md","width","_Link","weight","onClick","children","component","props","ref","Icon","Link","forwardRef"],"mappings":";;;;;;AA6BA,MAAMA,OAAAA,GAAUC,MAAAA,CAAOC,CAAAA,CAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GACpBC,UAAU,CAAA;AAGd,MAAMC,WAAAA,GAAcL,MAAAA,CAAOM,IAAAA,CAAIJ,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,wBAAA,EAAA,SAAA,EAAA,IAAA,GAEjB,CAAC;AAAA,EAAEI,KAAAA;AAAAA,EAAOC;AAAM,CAAA,KACxBD,UAAU,IAAA,IAAQA,KAAAA,KAAU,OACxBC,KAAAA,CAAMC,KAAAA,CAAMC,KAAKC,IAAAA,CAAKC,IAAAA,CAAKC,EAAAA,CAAGC,MAAAA,GAC9BN,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,KAAKC,IAAAA,CAAKG,EAAAA,CAAGD,QAC3B,CAAC;AAAA,EAAEP,KAAAA;AAAAA,EAAOC;AAAM,CAAA,KACvBD,UAAU,IAAA,IAAQA,KAAAA,KAAU,IAAA,GACxBC,KAAAA,CAAMC,MAAMC,IAAAA,CAAKC,IAAAA,CAAKC,IAAAA,CAAKC,EAAAA,CAAGG,QAC9BR,KAAAA,CAAMC,KAAAA,CAAMC,KAAKC,IAAAA,CAAKC,IAAAA,CAAKG,GAAGC,KAAK,CAAA;AAS7C,MAAMC,QAAQ,CACZ;AAAA,EACEL,IAAAA,GAAO,IAAA;AAAA,EACPM,MAAAA,GAAS,QAAA;AAAA,EACTC,OAAAA;AAAAA,EACAR,IAAAA;AAAAA,EACAS,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AAC4C,CAAA,EACjDC,GAAAA,qBAEA,IAAA,CAAC,OAAA,EAAA,EACC,GAAA,EACA,KAAA,EAAOX,IAAAA,EACP,OAAA,EAASM,MAAAA,EACT,EAAA,EAAIG,SAAAA,IAAa,GAAA,EACjB,OAAA,EACA,GAAIC,KAAAA,EAEHF,QAAAA,EAAAA;AAAAA,EAAAA,QAAAA;AAAAA,EACAT,IAAAA,oBACC,GAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAOC,IAAAA,EAClB,QAAA,kBAAA,GAAA,CAACY,QAAA,EAAA,EACC,IAAA,EAAMb,IAAAA,EACN,SAAA,EAAU,eAAA,EACV,aAAA,EAAaA,MAAK,CAAA,EAEtB;AAAA,CAAA,EAEJ,CAAA;AAEK,MAAMc,IAAAA,GAAiCC,WAAWT,KAAK;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactEventHandler,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Link.module.css';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n  /** The font size of the link text */\n  size?: TextSize;\n  /** The font weight of the link text */\n  weight?: TextWeight;\n  /** Click event handler */\n  onClick?: ReactEventHandler;\n  /** The content to display inside the link */\n  children?: React.ReactNode;\n  /** Optional icon to display after the link text */\n  icon?: IconName;\n  /** Custom component to render as the link element */\n  component?: T;\n}\n\nconst linkVariants = cva(styles.link, {\n  variants: {\n    size: {\n      xs: styles['link_size_xs'],\n      sm: styles['link_size_sm'],\n      md: styles['link_size_md'],\n      lg: styles['link_size_lg'],\n    },\n    weight: {\n      normal: styles['link_weight_normal'],\n      medium: styles['link_weight_medium'],\n      semibold: styles['link_weight_semibold'],\n      bold: styles['link_weight_bold'],\n      mono: styles['link_weight_mono'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst externalIconVariants = cva('', {\n  variants: {\n    size: {\n      xs: styles['external-icon_size_xs'],\n      sm: styles['external-icon_size_sm'],\n      md: styles['external-icon_size_md'],\n      lg: styles['external-icon_size_lg'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n  props: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n  {\n    size = 'md',\n    weight = 'normal',\n    onClick,\n    icon,\n    children,\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'a';\n  return (\n    <Component\n      ref={ref}\n      onClick={onClick}\n      {...props}\n      className={cn(linkVariants({ size, weight }), className)}\n    >\n      {children}\n      {icon && (\n        <span>\n          <Icon\n            name={icon}\n            className={cn('external-icon', externalIconVariants({ size }))}\n            data-testid={icon}\n          />\n        </span>\n      )}\n    </Component>\n  );\n};\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["linkVariants","cva","styles","link","variants","size","xs","sm","md","lg","weight","normal","medium","semibold","bold","mono","defaultVariants","externalIconVariants","_Link","onClick","icon","children","component","className","props","ref","Component","cn","Icon","Link","forwardRef"],"mappings":";;;;;;;AA6BA,MAAMA,YAAAA,GAAeC,GAAAA,CAAIC,MAAAA,CAAOC,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,OAAO,cAAc,CAAA;AAAA,MACzBK,EAAAA,EAAIL,OAAO,cAAc,CAAA;AAAA,MACzBM,EAAAA,EAAIN,OAAO,cAAc,CAAA;AAAA,MACzBO,EAAAA,EAAIP,OAAO,cAAc;AAAA,KAC3B;AAAA,IACAQ,MAAAA,EAAQ;AAAA,MACNC,MAAAA,EAAQT,OAAO,oBAAoB,CAAA;AAAA,MACnCU,MAAAA,EAAQV,OAAO,oBAAoB,CAAA;AAAA,MACnCW,QAAAA,EAAUX,OAAO,sBAAsB,CAAA;AAAA,MACvCY,IAAAA,EAAMZ,OAAO,kBAAkB,CAAA;AAAA,MAC/Ba,IAAAA,EAAMb,OAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,IAAA;AAAA,IACNK,MAAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAED,MAAMO,oBAAAA,GAAuBhB,IAAI,EAAA,EAAI;AAAA,EACnCG,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,OAAO,uBAAuB,CAAA;AAAA,MAClCK,EAAAA,EAAIL,OAAO,uBAAuB,CAAA;AAAA,MAClCM,EAAAA,EAAIN,OAAO,uBAAuB,CAAA;AAAA,MAClCO,EAAAA,EAAIP,OAAO,uBAAuB;AAAA;AACpC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAOD,MAAMa,QAAQ,CACZ;AAAA,EACEb,IAAAA,GAAO,IAAA;AAAA,EACPK,MAAAA,GAAS,QAAA;AAAA,EACTS,OAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACgF,CAAA,EACrFC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,SAAAA,IAAa,GAAA;AAC/B,EAAA,uBACE,IAAA,CAAC,aACC,GAAA,EACA,OAAA,EACA,GAAIE,KAAAA,EACJ,SAAA,EAAWG,GAAG3B,YAAAA,CAAa;AAAA,IAAEK,IAAAA;AAAAA,IAAMK;AAAAA,GAAQ,CAAA,EAAGa,SAAS,CAAA,EAEtDF,QAAAA,EAAAA;AAAAA,IAAAA,QAAAA;AAAAA,IACAD,IAAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAACQ,QAAA,EAAA,EACC,MAAMR,IAAAA,EACN,SAAA,EAAWO,EAAAA,CAAG,eAAA,EAAiBV,oBAAAA,CAAqB;AAAA,MAAEZ;AAAAA,KAAM,CAAC,CAAA,EAC7D,aAAA,EAAae,MAAK,CAAA,EAEtB;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AACO,MAAMS,IAAAA,GAAiCC,WAAWZ,KAAK;;;;"}

package/dist/esm/components/ProgressBar/ProgressBar.css

@@ -0,0 +1,124 @@
+.progressbar__21KMf {
+  display: flex;
+  min-height: 2px;
+  padding-right: 0;
+  overflow: hidden;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--click-field-space-gap);
+  border: 1px solid var(--click-field-color-stroke-default);
+  border-radius: var(--click-field-radii-all);
+  background: linear-gradient(
+    var(--progress-grad-dir, to right),
+    var(--global-color-accent-default) 0%,
+    var(--global-color-accent-default) var(--progress),
+    var(--progress-bg, var(--click-field-color-background-default)) var(--progress),
+    var(--progress-bg, var(--click-field-color-background-default)) 100%
+  );
+  background-position: center;
+  background-size: calc(100% + 2px);
+  color: var(--global-color-accent-default);
+  font: var(--typography-styles-product-text-normal-sm);
+  transition: all 100ms ease-in-out;
+}
+
+.progressbar_orientation_vertical__0w-VB {
+  width: auto;
+  height: 100%;
+  flex-direction: column;
+}
+
+/* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
+   width fallback chain (100% → -webkit-fill-available → fill-available →
+   stretch) so horizontal bars fill the available inline space. */
+.progressbar_orientation_horizontal__MJimN {
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+}
+/* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+
+.progressbar_orientation_horizontal__MJimN.progressbar_dir_start__xUm-Q {
+  --progress-grad-dir: to right;
+}
+
+.progressbar_orientation_horizontal__MJimN.progressbar_dir_end__iGTwK {
+  --progress-grad-dir: to left;
+}
+
+.progressbar_orientation_vertical__0w-VB.progressbar_dir_start__xUm-Q {
+  --progress-grad-dir: to bottom;
+}
+
+.progressbar_orientation_vertical__0w-VB.progressbar_dir_end__iGTwK {
+  --progress-grad-dir: to top;
+}
+
+.progressbar_type_default__B8jtt {
+  padding: 0.25rem var(--click-field-space-x);
+  padding-right: 0;
+}
+
+.progressbar_type_small__bcDiV {
+  padding: 0 var(--click-field-space-x);
+  padding-right: 0;
+}
+
+.progressbar_completed__XhK-p.progressbar_type_default__B8jtt {
+  background: var(--click-field-color-background-default);
+  background-position: center;
+  background-size: calc(100% + 2px);
+}
+
+.progressbar__21KMf:hover {
+  --progress-bg: var(--click-field-color-background-hover);
+
+  border: 1px solid var(--click-field-color-stroke-hover);
+  background-position: center;
+  background-size: calc(100% + 2px);
+}
+
+.progressbar_completed__XhK-p:hover {
+  background: var(--click-field-color-background-hover);
+  background-position: center;
+  background-size: calc(100% + 2px);
+}
+
+.progressbar__21KMf:focus,
+.progressbar__21KMf:focus-within {
+  --progress-bg: var(--click-field-color-background-active);
+
+  border: 1px solid var(--click-field-color-stroke-active);
+  background-position: center;
+  background-size: calc(100% + 2px);
+}
+
+.progressbar_completed__XhK-p:focus,
+.progressbar_completed__XhK-p:focus-within {
+  background: var(--click-field-color-background-active);
+  background-position: center;
+  background-size: calc(100% + 2px);
+}
+
+.progresstext__RAf9Q {
+  width: 100%;
+  font: inherit;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- mix-blend-mode
+     is widely supported on evergreen browsers; the original rule
+     used the same value to invert the text against the gradient fill. */
+  mix-blend-mode: difference;
+}
+
+.progressclosebutton__cGgfw {
+  visibility: hidden;
+  border: 0;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- mix-blend-mode
+     is widely supported on evergreen browsers; the original rule
+     used the same value to invert the close icon against the gradient fill. */
+  mix-blend-mode: difference;
+}
+
+.progressclosebutton_dismissable__p5mDJ {
+  visibility: visible;
+}

package/dist/esm/components/ProgressBar/ProgressBar.module.css.js

@@ -0,0 +1,27 @@
+const progressbar = "progressbar__21KMf";
+const progressbar_orientation_vertical = "progressbar_orientation_vertical__0w-VB";
+const progressbar_orientation_horizontal = "progressbar_orientation_horizontal__MJimN";
+const progressbar_dir_start = "progressbar_dir_start__xUm-Q";
+const progressbar_dir_end = "progressbar_dir_end__iGTwK";
+const progressbar_type_default = "progressbar_type_default__B8jtt";
+const progressbar_type_small = "progressbar_type_small__bcDiV";
+const progressbar_completed = "progressbar_completed__XhK-p";
+const progresstext = "progresstext__RAf9Q";
+const progressclosebutton = "progressclosebutton__cGgfw";
+const progressclosebutton_dismissable = "progressclosebutton_dismissable__p5mDJ";
+const styles = {
+	progressbar: progressbar,
+	progressbar_orientation_vertical: progressbar_orientation_vertical,
+	progressbar_orientation_horizontal: progressbar_orientation_horizontal,
+	progressbar_dir_start: progressbar_dir_start,
+	progressbar_dir_end: progressbar_dir_end,
+	progressbar_type_default: progressbar_type_default,
+	progressbar_type_small: progressbar_type_small,
+	progressbar_completed: progressbar_completed,
+	progresstext: progresstext,
+	progressclosebutton: progressclosebutton,
+	progressclosebutton_dismissable: progressclosebutton_dismissable
+};
+
+export { styles as default, progressbar, progressbar_completed, progressbar_dir_end, progressbar_dir_start, progressbar_orientation_horizontal, progressbar_orientation_vertical, progressbar_type_default, progressbar_type_small, progressclosebutton, progressclosebutton_dismissable, progresstext };
+//# sourceMappingURL=ProgressBar.module.css.js.map

package/dist/esm/components/ProgressBar/ProgressBar.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/ProgressBar/index.js

@@ -1,68 +1,41 @@
+import "./ProgressBar.css";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './ProgressBar.module.css.js';
 import { IconButton } from '../IconButton/index.js';
+import { cva } from 'class-variance-authority';
 
-const getGradientDirection = (orientation, dir) => {
-  if (orientation === "vertical") {
-    return dir === "start" ? "to bottom" : "to top";
-  }
-  return dir === "start" ? "to right" : "to left";
-};
-const createGradient = (gradientDir, accentColor, bgColor) => `linear-gradient(${gradientDir}, ${accentColor} 0%, ${accentColor} var(--progress), ${bgColor} var(--progress), ${bgColor} 100%)`;
-const ProgressContainer = styled.div.withConfig({
-  componentId: "sc-16gr3cg-0"
-})(["display:flex;justify-content:space-between;align-items:center;overflow:hidden;transition:all 100ms ease-in-out;min-height:2px;", " ", ";"], ({
-  $orientation
-}) => $orientation === "vertical" ? `
-    flex-direction: column;
-    width: auto;
-    height: 100%;
-  ` : `
-    width: 100%;
-    width: -webkit-fill-available;
-    width: fill-available;
-    width: stretch;
-  `, ({
-  theme,
-  $completed,
-  $type,
-  $orientation,
-  $dir
-}) => {
-  const gradientDir = getGradientDirection($orientation, $dir);
-  return `
-    background: ${$completed && $type === "default" ? theme.click.field.color.background.default : createGradient(gradientDir, theme.global.color.accent.default, theme.click.field.color.background.default)};
-    background-size: calc(100% + 2px);
-    background-position: center;
-    gap: ${theme.click.field.space.gap};
-    border-radius: ${theme.click.field.radii.all};
-    font: ${theme.typography.styles.product.text.normal.sm};
-    padding: ${$type === "default" ? "0.25rem" : 0} ${theme.click.field.space.x};
-    padding-right: 0;
-    color: ${theme.global.color.accent.default};
-    border: 1px solid ${theme.click.field.color.stroke.default};
-    &:hover {
-      border: 1px solid ${theme.click.field.color.stroke.hover};
-      background: ${$completed ? theme.click.field.color.background.hover : createGradient(gradientDir, theme.global.color.accent.default, theme.click.field.color.background.hover)};
-      background-size: calc(100% + 2px);
-      background-position: center;
+const progressBarVariants = cva(styles.progressbar, {
+  variants: {
+    type: {
+      default: styles["progressbar_type_default"],
+      small: styles["progressbar_type_small"]
+    },
+    orientation: {
+      horizontal: styles["progressbar_orientation_horizontal"],
+      vertical: styles["progressbar_orientation_vertical"]
+    },
+    dir: {
+      start: styles["progressbar_dir_start"],
+      end: styles["progressbar_dir_end"]
+    },
+    completed: {
+      true: styles["progressbar_completed"]
     }
-    &:focus-within, &:focus {
-      border: 1px solid ${theme.click.field.color.stroke.active};
-      background: ${$completed ? theme.click.field.color.background.active : createGradient(gradientDir, theme.global.color.accent.default, theme.click.field.color.background.active)};
-      background-size: calc(100% + 2px);
-      background-position: center;
+  },
+  defaultVariants: {
+    type: "default",
+    orientation: "horizontal",
+    dir: "start"
+  }
+});
+const closeButtonVariants = cva(styles.progressclosebutton, {
+  variants: {
+    dismissable: {
+      true: styles["progressclosebutton_dismissable"]
     }
-  `;
+  }
 });
-const ProgressText = styled.span.withConfig({
-  componentId: "sc-16gr3cg-1"
-})(["width:100%;font:inherit;mix-blend-mode:difference;"]);
-const ProgressCloseButton = styled.button.withConfig({
-  componentId: "sc-16gr3cg-2"
-})(["mix-blend-mode:difference;border:0;visibility:", ";"], ({
-  $dismissable
-}) => $dismissable ? "visible" : "hidden");
 const ProgressBar = ({
   progress,
   type = "default",
@@ -71,23 +44,28 @@ const ProgressBar = ({
   successMessage,
   orientation = "horizontal",
   dir = "start",
+  className,
   ...props
 }) => {
   const completed = progress === 100;
   return /* @__PURE__ */ jsx(
-    ProgressContainer,
+    "div",
     {
-      $completed: completed,
-      $type: type,
-      $orientation: orientation,
-      $dir: dir,
       style: {
         "--progress": `${progress}%`
       },
       ...props,
+      className: cn(progressBarVariants({
+        type,
+        orientation,
+        dir,
+        completed
+      }), className),
       children: type === "default" && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(ProgressText, { $completed: completed, children: successMessage && completed ? successMessage : `${progress}%` }),
-        /* @__PURE__ */ jsx(ProgressCloseButton, { as: IconButton, size: "sm", type: "ghost", icon: "cross", $dismissable: dismissable, onClick: onCancel, "data-testid": "progressbar-close" })
+        /* @__PURE__ */ jsx("span", { className: styles.progresstext, children: successMessage && completed ? successMessage : `${progress}%` }),
+        /* @__PURE__ */ jsx(IconButton, { size: "sm", type: "ghost", icon: "cross", onClick: onCancel, "data-testid": "progressbar-close", className: closeButtonVariants({
+          dismissable
+        }) })
       ] })
     }
   );

package/dist/esm/components/ProgressBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode } from 'react';\nimport { styled } from 'styled-components';\nimport { IconButton } from '@/components/IconButton';\n\ninterface CommonProgressBarProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** The current progress value (0-100) */\n  progress: number;\n  /** Optional label to display */\n  label?: ReactNode;\n  /** Optional error message to display */\n  error?: ReactNode;\n  /** The orientation of the progress bar - horizontal fills width, vertical fills height */\n  orientation?: 'vertical' | 'horizontal';\n  /** The direction of progress fill - start fills from left/top, end fills from right/bottom */\n  dir?: 'start' | 'end';\n}\n\ninterface DefaultProgressBar extends CommonProgressBarProps {\n  /** The type of progress bar - \"default\" shows text and close button */\n  type?: 'default';\n  /** Message to display when progress reaches 100% */\n  successMessage?: ReactNode;\n}\n\ninterface SmallProgressBar extends CommonProgressBarProps {\n  /** The type of progress bar - \"small\" shows only the progress indicator */\n  type: 'small';\n  successMessage?: never;\n  dismissable?: never;\n  onCancel?: never;\n}\n\ninterface DismissableProgressBar {\n  /** When true, shows a close button to cancel the progress */\n  dismissable: true;\n  /** Callback function when the close button is clicked */\n  onCancel: () => void;\n}\n\ninterface NonDismissableProgressBar {\n  /** When false or undefined, the close button is hidden */\n  dismissable?: false;\n  onCancel?: never;\n}\n\nexport type ProgressBarProps =\n  | (DefaultProgressBar & (DismissableProgressBar | NonDismissableProgressBar))\n  | SmallProgressBar;\n\ntype Orientation = 'horizontal' | 'vertical';\ntype Direction = 'start' | 'end';\n\nconst getGradientDirection = (orientation: Orientation, dir: Direction): string => {\n  if (orientation === 'vertical') {\n    return dir === 'start' ? 'to bottom' : 'to top';\n  }\n  return dir === 'start' ? 'to right' : 'to left';\n};\n\nconst createGradient = (gradientDir: string, accentColor: string, bgColor: string) =>\n  `linear-gradient(${gradientDir}, ${accentColor} 0%, ${accentColor} var(--progress), ${bgColor} var(--progress), ${bgColor} 100%)`;\n\n// The tokens are copied from dataloading page and may need to change on the new component creation in figma\nconst ProgressContainer = styled.div<{\n  $completed: boolean;\n  $type: 'small' | 'default';\n  $orientation: Orientation;\n  $dir: Direction;\n}>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  overflow: hidden;\n  transition: all 100ms ease-in-out;\n  min-height: 2px;\n  ${({ $orientation }) =>\n    $orientation === 'vertical'\n      ? `\n    flex-direction: column;\n    width: auto;\n    height: 100%;\n  `\n      : `\n    width: 100%;\n    width: -webkit-fill-available;\n    width: fill-available;\n    width: stretch;\n  `}\n  ${({ theme, $completed, $type, $orientation, $dir }) => {\n    const gradientDir = getGradientDirection($orientation, $dir);\n    return `\n    background: ${\n      $completed && $type === 'default'\n        ? theme.click.field.color.background.default\n        : createGradient(\n            gradientDir,\n            theme.global.color.accent.default,\n            theme.click.field.color.background.default\n          )\n    };\n    background-size: calc(100% + 2px);\n    background-position: center;\n    gap: ${theme.click.field.space.gap};\n    border-radius: ${theme.click.field.radii.all};\n    font: ${theme.typography.styles.product.text.normal.sm};\n    padding: ${$type === 'default' ? '0.25rem' : 0} ${theme.click.field.space.x};\n    padding-right: 0;\n    color: ${theme.global.color.accent.default};\n    border: 1px solid ${theme.click.field.color.stroke.default};\n    &:hover {\n      border: 1px solid ${theme.click.field.color.stroke.hover};\n      background: ${\n        $completed\n          ? theme.click.field.color.background.hover\n          : createGradient(\n              gradientDir,\n              theme.global.color.accent.default,\n              theme.click.field.color.background.hover\n            )\n      };\n      background-size: calc(100% + 2px);\n      background-position: center;\n    }\n    &:focus-within, &:focus {\n      border: 1px solid ${theme.click.field.color.stroke.active};\n      background: ${\n        $completed\n          ? theme.click.field.color.background.active\n          : createGradient(\n              gradientDir,\n              theme.global.color.accent.default,\n              theme.click.field.color.background.active\n            )\n      };\n      background-size: calc(100% + 2px);\n      background-position: center;\n    }\n  `;\n  }};\n`;\n\nconst ProgressText = styled.span<{ $completed: boolean }>`\n  width: 100%;\n  font: inherit;\n  mix-blend-mode: difference;\n`;\n\nconst ProgressCloseButton = styled.button<{ $dismissable?: boolean }>`\n  mix-blend-mode: difference;\n  border: 0;\n  visibility: ${({ $dismissable }) => ($dismissable ? 'visible' : 'hidden')};\n`;\n\nexport const ProgressBar = ({\n  progress,\n  type = 'default',\n  dismissable = false,\n  onCancel,\n  successMessage,\n  orientation = 'horizontal',\n  dir = 'start',\n  ...props\n}: ProgressBarProps) => {\n  const completed = progress === 100;\n\n  return (\n    <ProgressContainer\n      $completed={completed}\n      $type={type}\n      $orientation={orientation}\n      $dir={dir}\n      // Using a CSS variable avoids generating a new styled-components class per progress value.\n      style={\n        {\n          '--progress': `${progress}%`,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      {type === 'default' && (\n        <>\n          <ProgressText $completed={completed}>\n            {successMessage && completed ? successMessage : `${progress}%`}\n          </ProgressText>\n          <ProgressCloseButton\n            as={IconButton}\n            size=\"sm\"\n            type=\"ghost\"\n            icon=\"cross\"\n            $dismissable={dismissable}\n            onClick={onCancel}\n            data-testid=\"progressbar-close\"\n          />\n        </>\n      )}\n    </ProgressContainer>\n  );\n};\n"],"names":["getGradientDirection","orientation","dir","createGradient","gradientDir","accentColor","bgColor","ProgressContainer","styled","div","withConfig","componentId","$orientation","theme","$completed","$type","$dir","click","field","color","background","default","global","accent","space","gap","radii","all","typography","styles","product","text","normal","sm","x","stroke","hover","active","ProgressText","span","ProgressCloseButton","button","$dismissable","ProgressBar","progress","type","dismissable","onCancel","successMessage","props","completed","IconButton"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { ProgressBarProps } from './ProgressBar.types';\nimport { IconButton } from '@/components/IconButton';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './ProgressBar.module.css';\n\nconst progressBarVariants = cva(styles.progressbar, {\n  variants: {\n    type: {\n      default: styles['progressbar_type_default'],\n      small: styles['progressbar_type_small'],\n    },\n    orientation: {\n      horizontal: styles['progressbar_orientation_horizontal'],\n      vertical: styles['progressbar_orientation_vertical'],\n    },\n    dir: {\n      start: styles['progressbar_dir_start'],\n      end: styles['progressbar_dir_end'],\n    },\n    completed: {\n      true: styles['progressbar_completed'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n    orientation: 'horizontal',\n    dir: 'start',\n  },\n});\n\nconst closeButtonVariants = cva(styles.progressclosebutton, {\n  variants: {\n    dismissable: {\n      true: styles['progressclosebutton_dismissable'],\n    },\n  },\n});\n\nexport const ProgressBar = ({\n  progress,\n  type = 'default',\n  dismissable = false,\n  onCancel,\n  successMessage,\n  orientation = 'horizontal',\n  dir = 'start',\n  className,\n  ...props\n}: ProgressBarProps) => {\n  const completed = progress === 100;\n\n  return (\n    <div\n      // Using a CSS variable avoids generating a new class per progress value.\n      style={\n        {\n          '--progress': `${progress}%`,\n        } as CSSProperties\n      }\n      {...props}\n      className={cn(\n        progressBarVariants({ type, orientation, dir, completed }),\n        className\n      )}\n    >\n      {type === 'default' && (\n        <>\n          <span className={styles.progresstext}>\n            {successMessage && completed ? successMessage : `${progress}%`}\n          </span>\n          <IconButton\n            size=\"sm\"\n            type=\"ghost\"\n            icon=\"cross\"\n            onClick={onCancel}\n            data-testid=\"progressbar-close\"\n            className={closeButtonVariants({ dismissable })}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["progressBarVariants","cva","styles","progressbar","variants","type","default","small","orientation","horizontal","vertical","dir","start","end","completed","true","defaultVariants","closeButtonVariants","progressclosebutton","dismissable","ProgressBar","progress","onCancel","successMessage","className","props","cn","progresstext"],"mappings":";;;;;;AAMA,MAAMA,mBAAAA,GAAsBC,GAAAA,CAAIC,MAAAA,CAAOC,WAAAA,EAAa;AAAA,EAClDC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,OAAO,0BAA0B,CAAA;AAAA,MAC1CK,KAAAA,EAAOL,OAAO,wBAAwB;AAAA,KACxC;AAAA,IACAM,WAAAA,EAAa;AAAA,MACXC,UAAAA,EAAYP,OAAO,oCAAoC,CAAA;AAAA,MACvDQ,QAAAA,EAAUR,OAAO,kCAAkC;AAAA,KACrD;AAAA,IACAS,GAAAA,EAAK;AAAA,MACHC,KAAAA,EAAOV,OAAO,uBAAuB,CAAA;AAAA,MACrCW,GAAAA,EAAKX,OAAO,qBAAqB;AAAA,KACnC;AAAA,IACAY,SAAAA,EAAW;AAAA,MACTC,IAAAA,EAAMb,OAAO,uBAAuB;AAAA;AACtC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,SAAA;AAAA,IACNG,WAAAA,EAAa,YAAA;AAAA,IACbG,GAAAA,EAAK;AAAA;AAET,CAAC,CAAA;AAED,MAAMM,mBAAAA,GAAsBhB,GAAAA,CAAIC,MAAAA,CAAOgB,mBAAAA,EAAqB;AAAA,EAC1Dd,QAAAA,EAAU;AAAA,IACRe,WAAAA,EAAa;AAAA,MACXJ,IAAAA,EAAMb,OAAO,iCAAiC;AAAA;AAChD;AAEJ,CAAC,CAAA;AAEM,MAAMkB,cAAcA,CAAC;AAAA,EAC1BC,QAAAA;AAAAA,EACAhB,IAAAA,GAAO,SAAA;AAAA,EACPc,WAAAA,GAAc,KAAA;AAAA,EACdG,QAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAf,WAAAA,GAAc,YAAA;AAAA,EACdG,GAAAA,GAAM,OAAA;AAAA,EACNa,SAAAA;AAAAA,EACA,GAAGC;AACa,CAAA,KAAM;AACtB,EAAA,MAAMX,YAAYO,QAAAA,KAAa,GAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,KAAA,EACE;AAAA,QACE,YAAA,EAAc,GAAGA,QAAQ,CAAA,CAAA;AAAA,OAC3B;AAAA,SAEEI,KAAAA;AAAAA,MACJ,SAAA,EAAWC,GACT1B,mBAAAA,CAAoB;AAAA,QAAEK,IAAAA;AAAAA,QAAMG,WAAAA;AAAAA,QAAaG,GAAAA;AAAAA,QAAKG;AAAAA,OAAW,GACzDU,SACF,CAAA;AAAA,MAECnB,QAAAA,EAAAA,IAAAA,KAAS,6BACR,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAWH,MAAAA,CAAOyB,YAAAA,EACrBJ,4BAAkBT,SAAAA,GAAYS,cAAAA,GAAiB,CAAA,EAAGF,QAAQ,CAAA,CAAA,CAAA,EAC7D,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EACC,IAAA,EAAK,IAAA,EACL,IAAA,EAAK,OAAA,EACL,IAAA,EAAK,OAAA,EACL,OAAA,EAASC,QAAAA,EACT,aAAA,EAAY,mBAAA,EACZ,WAAWL,mBAAAA,CAAoB;AAAA,UAAEE;AAAAA,SAAa,CAAA,EAAE;AAAA,OAAA,EAEpD;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/esm/components/Separator/Separator.css

@@ -0,0 +1,81 @@
+.separator__mz39H[data-orientation='horizontal'] {
+  width: 100%;
+  border-top: 0.0625rem solid var(--click-separator-color-stroke-default);
+}
+
+.separator__mz39H[data-orientation='vertical'] {
+  height: 100%;
+  border-right: 0.0625rem solid var(--click-separator-color-stroke-default);
+}
+
+.separator_variant_horizontal-xs__SVTMS {
+  margin:
+    var(--click-separator-horizontal-space-y-xs)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-sm__aKMwO {
+  margin:
+    var(--click-separator-horizontal-space-y-sm)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-md__HRIoB {
+  margin:
+    var(--click-separator-horizontal-space-y-md)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-lg__phB0U {
+  margin:
+    var(--click-separator-horizontal-space-y-lg)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-xl__z08Bu {
+  margin:
+    var(--click-separator-horizontal-space-y-xl)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-xxl__5sqqd {
+  margin:
+    var(--click-separator-horizontal-space-y-xxl)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_vertical-xs__XN-Os {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xs);
+}
+
+.separator_variant_vertical-sm__ddV3R {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-sm);
+}
+
+.separator_variant_vertical-md__DlYM0 {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-md);
+}
+
+.separator_variant_vertical-lg__00SOr {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-lg);
+}
+
+.separator_variant_vertical-xl__0c4Od {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xl);
+}
+
+.separator_variant_vertical-xxl__H-EOx {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xxl);
+}

package/dist/esm/components/Separator/Separator.module.css.js

@@ -0,0 +1,19 @@
+const separator = "separator__mz39H";
+const styles = {
+	separator: separator,
+	"separator_variant_horizontal-xs": "separator_variant_horizontal-xs__SVTMS",
+	"separator_variant_horizontal-sm": "separator_variant_horizontal-sm__aKMwO",
+	"separator_variant_horizontal-md": "separator_variant_horizontal-md__HRIoB",
+	"separator_variant_horizontal-lg": "separator_variant_horizontal-lg__phB0U",
+	"separator_variant_horizontal-xl": "separator_variant_horizontal-xl__z08Bu",
+	"separator_variant_horizontal-xxl": "separator_variant_horizontal-xxl__5sqqd",
+	"separator_variant_vertical-xs": "separator_variant_vertical-xs__XN-Os",
+	"separator_variant_vertical-sm": "separator_variant_vertical-sm__ddV3R",
+	"separator_variant_vertical-md": "separator_variant_vertical-md__DlYM0",
+	"separator_variant_vertical-lg": "separator_variant_vertical-lg__00SOr",
+	"separator_variant_vertical-xl": "separator_variant_vertical-xl__0c4Od",
+	"separator_variant_vertical-xxl": "separator_variant_vertical-xxl__H-EOx"
+};
+
+export { styles as default, separator };
+//# sourceMappingURL=Separator.module.css.js.map

package/dist/esm/components/Separator/Separator.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/Separator/index.js

@@ -1,28 +1,36 @@
+import "./Separator.css";
 import { jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
 import * as RadixSeparator from '@radix-ui/react-separator';
+import { cn } from '../../lib/cva.js';
+import styles from './Separator.module.css.js';
+import { cva } from 'class-variance-authority';
 
-const CUISeparator = styled(RadixSeparator.Root).withConfig({
-  componentId: "sc-ladr1y-0"
-})(["", ""], ({
-  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};
+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"]
     }
-    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]}`}
-  `);
+  }
+});
 const Separator = ({
   orientation = "horizontal",
+  size,
+  className,
   ...props
-}) => /* @__PURE__ */ jsx(CUISeparator, { orientation, ...props });
+}) => /* @__PURE__ */ jsx(RadixSeparator.Root, { orientation, ...props, className: cn(separatorVariants({
+  variant: `${orientation}-${size}`
+}), className) });
 
 export { Separator };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Separator/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport * as RadixSeparator from '@radix-ui/react-separator';\nimport { SeparatorProps } from './Separator.types';\nconst CUISeparator = styled(RadixSeparator.Root)<SeparatorProps>`\n  ${({ theme, size, orientation }) => `\n    &[data-orientation=\"horizontal\"] {\n      width: 100%;\n      border-top: 0.0625rem solid ${theme.click.separator.color.stroke.default};\n    }\n    &[data-orientation=\"vertical\"] {\n      height: 100%;\n      border-right: 0.0625rem solid ${theme.click.separator.color.stroke.default};\n    }\n    margin: ${\n      orientation === 'horizontal'\n        ? `${theme.click.separator.horizontal.space.y[size]} ${theme.click.separator.horizontal.space.x.all}`\n        : `${theme.click.separator.vertical.space.y.all} ${theme.click.separator.vertical.space.x[size]}`\n    }\n  `}\n`;\n\nexport const Separator = ({ orientation = 'horizontal', ...props }: SeparatorProps) => (\n  <CUISeparator\n    orientation={orientation}\n    {...props}\n  />\n);\n"],"names":["CUISeparator","styled","RadixSeparator","Root","withConfig","componentId","theme","size","orientation","click","separator","color","stroke","default","horizontal","space","y","x","all","vertical","Separator","props"],"mappings":";;;;AAGA,MAAMA,YAAAA,GAAeC,MAAAA,CAAOC,cAAAA,CAAeC,IAAI,EAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GAC5C,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC,IAAAA;AAAAA,EAAMC;AAAY,CAAA,KAAM;AAAA;AAAA;AAAA,kCAAA,EAGFF,KAAAA,CAAMG,KAAAA,CAAMC,SAAAA,CAAUC,KAAAA,CAAMC,OAAOC,OAAO,CAAA;AAAA;AAAA;AAAA;AAAA,oCAAA,EAIxCP,KAAAA,CAAMG,KAAAA,CAAMC,SAAAA,CAAUC,KAAAA,CAAMC,OAAOC,OAAO,CAAA;AAAA;AAAA,YAAA,EAG1EL,gBAAgB,YAAA,GACZ,CAAA,EAAGF,KAAAA,CAAMG,KAAAA,CAAMC,UAAUI,UAAAA,CAAWC,KAAAA,CAAMC,CAAAA,CAAET,IAAI,CAAC,CAAA,CAAA,EAAID,KAAAA,CAAMG,KAAAA,CAAMC,SAAAA,CAAUI,WAAWC,KAAAA,CAAME,CAAAA,CAAEC,GAAG,CAAA,CAAA,GACjG,GAAGZ,KAAAA,CAAMG,KAAAA,CAAMC,SAAAA,CAAUS,QAAAA,CAASJ,MAAMC,CAAAA,CAAEE,GAAG,CAAA,CAAA,EAAIZ,KAAAA,CAAMG,MAAMC,SAAAA,CAAUS,QAAAA,CAASJ,MAAME,CAAAA,CAAEV,IAAI,CAAC,CAAA,CAAE;AAAA,EAAA,CAEtG,CAAA;AAGI,MAAMa,YAAYA,CAAC;AAAA,EAAEZ,WAAAA,GAAc,YAAA;AAAA,EAAc,GAAGa;AAAsB,CAAA,qBAC/E,GAAA,CAAC,YAAA,EAAA,EACC,WAAA,EACA,GAAIA,KAAAA,EAAM;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as RadixSeparator from '@radix-ui/react-separator';\nimport { cn, cva } from '@/lib/cva';\nimport { SeparatorProps } from './Separator.types';\nimport styles from './Separator.module.css';\n\nconst separatorVariants = cva(styles.separator, {\n  variants: {\n    variant: {\n      'horizontal-xs': styles['separator_variant_horizontal-xs'],\n      'horizontal-sm': styles['separator_variant_horizontal-sm'],\n      'horizontal-md': styles['separator_variant_horizontal-md'],\n      'horizontal-lg': styles['separator_variant_horizontal-lg'],\n      'horizontal-xl': styles['separator_variant_horizontal-xl'],\n      'horizontal-xxl': styles['separator_variant_horizontal-xxl'],\n      'vertical-xs': styles['separator_variant_vertical-xs'],\n      'vertical-sm': styles['separator_variant_vertical-sm'],\n      'vertical-md': styles['separator_variant_vertical-md'],\n      'vertical-lg': styles['separator_variant_vertical-lg'],\n      'vertical-xl': styles['separator_variant_vertical-xl'],\n      'vertical-xxl': styles['separator_variant_vertical-xxl'],\n    },\n  },\n});\n\nexport const Separator = ({\n  orientation = 'horizontal',\n  size,\n  className,\n  ...props\n}: SeparatorProps) => (\n  <RadixSeparator.Root\n    orientation={orientation}\n    {...props}\n    className={cn(separatorVariants({ variant: `${orientation}-${size}` }), className)}\n  />\n);\n"],"names":["separatorVariants","cva","styles","separator","variants","variant","Separator","orientation","size","className","props","cn"],"mappings":";;;;;;AAKA,MAAMA,iBAAAA,GAAoBC,GAAAA,CAAIC,MAAAA,CAAOC,SAAAA,EAAW;AAAA,EAC9CC,QAAAA,EAAU;AAAA,IACRC,OAAAA,EAAS;AAAA,MACP,eAAA,EAAiBH,OAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,OAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,OAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,OAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,OAAO,iCAAiC,CAAA;AAAA,MACzD,gBAAA,EAAkBA,OAAO,kCAAkC,CAAA;AAAA,MAC3D,aAAA,EAAeA,OAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,OAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,OAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,OAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,OAAO,+BAA+B,CAAA;AAAA,MACrD,cAAA,EAAgBA,OAAO,gCAAgC;AAAA;AACzD;AAEJ,CAAC,CAAA;AAEM,MAAMI,YAAYA,CAAC;AAAA,EACxBC,WAAAA,GAAc,YAAA;AAAA,EACdC,IAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACW,CAAA,qBACd,GAAA,CAAC,eAAe,IAAA,EAAf,EACC,aACA,GAAIA,KAAAA,EACJ,SAAA,EAAWC,EAAAA,CAAGX,iBAAAA,CAAkB;AAAA,EAAEK,OAAAA,EAAS,CAAA,EAAGE,WAAW,CAAA,CAAA,EAAIC,IAAI,CAAA;AAAG,CAAC,CAAA,EAAGC,SAAS,CAAA,EAAE;;;;"}