@clickhouse/click-ui 0.8.0 → 0.10.0-rc1

package/dist/cjs/components/Button/BaseButton.css

@@ -1,4 +1,4 @@
-/* Kept at zero specificity via :where() so that downstream styled-components
+@layer clickui {/* Kept at zero specificity via :where() so that downstream styled-components
    overrides on a styled(BaseButton) (SplitButton's PrimaryButton/SecondaryButton
    override padding, border-radius, font, background, color, border, and width)
    win without needing a specificity hack — BaseButton is a CSS Module, whose rules
@@ -38,3 +38,4 @@
   font: var(--click-button-basic-typography-label-disabled);
   cursor: not-allowed;
 }
+}

package/dist/cjs/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/cjs/components/Button/index.cjs

@@ -34,29 +34,52 @@ const buttonVariants = classVarianceAuthority.cva(Button_module.default.button,
     align: "center"
   }
 });
-const Button = react.forwardRef(({
-  type = "primary",
-  htmlType,
-  iconLeft,
-  iconRight,
-  align = "center",
-  children,
-  fillWidth,
-  label,
-  loading = false,
-  disabled,
-  className,
-  ...delegated
-}, ref) => /* @__PURE__ */ jsxRuntime.jsxs("button", { type: htmlType, ref, className: cva.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__ */ jsxRuntime.jsx("span", { className: Button_module.default.button__icon, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: iconLeft, "aria-hidden": true, size: "sm" }) }),
-  /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module.default.button__label, children: label ?? children }),
-  iconRight && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module.default.button__icon, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: iconRight, "aria-hidden": true, size: "sm" }) })
-] }));
+const Button = react.forwardRef(
+  ({
+    type = "primary",
+    htmlType,
+    iconLeft,
+    iconRight,
+    align = "center",
+    children,
+    fillWidth,
+    label,
+    loading = false,
+    disabled,
+    className,
+    ...delegated
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: htmlType,
+      ref,
+      className: cva.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__ */ jsxRuntime.jsx("span", { className: Button_module.default.button__icon, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            name: iconLeft,
+            "aria-hidden": true,
+            size: "sm"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module.default.button__label, children: label ?? children }),
+        iconRight && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module.default.button__icon, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            name: iconRight,
+            "aria-hidden": true,
+            size: "sm"
+          }
+        ) })
+      ]
+    }
+  )
+);
 Button.displayName = "Button";
 
 exports.Button = Button;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","jsx","button__icon","Icon","button__label","displayName"],"mappings":";;;;;;;;;;;AAMA,MAAMA,cAAAA,GAAiBC,0BAAAA,CAAIC,qBAAAA,CAAOC,MAAAA,EAAQ;AAAA,EACxCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,sBAAO,gBAAgB,CAAA;AAAA,MAChCK,SAAAA,EAAWL,sBAAO,kBAAkB,CAAA;AAAA,MACpCM,KAAAA,EAAON,sBAAO,cAAc,CAAA;AAAA,MAC5BO,MAAAA,EAAQP,sBAAO,eAAe;AAAA,KAChC;AAAA,IACAQ,KAAAA,EAAO;AAAA,MACLC,MAAAA,EAAQT,sBAAO,qBAAqB,CAAA;AAAA,MACpCU,IAAAA,EAAMV,sBAAO,mBAAmB;AAAA,KAClC;AAAA,IACAW,SAAAA,EAAW;AAAA,MACTC,IAAAA,EAAMZ,sBAAO,mBAAmB;AAAA,KAClC;AAAA,IACAa,OAAAA,EAAS;AAAA,MACPD,IAAAA,EAAMZ,sBAAO,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,iBACpB,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,qCAEC,QAAA,EAAA,EACC,IAAA,EAAMR,UACN,GAAA,EACA,SAAA,EAAWS,OAAG5B,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,oBACCU,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW5B,qBAAAA,CAAO6B,YAAAA,EACtB,QAAA,kBAAAD,cAAA,CAACE,SAAA,EAAA,EACC,IAAA,EAAMZ,QAAAA,EACN,aAAA,EAAW,IAAA,EACX,IAAA,EAAK,MAAI,CAAA,EAEb,CAAA;AAAA,iCAGD,MAAA,EAAA,EAAK,SAAA,EAAWlB,qBAAAA,CAAO+B,aAAAA,EAAgBV,mBAASD,QAAAA,EAAS,CAAA;AAAA,EAEzDD,SAAAA,oBACCS,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW5B,sBAAO6B,YAAAA,EACtB,QAAA,kBAAAD,cAAA,CAACE,SAAA,EAAA,EACC,IAAA,EAAMX,SAAAA,EACN,aAAA,EAAW,IAAA,EACX,IAAA,EAAK,MAAI,CAAA,EAEb;AAAA,CAAA,EAEJ,CAEJ;AAEAJ,MAAAA,CAAOiB,WAAAA,GAAc,QAAA;;;;"}
