@clickhouse/click-ui 0.6.1-rc2 → 0.6.2-rc1

package/dist/cjs/components/Link/Link.css

@@ -118,18 +118,22 @@
   --link-font: var(--typography-styles-product-text-mono-lg);
 }
 
-/* The inner Icon receives .external-icon via className. The original used a
-   descendant selector inside IconWrapper; here we pass the scoped class
-   straight to the Icon so the selector stays a single class with the same
-   effective specificity. */
-.external-icon_size_xs__hRWrg,
-.external-icon_size_sm__QFJoc {
+/* The inner Icon is a `link__icon` element — it receives the scoped class via
+   className. The original used a descendant selector inside IconWrapper; here we
+   pass the scoped class straight to the Icon so the selector stays a single
+   class with the same effective specificity. */
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.link__icon__El8JR {
+}
+
+.link__icon_size_xs__qMUN-,
+.link__icon_size_sm__d2ZIU {
   width: var(--click-link-icon-size-sm-width);
   height: var(--click-link-icon-size-sm-height);
 }
 
-.external-icon_size_md__-bbPt,
-.external-icon_size_lg__XGkpl {
+.link__icon_size_md__-5EZ1,
+.link__icon_size_lg__RY5Y1 {
   width: var(--click-link-icon-size-md-width);
   height: var(--click-link-icon-size-md-height);
 }

package/dist/cjs/components/Link/Link.module.css.cjs

@@ -12,6 +12,11 @@ const link_weight_medium = "link_weight_medium__Sot5E";
 const link_weight_semibold = "link_weight_semibold__6STFO";
 const link_weight_bold = "link_weight_bold__FWQyo";
 const link_weight_mono = "link_weight_mono__Mzdum";
+const link__icon = "link__icon__El8JR";
+const link__icon_size_xs = "link__icon_size_xs__qMUN-";
+const link__icon_size_sm = "link__icon_size_sm__d2ZIU";
+const link__icon_size_md = "link__icon_size_md__-5EZ1";
+const link__icon_size_lg = "link__icon_size_lg__RY5Y1";
 const styles = {
 	link: link,
 	link_size_xs: link_size_xs,
@@ -23,14 +28,20 @@ const styles = {
 	link_weight_semibold: link_weight_semibold,
 	link_weight_bold: link_weight_bold,
 	link_weight_mono: link_weight_mono,
-	"external-icon_size_xs": "external-icon_size_xs__hRWrg",
-	"external-icon_size_sm": "external-icon_size_sm__QFJoc",
-	"external-icon_size_md": "external-icon_size_md__-bbPt",
-	"external-icon_size_lg": "external-icon_size_lg__XGkpl"
+	link__icon: link__icon,
+	link__icon_size_xs: link__icon_size_xs,
+	link__icon_size_sm: link__icon_size_sm,
+	link__icon_size_md: link__icon_size_md,
+	link__icon_size_lg: link__icon_size_lg
 };
 
 exports.default = styles;
 exports.link = link;
+exports.link__icon = link__icon;
+exports.link__icon_size_lg = link__icon_size_lg;
+exports.link__icon_size_md = link__icon_size_md;
+exports.link__icon_size_sm = link__icon_size_sm;
+exports.link__icon_size_xs = link__icon_size_xs;
 exports.link_size_lg = link_size_lg;
 exports.link_size_md = link_size_md;
 exports.link_size_sm = link_size_sm;

package/dist/cjs/components/Link/Link.module.css.cjs.map

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

package/dist/cjs/components/Link/index.cjs

@@ -31,13 +31,13 @@ const linkVariants = classVarianceAuthority.cva(Link_module.default.link, {
     weight: "normal"
   }
 });
-const externalIconVariants = classVarianceAuthority.cva("", {
+const iconVariants = classVarianceAuthority.cva(Link_module.default["link__icon"], {
   variants: {
     size: {
-      xs: Link_module.default["external-icon_size_xs"],
-      sm: Link_module.default["external-icon_size_sm"],
-      md: Link_module.default["external-icon_size_md"],
-      lg: Link_module.default["external-icon_size_lg"]
+      xs: Link_module.default["link__icon_size_xs"],
+      sm: Link_module.default["link__icon_size_sm"],
+      md: Link_module.default["link__icon_size_md"],
+      lg: Link_module.default["link__icon_size_lg"]
     }
   },
   defaultVariants: {
@@ -60,7 +60,7 @@ const _Link = ({
     weight
   }), className), children: [
     children,
-    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, className: cva.cn("external-icon", externalIconVariants({
+    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, className: cva.cn(iconVariants({
       size
     })), "data-testid": icon }) })
   ] });

package/dist/cjs/components/Link/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","jsxs","cn","jsx","Icon","Link","forwardRef"],"mappings":";;;;;;;;;;;AA6BA,MAAMA,YAAAA,GAAeC,0BAAAA,CAAIC,mBAAAA,CAAOC,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,cAAc,CAAA;AAAA,MACzBK,EAAAA,EAAIL,oBAAO,cAAc,CAAA;AAAA,MACzBM,EAAAA,EAAIN,oBAAO,cAAc,CAAA;AAAA,MACzBO,EAAAA,EAAIP,oBAAO,cAAc;AAAA,KAC3B;AAAA,IACAQ,MAAAA,EAAQ;AAAA,MACNC,MAAAA,EAAQT,oBAAO,oBAAoB,CAAA;AAAA,MACnCU,MAAAA,EAAQV,oBAAO,oBAAoB,CAAA;AAAA,MACnCW,QAAAA,EAAUX,oBAAO,sBAAsB,CAAA;AAAA,MACvCY,IAAAA,EAAMZ,oBAAO,kBAAkB,CAAA;AAAA,MAC/Ba,IAAAA,EAAMb,oBAAO,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,2BAAI,EAAA,EAAI;AAAA,EACnCG,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,uBAAuB,CAAA;AAAA,MAClCK,EAAAA,EAAIL,oBAAO,uBAAuB,CAAA;AAAA,MAClCM,EAAAA,EAAIN,oBAAO,uBAAuB,CAAA;AAAA,MAClCO,EAAAA,EAAIP,oBAAO,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,uBACEK,eAAA,CAAC,aACC,GAAA,EACA,OAAA,EACA,GAAIH,KAAAA,EACJ,SAAA,EAAWI,OAAG5B,YAAAA,CAAa;AAAA,IAAEK,IAAAA;AAAAA,IAAMK;AAAAA,GAAQ,CAAA,EAAGa,SAAS,CAAA,EAEtDF,QAAAA,EAAAA;AAAAA,IAAAA,QAAAA;AAAAA,IACAD,IAAAA,oBACCS,cAAA,CAAC,MAAA,EAAA,EACC,QAAA,kBAAAA,cAAA,CAACC,SAAA,EAAA,EACC,MAAMV,IAAAA,EACN,SAAA,EAAWQ,MAAAA,CAAG,eAAA,EAAiBX,oBAAAA,CAAqB;AAAA,MAAEZ;AAAAA,KAAM,CAAC,CAAA,EAC7D,aAAA,EAAae,MAAK,CAAA,EAEtB;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AACO,MAAMW,IAAAA,GAAiCC,iBAAWd,KAAK;;;;"}
+{"version":3,"file":"index.cjs","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 iconVariants = cva(styles['link__icon'], {\n  variants: {\n    size: {\n      xs: styles['link__icon_size_xs'],\n      sm: styles['link__icon_size_sm'],\n      md: styles['link__icon_size_md'],\n      lg: styles['link__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(iconVariants({ 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","iconVariants","_Link","onClick","icon","children","component","className","props","ref","Component","jsxs","cn","jsx","Icon","Link","forwardRef"],"mappings":";;;;;;;;;;;AA6BA,MAAMA,YAAAA,GAAeC,0BAAAA,CAAIC,mBAAAA,CAAOC,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,cAAc,CAAA;AAAA,MACzBK,EAAAA,EAAIL,oBAAO,cAAc,CAAA;AAAA,MACzBM,EAAAA,EAAIN,oBAAO,cAAc,CAAA;AAAA,MACzBO,EAAAA,EAAIP,oBAAO,cAAc;AAAA,KAC3B;AAAA,IACAQ,MAAAA,EAAQ;AAAA,MACNC,MAAAA,EAAQT,oBAAO,oBAAoB,CAAA;AAAA,MACnCU,MAAAA,EAAQV,oBAAO,oBAAoB,CAAA;AAAA,MACnCW,QAAAA,EAAUX,oBAAO,sBAAsB,CAAA;AAAA,MACvCY,IAAAA,EAAMZ,oBAAO,kBAAkB,CAAA;AAAA,MAC/Ba,IAAAA,EAAMb,oBAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,IAAA;AAAA,IACNK,MAAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAED,MAAMO,YAAAA,GAAehB,0BAAAA,CAAIC,mBAAAA,CAAO,YAAY,CAAA,EAAG;AAAA,EAC7CE,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,oBAAoB,CAAA;AAAA,MAC/BK,EAAAA,EAAIL,oBAAO,oBAAoB,CAAA;AAAA,MAC/BM,EAAAA,EAAIN,oBAAO,oBAAoB,CAAA;AAAA,MAC/BO,EAAAA,EAAIP,oBAAO,oBAAoB;AAAA;AACjC,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,uBACEK,eAAA,CAAC,aACC,GAAA,EACA,OAAA,EACA,GAAIH,KAAAA,EACJ,SAAA,EAAWI,OAAG5B,YAAAA,CAAa;AAAA,IAAEK,IAAAA;AAAAA,IAAMK;AAAAA,GAAQ,CAAA,EAAGa,SAAS,CAAA,EAEtDF,QAAAA,EAAAA;AAAAA,IAAAA,QAAAA;AAAAA,IACAD,IAAAA,mCACE,MAAA,EAAA,EACC,QAAA,kBAAAS,cAAA,CAACC,aACC,IAAA,EAAMV,IAAAA,EACN,SAAA,EAAWQ,MAAAA,CAAGX,YAAAA,CAAa;AAAA,MAAEZ;AAAAA,KAAM,CAAC,CAAA,EACpC,aAAA,EAAae,MAAK,CAAA,EAEtB;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AACO,MAAMW,IAAAA,GAAiCC,iBAAWd,KAAK;;;;"}

package/dist/cjs/components/MultiAccordion/MultiAccordion.css

@@ -0,0 +1,200 @@
+.multi-accordion__ntYTM {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
+  gap: var(--multi-accordion-gap);
+}
+
+.multi-accordion_fill-width__Rnqso {
+  width: 100%;
+}
+
+.multi-accordion_gap_none__NrRxK {
+  --multi-accordion-gap: var(--click-container-gap-none);
+}
+
+.multi-accordion_gap_xxs__1FSFF {
+  --multi-accordion-gap: var(--click-container-gap-xxs);
+}
+
+.multi-accordion_gap_xs__oHQut {
+  --multi-accordion-gap: var(--click-container-gap-xs);
+}
+
+.multi-accordion_gap_sm__hxMme {
+  --multi-accordion-gap: var(--click-container-gap-sm);
+}
+
+.multi-accordion_gap_md__epg85 {
+  --multi-accordion-gap: var(--click-container-gap-md);
+}
+
+.multi-accordion_gap_lg__iYlYQ {
+  --multi-accordion-gap: var(--click-container-gap-lg);
+}
+
+.multi-accordion_gap_xl__1uarr {
+  --multi-accordion-gap: var(--click-container-gap-xl);
+}
+
+.multi-accordion_gap_xxl__m9X9V {
+  --multi-accordion-gap: var(--click-container-gap-xxl);
+}
+
+.multi-accordion__item__RHKu8 {
+  border: 1px solid var(--click-global-color-stroke-default);
+  border-radius: var(--border-radii-1);
+  background-color: var(--click-global-color-background-default);
+}
+
+.multi-accordion__item_no-border__ZtqMX {
+  border: none;
+}
+
+.multi-accordion__item_fill-width__zyq4f {
+  width: 100%;
+}
+
+.multi-accordion__trigger__etXVq {
+  display: flex;
+  width: 100%;
+  padding: var(--multi-accordion-trigger-padding);
+  align-items: center;
+  gap: var(--multi-accordion-trigger-gap);
+  border: none;
+  border-radius: inherit;
+  background-color: transparent;
+  color: var(--multi-accordion-label-default);
+  font: var(--multi-accordion-font-default);
+}
+
+.multi-accordion__trigger__etXVq:active {
+  color: var(--multi-accordion-label-active);
+  font: var(--multi-accordion-font-active);
+}
+
+.multi-accordion__trigger__etXVq:hover {
+  background: var(--click-global-color-stroke-default);
+  color: var(--multi-accordion-label-hover);
+  font: var(--multi-accordion-font-hover);
+  cursor: pointer;
+}
+
+.multi-accordion__trigger__etXVq [data-icon='accordion-status'] {
+  color: var(--global-color-stroke-intense);
+}
+
+.multi-accordion__trigger__etXVq[data-state='open'] {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.multi-accordion__trigger__etXVq[data-state='open'] [data-icon='accordion-status'] {
+  color: var(--global-color-accent-default);
+}
+
+.multi-accordion__trigger_size_none__o4eWF {
+  --multi-accordion-trigger-padding: var(--click-container-space-none);
+  --multi-accordion-trigger-gap: var(--click-accordion-sm-space-gap);
+}
+
+.multi-accordion__trigger_size_sm__80VXp {
+  --multi-accordion-trigger-padding: var(--click-container-space-sm);
+  --multi-accordion-trigger-gap: var(--click-accordion-sm-space-gap);
+}
+
+.multi-accordion__trigger_size_md__uAE8q {
+  --multi-accordion-trigger-padding: var(--click-container-space-md);
+  --multi-accordion-trigger-gap: var(--click-accordion-md-space-gap);
+}
+
+.multi-accordion__trigger_size_lg__VHN7C {
+  --multi-accordion-trigger-padding: var(--click-container-space-lg);
+  --multi-accordion-trigger-gap: var(--click-accordion-lg-space-gap);
+}
+
+.multi-accordion__trigger_font_sm__xnOLy {
+  --multi-accordion-font-default: var(--click-accordion-sm-typography-label-default);
+  --multi-accordion-font-hover: var(--click-accordion-sm-typography-label-hover);
+  --multi-accordion-font-active: var(--click-accordion-sm-typography-label-active);
+}
+
+.multi-accordion__trigger_font_md__hTIA8 {
+  --multi-accordion-font-default: var(--click-accordion-md-typography-label-default);
+  --multi-accordion-font-hover: var(--click-accordion-md-typography-label-hover);
+  --multi-accordion-font-active: var(--click-accordion-md-typography-label-active);
+}
+
+.multi-accordion__trigger_font_lg__yMSpQ {
+  --multi-accordion-font-default: var(--click-accordion-lg-typography-label-default);
+  --multi-accordion-font-hover: var(--click-accordion-lg-typography-label-hover);
+  --multi-accordion-font-active: var(--click-accordion-lg-typography-label-active);
+}
+
+.multi-accordion__trigger_color_default__X7f4v {
+  --multi-accordion-label-default: var(--click-accordion-color-default-label-default);
+  --multi-accordion-label-hover: var(--click-accordion-color-default-label-hover);
+  --multi-accordion-label-active: var(--click-accordion-color-default-label-active);
+}
+
+.multi-accordion__trigger_color_link__hXDgW {
+  --multi-accordion-label-default: var(--click-accordion-color-link-label-default);
+  --multi-accordion-label-hover: var(--click-accordion-color-link-label-hover);
+  --multi-accordion-label-active: var(--click-accordion-color-link-label-active);
+}
+
+.multi-accordion__icon-wrapper__uhWrs {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 200ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+.multi-accordion__trigger__etXVq[data-state='open'] .multi-accordion__icon-wrapper__uhWrs {
+  transform: rotate(90deg);
+}
+
+.multi-accordion__icons-wrapper__67uu- {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.multi-accordion__content__Gz0po {
+  padding: var(--multi-accordion-content-padding);
+  padding-top: 0;
+}
+
+.multi-accordion__content_padding_none__GgbED {
+  --multi-accordion-content-padding: var(--click-container-space-none);
+}
+
+.multi-accordion__content_padding_sm__nmI7q {
+  --multi-accordion-content-padding: var(--click-container-space-sm);
+}
+
+.multi-accordion__content_padding_md__XD2Ki {
+  --multi-accordion-content-padding: var(--click-container-space-md);
+}
+
+.multi-accordion__content_padding_lg__W-njL {
+  --multi-accordion-content-padding: var(--click-container-space-lg);
+}
+
+.multi-accordion__title__kLWyH {
+  overflow: hidden;
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.multi-accordion__status-icon__MNVgx {
+}
+
+.multi-accordion__status-icon_completed__z5-XJ svg path {
+  fill: var(--global-color-accent-default) !important;
+  stroke: var(--global-color-background-default) !important;
+}
+
+.multi-accordion__status-icon_completed__z5-XJ svg path:first-of-type {
+  stroke: var(--global-color-accent-default) !important;
+}

package/dist/cjs/components/MultiAccordion/MultiAccordion.module.css.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"multi-accordion": "multi-accordion__ntYTM",
+	"multi-accordion_fill-width": "multi-accordion_fill-width__Rnqso",
+	"multi-accordion_gap_none": "multi-accordion_gap_none__NrRxK",
+	"multi-accordion_gap_xxs": "multi-accordion_gap_xxs__1FSFF",
+	"multi-accordion_gap_xs": "multi-accordion_gap_xs__oHQut",
+	"multi-accordion_gap_sm": "multi-accordion_gap_sm__hxMme",
+	"multi-accordion_gap_md": "multi-accordion_gap_md__epg85",
+	"multi-accordion_gap_lg": "multi-accordion_gap_lg__iYlYQ",
+	"multi-accordion_gap_xl": "multi-accordion_gap_xl__1uarr",
+	"multi-accordion_gap_xxl": "multi-accordion_gap_xxl__m9X9V",
+	"multi-accordion__item": "multi-accordion__item__RHKu8",
+	"multi-accordion__item_no-border": "multi-accordion__item_no-border__ZtqMX",
+	"multi-accordion__item_fill-width": "multi-accordion__item_fill-width__zyq4f",
+	"multi-accordion__trigger": "multi-accordion__trigger__etXVq",
+	"multi-accordion__trigger_size_none": "multi-accordion__trigger_size_none__o4eWF",
+	"multi-accordion__trigger_size_sm": "multi-accordion__trigger_size_sm__80VXp",
+	"multi-accordion__trigger_size_md": "multi-accordion__trigger_size_md__uAE8q",
+	"multi-accordion__trigger_size_lg": "multi-accordion__trigger_size_lg__VHN7C",
+	"multi-accordion__trigger_font_sm": "multi-accordion__trigger_font_sm__xnOLy",
+	"multi-accordion__trigger_font_md": "multi-accordion__trigger_font_md__hTIA8",
+	"multi-accordion__trigger_font_lg": "multi-accordion__trigger_font_lg__yMSpQ",
+	"multi-accordion__trigger_color_default": "multi-accordion__trigger_color_default__X7f4v",
+	"multi-accordion__trigger_color_link": "multi-accordion__trigger_color_link__hXDgW",
+	"multi-accordion__icon-wrapper": "multi-accordion__icon-wrapper__uhWrs",
+	"multi-accordion__icons-wrapper": "multi-accordion__icons-wrapper__67uu-",
+	"multi-accordion__content": "multi-accordion__content__Gz0po",
+	"multi-accordion__content_padding_none": "multi-accordion__content_padding_none__GgbED",
+	"multi-accordion__content_padding_sm": "multi-accordion__content_padding_sm__nmI7q",
+	"multi-accordion__content_padding_md": "multi-accordion__content_padding_md__XD2Ki",
+	"multi-accordion__content_padding_lg": "multi-accordion__content_padding_lg__W-njL",
+	"multi-accordion__title": "multi-accordion__title__kLWyH",
+	"multi-accordion__status-icon": "multi-accordion__status-icon__MNVgx",
+	"multi-accordion__status-icon_completed": "multi-accordion__status-icon_completed__z5-XJ"
+};
+
+exports.default = styles;
+//# sourceMappingURL=MultiAccordion.module.css.cjs.map

package/dist/cjs/components/MultiAccordion/MultiAccordion.module.css.cjs.map

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

package/dist/cjs/components/MultiAccordion/index.cjs

@@ -1,15 +1,18 @@
+require("./MultiAccordion.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const RadixAccordion = require('@radix-ui/react-accordion');
-const styledComponents = require('styled-components');
 const react = require('react');
+const cva = require('../../lib/cva.cjs');
+const MultiAccordion_module = require('./MultiAccordion.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
-const Text = require('../Text/index.cjs');
 const Container = require('../Container/index.cjs');
+const Text = require('../Text/index.cjs');
 const Spacer = require('../Spacer/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -37,6 +40,28 @@ const MultiAccordionContext = react.createContext({
   showBorder: true,
   showCheck: false
 });
+const rootVariants = classVarianceAuthority.cva(MultiAccordion_module.default["multi-accordion"], {
+  variants: {
+    fillWidth: {
+      true: MultiAccordion_module.default["multi-accordion_fill-width"],
+      false: ""
+    },
+    gap: {
+      none: MultiAccordion_module.default["multi-accordion_gap_none"],
+      xxs: MultiAccordion_module.default["multi-accordion_gap_xxs"],
+      xs: MultiAccordion_module.default["multi-accordion_gap_xs"],
+      sm: MultiAccordion_module.default["multi-accordion_gap_sm"],
+      md: MultiAccordion_module.default["multi-accordion_gap_md"],
+      lg: MultiAccordion_module.default["multi-accordion_gap_lg"],
+      xl: MultiAccordion_module.default["multi-accordion_gap_xl"],
+      xxl: MultiAccordion_module.default["multi-accordion_gap_xxl"]
+    }
+  },
+  defaultVariants: {
+    fillWidth: true,
+    gap: "md"
+  }
+});
 const MultiAccordion = ({
   size = "md",
   children,
@@ -45,6 +70,7 @@ const MultiAccordion = ({
   showBorder = true,
   gap = "md",
   markAsCompleted,
+  className,
   ...delegated
 }) => {
   const contextValue = {
@@ -54,8 +80,64 @@ const MultiAccordion = ({
     showCheck,
     markAsCompleted
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(AccordionRoot, { $fillWidth: fillWidth, $gap: gap, ...delegated, children: /* @__PURE__ */ jsxRuntime.jsx(MultiAccordionContext.Provider, { value: contextValue, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixAccordion__namespace.Root, { ...delegated, className: cva.cn(rootVariants({
+    fillWidth,
+    gap
+  }), className), children: /* @__PURE__ */ jsxRuntime.jsx(MultiAccordionContext.Provider, { value: contextValue, children }) });
 };
+const itemVariants = classVarianceAuthority.cva(MultiAccordion_module.default["multi-accordion__item"], {
+  variants: {
+    showBorder: {
+      true: "",
+      false: MultiAccordion_module.default["multi-accordion__item_no-border"]
+    },
+    fillWidth: {
+      true: MultiAccordion_module.default["multi-accordion__item_fill-width"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    showBorder: true,
+    fillWidth: true
+  }
+});
+const triggerVariants = classVarianceAuthority.cva(MultiAccordion_module.default["multi-accordion__trigger"], {
+  variants: {
+    size: {
+      none: MultiAccordion_module.default["multi-accordion__trigger_size_none"],
+      sm: MultiAccordion_module.default["multi-accordion__trigger_size_sm"],
+      md: MultiAccordion_module.default["multi-accordion__trigger_size_md"],
+      lg: MultiAccordion_module.default["multi-accordion__trigger_size_lg"]
+    },
+    font: {
+      sm: MultiAccordion_module.default["multi-accordion__trigger_font_sm"],
+      md: MultiAccordion_module.default["multi-accordion__trigger_font_md"],
+      lg: MultiAccordion_module.default["multi-accordion__trigger_font_lg"]
+    },
+    color: {
+      default: MultiAccordion_module.default["multi-accordion__trigger_color_default"],
+      link: MultiAccordion_module.default["multi-accordion__trigger_color_link"]
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    font: "md",
+    color: "default"
+  }
+});
+const contentVariants = classVarianceAuthority.cva(MultiAccordion_module.default["multi-accordion__content"], {
+  variants: {
+    size: {
+      none: MultiAccordion_module.default["multi-accordion__content_padding_none"],
+      sm: MultiAccordion_module.default["multi-accordion__content_padding_sm"],
+      md: MultiAccordion_module.default["multi-accordion__content_padding_md"],
+      lg: MultiAccordion_module.default["multi-accordion__content_padding_lg"]
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
 const MultiAccordionItem = ({
   value,
   title,
@@ -65,6 +147,7 @@ const MultiAccordionItem = ({
   gap,
   children,
   isCompleted = false,
+  className,
   ...props
 }) => {
   const {
@@ -81,18 +164,27 @@ const MultiAccordionItem = ({
     }
   };
   const customSize = size === "none" ? "sm" : size;
-  return /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value, $showBorder: showBorder, $fillWidth: fillWidth, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(AccordionTrigger, { $size: size, color, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(AccordionIconsWrapper, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(RadixAccordion__namespace.Item, { value, ...props, className: cva.cn(itemVariants({
+    showBorder,
+    fillWidth
+  }), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(RadixAccordion__namespace.Trigger, { className: triggerVariants({
+      size,
+      font: customSize,
+      color: color ?? "default"
+    }), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiAccordion_module.default["multi-accordion__icons-wrapper"], children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: MultiAccordion_module.default["multi-accordion__icon-wrapper"], children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
         icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: iconSize ?? customSize }) : null
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", overflow: "hidden", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AccordionItemTitle, { component: "span", size: customSize, fillWidth, children: title }),
-        showCheck && /* @__PURE__ */ jsxRuntime.jsx(CustomIcon, { name: isCompleted ? "check-in-circle" : "circle", $isCompleted: isCompleted, size: iconSize ?? customSize, "aria-label": "accordion icon status", onClick: onClickStatus, "data-icon": "accordion-status", "data-testid": "accordion-status-icon" })
+        /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { className: MultiAccordion_module.default["multi-accordion__title"], component: "span", size: customSize, fillWidth, children: title }),
+        showCheck && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { className: cva.cn(MultiAccordion_module.default["multi-accordion__status-icon"], isCompleted && MultiAccordion_module.default["multi-accordion__status-icon_completed"]), name: isCompleted ? "check-in-circle" : "circle", size: iconSize ?? customSize, "aria-label": "accordion icon status", onClick: onClickStatus, "data-icon": "accordion-status", "data-testid": "accordion-status-icon" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(AccordionContent, { $padding: size, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(RadixAccordion__namespace.Content, { className: contentVariants({
+      size
+    }), children: [
       /* @__PURE__ */ jsxRuntime.jsx(Spacer.Spacer, { size: gap }),
       children
     ] })
@@ -100,88 +192,6 @@ const MultiAccordionItem = ({
 };
 MultiAccordionItem.displayName = "MultiAccordion.Item";
 MultiAccordion.Item = MultiAccordionItem;
-const AccordionRoot = styledComponents.styled(RadixAccordion__namespace.Root).withConfig({
-  componentId: "sc-1lb3204-0"
-})(["display:flex;flex-direction:column;justify-content:start;align-items:start;gap:", ";", ";"], ({
-  theme,
-  $gap
-}) => theme.click.container.gap[$gap], ({
-  $fillWidth
-}) => $fillWidth && "width: 100%");
-const AccordionItem = styledComponents.styled(RadixAccordion__namespace.Item).withConfig({
-  componentId: "sc-1lb3204-1"
-})(["", ";", ";"], ({
-  theme,
-  $showBorder
-}) => `
-    border: ${$showBorder ? `1px solid ${theme.click.global.color.stroke.default}` : "none"};
-    border-radius: ${theme.border.radii[1]};
-    background-color: ${theme.click.global.color.background.default};
-  `, ({
-  $fillWidth
-}) => $fillWidth && "width: 100%");
-const AccordionTrigger = styledComponents.styled(RadixAccordion__namespace.Trigger).withConfig({
-  componentId: "sc-1lb3204-2"
-})(["width:100%;border:none;padding:0;background-color:transparent;display:flex;align-items:center;", ";border-radius:inherit;&[data-state='open']{border-bottom-left-radius:0px;border-bottom-right-radius:0px;[data-icon='accordion-status']{color:", ";}}"], ({
-  theme,
-  $size = "md",
-  color = "default"
-}) => {
-  const size = $size === "none" ? "sm" : $size;
-  return `
-    padding: ${theme.click.container.space[$size]};
-    gap: ${theme.click.accordion[size].space.gap};
-    color: ${theme.click.accordion.color[color].label.default};
-    font: ${theme.click.accordion[size].typography.label.default};
-
-    &:active {
-      color: ${theme.click.accordion.color[color].label.active};
-      font: ${theme.click.accordion[size].typography.label.active};
-    }
-
-    &:hover {
-      color: ${theme.click.accordion.color[color].label.hover};
-      background: ${theme.click.global.color.stroke.default};
-      font: ${theme.click.accordion[size].typography.label.hover};
-      cursor: pointer;
-    }
-
-  [data-icon="accordion-status"] {
-    color: ${theme.global.color.stroke.intense};
-  }
-  `;
-}, ({
-  theme
-}) => theme.global.color.accent.default);
-const AccordionIconWrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-1lb3204-3"
-})(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);", "[data-state='open'] &{transform:rotate(90deg);}"], AccordionTrigger);
-const AccordionIconsWrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-1lb3204-4"
-})(["display:flex;align-items:center;justify-content:center;"]);
-const CustomIcon = styledComponents.styled(Icon.Icon).withConfig({
-  componentId: "sc-1lb3204-5"
-})(["", ""], ({
-  $isCompleted,
-  theme
-}) => $isCompleted && `
-        svg path {
-          stroke: ${theme.global.color.background.default} !important;
-          &:first-of-type {
-            stroke: ${theme.global.color.accent.default} !important;
-          }
-          fill: ${theme.global.color.accent.default} !important;;
-        }
-      `);
-const AccordionContent = styledComponents.styled(RadixAccordion__namespace.Content).withConfig({
-  componentId: "sc-1lb3204-6"
-})(["padding:", ";padding-top:0;"], ({
-  theme,
-  $padding
-}) => theme.click.container.space[$padding]);
-const AccordionItemTitle = styledComponents.styled(Text.Text).withConfig({
-  componentId: "sc-1lb3204-7"
-})(["overflow:hidden;"]);
 
 exports.MultiAccordion = MultiAccordion;
 //# sourceMappingURL=index.cjs.map