@clickhouse/click-ui 0.6.0 → 0.6.1-rc2

package/dist/esm/components/Spacer/Spacer.css

@@ -0,0 +1,28 @@
+.spacer__okdOd {
+  display: flex;
+  background: transparent;
+}
+
+.spacer_size_xs__-oP-2 {
+  padding: var(--click-spacer-horizontal-space-y-xs) var(--click-spacer-horizontal-space-x-all);
+}
+
+.spacer_size_sm__k6iFW {
+  padding: var(--click-spacer-horizontal-space-y-sm) var(--click-spacer-horizontal-space-x-all);
+}
+
+.spacer_size_md__rX0x5 {
+  padding: var(--click-spacer-horizontal-space-y-md) var(--click-spacer-horizontal-space-x-all);
+}
+
+.spacer_size_lg__PWKa0 {
+  padding: var(--click-spacer-horizontal-space-y-lg) var(--click-spacer-horizontal-space-x-all);
+}
+
+.spacer_size_xl__IrjcH {
+  padding: var(--click-spacer-horizontal-space-y-xl) var(--click-spacer-horizontal-space-x-all);
+}
+
+.spacer_size_xxl__upvXv {
+  padding: var(--click-spacer-horizontal-space-y-xxl) var(--click-spacer-horizontal-space-x-all);
+}

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

@@ -0,0 +1,19 @@
+const spacer = "spacer__okdOd";
+const spacer_size_xs = "spacer_size_xs__-oP-2";
+const spacer_size_sm = "spacer_size_sm__k6iFW";
+const spacer_size_md = "spacer_size_md__rX0x5";
+const spacer_size_lg = "spacer_size_lg__PWKa0";
+const spacer_size_xl = "spacer_size_xl__IrjcH";
+const spacer_size_xxl = "spacer_size_xxl__upvXv";
+const styles = {
+	spacer: spacer,
+	spacer_size_xs: spacer_size_xs,
+	spacer_size_sm: spacer_size_sm,
+	spacer_size_md: spacer_size_md,
+	spacer_size_lg: spacer_size_lg,
+	spacer_size_xl: spacer_size_xl,
+	spacer_size_xxl: spacer_size_xxl
+};
+
+export { styles as default, spacer, spacer_size_lg, spacer_size_md, spacer_size_sm, spacer_size_xl, spacer_size_xs, spacer_size_xxl };
+//# sourceMappingURL=Spacer.module.css.js.map

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

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

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

