@clickhouse/click-ui 0.9.0 → 1.0.0-rc2

package/dist/esm/components/Button/Button.css

@@ -1,4 +1,4 @@
-.button__2ZuB7 {
+@layer clickui {.button__2ZuB7 {
   display: flex;
   position: relative;
   padding: var(--click-button-basic-space-y) var(--click-button-basic-space-x);
@@ -270,3 +270,4 @@
     animation: none;
   }
 }
+}

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

@@ -30,29 +30,52 @@ const buttonVariants = cva(styles.button, {
     align: "center"
   }
 });
-const Button = forwardRef(({
-  type = "primary",
-  htmlType,
-  iconLeft,
-  iconRight,
-  align = "center",
-  children,
-  fillWidth,
-  label,
-  loading = false,
-  disabled,
-  className,
-  ...delegated
-}, ref) => /* @__PURE__ */ jsxs("button", { type: htmlType, ref, className: cn(buttonVariants({
-  type,
-  align,
-  fillWidth,
-  loading
-}), className), disabled: disabled || loading, "aria-disabled": disabled || loading || void 0, "aria-busy": loading || void 0, ...delegated, children: [
-  iconLeft && /* @__PURE__ */ jsx("span", { className: styles.button__icon, children: /* @__PURE__ */ jsx(SvgImage, { name: iconLeft, "aria-hidden": true, size: "sm" }) }),
-  /* @__PURE__ */ jsx("span", { className: styles.button__label, children: label ?? children }),
-  iconRight && /* @__PURE__ */ jsx("span", { className: styles.button__icon, children: /* @__PURE__ */ jsx(SvgImage, { name: iconRight, "aria-hidden": true, size: "sm" }) })
-] }));
+const Button = forwardRef(
+  ({
+    type = "primary",
+    htmlType,
+    iconLeft,
+    iconRight,
+    align = "center",
+    children,
+    fillWidth,
+    label,
+    loading = false,
+    disabled,
+    className,
+    ...delegated
+  }, ref) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: htmlType,
+      ref,
+      className: cn(buttonVariants({ type, align, fillWidth, loading }), className),
+      disabled: disabled || loading,
+      "aria-disabled": disabled || loading || void 0,
+      "aria-busy": loading || void 0,
+      ...delegated,
+      children: [
+        iconLeft && /* @__PURE__ */ jsx("span", { className: styles.button__icon, children: /* @__PURE__ */ jsx(
+          SvgImage,
+          {
+            name: iconLeft,
+            "aria-hidden": true,
+            size: "sm"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("span", { className: styles.button__label, children: label ?? children }),
+        iconRight && /* @__PURE__ */ jsx("span", { className: styles.button__icon, children: /* @__PURE__ */ jsx(
+          SvgImage,
+          {
+            name: iconRight,
+            "aria-hidden": true,
+            size: "sm"
+          }
+        ) })
+      ]
+    }
+  )
+);
 Button.displayName = "Button";
 
 export { Button };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { forwardRef } from 'react';\nimport styles from './Button.module.css';\nimport { ButtonProps } from './Button.types';\n\nconst buttonVariants = cva(styles.button, {\n  variants: {\n    type: {\n      primary: styles['button_primary'],\n      secondary: styles['button_secondary'],\n      empty: styles['button_empty'],\n      danger: styles['button_danger'],\n    },\n    align: {\n      center: styles['button_align-center'],\n      left: styles['button_align-left'],\n    },\n    fillWidth: {\n      true: styles['button_fill_width'],\n    },\n    loading: {\n      true: styles['button_loading'],\n    },\n  },\n  defaultVariants: {\n    type: 'primary',\n    align: 'center',\n  },\n});\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      htmlType,\n      iconLeft,\n      iconRight,\n      align = 'center',\n      children,\n      fillWidth,\n      label,\n      loading = false,\n      disabled,\n      className,\n      ...delegated\n    },\n    ref\n  ) => (\n    <button\n      type={htmlType}\n      ref={ref}\n      className={cn(buttonVariants({ type, align, fillWidth, loading }), className)}\n      disabled={disabled || loading}\n      aria-disabled={disabled || loading || undefined}\n      aria-busy={loading || undefined}\n      {...delegated}\n    >\n      {iconLeft && (\n        <span className={styles.button__icon}>\n          <Icon\n            name={iconLeft}\n            aria-hidden\n            size=\"sm\"\n          />\n        </span>\n      )}\n\n      <span className={styles.button__label}>{label ?? children}</span>\n\n      {iconRight && (\n        <span className={styles.button__icon}>\n          <Icon\n            name={iconRight}\n            aria-hidden\n            size=\"sm\"\n          />\n        </span>\n      )}\n    </button>\n  )\n);\n\nButton.displayName = 'Button';\n"],"names":["buttonVariants","cva","styles","button","variants","type","primary","secondary","empty","danger","align","center","left","fillWidth","true","loading","defaultVariants","Button","forwardRef","htmlType","iconLeft","iconRight","children","label","disabled","className","delegated","ref","cn","undefined","button__icon","Icon","button__label","displayName"],"mappings":";;;;;;;AAMA,MAAMA,cAAAA,GAAiBC,GAAAA,CAAIC,MAAAA,CAAOC,MAAAA,EAAQ;AAAA,EACxCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,OAAO,gBAAgB,CAAA;AAAA,MAChCK,SAAAA,EAAWL,OAAO,kBAAkB,CAAA;AAAA,MACpCM,KAAAA,EAAON,OAAO,cAAc,CAAA;AAAA,MAC5BO,MAAAA,EAAQP,OAAO,eAAe;AAAA,KAChC;AAAA,IACAQ,KAAAA,EAAO;AAAA,MACLC,MAAAA,EAAQT,OAAO,qBAAqB,CAAA;AAAA,MACpCU,IAAAA,EAAMV,OAAO,mBAAmB;AAAA,KAClC;AAAA,IACAW,SAAAA,EAAW;AAAA,MACTC,IAAAA,EAAMZ,OAAO,mBAAmB;AAAA,KAClC;AAAA,IACAa,OAAAA,EAAS;AAAA,MACPD,IAAAA,EAAMZ,OAAO,gBAAgB;AAAA;AAC/B,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,SAAA;AAAA,IACNK,KAAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAEM,MAAMO,MAAAA,GAASC,WACpB,CACE;AAAA,EACEb,IAAAA,GAAO,SAAA;AAAA,EACPc,QAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAX,KAAAA,GAAQ,QAAA;AAAA,EACRY,QAAAA;AAAAA,EACAT,SAAAA;AAAAA,EACAU,KAAAA;AAAAA,EACAR,OAAAA,GAAU,KAAA;AAAA,EACVS,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACL,CAAA,EACAC,GAAAA,0BAEC,QAAA,EAAA,EACC,IAAA,EAAMR,UACN,GAAA,EACA,SAAA,EAAWS,GAAG5B,cAAAA,CAAe;AAAA,EAAEK,IAAAA;AAAAA,EAAMK,KAAAA;AAAAA,EAAOG,SAAAA;AAAAA,EAAWE;AAAQ,CAAC,CAAA,EAAGU,SAAS,CAAA,EAC5E,QAAA,EAAUD,YAAYT,OAAAA,EACtB,eAAA,EAAeS,QAAAA,IAAYT,OAAAA,IAAWc,MAAAA,EACtC,WAAA,EAAWd,OAAAA,IAAWc,MAAAA,EACtB,GAAIH,SAAAA,EAEHN,QAAAA,EAAAA;AAAAA,EAAAA,QAAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWlB,MAAAA,CAAO4B,YAAAA,EACtB,QAAA,kBAAA,GAAA,CAACC,QAAA,EAAA,EACC,IAAA,EAAMX,QAAAA,EACN,aAAA,EAAW,IAAA,EACX,IAAA,EAAK,MAAI,CAAA,EAEb,CAAA;AAAA,sBAGD,MAAA,EAAA,EAAK,SAAA,EAAWlB,MAAAA,CAAO8B,aAAAA,EAAgBT,mBAASD,QAAAA,EAAS,CAAA;AAAA,EAEzDD,SAAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWnB,OAAO4B,YAAAA,EACtB,QAAA,kBAAA,GAAA,CAACC,QAAA,EAAA,EACC,IAAA,EAAMV,SAAAA,EACN,aAAA,EAAW,IAAA,EACX,IAAA,EAAK,MAAI,CAAA,EAEb;AAAA,CAAA,EAEJ,CAEJ;AAEAJ,MAAAA,CAAOgB,WAAAA,GAAc,QAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { forwardRef } from 'react';\nimport styles from './Button.module.css';\nimport { ButtonProps } from './Button.types';\n\nconst buttonVariants = cva(styles.button, {\n  variants: {\n    type: {\n      primary: styles['button_primary'],\n      secondary: styles['button_secondary'],\n      empty: styles['button_empty'],\n      danger: styles['button_danger'],\n    },\n    align: {\n      center: styles['button_align-center'],\n      left: styles['button_align-left'],\n    },\n    fillWidth: {\n      true: styles['button_fill_width'],\n    },\n    loading: {\n      true: styles['button_loading'],\n    },\n  },\n  defaultVariants: {\n    type: 'primary',\n    align: 'center',\n  },\n});\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      htmlType,\n      iconLeft,\n      iconRight,\n      align = 'center',\n      children,\n      fillWidth,\n      label,\n      loading = false,\n      disabled,\n      className,\n      ...delegated\n    },\n    ref\n  ) => (\n    <button\n      type={htmlType}\n      ref={ref}\n      className={cn(buttonVariants({ type, align, fillWidth, loading }), className)}\n      disabled={disabled || loading}\n      aria-disabled={disabled || loading || undefined}\n      aria-busy={loading || undefined}\n      {...delegated}\n    >\n      {iconLeft && (\n        <span className={styles.button__icon}>\n          <Icon\n            name={iconLeft}\n            aria-hidden\n            size=\"sm\"\n          />\n        </span>\n      )}\n\n      <span className={styles.button__label}>{label ?? children}</span>\n\n      {iconRight && (\n        <span className={styles.button__icon}>\n          <Icon\n            name={iconRight}\n            aria-hidden\n            size=\"sm\"\n          />\n        </span>\n      )}\n    </button>\n  )\n);\n\nButton.displayName = 'Button';\n"],"names":["Icon"],"mappings":";;;;;;;AAMA,MAAM,cAAA,GAAiB,GAAA,CAAI,MAAA,CAAO,MAAA,EAAQ;AAAA,EACxC,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,OAAO,gBAAgB,CAAA;AAAA,MAChC,SAAA,EAAW,OAAO,kBAAkB,CAAA;AAAA,MACpC,KAAA,EAAO,OAAO,cAAc,CAAA;AAAA,MAC5B,MAAA,EAAQ,OAAO,eAAe;AAAA,KAChC;AAAA,IACA,KAAA,EAAO;AAAA,MACL,MAAA,EAAQ,OAAO,qBAAqB,CAAA;AAAA,MACpC,IAAA,EAAM,OAAO,mBAAmB;AAAA,KAClC;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,OAAO,mBAAmB;AAAA,KAClC;AAAA,IACA,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,OAAO,gBAAgB;AAAA;AAC/B,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAEM,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CACE;AAAA,IACE,IAAA,GAAO,SAAA;AAAA,IACP,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA,GAAQ,QAAA;AAAA,IACR,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA,GAAU,KAAA;AAAA,IACV,QAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,qBAEA,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,QAAA;AAAA,MACN,GAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,cAAA,CAAe,EAAE,IAAA,EAAM,OAAO,SAAA,EAAW,OAAA,EAAS,CAAA,EAAG,SAAS,CAAA;AAAA,MAC5E,UAAU,QAAA,IAAY,OAAA;AAAA,MACtB,eAAA,EAAe,YAAY,OAAA,IAAW,MAAA;AAAA,MACtC,aAAW,OAAA,IAAW,MAAA;AAAA,MACrB,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,YAAA,EACtB,QAAA,kBAAA,GAAA;AAAA,UAACA,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,QAAA;AAAA,YACN,aAAA,EAAW,IAAA;AAAA,YACX,IAAA,EAAK;AAAA;AAAA,SACP,EACF,CAAA;AAAA,4BAGD,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,aAAA,EAAgB,mBAAS,QAAA,EAAS,CAAA;AAAA,QAEzD,SAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAO,YAAA,EACtB,QAAA,kBAAA,GAAA;AAAA,UAACA,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,SAAA;AAAA,YACN,aAAA,EAAW,IAAA;AAAA,YACX,IAAA,EAAK;AAAA;AAAA,SACP,EACF;AAAA;AAAA;AAAA;AAIR;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}

package/dist/esm/components/ButtonGroup/ButtonGroup.css

@@ -1,4 +1,4 @@
-.buttongroup__9IkOe {
+@layer clickui {.buttongroup__9IkOe {
   display: inline-flex;
   box-sizing: border-box;
   flex-direction: row;
@@ -120,3 +120,4 @@
 .button__w1Is2[aria-pressed='true']:disabled {
   background: var(--click-button-group-color-background-disabled-active);
 }
+}

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

@@ -16,9 +16,7 @@ const wrapperVariants = cva(styles.buttongroup, {
       true: styles["buttongroup_fillwidth"]
     }
   },
-  defaultVariants: {
-    type: "default"
-  }
+  defaultVariants: { type: "default" }
 });
 const buttonVariants = cva(styles.button, {
   variants: {
@@ -34,19 +32,19 @@ const buttonVariants = cva(styles.button, {
       true: styles["button_fillwidth"]
     }
   },
-  compoundVariants: [{
-    iconOnly: true,
-    type: "default",
-    class: styles["button_icon-only_default"]
-  }, {
-    iconOnly: true,
-    type: "borderless",
-    class: styles["button_icon-only_borderless"]
-  }],
-  defaultVariants: {
-    type: "default",
-    iconOnly: false
-  }
+  compoundVariants: [
+    {
+      iconOnly: true,
+      type: "default",
+      class: styles["button_icon-only_default"]
+    },
+    {
+      iconOnly: true,
+      type: "borderless",
+      class: styles["button_icon-only_borderless"]
+    }
+  ],
+  defaultVariants: { type: "default", iconOnly: false }
 });
 const normalizeToSet = (value) => {
   if (value === void 0) {
@@ -60,58 +58,98 @@ const normalizeToSet = (value) => {
 const isValueSelected = (value, selection) => {
   return selection.has(value);
 };
-const ButtonGroup = forwardRef(({
-  options,
-  selected,
-  defaultSelected,
-  fillWidth = false,
-  onClick,
-  type = "default",
-  iconOnly = false,
-  multiple = false,
-  className,
-  ...props
-}, ref) => {
-  const [internalSelection, setInternalSelection] = useState(() => normalizeToSet(defaultSelected));
-  const isControlled = selected !== void 0;
-  const currentSelection = isControlled ? normalizeToSet(selected) : internalSelection;
-  const onButtonGroupClickCommonHandler = useCallback((value) => {
-    let newSelection;
-    if (multiple) {
-      newSelection = new Set(currentSelection);
-      if (newSelection.has(value)) {
-        newSelection.delete(value);
-      } else {
-        newSelection.add(value);
+const ButtonGroup = forwardRef(
+  ({
+    options,
+    selected,
+    defaultSelected,
+    fillWidth = false,
+    onClick,
+    type = "default",
+    iconOnly = false,
+    multiple = false,
+    className,
+    ...props
+  }, ref) => {
+    const [internalSelection, setInternalSelection] = useState(
+      () => normalizeToSet(defaultSelected)
+    );
+    const isControlled = selected !== void 0;
+    const currentSelection = isControlled ? normalizeToSet(selected) : internalSelection;
+    const onButtonGroupClickCommonHandler = useCallback(
+      (value) => {
+        let newSelection;
+        if (multiple) {
+          newSelection = new Set(currentSelection);
+          if (newSelection.has(value)) {
+            newSelection.delete(value);
+          } else {
+            newSelection.add(value);
+          }
+        } else {
+          newSelection = /* @__PURE__ */ new Set([value]);
+        }
+        if (!isControlled) {
+          setInternalSelection(newSelection);
+        }
+        onClick?.(value, multiple ? newSelection : value);
+      },
+      [currentSelection, multiple, isControlled, onClick]
+    );
+    const buttons = options.map(
+      ({
+        value,
+        label,
+        icon,
+        className: optionClassName,
+        "aria-label": ariaLabel,
+        ...buttonProps
+      }) => {
+        const isActive = isValueSelected(value, currentSelection);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cn(buttonVariants({ type, iconOnly, fillWidth }), optionClassName),
+            "aria-pressed": isActive,
+            onClick: () => onButtonGroupClickCommonHandler(value),
+            role: "button",
+            ...buttonProps,
+            "aria-label": ariaLabel ?? (iconOnly && icon ? icon.toString() : void 0),
+            children: iconOnly && icon ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  styles.button__icon,
+                  type === "borderless" && styles["button__icon_height_line"]
+                ),
+                children: /* @__PURE__ */ jsx(
+                  SvgImage,
+                  {
+                    name: icon,
+                    size: "sm",
+                    "aria-hidden": true
+                  }
+                )
+              }
+            ) : label
+          },
+          value
+        );
       }
-    } else {
-      newSelection = /* @__PURE__ */ new Set([value]);
-    }
-    if (!isControlled) {
-      setInternalSelection(newSelection);
-    }
-    onClick?.(value, multiple ? newSelection : value);
-  }, [currentSelection, multiple, isControlled, onClick]);
-  const buttons = options.map(({
-    value,
-    label,
-    icon,
-    className: optionClassName,
-    "aria-label": ariaLabel,
-    ...buttonProps
-  }) => {
-    const isActive = isValueSelected(value, currentSelection);
-    return /* @__PURE__ */ jsx("button", { type: "button", className: cn(buttonVariants({
-      type,
-      iconOnly,
-      fillWidth
-    }), optionClassName), "aria-pressed": isActive, onClick: () => onButtonGroupClickCommonHandler(value), role: "button", ...buttonProps, "aria-label": ariaLabel ?? (iconOnly && icon ? icon.toString() : void 0), children: iconOnly && icon ? /* @__PURE__ */ jsx("span", { className: cn(styles.button__icon, type === "borderless" && styles["button__icon_height_line"]), children: /* @__PURE__ */ jsx(SvgImage, { name: icon, size: "sm", "aria-hidden": true }) }) : label }, value);
-  });
-  return /* @__PURE__ */ jsx("div", { ref, ...props, className: cn(wrapperVariants({
-    type,
-    fillWidth
-  }), className), role: "group", children: buttons });
-});
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cn(wrapperVariants({ type, fillWidth }), className),
+        role: "group",
+        children: buttons
+      }
+    );
+  }
+);
 ButtonGroup.displayName = "ButtonGroup";
 
 export { ButtonGroup };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { ButtonGroupProps, SelectionValue } from './ButtonGroup.types';\nimport styles from './ButtonGroup.module.css';\n\nconst wrapperVariants = cva(styles.buttongroup, {\n  variants: {\n    type: {\n      default: styles['buttongroup_type_default'],\n      borderless: styles['buttongroup_type_borderless'],\n    },\n    fillWidth: {\n      true: styles['buttongroup_fillwidth'],\n    },\n  },\n  defaultVariants: { type: 'default' },\n});\n\nconst buttonVariants = cva(styles.button, {\n  variants: {\n    type: {\n      default: styles['button_type_default'],\n      borderless: styles['button_type_borderless'],\n    },\n    iconOnly: {\n      true: '',\n      false: '',\n    },\n    fillWidth: {\n      true: styles['button_fillwidth'],\n    },\n  },\n  compoundVariants: [\n    {\n      iconOnly: true,\n      type: 'default',\n      class: styles['button_icon-only_default'],\n    },\n    {\n      iconOnly: true,\n      type: 'borderless',\n      class: styles['button_icon-only_borderless'],\n    },\n  ],\n  defaultVariants: { type: 'default', iconOnly: false },\n});\n\nconst normalizeToSet = (value: SelectionValue | undefined): Set<string> => {\n  if (value === undefined) {\n    return new Set();\n  }\n  if (value instanceof Set) {\n    return new Set(value);\n  }\n  return new Set([value]);\n};\n\nconst isValueSelected = (value: string, selection: Set<string>): boolean => {\n  return selection.has(value);\n};\n\nexport const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(\n  (\n    {\n      options,\n      selected,\n      defaultSelected,\n      fillWidth = false,\n      onClick,\n      type = 'default',\n      iconOnly = false,\n      multiple = false,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalSelection, setInternalSelection] = useState<Set<string>>(() =>\n      normalizeToSet(defaultSelected)\n    );\n\n    // Use `selected` if the parent needs to own\n    // or sync the selection state management (controlled\n    // by consumer app)\n    // Use `defaultSelected` if the component can manage\n    // its own state independently (uncontrolled)\n    const isControlled = selected !== undefined;\n    const currentSelection = isControlled ? normalizeToSet(selected) : internalSelection;\n\n    const onButtonGroupClickCommonHandler = useCallback(\n      (value: string) => {\n        let newSelection: Set<string>;\n\n        if (multiple) {\n          newSelection = new Set(currentSelection);\n          if (newSelection.has(value)) {\n            newSelection.delete(value);\n          } else {\n            newSelection.add(value);\n          }\n        } else {\n          newSelection = new Set([value]);\n        }\n\n        if (!isControlled) {\n          setInternalSelection(newSelection);\n        }\n\n        // WARN: Single mode returns string\n        // while multiple mode returns Set (DS)\n        onClick?.(value, multiple ? newSelection : value);\n      },\n      [currentSelection, multiple, isControlled, onClick]\n    );\n\n    const buttons = options.map(\n      ({\n        value,\n        label,\n        icon,\n        className: optionClassName,\n        'aria-label': ariaLabel,\n        ...buttonProps\n      }) => {\n        const isActive = isValueSelected(value, currentSelection);\n\n        return (\n          <button\n            key={value}\n            type=\"button\"\n            className={cn(buttonVariants({ type, iconOnly, fillWidth }), optionClassName)}\n            aria-pressed={isActive}\n            onClick={() => onButtonGroupClickCommonHandler(value)}\n            role=\"button\"\n            {...buttonProps}\n            aria-label={ariaLabel ?? (iconOnly && icon ? icon.toString() : undefined)}\n          >\n            {iconOnly && icon ? (\n              <span\n                className={cn(\n                  styles.button__icon,\n                  type === 'borderless' && styles['button__icon_height_line']\n                )}\n              >\n                <Icon\n                  name={icon}\n                  size=\"sm\"\n                  aria-hidden\n                />\n              </span>\n            ) : (\n              label\n            )}\n          </button>\n        );\n      }\n    );\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        className={cn(wrapperVariants({ type, fillWidth }), className)}\n        role=\"group\"\n      >\n        {buttons}\n      </div>\n    );\n  }\n);\n\nButtonGroup.displayName = 'ButtonGroup';\n"],"names":["wrapperVariants","cva","styles","buttongroup","variants","type","default","borderless","fillWidth","true","defaultVariants","buttonVariants","button","iconOnly","false","compoundVariants","class","normalizeToSet","value","undefined","Set","isValueSelected","selection","has","ButtonGroup","forwardRef","options","selected","defaultSelected","onClick","multiple","className","props","ref","internalSelection","setInternalSelection","useState","isControlled","currentSelection","onButtonGroupClickCommonHandler","useCallback","newSelection","delete","add","buttons","map","label","icon","optionClassName","ariaLabel","buttonProps","isActive","cn","toString","button__icon","Icon","displayName"],"mappings":";;;;;;;AAMA,MAAMA,eAAAA,GAAkBC,GAAAA,CAAIC,MAAAA,CAAOC,WAAAA,EAAa;AAAA,EAC9CC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,OAAO,0BAA0B,CAAA;AAAA,MAC1CK,UAAAA,EAAYL,OAAO,6BAA6B;AAAA,KAClD;AAAA,IACAM,SAAAA,EAAW;AAAA,MACTC,IAAAA,EAAMP,OAAO,uBAAuB;AAAA;AACtC,GACF;AAAA,EACAQ,eAAAA,EAAiB;AAAA,IAAEL,IAAAA,EAAM;AAAA;AAC3B,CAAC,CAAA;AAED,MAAMM,cAAAA,GAAiBV,GAAAA,CAAIC,MAAAA,CAAOU,MAAAA,EAAQ;AAAA,EACxCR,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,OAAO,qBAAqB,CAAA;AAAA,MACrCK,UAAAA,EAAYL,OAAO,wBAAwB;AAAA,KAC7C;AAAA,IACAW,QAAAA,EAAU;AAAA,MACRJ,IAAAA,EAAM,EAAA;AAAA,MACNK,KAAAA,EAAO;AAAA,KACT;AAAA,IACAN,SAAAA,EAAW;AAAA,MACTC,IAAAA,EAAMP,OAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACAa,kBAAkB,CAChB;AAAA,IACEF,QAAAA,EAAU,IAAA;AAAA,IACVR,IAAAA,EAAM,SAAA;AAAA,IACNW,KAAAA,EAAOd,OAAO,0BAA0B;AAAA,GAC1C,EACA;AAAA,IACEW,QAAAA,EAAU,IAAA;AAAA,IACVR,IAAAA,EAAM,YAAA;AAAA,IACNW,KAAAA,EAAOd,OAAO,6BAA6B;AAAA,GAC5C,CAAA;AAAA,EAEHQ,eAAAA,EAAiB;AAAA,IAAEL,IAAAA,EAAM,SAAA;AAAA,IAAWQ,QAAAA,EAAU;AAAA;AAChD,CAAC,CAAA;AAED,MAAMI,cAAAA,GAAiBA,CAACC,KAAAA,KAAmD;AACzE,EAAA,IAAIA,UAAUC,MAAAA,EAAW;AACvB,IAAA,2BAAWC,GAAAA,EAAI;AAAA,EACjB;AACA,EAAA,IAAIF,iBAAiBE,GAAAA,EAAK;AACxB,IAAA,OAAO,IAAIA,IAAIF,KAAK,CAAA;AAAA,EACtB;AACA,EAAA,uBAAO,IAAIE,GAAAA,CAAI,CAACF,KAAK,CAAC,CAAA;AACxB,CAAA;AAEA,MAAMG,eAAAA,GAAkBA,CAACH,KAAAA,EAAeI,SAAAA,KAAoC;AAC1E,EAAA,OAAOA,SAAAA,CAAUC,IAAIL,KAAK,CAAA;AAC5B,CAAA;AAEO,MAAMM,WAAAA,GAAcC,WACzB,CACE;AAAA,EACEC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACApB,SAAAA,GAAY,KAAA;AAAA,EACZqB,OAAAA;AAAAA,EACAxB,IAAAA,GAAO,SAAA;AAAA,EACPQ,QAAAA,GAAW,KAAA;AAAA,EACXiB,QAAAA,GAAW,KAAA;AAAA,EACXC,SAAAA;AAAAA,EACA,GAAGC;AACL,CAAA,EACAC,GAAAA,KACG;AACH,EAAA,MAAM,CAACC,mBAAmBC,oBAAoB,CAAA,GAAIC,SAAsB,MACtEnB,cAAAA,CAAeW,eAAe,CAChC,CAAA;AAOA,EAAA,MAAMS,eAAeV,QAAAA,KAAaR,MAAAA;AAClC,EAAA,MAAMmB,gBAAAA,GAAmBD,YAAAA,GAAepB,cAAAA,CAAeU,QAAQ,CAAA,GAAIO,iBAAAA;AAEnE,EAAA,MAAMK,+BAAAA,GAAkCC,WAAAA,CACtC,CAACtB,KAAAA,KAAkB;AACjB,IAAA,IAAIuB,YAAAA;AAEJ,IAAA,IAAIX,QAAAA,EAAU;AACZW,MAAAA,YAAAA,GAAe,IAAIrB,IAAIkB,gBAAgB,CAAA;AACvC,MAAA,IAAIG,YAAAA,CAAalB,GAAAA,CAAIL,KAAK,CAAA,EAAG;AAC3BuB,QAAAA,YAAAA,CAAaC,OAAOxB,KAAK,CAAA;AAAA,MAC3B,CAAA,MAAO;AACLuB,QAAAA,YAAAA,CAAaE,IAAIzB,KAAK,CAAA;AAAA,MACxB;AAAA,IACF,CAAA,MAAO;AACLuB,MAAAA,YAAAA,mBAAe,IAAIrB,GAAAA,CAAI,CAACF,KAAK,CAAC,CAAA;AAAA,IAChC;AAEA,IAAA,IAAI,CAACmB,YAAAA,EAAc;AACjBF,MAAAA,oBAAAA,CAAqBM,YAAY,CAAA;AAAA,IACnC;AAIAZ,IAAAA,OAAAA,GAAUX,KAAAA,EAAOY,QAAAA,GAAWW,YAAAA,GAAevB,KAAK,CAAA;AAAA,EAClD,GACA,CAACoB,gBAAAA,EAAkBR,QAAAA,EAAUO,YAAAA,EAAcR,OAAO,CACpD,CAAA;AAEA,EAAA,MAAMe,OAAAA,GAAUlB,OAAAA,CAAQmB,GAAAA,CACtB,CAAC;AAAA,IACC3B,KAAAA;AAAAA,IACA4B,KAAAA;AAAAA,IACAC,IAAAA;AAAAA,IACAhB,SAAAA,EAAWiB,eAAAA;AAAAA,IACX,YAAA,EAAcC,SAAAA;AAAAA,IACd,GAAGC;AAAAA,GACL,KAAM;AACJ,IAAA,MAAMC,QAAAA,GAAW9B,eAAAA,CAAgBH,KAAAA,EAAOoB,gBAAgB,CAAA;AAExD,IAAA,2BACG,QAAA,EAAA,EAEC,IAAA,EAAK,QAAA,EACL,SAAA,EAAWc,GAAGzC,cAAAA,CAAe;AAAA,MAAEN,IAAAA;AAAAA,MAAMQ,QAAAA;AAAAA,MAAUL;AAAAA,KAAW,GAAGwC,eAAe,CAAA,EAC5E,gBAAcG,QAAAA,EACd,OAAA,EAAS,MAAMZ,+BAAAA,CAAgCrB,KAAK,CAAA,EACpD,MAAK,QAAA,KACDgC,aACJ,YAAA,EAAYD,SAAAA,KAAcpC,YAAYkC,IAAAA,GAAOA,IAAAA,CAAKM,QAAAA,EAAS,GAAIlC,MAAAA,CAAAA,EAE9DN,QAAAA,EAAAA,QAAAA,IAAYkC,uBACX,GAAA,CAAC,MAAA,EAAA,EACC,WAAWK,EAAAA,CACTlD,MAAAA,CAAOoD,cACPjD,IAAAA,KAAS,YAAA,IAAgBH,MAAAA,CAAO,0BAA0B,CAC5D,CAAA,EAEA,8BAACqD,QAAA,EAAA,EACC,IAAA,EAAMR,MACN,IAAA,EAAK,IAAA,EACL,eAAW,IAAA,EAAA,CAAA,EAEf,CAAA,GAEAD,KAAAA,EAAAA,EAvBG5B,KAyBP,CAAA;AAAA,EAEJ,CACF,CAAA;AAEA,EAAA,2BACG,KAAA,EAAA,EACC,GAAA,KACIc,KAAAA,EACJ,SAAA,EAAWoB,GAAGpD,eAAAA,CAAgB;AAAA,IAAEK,IAAAA;AAAAA,IAAMG;AAAAA,GAAW,CAAA,EAAGuB,SAAS,CAAA,EAC7D,IAAA,EAAK,SAEJa,QAAAA,EAAAA,OAAAA,EACH,CAAA;AAEJ,CACF;AAEApB,WAAAA,CAAYgC,WAAAA,GAAc,aAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { ButtonGroupProps, SelectionValue } from './ButtonGroup.types';\nimport styles from './ButtonGroup.module.css';\n\nconst wrapperVariants = cva(styles.buttongroup, {\n  variants: {\n    type: {\n      default: styles['buttongroup_type_default'],\n      borderless: styles['buttongroup_type_borderless'],\n    },\n    fillWidth: {\n      true: styles['buttongroup_fillwidth'],\n    },\n  },\n  defaultVariants: { type: 'default' },\n});\n\nconst buttonVariants = cva(styles.button, {\n  variants: {\n    type: {\n      default: styles['button_type_default'],\n      borderless: styles['button_type_borderless'],\n    },\n    iconOnly: {\n      true: '',\n      false: '',\n    },\n    fillWidth: {\n      true: styles['button_fillwidth'],\n    },\n  },\n  compoundVariants: [\n    {\n      iconOnly: true,\n      type: 'default',\n      class: styles['button_icon-only_default'],\n    },\n    {\n      iconOnly: true,\n      type: 'borderless',\n      class: styles['button_icon-only_borderless'],\n    },\n  ],\n  defaultVariants: { type: 'default', iconOnly: false },\n});\n\nconst normalizeToSet = (value: SelectionValue | undefined): Set<string> => {\n  if (value === undefined) {\n    return new Set();\n  }\n  if (value instanceof Set) {\n    return new Set(value);\n  }\n  return new Set([value]);\n};\n\nconst isValueSelected = (value: string, selection: Set<string>): boolean => {\n  return selection.has(value);\n};\n\nexport const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(\n  (\n    {\n      options,\n      selected,\n      defaultSelected,\n      fillWidth = false,\n      onClick,\n      type = 'default',\n      iconOnly = false,\n      multiple = false,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalSelection, setInternalSelection] = useState<Set<string>>(() =>\n      normalizeToSet(defaultSelected)\n    );\n\n    // Use `selected` if the parent needs to own\n    // or sync the selection state management (controlled\n    // by consumer app)\n    // Use `defaultSelected` if the component can manage\n    // its own state independently (uncontrolled)\n    const isControlled = selected !== undefined;\n    const currentSelection = isControlled ? normalizeToSet(selected) : internalSelection;\n\n    const onButtonGroupClickCommonHandler = useCallback(\n      (value: string) => {\n        let newSelection: Set<string>;\n\n        if (multiple) {\n          newSelection = new Set(currentSelection);\n          if (newSelection.has(value)) {\n            newSelection.delete(value);\n          } else {\n            newSelection.add(value);\n          }\n        } else {\n          newSelection = new Set([value]);\n        }\n\n        if (!isControlled) {\n          setInternalSelection(newSelection);\n        }\n\n        // WARN: Single mode returns string\n        // while multiple mode returns Set (DS)\n        onClick?.(value, multiple ? newSelection : value);\n      },\n      [currentSelection, multiple, isControlled, onClick]\n    );\n\n    const buttons = options.map(\n      ({\n        value,\n        label,\n        icon,\n        className: optionClassName,\n        'aria-label': ariaLabel,\n        ...buttonProps\n      }) => {\n        const isActive = isValueSelected(value, currentSelection);\n\n        return (\n          <button\n            key={value}\n            type=\"button\"\n            className={cn(buttonVariants({ type, iconOnly, fillWidth }), optionClassName)}\n            aria-pressed={isActive}\n            onClick={() => onButtonGroupClickCommonHandler(value)}\n            role=\"button\"\n            {...buttonProps}\n            aria-label={ariaLabel ?? (iconOnly && icon ? icon.toString() : undefined)}\n          >\n            {iconOnly && icon ? (\n              <span\n                className={cn(\n                  styles.button__icon,\n                  type === 'borderless' && styles['button__icon_height_line']\n                )}\n              >\n                <Icon\n                  name={icon}\n                  size=\"sm\"\n                  aria-hidden\n                />\n              </span>\n            ) : (\n              label\n            )}\n          </button>\n        );\n      }\n    );\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        className={cn(wrapperVariants({ type, fillWidth }), className)}\n        role=\"group\"\n      >\n        {buttons}\n      </div>\n    );\n  }\n);\n\nButtonGroup.displayName = 'ButtonGroup';\n"],"names":["Icon"],"mappings":"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"}

package/dist/esm/components/CardHorizontal/CardHorizontal.css

@@ -1,4 +1,4 @@
-.header__Cn2aH {
+@layer clickui {.header__Cn2aH {
   max-width: 100%;
   gap: inherit;
 }
@@ -214,3 +214,4 @@
   border: 1px solid var(--card-stroke-active);
 }
 /* stylelint-enable no-descending-specificity */
+}

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

@@ -45,9 +45,7 @@ const contentWrapperVariants = cva(styles.contentwrapper, {
       md: styles["contentwrapper_size_md"]
     }
   },
-  defaultVariants: {
-    size: "md"
-  }
+  defaultVariants: { size: "md" }
 });
 const iconTextContentWrapperVariants = cva(styles.icontextcontentwrapper, {
   variants: {
@@ -60,10 +58,7 @@ const iconTextContentWrapperVariants = cva(styles.icontextcontentwrapper, {
       top: styles["icontextcontentwrapper_alignment_top"]
     }
   },
-  defaultVariants: {
-    size: "md",
-    alignment: "center"
-  }
+  defaultVariants: { size: "md", alignment: "center" }
 });
 const CardHorizontal = ({
   title,
@@ -98,32 +93,108 @@ const CardHorizontal = ({
       window.open(infoUrl, "_blank");
     }
   };
-  return /* @__PURE__ */ jsx("div", { tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, onClick: handleClick, ...props, className: cn(wrapperVariants({
-    color,
-    size,
-    alignment,
-    selectable: isSelectable,
-    selected: isSelected,
-    disabled
-  }), className), children: /* @__PURE__ */ jsxs("div", { className: cn(contentWrapperVariants({
-    size
-  })), children: [
-    /* @__PURE__ */ jsxs("div", { className: cn(iconTextContentWrapperVariants({
-      size,
-      alignment
-    })), children: [
-      icon && /* @__PURE__ */ jsx(SvgImage, { name: icon, "aria-hidden": true, className: styles.cardicon }),
-      /* @__PURE__ */ jsxs(Container, { padding: "none", orientation: "vertical", children: [
-        title && /* @__PURE__ */ jsxs(Container, { className: styles.header, isResponsive: false, gap: "xs", justifyContent: "space-between", fillWidth: true, children: [
-          /* @__PURE__ */ jsx(Container, { orientation: "horizontal", gap: "xs", isResponsive: false, fillWidth: false, grow: "1", children: title }),
-          badgeText && /* @__PURE__ */ jsx(Container, { isResponsive: false, justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-badge", children: /* @__PURE__ */ jsx(Badge, { text: badgeText, size: "md", state: badgeState, icon: badgeIcon, iconDir: badgeIconDir }) })
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": disabled,
+      onClick: handleClick,
+      ...props,
+      className: cn(
+        wrapperVariants({
+          color,
+          size,
+          alignment,
+          selectable: isSelectable,
+          selected: isSelected,
+          disabled
+        }),
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: cn(contentWrapperVariants({ size })), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn(iconTextContentWrapperVariants({ size, alignment })), children: [
+          icon && /* @__PURE__ */ jsx(
+            SvgImage,
+            {
+              name: icon,
+              "aria-hidden": true,
+              className: styles.cardicon
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Container,
+            {
+              padding: "none",
+              orientation: "vertical",
+              children: [
+                title && /* @__PURE__ */ jsxs(
+                  Container,
+                  {
+                    className: styles.header,
+                    isResponsive: false,
+                    gap: "xs",
+                    justifyContent: "space-between",
+                    fillWidth: true,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Container,
+                        {
+                          orientation: "horizontal",
+                          gap: "xs",
+                          isResponsive: false,
+                          fillWidth: false,
+                          grow: "1",
+                          children: title
+                        }
+                      ),
+                      badgeText && /* @__PURE__ */ jsx(
+                        Container,
+                        {
+                          isResponsive: false,
+                          justifyContent: "end",
+                          fillWidth: false,
+                          "data-testid": "horizontal-card-badge",
+                          children: /* @__PURE__ */ jsx(
+                            Badge,
+                            {
+                              text: badgeText,
+                              size: "md",
+                              state: badgeState,
+                              icon: badgeIcon,
+                              iconDir: badgeIconDir
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                description && /* @__PURE__ */ jsx("div", { className: styles.description, children: description }),
+                children && /* @__PURE__ */ jsx("div", { className: styles.description, children })
+              ]
+            }
+          )
         ] }),
-        description && /* @__PURE__ */ jsx("div", { className: styles.description, children: description }),
-        children && /* @__PURE__ */ jsx("div", { className: styles.description, children })
+        infoText && /* @__PURE__ */ jsx(
+          Container,
+          {
+            justifyContent: "end",
+            fillWidth: false,
+            "data-testid": "horizontal-card-button",
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                label: infoText,
+                onClick: handleClick,
+                disabled,
+                fillWidth: true
+              }
+            )
+          }
+        )
       ] })
-    ] }),
-    infoText && /* @__PURE__ */ jsx(Container, { justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-button", children: /* @__PURE__ */ jsx(Button, { label: infoText, onClick: handleClick, disabled, fillWidth: true }) })
-  ] }) });
+    }
+  );
 };
 
 export { CardHorizontal };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/CardHorizontal/CardHorizontal.tsx"],"sourcesContent":["import { Badge } from '@/components/Badge';\nimport { Button } from '@/components/Button';\nimport { Container } from '@/components/Container';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { CardHorizontalProps } from './CardHorizontal.types';\nimport styles from './CardHorizontal.module.css';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    color: {\n      default: styles['wrapper_color_default'],\n      muted: styles['wrapper_color_muted'],\n    },\n    size: {\n      sm: styles['wrapper_size_sm'],\n      md: styles['wrapper_size_md'],\n    },\n    alignment: {\n      center: styles['wrapper_alignment_center'],\n      top: styles['wrapper_alignment_top'],\n    },\n    selectable: {\n      true: styles['wrapper_selectable'],\n    },\n    selected: {\n      true: styles['wrapper_selected'],\n    },\n    disabled: {\n      true: styles['wrapper_disabled'],\n    },\n  },\n  defaultVariants: {\n    color: 'default',\n    size: 'md',\n    alignment: 'center',\n  },\n});\n\nconst contentWrapperVariants = cva(styles.contentwrapper, {\n  variants: {\n    size: {\n      sm: styles['contentwrapper_size_sm'],\n      md: styles['contentwrapper_size_md'],\n    },\n  },\n  defaultVariants: { size: 'md' },\n});\n\nconst iconTextContentWrapperVariants = cva(styles.icontextcontentwrapper, {\n  variants: {\n    size: {\n      sm: styles['icontextcontentwrapper_size_sm'],\n      md: styles['icontextcontentwrapper_size_md'],\n    },\n    alignment: {\n      center: styles['icontextcontentwrapper_alignment_center'],\n      top: styles['icontextcontentwrapper_alignment_top'],\n    },\n  },\n  defaultVariants: { size: 'md', alignment: 'center' },\n});\n\nexport const CardHorizontal = ({\n  title,\n  icon,\n  description,\n  disabled = false,\n  infoText,\n  infoUrl,\n  isSelected,\n  isSelectable = infoText ? false : true,\n  children,\n  color = 'default',\n  size = 'md',\n  alignment = 'center',\n  badgeText,\n  badgeState,\n  badgeIcon,\n  badgeIconDir,\n  onButtonClick,\n  className,\n  ...props\n}: CardHorizontalProps) => {\n  const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (typeof onButtonClick === 'function') {\n      onButtonClick(e);\n    }\n    if (infoUrl && infoUrl.length > 0) {\n      window.open(infoUrl, '_blank');\n    }\n  };\n  return (\n    <div\n      tabIndex={disabled ? -1 : 0}\n      aria-disabled={disabled}\n      onClick={handleClick}\n      {...props}\n      className={cn(\n        wrapperVariants({\n          color,\n          size,\n          alignment,\n          selectable: isSelectable,\n          selected: isSelected,\n          disabled,\n        }),\n        className\n      )}\n    >\n      <div className={cn(contentWrapperVariants({ size }))}>\n        <div className={cn(iconTextContentWrapperVariants({ size, alignment }))}>\n          {icon && (\n            <Icon\n              name={icon}\n              aria-hidden\n              className={styles.cardicon}\n            />\n          )}\n          <Container\n            padding=\"none\"\n            orientation=\"vertical\"\n          >\n            {title && (\n              <Container\n                className={styles.header}\n                isResponsive={false}\n                gap=\"xs\"\n                justifyContent=\"space-between\"\n                fillWidth\n              >\n                <Container\n                  orientation=\"horizontal\"\n                  gap=\"xs\"\n                  isResponsive={false}\n                  fillWidth={false}\n                  grow=\"1\"\n                >\n                  {title}\n                </Container>\n                {badgeText && (\n                  <Container\n                    isResponsive={false}\n                    justifyContent=\"end\"\n                    fillWidth={false}\n                    data-testid=\"horizontal-card-badge\"\n                  >\n                    <Badge\n                      text={badgeText}\n                      size=\"md\"\n                      state={badgeState}\n                      icon={badgeIcon}\n                      iconDir={badgeIconDir}\n                    />\n                  </Container>\n                )}\n              </Container>\n            )}\n\n            {description && <div className={styles.description}>{description}</div>}\n            {children && <div className={styles.description}>{children}</div>}\n          </Container>\n        </div>\n        {infoText && (\n          <Container\n            justifyContent=\"end\"\n            fillWidth={false}\n            data-testid=\"horizontal-card-button\"\n          >\n            <Button\n              label={infoText}\n              onClick={handleClick}\n              disabled={disabled}\n              fillWidth\n            />\n          </Container>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["wrapperVariants","cva","styles","wrapper","variants","color","default","muted","size","sm","md","alignment","center","top","selectable","true","selected","disabled","defaultVariants","contentWrapperVariants","contentwrapper","iconTextContentWrapperVariants","icontextcontentwrapper","CardHorizontal","title","icon","description","infoText","infoUrl","isSelected","isSelectable","children","badgeText","badgeState","badgeIcon","badgeIconDir","onButtonClick","className","props","handleClick","e","preventDefault","length","window","open","cn","Icon","cardicon","header"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/CardHorizontal/CardHorizontal.tsx"],"sourcesContent":["import { Badge } from '@/components/Badge';\nimport { Button } from '@/components/Button';\nimport { Container } from '@/components/Container';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { CardHorizontalProps } from './CardHorizontal.types';\nimport styles from './CardHorizontal.module.css';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    color: {\n      default: styles['wrapper_color_default'],\n      muted: styles['wrapper_color_muted'],\n    },\n    size: {\n      sm: styles['wrapper_size_sm'],\n      md: styles['wrapper_size_md'],\n    },\n    alignment: {\n      center: styles['wrapper_alignment_center'],\n      top: styles['wrapper_alignment_top'],\n    },\n    selectable: {\n      true: styles['wrapper_selectable'],\n    },\n    selected: {\n      true: styles['wrapper_selected'],\n    },\n    disabled: {\n      true: styles['wrapper_disabled'],\n    },\n  },\n  defaultVariants: {\n    color: 'default',\n    size: 'md',\n    alignment: 'center',\n  },\n});\n\nconst contentWrapperVariants = cva(styles.contentwrapper, {\n  variants: {\n    size: {\n      sm: styles['contentwrapper_size_sm'],\n      md: styles['contentwrapper_size_md'],\n    },\n  },\n  defaultVariants: { size: 'md' },\n});\n\nconst iconTextContentWrapperVariants = cva(styles.icontextcontentwrapper, {\n  variants: {\n    size: {\n      sm: styles['icontextcontentwrapper_size_sm'],\n      md: styles['icontextcontentwrapper_size_md'],\n    },\n    alignment: {\n      center: styles['icontextcontentwrapper_alignment_center'],\n      top: styles['icontextcontentwrapper_alignment_top'],\n    },\n  },\n  defaultVariants: { size: 'md', alignment: 'center' },\n});\n\nexport const CardHorizontal = ({\n  title,\n  icon,\n  description,\n  disabled = false,\n  infoText,\n  infoUrl,\n  isSelected,\n  isSelectable = infoText ? false : true,\n  children,\n  color = 'default',\n  size = 'md',\n  alignment = 'center',\n  badgeText,\n  badgeState,\n  badgeIcon,\n  badgeIconDir,\n  onButtonClick,\n  className,\n  ...props\n}: CardHorizontalProps) => {\n  const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (typeof onButtonClick === 'function') {\n      onButtonClick(e);\n    }\n    if (infoUrl && infoUrl.length > 0) {\n      window.open(infoUrl, '_blank');\n    }\n  };\n  return (\n    <div\n      tabIndex={disabled ? -1 : 0}\n      aria-disabled={disabled}\n      onClick={handleClick}\n      {...props}\n      className={cn(\n        wrapperVariants({\n          color,\n          size,\n          alignment,\n          selectable: isSelectable,\n          selected: isSelected,\n          disabled,\n        }),\n        className\n      )}\n    >\n      <div className={cn(contentWrapperVariants({ size }))}>\n        <div className={cn(iconTextContentWrapperVariants({ size, alignment }))}>\n          {icon && (\n            <Icon\n              name={icon}\n              aria-hidden\n              className={styles.cardicon}\n            />\n          )}\n          <Container\n            padding=\"none\"\n            orientation=\"vertical\"\n          >\n            {title && (\n              <Container\n                className={styles.header}\n                isResponsive={false}\n                gap=\"xs\"\n                justifyContent=\"space-between\"\n                fillWidth\n              >\n                <Container\n                  orientation=\"horizontal\"\n                  gap=\"xs\"\n                  isResponsive={false}\n                  fillWidth={false}\n                  grow=\"1\"\n                >\n                  {title}\n                </Container>\n                {badgeText && (\n                  <Container\n                    isResponsive={false}\n                    justifyContent=\"end\"\n                    fillWidth={false}\n                    data-testid=\"horizontal-card-badge\"\n                  >\n                    <Badge\n                      text={badgeText}\n                      size=\"md\"\n                      state={badgeState}\n                      icon={badgeIcon}\n                      iconDir={badgeIconDir}\n                    />\n                  </Container>\n                )}\n              </Container>\n            )}\n\n            {description && <div className={styles.description}>{description}</div>}\n            {children && <div className={styles.description}>{children}</div>}\n          </Container>\n        </div>\n        {infoText && (\n          <Container\n            justifyContent=\"end\"\n            fillWidth={false}\n            data-testid=\"horizontal-card-button\"\n          >\n            <Button\n              label={infoText}\n              onClick={handleClick}\n              disabled={disabled}\n              fillWidth\n            />\n          </Container>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["Icon"],"mappings":"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"}

package/dist/esm/components/CardPrimary/CardPrimary.css

@@ -1,4 +1,4 @@
-.wrapper__zCfLE {
+@layer clickui {.wrapper__zCfLE {
   display: flex;
   width: 100%;
   max-width: 100%;
@@ -180,3 +180,4 @@
 div:active + .topbadge__E79OZ {
   border-color: var(--click-button-basic-color-primary-stroke-active);
 }
+}