+{"version":3,"file":"index.cjs","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":["cva","styles","forwardRef","jsxs","cn","jsx","Icon"],"mappings":";;;;;;;;;;;AAMA,MAAM,cAAA,GAAiBA,0BAAA,CAAIC,qBAAA,CAAO,MAAA,EAAQ;AAAA,EACxC,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,OAAA,EAASA,sBAAO,gBAAgB,CAAA;AAAA,MAChC,SAAA,EAAWA,sBAAO,kBAAkB,CAAA;AAAA,MACpC,KAAA,EAAOA,sBAAO,cAAc,CAAA;AAAA,MAC5B,MAAA,EAAQA,sBAAO,eAAe;AAAA,KAChC;AAAA,IACA,KAAA,EAAO;AAAA,MACL,MAAA,EAAQA,sBAAO,qBAAqB,CAAA;AAAA,MACpC,IAAA,EAAMA,sBAAO,mBAAmB;AAAA,KAClC;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAMA,sBAAO,mBAAmB;AAAA,KAClC;AAAA,IACA,OAAA,EAAS;AAAA,MACP,IAAA,EAAMA,sBAAO,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,GAASC,gBAAA;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,qBAEAC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,QAAA;AAAA,MACN,GAAA;AAAA,MACA,SAAA,EAAWC,MAAA,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,oBACCC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWJ,qBAAA,CAAO,YAAA,EACtB,QAAA,kBAAAI,cAAA;AAAA,UAACC,SAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,QAAA;AAAA,YACN,aAAA,EAAW,IAAA;AAAA,YACX,IAAA,EAAK;AAAA;AAAA,SACP,EACF,CAAA;AAAA,uCAGD,MAAA,EAAA,EAAK,SAAA,EAAWL,qBAAA,CAAO,aAAA,EAAgB,mBAAS,QAAA,EAAS,CAAA;AAAA,QAEzD,SAAA,oBACCI,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWJ,sBAAO,YAAA,EACtB,QAAA,kBAAAI,cAAA;AAAA,UAACC,SAAA;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/cjs/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/cjs/components/ButtonGroup/index.cjs

@@ -20,9 +20,7 @@ const wrapperVariants = classVarianceAuthority.cva(ButtonGroup_module.default.bu
       true: ButtonGroup_module.default["buttongroup_fillwidth"]
     }
   },