@@ -1,15 +1,29 @@
+import "./Spacer.css";
 import { jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './Spacer.module.css.js';
+import { cva } from 'class-variance-authority';
 
-const CUISpacer = styled.div.withConfig({
-  componentId: "sc-6ga865-0"
-})(["background:transparent;display:flex;padding:", ";"], ({
-  theme,
-  $size = "md"
-}) => `${theme.click.spacer.horizontal.space.y[$size]} ${theme.click.spacer.horizontal.space.x.all}`);
+const spacerVariants = cva(styles.spacer, {
+  variants: {
+    size: {
+      xs: styles["spacer_size_xs"],
+      sm: styles["spacer_size_sm"],
+      md: styles["spacer_size_md"],
+      lg: styles["spacer_size_lg"],
+      xl: styles["spacer_size_xl"],
+      xxl: styles["spacer_size_xxl"]
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
 const Spacer = ({
   size
-}) => /* @__PURE__ */ jsx(CUISpacer, { $size: size });
+}) => /* @__PURE__ */ jsx("div", { className: cn(spacerVariants({
+  size
+})) });
 
 export { Spacer };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Spacer/Spacer.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { SpacerProps, SizeType } from './Spacer.types';\n\nconst CUISpacer = styled.div<{\n  $size?: SizeType;\n}>`\n  background: transparent;\n  display: flex;\n  padding: ${({ theme, $size = 'md' }) =>\n    `${theme.click.spacer.horizontal.space.y[$size]} ${theme.click.spacer.horizontal.space.x.all}`};\n`;\n\nexport const Spacer = ({ size }: SpacerProps) => <CUISpacer $size={size} />;\n"],"names":["CUISpacer","styled","div","withConfig","componentId","theme","$size","click","spacer","horizontal","space","y","x","all","Spacer","size"],"mappings":";;;AAGA,MAAMA,SAAAA,GAAYC,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,8CAAA,EAAA,GAAA,GAKf,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC,KAAAA,GAAQ;AAAK,CAAA,KAChC,GAAGD,KAAAA,CAAME,KAAAA,CAAMC,MAAAA,CAAOC,UAAAA,CAAWC,MAAMC,CAAAA,CAAEL,KAAK,CAAC,CAAA,CAAA,EAAID,MAAME,KAAAA,CAAMC,MAAAA,CAAOC,WAAWC,KAAAA,CAAME,CAAAA,CAAEC,GAAG,CAAA,CAAE,CAAA;AAG3F,MAAMC,SAASA,CAAC;AAAA,EAAEC;AAAkB,CAAA,qBAAM,GAAA,CAAC,SAAA,EAAA,EAAU,KAAA,EAAOA,IAAAA,EAAK;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Spacer/Spacer.tsx"],"sourcesContent":["import { cn, cva } from '@/lib/cva';\nimport { SpacerProps } from './Spacer.types';\nimport styles from './Spacer.module.css';\n\nconst spacerVariants = cva(styles.spacer, {\n  variants: {\n    size: {\n      xs: styles['spacer_size_xs'],\n      sm: styles['spacer_size_sm'],\n      md: styles['spacer_size_md'],\n      lg: styles['spacer_size_lg'],\n      xl: styles['spacer_size_xl'],\n      xxl: styles['spacer_size_xxl'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport const Spacer = ({ size }: SpacerProps) => (\n  <div className={cn(spacerVariants({ size }))} />\n);\n"],"names":["spacerVariants","cva","styles","spacer","variants","size","xs","sm","md","lg","xl","xxl","defaultVariants","Spacer","cn"],"mappings":";;;;;AAIA,MAAMA,cAAAA,GAAiBC,GAAAA,CAAIC,MAAAA,CAAOC,MAAAA,EAAQ;AAAA,EACxCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,OAAO,gBAAgB,CAAA;AAAA,MAC3BK,EAAAA,EAAIL,OAAO,gBAAgB,CAAA;AAAA,MAC3BM,EAAAA,EAAIN,OAAO,gBAAgB,CAAA;AAAA,MAC3BO,EAAAA,EAAIP,OAAO,gBAAgB,CAAA;AAAA,MAC3BQ,EAAAA,EAAIR,OAAO,gBAAgB,CAAA;AAAA,MAC3BS,GAAAA,EAAKT,OAAO,iBAAiB;AAAA;AAC/B,GACF;AAAA,EACAU,eAAAA,EAAiB;AAAA,IACfP,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAEM,MAAMQ,SAASA,CAAC;AAAA,EAAER;AAAkB,CAAA,qBACzC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWS,EAAAA,CAAGd,cAAAA,CAAe;AAAA,EAAEK;AAAK,CAAC,CAAC,CAAA,EAAE;;;;"}

package/dist/esm/components/Switch/Switch.css

@@ -0,0 +1,65 @@
+/* The wrapper class is applied alongside FormRoot's styled-components class.
+   The .wrapper.wrapper double-class boost matches the specificity behavior of
+   the original `styled(FormRoot)` chain so these overrides reliably beat
+   FormRoot's `align-items: flex-start` regardless of stylesheet insertion
+   order between CSS Modules and the runtime-injected styled-components. */
+.wrapper__kudO9.wrapper__kudO9 {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     keyword on `max-width` is widely supported on evergreen browsers; the original
+     styled-components rule used the same value. */
+  max-width: fit-content;
+  align-items: center;
+}
+
+.switch__hgdMu {
+  position: relative;
+  width: var(--click-switch-size-width);
+  height: var(--click-switch-size-height);
+  padding: 0;
+  border: 1px solid var(--click-switch-color-stroke-default);
+  border-radius: var(--click-switch-radii-all);
+  background-color: var(--click-switch-color-background-default);
+  cursor: pointer;
+}
+
+.switch__hgdMu[data-state='checked'] {
+  border: 1px solid var(--click-switch-color-stroke-active);
+  background-color: var(--click-switch-color-background-active);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after the checked state to mirror the original `getRootVars`
+   priority, where `disabled` is evaluated before `checked` so a disabled
+   switch always shows the disabled colors regardless of checked. */
+.switch__hgdMu[data-disabled],
+.switch__hgdMu[data-disabled][data-state='checked'] {
+  border: 1px solid var(--click-switch-color-stroke-disabled);
+  background-color: var(--click-switch-color-background-disabled);
+  cursor: not-allowed;
+}
+/* stylelint-enable no-descending-specificity */
+
+.switch__thumb__cPlbD {
+  display: block;
+  width: 12px;
+  height: 12px;
+  border-radius: var(--click-switch-radii-all);
+  background-color: var(--click-switch-color-indicator-default);
+  transition: transform 100ms;
+  transform: translateX(2px);
+  will-change: transform;
+}
+
+.switch__thumb__cPlbD[data-state='checked'] {
+  background-color: var(--click-switch-color-indicator-active);
+  transform: translateX(15px);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after the checked state to mirror the original `getThumbVars`
+   priority, where `disabled` is evaluated before `checked`. */
+.switch__thumb__cPlbD[data-disabled],
+.switch__thumb__cPlbD[data-disabled][data-state='checked'] {
+  background-color: var(--click-switch-color-indicator-disabled);
+}
+/* stylelint-enable no-descending-specificity */

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

@@ -0,0 +1,10 @@
+const wrapper = "wrapper__kudO9";
+const switch__thumb = "switch__thumb__cPlbD";
+const styles = {
+	wrapper: wrapper,
+	"switch": "switch__hgdMu",
+	switch__thumb: switch__thumb
+};
+
+export { styles as default, switch__thumb, wrapper };
+//# sourceMappingURL=Switch.module.css.js.map

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

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

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

@@ -1,13 +1,12 @@
+import "./Switch.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as RadixSwitch from '@radix-ui/react-switch';
 import { forwardRef, useId } from 'react';
-import { styled } from 'styled-components';
-import { GenericLabel } from '../GenericLabel/index.js';
+import { cn } from '../../lib/cva.js';
+import styles from './Switch.module.css.js';
 import { FormRoot } from '../FormContainer/FormRoot.js';
+import { GenericLabel } from '../GenericLabel/index.js';
 
-const Wrapper = styled(FormRoot).withConfig({
-  componentId: "sc-egkkgl-0"
-})(["align-items:center;max-width:fit-content;"]);
 const Switch = forwardRef(({
   checked,
   disabled,
@@ -15,77 +14,15 @@ const Switch = forwardRef(({
   dir,
   label,
   id,
+  className,
   ...props
 }, ref) => {
   const defaultId = useId();
-  return /* @__PURE__ */ jsxs(Wrapper, { $orientation: orientation, $dir: dir, children: [
-    /* @__PURE__ */ jsx(SwitchRoot, { ref, id: id ?? defaultId, disabled, "aria-label": `${label}`, checked, ...props, children: /* @__PURE__ */ jsx(SwitchThumb, { $checked: checked, $disabled: disabled }) }),
+  return /* @__PURE__ */ jsxs(FormRoot, { $orientation: orientation, $dir: dir, className: styles.wrapper, children: [
+    /* @__PURE__ */ jsx(RadixSwitch.Root, { ref, id: id ?? defaultId, disabled, "aria-label": `${label}`, checked, ...props, className: cn(styles.switch, className), children: /* @__PURE__ */ jsx(RadixSwitch.Thumb, { className: styles.switch__thumb }) }),
     label && /* @__PURE__ */ jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
   ] });
 });
-const getRootVars = (theme, disabled, checked) => {
-  if (disabled) {
-    return {
-      backgroundColor: theme.click.switch.color.background.disabled,
-      border: `1px solid ${theme.click.switch.color.stroke.disabled}`
-    };
-  } else if (checked) {
-    return {
-      backgroundColor: theme.click.switch.color.background.active,
-      border: `1px solid ${theme.click.switch.color.stroke.active}`
-    };
-  } else {
-    return {
-      backgroundColor: theme.click.switch.color.background.default,
-      border: `1px solid ${theme.click.switch.color.stroke.default}`
-    };
-  }
-};
-const getThumbVars = (theme, disabled, checked) => {
-  if (disabled) {
-    return {
-      backgroundColor: theme.click.switch.color.indicator.disabled
-    };
-  } else if (checked) {
-    return {
-      backgroundColor: theme.click.switch.color.indicator.active
-    };
-  } else {
-    return {
-      backgroundColor: theme.click.switch.color.indicator.default
-    };
-  }
-};
-const SwitchRoot = styled(RadixSwitch.Root).withConfig({
-  componentId: "sc-egkkgl-1"
-})((props) => {
-  const vars = getRootVars(props.theme, props.disabled ?? false, props.checked ?? false);
-  return {
-    width: props.theme.click.switch.size.width,
-    height: props.theme.click.switch.size.height,
-    backgroundColor: vars.backgroundColor,
-    border: vars.border,
-    borderRadius: props.theme.click.switch.radii.all,
-    position: "relative",
-    padding: 0,
-    cursor: props.disabled ? "not-allowed" : "pointer"
-  };
-});
-const SwitchThumb = styled(RadixSwitch.Thumb).withConfig({
-  componentId: "sc-egkkgl-2"
-})((props) => {
-  const vars = getThumbVars(props.theme, props.$disabled, props.$checked);
-  return {
-    display: "block",
-    width: "12px",
-    height: "12px",
-    backgroundColor: vars.backgroundColor,
-    borderRadius: props.theme.click.switch.radii.all,
-    transition: "transform 100ms",
-    transform: props.$checked ? "translateX(15px)" : "translateX(2px)",
-    willChange: "transform"
-  };
-});
 
 export { Switch };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as RadixSwitch from '@radix-ui/react-switch';\nimport { forwardRef, useId } from 'react';\nimport { styled } from 'styled-components';\nimport { FormRoot } from '@/components/FormContainer';\nimport { GenericLabel } from '@/components/GenericLabel';\nimport { SwitchProps } from './Switch.types';\nimport type { Theme } from '@/theme/theme.types';\n\ninterface ThumbProps {\n  $checked: boolean;\n  $disabled?: boolean;\n}\n\nconst Wrapper = styled(FormRoot)`\n  align-items: center;\n  max-width: fit-content;\n`;\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n  ({ checked, disabled, orientation, dir, label, id, ...props }, ref) => {\n    const defaultId = useId();\n    return (\n      <Wrapper\n        $orientation={orientation}\n        $dir={dir}\n      >\n        <SwitchRoot\n          ref={ref}\n          id={id ?? defaultId}\n          disabled={disabled}\n          aria-label={`${label}`}\n          checked={checked}\n          {...props}\n        >\n          <SwitchThumb\n            $checked={checked}\n            $disabled={disabled}\n          />\n        </SwitchRoot>\n        {label && (\n          <GenericLabel\n            htmlFor={id ?? defaultId}\n            disabled={disabled}\n          >\n            {label}\n          </GenericLabel>\n        )}\n      </Wrapper>\n    );\n  }\n);\n\nconst getRootVars = (theme: Theme, disabled: boolean | undefined, checked: boolean) => {\n  if (disabled) {\n    return {\n      backgroundColor: theme.click.switch.color.background.disabled,\n      border: `1px solid ${theme.click.switch.color.stroke.disabled}`,\n    };\n  } else if (checked) {\n    return {\n      backgroundColor: theme.click.switch.color.background.active,\n      border: `1px solid ${theme.click.switch.color.stroke.active}`,\n    };\n  } else {\n    return {\n      backgroundColor: theme.click.switch.color.background.default,\n      border: `1px solid ${theme.click.switch.color.stroke.default}`,\n    };\n  }\n};\n\nconst getThumbVars = (theme: Theme, disabled: boolean | undefined, checked: boolean) => {\n  if (disabled) {\n    return {\n      backgroundColor: theme.click.switch.color.indicator.disabled,\n    };\n  } else if (checked) {\n    return {\n      backgroundColor: theme.click.switch.color.indicator.active,\n    };\n  } else {\n    return {\n      backgroundColor: theme.click.switch.color.indicator.default,\n    };\n  }\n};\n\nconst SwitchRoot = styled(RadixSwitch.Root)(props => {\n  const vars = getRootVars(props.theme, props.disabled ?? false, props.checked ?? false);\n\n  return {\n    width: props.theme.click.switch.size.width,\n    height: props.theme.click.switch.size.height,\n    backgroundColor: vars.backgroundColor,\n    border: vars.border,\n    borderRadius: props.theme.click.switch.radii.all,\n    position: 'relative',\n    padding: 0,\n    cursor: props.disabled ? 'not-allowed' : 'pointer',\n  };\n});\n\nconst SwitchThumb = styled(RadixSwitch.Thumb)<ThumbProps>(props => {\n  const vars = getThumbVars(props.theme, props.$disabled, props.$checked);\n\n  return {\n    display: 'block',\n    width: '12px',\n    height: '12px',\n    backgroundColor: vars.backgroundColor,\n    borderRadius: props.theme.click.switch.radii.all,\n    transition: 'transform 100ms',\n    transform: props.$checked ? 'translateX(15px)' : 'translateX(2px)',\n    willChange: 'transform',\n  };\n});\n"],"names":["Wrapper","styled","FormRoot","withConfig","componentId","Switch","forwardRef","checked","disabled","orientation","dir","label","id","props","ref","defaultId","useId","getRootVars","theme","backgroundColor","click","switch","color","background","border","stroke","active","default","getThumbVars","indicator","SwitchRoot","RadixSwitch","Root","vars","width","size","height","borderRadius","radii","all","position","padding","cursor","SwitchThumb","Thumb","$disabled","$checked","display","transition","transform","willChange"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as RadixSwitch from '@radix-ui/react-switch';\nimport { forwardRef, useId } from 'react';\nimport { FormRoot } from '@/components/FormContainer';\nimport { GenericLabel } from '@/components/GenericLabel';\nimport { cn } from '@/lib/cva';\nimport styles from './Switch.module.css';\nimport { SwitchProps } from './Switch.types';\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n  ({ checked, disabled, orientation, dir, label, id, className, ...props }, ref) => {\n    const defaultId = useId();\n    return (\n      <FormRoot\n        $orientation={orientation}\n        $dir={dir}\n        className={styles.wrapper}\n      >\n        <RadixSwitch.Root\n          ref={ref}\n          id={id ?? defaultId}\n          disabled={disabled}\n          aria-label={`${label}`}\n          checked={checked}\n          {...props}\n          className={cn(styles.switch, className)}\n        >\n          <RadixSwitch.Thumb className={styles.switch__thumb} />\n        </RadixSwitch.Root>\n        {label && (\n          <GenericLabel\n            htmlFor={id ?? defaultId}\n            disabled={disabled}\n          >\n            {label}\n          </GenericLabel>\n        )}\n      </FormRoot>\n    );\n  }\n);\n"],"names":["Switch","forwardRef","checked","disabled","orientation","dir","label","id","className","props","ref","defaultId","useId","styles","wrapper","cn","switch","switch__thumb"],"mappings":";;;;;;;;AAQO,MAAMA,MAAAA,GAASC,WACpB,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAASC,QAAAA;AAAAA,EAAUC,WAAAA;AAAAA,EAAaC,GAAAA;AAAAA,EAAKC,KAAAA;AAAAA,EAAOC,EAAAA;AAAAA,EAAIC,SAAAA;AAAAA,EAAW,GAAGC;AAAM,CAAA,EAAGC,GAAAA,KAAQ;AAChF,EAAA,MAAMC,YAAYC,KAAAA,EAAM;AACxB,EAAA,uBACE,IAAA,CAAC,YACC,YAAA,EAAcR,WAAAA,EACd,MAAMC,GAAAA,EACN,SAAA,EAAWQ,OAAOC,OAAAA,EAElB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,CAAY,IAAA,EAAZ,EACC,GAAA,EACA,EAAA,EAAIP,EAAAA,IAAMI,SAAAA,EACV,QAAA,EACA,YAAA,EAAY,CAAA,EAAGL,KAAK,CAAA,CAAA,EACpB,OAAA,EACA,GAAIG,KAAAA,EACJ,SAAA,EAAWM,EAAAA,CAAGF,MAAAA,CAAOG,MAAAA,EAAQR,SAAS,CAAA,EAEtC,QAAA,kBAAA,GAAA,CAAC,WAAA,CAAY,KAAA,EAAZ,EAAkB,SAAA,EAAWK,MAAAA,CAAOI,aAAAA,EAAc,CAAA,EACrD,CAAA;AAAA,IACCX,yBACC,GAAA,CAAC,YAAA,EAAA,EACC,SAASC,EAAAA,IAAMI,SAAAA,EACf,UAECL,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ,CACF;;;;"}

package/dist/esm/components/Text/Text.css

@@ -0,0 +1,125 @@
+.text__78lq0 {
+  margin: 0;
+  color: var(--click-global-color-text-default);
+  font: var(--typography-styles-product-text-normal-md);
+  text-align: left;
+}
+
+.text_fill-width__zRuxC {
+  width: 100%;
+}
+
+/* font shorthand depends on both size and weight; one class per pairing
+   mirrors the single `font:` declaration emitted by styled-components. */
+
+.text_font_normal-xs__78uM- {
+  font: var(--typography-styles-product-text-normal-xs);
+}
+
+.text_font_normal-sm__nFGGC {
+  font: var(--typography-styles-product-text-normal-sm);
+}
+
+.text_font_normal-md__In-T2 {
+  font: var(--typography-styles-product-text-normal-md);
+}
+
+.text_font_normal-lg__WHd7I {
+  font: var(--typography-styles-product-text-normal-lg);
+}
+
+.text_font_medium-xs__KhN9o {
+  font: var(--typography-styles-product-text-medium-xs);
+}
+
+.text_font_medium-sm__zOR0K {
+  font: var(--typography-styles-product-text-medium-sm);
+}
+
+.text_font_medium-md__-svhL {
+  font: var(--typography-styles-product-text-medium-md);
+}
+
+.text_font_medium-lg__G8YvP {
+  font: var(--typography-styles-product-text-medium-lg);
+}
+
+.text_font_semibold-xs__MM2zu {
+  font: var(--typography-styles-product-text-semibold-xs);
+}
+
+.text_font_semibold-sm__2-9t1 {
+  font: var(--typography-styles-product-text-semibold-sm);
+}
+
+.text_font_semibold-md__o-5L5 {
+  font: var(--typography-styles-product-text-semibold-md);
+}
+
+.text_font_semibold-lg__0Tcyn {
+  font: var(--typography-styles-product-text-semibold-lg);
+}
+
+.text_font_bold-xs__WGk3B {
+  font: var(--typography-styles-product-text-bold-xs);
+}
+
+.text_font_bold-sm__-h2Ak {
+  font: var(--typography-styles-product-text-bold-sm);
+}
+
+.text_font_bold-md__IdFMh {
+  font: var(--typography-styles-product-text-bold-md);
+}
+
+.text_font_bold-lg__TAnMH {
+  font: var(--typography-styles-product-text-bold-lg);
+}
+
+.text_font_mono-xs__h2Ng9 {
+  font: var(--typography-styles-product-text-mono-xs);
+}
+
+.text_font_mono-sm__-TW-0 {
+  font: var(--typography-styles-product-text-mono-sm);
+}
+
+.text_font_mono-md__8WvNk {
+  font: var(--typography-styles-product-text-mono-md);
+}
+
+.text_font_mono-lg__1npTu {
+  font: var(--typography-styles-product-text-mono-lg);
+}
+
+.text_color_default__225Wd {
+  color: var(--click-global-color-text-default);
+}
+
+.text_color_muted__DpcbG {
+  color: var(--click-global-color-text-muted);
+}
+
+.text_color_danger__hphaQ {
+  color: var(--click-global-color-text-danger);
+}
+
+.text_color_disabled__noB1s {
+  color: var(--click-global-color-text-disabled);
+}
+
+.text_color_warning__OosOF {
+  color: var(--click-global-color-text-warning);
+}
+
+.text_align_left__W0fKP {
+  text-align: left;
+}
+
+.text_align_center__TjmiH {
+  text-align: center;
+}
+
+.text_align_right__azLA3 {
+  text-align: right;
+}

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

@@ -0,0 +1,44 @@
+const text = "text__78lq0";
+const text_color_default = "text_color_default__225Wd";
+const text_color_muted = "text_color_muted__DpcbG";
+const text_color_danger = "text_color_danger__hphaQ";
+const text_color_disabled = "text_color_disabled__noB1s";
+const text_color_warning = "text_color_warning__OosOF";
+const text_align_left = "text_align_left__W0fKP";
+const text_align_center = "text_align_center__TjmiH";
+const text_align_right = "text_align_right__azLA3";
+const styles = {
+	text: text,
+	"text_fill-width": "text_fill-width__zRuxC",
+	"text_font_normal-xs": "text_font_normal-xs__78uM-",
+	"text_font_normal-sm": "text_font_normal-sm__nFGGC",
+	"text_font_normal-md": "text_font_normal-md__In-T2",
+	"text_font_normal-lg": "text_font_normal-lg__WHd7I",
+	"text_font_medium-xs": "text_font_medium-xs__KhN9o",
+	"text_font_medium-sm": "text_font_medium-sm__zOR0K",
+	"text_font_medium-md": "text_font_medium-md__-svhL",
+	"text_font_medium-lg": "text_font_medium-lg__G8YvP",
+	"text_font_semibold-xs": "text_font_semibold-xs__MM2zu",
+	"text_font_semibold-sm": "text_font_semibold-sm__2-9t1",
+	"text_font_semibold-md": "text_font_semibold-md__o-5L5",
+	"text_font_semibold-lg": "text_font_semibold-lg__0Tcyn",
+	"text_font_bold-xs": "text_font_bold-xs__WGk3B",
+	"text_font_bold-sm": "text_font_bold-sm__-h2Ak",
+	"text_font_bold-md": "text_font_bold-md__IdFMh",
+	"text_font_bold-lg": "text_font_bold-lg__TAnMH",
+	"text_font_mono-xs": "text_font_mono-xs__h2Ng9",
+	"text_font_mono-sm": "text_font_mono-sm__-TW-0",
+	"text_font_mono-md": "text_font_mono-md__8WvNk",
+	"text_font_mono-lg": "text_font_mono-lg__1npTu",
+	text_color_default: text_color_default,
+	text_color_muted: text_color_muted,
+	text_color_danger: text_color_danger,
+	text_color_disabled: text_color_disabled,
+	text_color_warning: text_color_warning,
+	text_align_left: text_align_left,
+	text_align_center: text_align_center,
+	text_align_right: text_align_right
+};
+
+export { styles as default, text, text_align_center, text_align_left, text_align_right, text_color_danger, text_color_default, text_color_disabled, text_color_muted, text_color_warning };
+//# sourceMappingURL=Text.module.css.js.map

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

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

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

@@ -1,7 +1,129 @@
+import "./Text.css";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './Text.module.css.js';
+import { cva } from 'class-variance-authority';
 
+const textVariants = cva(styles.text, {
+  variants: {
+    color: {
+      default: styles["text_color_default"],
+      muted: styles["text_color_muted"],
+      danger: styles["text_color_danger"],
+      disabled: styles["text_color_disabled"],
+      warning: styles["text_color_warning"]
+    },
+    align: {
+      left: styles["text_align_left"],
+      center: styles["text_align_center"],
+      right: styles["text_align_right"]
+    },
+    fillWidth: {
+      true: styles["text_fill-width"]
+    },
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: ""
+    },
+    weight: {
+      normal: "",
+      medium: "",
+      semibold: "",
+      bold: "",
+      mono: ""
+    }
+  },
+  compoundVariants: [{
+    weight: "normal",
+    size: "xs",
+    class: styles["text_font_normal-xs"]
+  }, {
+    weight: "normal",
+    size: "sm",
+    class: styles["text_font_normal-sm"]
+  }, {
+    weight: "normal",
+    size: "md",
+    class: styles["text_font_normal-md"]
+  }, {
+    weight: "normal",
+    size: "lg",
+    class: styles["text_font_normal-lg"]
+  }, {
+    weight: "medium",
+    size: "xs",
+    class: styles["text_font_medium-xs"]
+  }, {
+    weight: "medium",
+    size: "sm",
+    class: styles["text_font_medium-sm"]
+  }, {
+    weight: "medium",
+    size: "md",
+    class: styles["text_font_medium-md"]
+  }, {
+    weight: "medium",
+    size: "lg",
+    class: styles["text_font_medium-lg"]
+  }, {
+    weight: "semibold",
+    size: "xs",
+    class: styles["text_font_semibold-xs"]
+  }, {
+    weight: "semibold",
+    size: "sm",
+    class: styles["text_font_semibold-sm"]
+  }, {
+    weight: "semibold",
+    size: "md",
+    class: styles["text_font_semibold-md"]
+  }, {
+    weight: "semibold",
+    size: "lg",
+    class: styles["text_font_semibold-lg"]
+  }, {
+    weight: "bold",
+    size: "xs",
+    class: styles["text_font_bold-xs"]
+  }, {
+    weight: "bold",
+    size: "sm",
+    class: styles["text_font_bold-sm"]
+  }, {
+    weight: "bold",
+    size: "md",
+    class: styles["text_font_bold-md"]
+  }, {
+    weight: "bold",
+    size: "lg",
+    class: styles["text_font_bold-lg"]
+  }, {
+    weight: "mono",
+    size: "xs",
+    class: styles["text_font_mono-xs"]
+  }, {
+    weight: "mono",
+    size: "sm",
+    class: styles["text_font_mono-sm"]
+  }, {
+    weight: "mono",
+    size: "md",
+    class: styles["text_font_mono-md"]
+  }, {
+    weight: "mono",
+    size: "lg",
+    class: styles["text_font_mono-lg"]
+  }],
+  defaultVariants: {
+    color: "default",
+    align: "left",
+    size: "md",
+    weight: "normal"
+  }
+});
 const _Text = ({
   align,
   color,
@@ -12,21 +134,16 @@ const _Text = ({
   component,
   fillWidth,
   ...props
-}, ref) => /* @__PURE__ */ jsx(CuiText, { as: component ?? "p", ref, $align: align, $color: color, $size: size, $weight: weight, $fillWidth: fillWidth, className, ...props, children });
-const CuiText = styled.p.withConfig({
-  componentId: "sc-ereusu-0"
-})(["font:", ";color:", ";text-align:", ";margin:0;", ";"], ({
-  $size = "md",
-  $weight = "normal",
-  theme
-}) => theme.typography.styles.product.text[$weight][$size], ({
-  $color = "default",
-  theme
-}) => theme.click.global.color.text[$color], ({
-  $align = "left"
-}) => $align, ({
-  $fillWidth
-}) => $fillWidth && "width: 100%");
+}, ref) => {
+  const Component = component ?? "p";
+  return /* @__PURE__ */ jsx(Component, { ref, ...props, className: cn(textVariants({
+    color,
+    align,
+    size,
+    weight,
+    fillWidth
+  }), className), children });
+};
 _Text.displayName = "Text";
 const Text = forwardRef(_Text);