-  defaultVariants: {
-    type: "default"
-  }
+  defaultVariants: { type: "default" }
 });
 const buttonVariants = classVarianceAuthority.cva(ButtonGroup_module.default.button, {
   variants: {
@@ -38,19 +36,19 @@ const buttonVariants = classVarianceAuthority.cva(ButtonGroup_module.default.but
       true: ButtonGroup_module.default["button_fillwidth"]
     }
   },
-  compoundVariants: [{
-    iconOnly: true,
-    type: "default",
-    class: ButtonGroup_module.default["button_icon-only_default"]
-  }, {
-    iconOnly: true,
-    type: "borderless",
-    class: ButtonGroup_module.default["button_icon-only_borderless"]
-  }],
-  defaultVariants: {
-    type: "default",
-    iconOnly: false
-  }
+  compoundVariants: [
+    {
+      iconOnly: true,
+      type: "default",
+      class: ButtonGroup_module.default["button_icon-only_default"]
+    },
+    {
+      iconOnly: true,
+      type: "borderless",
+      class: ButtonGroup_module.default["button_icon-only_borderless"]
+    }
+  ],
+  defaultVariants: { type: "default", iconOnly: false }
 });
 const normalizeToSet = (value) => {
   if (value === void 0) {
@@ -64,58 +62,98 @@ const normalizeToSet = (value) => {
 const isValueSelected = (value, selection) => {
   return selection.has(value);
 };
-const ButtonGroup = react.forwardRef(({
-  options,
-  selected,
-  defaultSelected,
-  fillWidth = false,
-  onClick,
-  type = "default",
-  iconOnly = false,
-  multiple = false,
-  className,
-  ...props
-}, ref) => {
-  const [internalSelection, setInternalSelection] = react.useState(() => normalizeToSet(defaultSelected));
-  const isControlled = selected !== void 0;
-  const currentSelection = isControlled ? normalizeToSet(selected) : internalSelection;
-  const onButtonGroupClickCommonHandler = react.useCallback((value) => {
-    let newSelection;
-    if (multiple) {
-      newSelection = new Set(currentSelection);
-      if (newSelection.has(value)) {
-        newSelection.delete(value);
-      } else {
-        newSelection.add(value);
+const ButtonGroup = react.forwardRef(
+  ({
+    options,
+    selected,
+    defaultSelected,
+    fillWidth = false,
+    onClick,
+    type = "default",
+    iconOnly = false,
+    multiple = false,
+    className,
+    ...props
+  }, ref) => {
+    const [internalSelection, setInternalSelection] = react.useState(
+      () => normalizeToSet(defaultSelected)
+    );
+    const isControlled = selected !== void 0;
+    const currentSelection = isControlled ? normalizeToSet(selected) : internalSelection;
+    const onButtonGroupClickCommonHandler = react.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__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: cva.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__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cva.cn(
+                  ButtonGroup_module.default.button__icon,
+                  type === "borderless" && ButtonGroup_module.default["button__icon_height_line"]
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon.Icon,
+                  {
+                    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__ */ jsxRuntime.jsx("button", { type: "button", className: cva.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__ */ jsxRuntime.jsx("span", { className: cva.cn(ButtonGroup_module.default.button__icon, type === "borderless" && ButtonGroup_module.default["button__icon_height_line"]), children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm", "aria-hidden": true }) }) : label }, value);
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...props, className: cva.cn(wrapperVariants({
-    type,
-    fillWidth
-  }), className), role: "group", children: buttons });
-});
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cva.cn(wrapperVariants({ type, fillWidth }), className),
+        role: "group",
+        children: buttons
+      }
+    );
+  }
+);
 ButtonGroup.displayName = "ButtonGroup";
 
 exports.ButtonGroup = ButtonGroup;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","jsx","button__icon","Icon","displayName"],"mappings":";;;;;;;;;;;AAMA,MAAMA,eAAAA,GAAkBC,0BAAAA,CAAIC,0BAAAA,CAAOC,WAAAA,EAAa;AAAA,EAC9CC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,2BAAO,0BAA0B,CAAA;AAAA,MAC1CK,UAAAA,EAAYL,2BAAO,6BAA6B;AAAA,KAClD;AAAA,IACAM,SAAAA,EAAW;AAAA,MACTC,IAAAA,EAAMP,2BAAO,uBAAuB;AAAA;AACtC,GACF;AAAA,EACAQ,eAAAA,EAAiB;AAAA,IAAEL,IAAAA,EAAM;AAAA;AAC3B,CAAC,CAAA;AAED,MAAMM,cAAAA,GAAiBV,0BAAAA,CAAIC,0BAAAA,CAAOU,MAAAA,EAAQ;AAAA,EACxCR,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,2BAAO,qBAAqB,CAAA;AAAA,MACrCK,UAAAA,EAAYL,2BAAO,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,2BAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACAa,kBAAkB,CAChB;AAAA,IACEF,QAAAA,EAAU,IAAA;AAAA,IACVR,IAAAA,EAAM,SAAA;AAAA,IACNW,KAAAA,EAAOd,2BAAO,0BAA0B;AAAA,GAC1C,EACA;AAAA,IACEW,QAAAA,EAAU,IAAA;AAAA,IACVR,IAAAA,EAAM,YAAA;AAAA,IACNW,KAAAA,EAAOd,2BAAO,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,iBACzB,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,eAAsB,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,iBAAAA,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,sCACG,QAAA,EAAA,EAEC,IAAA,EAAK,QAAA,EACL,SAAA,EAAWc,OAAGzC,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,uBACXO,cAAA,CAAC,MAAA,EAAA,EACC,WAAWF,MAAAA,CACTlD,0BAAAA,CAAOqD,cACPlD,IAAAA,KAAS,YAAA,IAAgBH,0BAAAA,CAAO,0BAA0B,CAC5D,CAAA,EAEA,yCAACsD,SAAA,EAAA,EACC,IAAA,EAAMT,MACN,IAAA,EAAK,IAAA,EACL,eAAW,IAAA,EAAA,CAAA,EAEf,CAAA,GAEAD,KAAAA,EAAAA,EAvBG5B,KAyBP,CAAA;AAAA,EAEJ,CACF,CAAA;AAEA,EAAA,sCACG,KAAA,EAAA,EACC,GAAA,KACIc,KAAAA,EACJ,SAAA,EAAWoB,OAAGpD,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,CAAYiC,WAAAA,GAAc,aAAA;;;;"}
+{"version":3,"file":"index.cjs","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":["cva","styles","forwardRef","useState","useCallback","jsx","cn","Icon"],"mappings":"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"}

package/dist/cjs/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/cjs/components/CardHorizontal/index.cjs

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