@clickhouse/click-ui 0.6.0 → 0.6.1-rc2

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

@@ -19,7 +19,7 @@ const buttonVariants = cva(styles.button, {
       left: styles["button_align-left"]
     },
     fillWidth: {
-      true: styles["button_fill"]
+      true: styles["button_fill_width"]
     },
     loading: {
       true: styles["button_loading"]

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Icon, IconName } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { forwardRef } from 'react';\nimport styles from './Button.module.css';\n\nexport type ButtonType = 'primary' | 'secondary' | 'empty' | 'danger';\ntype Alignment = 'center' | 'left';\n\nexport interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n  // TODO: The type prop ('primary' | 'secondary' | 'empty' | 'danger') shadows the native <button type=\"submit|reset|button\"> attribute. Since type is destructured before ...delegated, consumers can never pass type=\"submit\" for form submission. Consider renaming the visual variant prop to variant (consistent with the CSS class names button_primary etc.). This is a public API problem!\n  /** The visual style variant of the button */\n  type?: ButtonType;\n  /** Whether the button is disabled */\n  disabled?: boolean;\n  /** The text label to display in the button */\n  label?: string;\n  /** Icon to display on the left side of the label */\n  iconLeft?: IconName;\n  /** Icon to display on the right side of the label */\n  iconRight?: IconName;\n  /** Alignment of the button content */\n  align?: Alignment;\n  /** Whether the button should fill the full width of its container */\n  fillWidth?: boolean;\n  /** Whether to show a loading state */\n  loading?: boolean;\n  /** Whether the button should be focused on mount */\n  autoFocus?: boolean;\n}\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'],\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      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      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","iconLeft","iconRight","children","label","disabled","className","delegated","ref","cn","undefined","button__icon","Icon","button__label","displayName"],"mappings":";;;;;;;AA8BA,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,aAAa;AAAA,KAC5B;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,SAAAA;AAAAA,EACAV,KAAAA,GAAQ,QAAA;AAAA,EACRW,QAAAA;AAAAA,EACAR,SAAAA;AAAAA,EACAS,KAAAA;AAAAA,EACAP,OAAAA,GAAU,KAAA;AAAA,EACVQ,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACL,CAAA,EACAC,wBAEA,IAAA,CAAC,QAAA,EAAA,EACC,GAAA,EACA,SAAA,EAAWC,GAAG3B,cAAAA,CAAe;AAAA,EAAEK,IAAAA;AAAAA,EAAMK,KAAAA;AAAAA,EAAOG,SAAAA;AAAAA,EAAWE;AAAQ,CAAC,CAAA,EAAGS,SAAS,CAAA,EAC5E,QAAA,EAAUD,YAAYR,OAAAA,EACtB,eAAA,EAAeQ,QAAAA,IAAYR,OAAAA,IAAWa,MAAAA,EACtC,WAAA,EAAWb,OAAAA,IAAWa,MAAAA,EACtB,GAAIH,SAAAA,EAEHN,QAAAA,EAAAA;AAAAA,EAAAA,QAAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWjB,MAAAA,CAAO2B,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,EAAWjB,MAAAA,CAAO6B,aAAAA,EAAgBT,mBAASD,QAAAA,EAAS,CAAA;AAAA,EAEzDD,SAAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWlB,OAAO2B,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;AAEAH,MAAAA,CAAOe,WAAAA,GAAc,QAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Icon, IconName } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { forwardRef } from 'react';\nimport styles from './Button.module.css';\n\nexport type ButtonType = 'primary' | 'secondary' | 'empty' | 'danger';\ntype Alignment = 'center' | 'left';\n\nexport interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n  // TODO: The type prop ('primary' | 'secondary' | 'empty' | 'danger') shadows the native <button type=\"submit|reset|button\"> attribute. Since type is destructured before ...delegated, consumers can never pass type=\"submit\" for form submission. Consider renaming the visual variant prop to variant (consistent with the CSS class names button_primary etc.). This is a public API problem!\n  /** The visual style variant of the button */\n  type?: ButtonType;\n  /** Whether the button is disabled */\n  disabled?: boolean;\n  /** The text label to display in the button */\n  label?: string;\n  /** Icon to display on the left side of the label */\n  iconLeft?: IconName;\n  /** Icon to display on the right side of the label */\n  iconRight?: IconName;\n  /** Alignment of the button content */\n  align?: Alignment;\n  /** Whether the button should fill the full width of its container */\n  fillWidth?: boolean;\n  /** Whether to show a loading state */\n  loading?: boolean;\n  /** Whether the button should be focused on mount */\n  autoFocus?: boolean;\n}\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      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      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","iconLeft","iconRight","children","label","disabled","className","delegated","ref","cn","undefined","button__icon","Icon","button__label","displayName"],"mappings":";;;;;;;AA8BA,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,SAAAA;AAAAA,EACAV,KAAAA,GAAQ,QAAA;AAAA,EACRW,QAAAA;AAAAA,EACAR,SAAAA;AAAAA,EACAS,KAAAA;AAAAA,EACAP,OAAAA,GAAU,KAAA;AAAA,EACVQ,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACL,CAAA,EACAC,wBAEA,IAAA,CAAC,QAAA,EAAA,EACC,GAAA,EACA,SAAA,EAAWC,GAAG3B,cAAAA,CAAe;AAAA,EAAEK,IAAAA;AAAAA,EAAMK,KAAAA;AAAAA,EAAOG,SAAAA;AAAAA,EAAWE;AAAQ,CAAC,CAAA,EAAGS,SAAS,CAAA,EAC5E,QAAA,EAAUD,YAAYR,OAAAA,EACtB,eAAA,EAAeQ,QAAAA,IAAYR,OAAAA,IAAWa,MAAAA,EACtC,WAAA,EAAWb,OAAAA,IAAWa,MAAAA,EACtB,GAAIH,SAAAA,EAEHN,QAAAA,EAAAA;AAAAA,EAAAA,QAAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWjB,MAAAA,CAAO2B,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,EAAWjB,MAAAA,CAAO6B,aAAAA,EAAgBT,mBAASD,QAAAA,EAAS,CAAA;AAAA,EAEzDD,SAAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWlB,OAAO2B,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;AAEAH,MAAAA,CAAOe,WAAAA,GAAc,QAAA;;;;"}

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

@@ -0,0 +1,85 @@
+.buttongroup__9IkOe {
+  display: inline-flex;
+  box-sizing: border-box;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--click-button-group-radii-panel-all);
+  background: var(--click-button-group-color-background-panel);
+}
+
+.buttongroup_type_default__D1bYD {
+  padding: var(--click-button-group-space-panel-default-x)
+    var(--click-button-group-space-panel-default-y);
+  gap: var(--click-button-group-space-panel-default-gap);
+  border: 1px solid var(--click-button-group-color-panel-stroke-default);
+}
+
+.buttongroup_type_borderless__cAhx7 {
+  padding: var(--click-button-group-space-panel-borderless-x)
+    var(--click-button-group-space-panel-borderless-y);
+  gap: var(--click-button-group-space-panel-borderless-gap);
+  border: none;
+}
+
+.buttongroup_fillwidth__WzJlu {
+  width: 100%;
+}
+
+.button__w1Is2 {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background: var(--click-button-group-color-background-default);
+  color: var(--click-button-group-color-text-default);
+  font: var(--click-button-group-typography-label-default);
+  cursor: pointer;
+}
+
+.button_type_default__G9UA1 {
+  padding: var(--click-button-group-space-button-default-y)
+    var(--click-button-group-space-button-default-x);
+  border-radius: var(--click-button-group-radii-button-default-all);
+}
+
+.button_type_borderless__PydeS {
+  padding: var(--click-button-group-space-button-borderless-y)
+    var(--click-button-group-space-button-borderless-x);
+  border-radius: var(--click-button-group-radii-button-borderless-all);
+}
+
+.button_fillwidth__lqIVG {
+  flex: 1;
+}
+
+.button__w1Is2[aria-pressed='true'] {
+  background: var(--click-button-group-color-background-active);
+  color: var(--click-button-group-color-text-active);
+  font: var(--click-button-group-typography-label-active);
+}
+
+.button__w1Is2:hover {
+  background: var(--click-button-group-color-background-hover);
+  color: var(--click-button-group-color-text-hover);
+  font: var(--click-button-group-typography-label-hover);
+}
+
+.button__w1Is2:disabled {
+  background: var(--click-button-group-color-background-disabled);
+  color: var(--click-button-group-color-text-disabled);
+  font: var(--click-button-group-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button__w1Is2:disabled:active,
+.button__w1Is2:disabled:focus,
+.button__w1Is2:disabled[aria-pressed='true'] {
+  color: var(--click-button-group-color-text-disabled);
+}
+
+.button__w1Is2[aria-pressed='true']:disabled {
+  background: var(--click-button-group-color-background-disabled-active);
+}

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

@@ -0,0 +1,21 @@
+const buttongroup = "buttongroup__9IkOe";
+const buttongroup_type_default = "buttongroup_type_default__D1bYD";
+const buttongroup_type_borderless = "buttongroup_type_borderless__cAhx7";
+const buttongroup_fillwidth = "buttongroup_fillwidth__WzJlu";
+const button = "button__w1Is2";
+const button_type_default = "button_type_default__G9UA1";
+const button_type_borderless = "button_type_borderless__PydeS";
+const button_fillwidth = "button_fillwidth__lqIVG";
+const styles = {
+	buttongroup: buttongroup,
+	buttongroup_type_default: buttongroup_type_default,
+	buttongroup_type_borderless: buttongroup_type_borderless,
+	buttongroup_fillwidth: buttongroup_fillwidth,
+	button: button,
+	button_type_default: button_type_default,
+	button_type_borderless: button_type_borderless,
+	button_fillwidth: button_fillwidth
+};
+
+export { button, button_fillwidth, button_type_borderless, button_type_default, buttongroup, buttongroup_fillwidth, buttongroup_type_borderless, buttongroup_type_default, styles as default };
+//# sourceMappingURL=ButtonGroup.module.css.js.map

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

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

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

@@ -1,7 +1,38 @@
+import "./ButtonGroup.css";
 import { jsx } from 'react/jsx-runtime';
-import { useState, useCallback } from 'react';
-import { styled } from 'styled-components';
+import { forwardRef, useState, useCallback } from 'react';
+import { cn } from '../../lib/cva.js';
+import styles from './ButtonGroup.module.css.js';
+import { cva } from 'class-variance-authority';
 
+const wrapperVariants = cva(styles.buttongroup, {
+  variants: {
+    type: {
+      default: styles["buttongroup_type_default"],
+      borderless: styles["buttongroup_type_borderless"]
+    },
+    fillWidth: {
+      true: styles["buttongroup_fillwidth"]
+    }
+  },
+  defaultVariants: {
+    type: "default"
+  }
+});
+const buttonVariants = cva(styles.button, {
+  variants: {
+    type: {
+      default: styles["button_type_default"],
+      borderless: styles["button_type_borderless"]
+    },
+    fillWidth: {
+      true: styles["button_fillwidth"]
+    }
+  },
+  defaultVariants: {
+    type: "default"
+  }
+});
 const normalizeToSet = (value) => {
   if (value === void 0) {
     return /* @__PURE__ */ new Set();
@@ -14,7 +45,7 @@ const normalizeToSet = (value) => {
 const isValueSelected = (value, selection) => {
   return selection.has(value);
 };
-const ButtonGroup = ({
+const ButtonGroup = forwardRef(({
   options,
   selected,
   defaultSelected,
@@ -22,8 +53,9 @@ const ButtonGroup = ({
   onClick,
   type = "default",
   multiple = false,
+  className,
   ...props
-}) => {
+}, ref) => {
   const [internalSelection, setInternalSelection] = useState(() => normalizeToSet(defaultSelected));
   const isControlled = selected !== void 0;
   const currentSelection = isControlled ? normalizeToSet(selected) : internalSelection;
@@ -47,78 +79,21 @@ const ButtonGroup = ({
   const buttons = options.map(({
     value,
     label,
+    className: optionClassName,
     ...buttonProps
   }) => {
     const isActive = isValueSelected(value, currentSelection);
-    return /* @__PURE__ */ jsx(Button, { $active: isActive, "aria-pressed": isActive, $fillWidth: fillWidth, $type: type, onClick: () => onButtonGroupClickCommonHandler(value), role: "button", ...buttonProps, children: label }, value);
+    return /* @__PURE__ */ jsx("button", { className: cn(buttonVariants({
+      type,
+      fillWidth
+    }), optionClassName), "aria-pressed": isActive, onClick: () => onButtonGroupClickCommonHandler(value), role: "button", ...buttonProps, children: label }, value);
   });
-  return /* @__PURE__ */ jsx(ButtonGroupWrapper, { ...props, $fillWidth: fillWidth, $type: type, role: "group", children: buttons });
-};
-const ButtonGroupWrapper = styled.div.withConfig({
-  componentId: "sc-ukgugp-0"
-})(["display:inline-flex;box-sizing:border-box;flex-direction:row;justify-content:center;align-items:center;padding:", ";gap:", ";border:", ";background:", ";border-radius:", ";width:", ";"], ({
-  theme,
-  $type
-}) => `${theme.click.button.group.space.panel[$type].x} ${theme.click.button.group.space.panel[$type].y}`, ({
-  theme,
-  $type
-}) => theme.click.button.group.space.panel[$type].gap, ({
-  theme,
-  $type
-}) => $type === "default" ? `1px solid ${theme.click.button.group.color.panel.stroke[$type]}` : "none", ({
-  theme
-}) => theme.click.button.group.color.background.panel, ({
-  theme
-}) => theme.click.button.group.radii.panel.all, ({
-  $fillWidth
-}) => $fillWidth ? "100%" : "auto");
-const Button = styled.button.withConfig({
-  componentId: "sc-ukgugp-1"
-})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;background:", ";color:", ";font:", ";padding:", ";", ";border-radius:", ";cursor:pointer;border:none;&[aria-pressed='true']{background:", ";font:", ";color:", ";}&:hover{background:", ";font:", ";color:", ";}&:disabled{cursor:not-allowed;font:", ";color:", ";background:", ";&:active,&:focus,&[aria-pressed='true']{color:", ";}}&[aria-pressed='true']{background:", ";font:", ";color:", ";&:disabled{background:", ";}}"], ({
-  $active,
-  theme
-}) => $active ? theme.click.button.group.color.background.active : theme.click.button.group.color.background.default, ({
-  theme
-}) => theme.click.button.group.color.text.default, ({
-  theme
-}) => theme.click.button.group.typography.label.default, ({
-  theme,
-  $type
-}) => `${theme.click.button.group.space.button[$type].y} ${theme.click.button.group.space.button[$type].x}`, ({
-  $fillWidth
-}) => $fillWidth ? "flex: 1;" : "", ({
-  theme,
-  $type
-}) => theme.click.button.group.radii.button[$type].all, ({
-  theme
-}) => theme.click.button.group.color.background.active, ({
-  theme
-}) => theme.click.button.group.typography.label.active, ({
-  theme
-}) => theme.click.button.group.color.text.active, ({
-  theme
-}) => theme.click.button.group.color.background.hover, ({
-  theme
-}) => theme.click.button.group.typography.label.hover, ({
-  theme
-}) => theme.click.button.group.color.text.hover, ({
-  theme
-}) => theme.click.button.group.typography.label.disabled, ({
-  theme
-}) => theme.click.button.group.color.text.disabled, ({
-  theme,
-  $active
-}) => theme.click.button.group.color.background[$active ? "disabled-active" : "disabled"], ({
-  theme
-}) => theme.click.button.group.color.text.disabled, ({
-  theme
-}) => theme.click.button.group.color.background.active, ({
-  theme
-}) => theme.click.button.group.typography.label.active, ({
-  theme
-}) => theme.click.button.group.color.text.active, ({
-  theme
-}) => theme.click.button.group.color.background["disabled-active"]);
+  return /* @__PURE__ */ jsx("div", { ref, ...props, className: cn(wrapperVariants({
+    type,
+    fillWidth
+  }), className), role: "group", children: buttons });
+});
+ButtonGroup.displayName = "ButtonGroup";
 
 export { ButtonGroup };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { styled } from 'styled-components';\nimport { ButtonGroupProps, SelectionValue } from './ButtonGroup.types';\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 = ({\n  options,\n  selected,\n  defaultSelected,\n  fillWidth = false,\n  onClick,\n  type = 'default',\n  multiple = false,\n  ...props\n}: ButtonGroupProps) => {\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(({ value, label, ...buttonProps }) => {\n    const isActive = isValueSelected(value, currentSelection);\n\n    return (\n      <Button\n        key={value}\n        $active={isActive}\n        aria-pressed={isActive}\n        $fillWidth={fillWidth}\n        $type={type}\n        onClick={() => onButtonGroupClickCommonHandler(value)}\n        role=\"button\"\n        {...buttonProps}\n      >\n        {label}\n      </Button>\n    );\n  });\n\n  return (\n    <ButtonGroupWrapper\n      {...props}\n      $fillWidth={fillWidth}\n      $type={type}\n      role=\"group\"\n    >\n      {buttons}\n    </ButtonGroupWrapper>\n  );\n};\n\nimport { ButtonGroupType } from './ButtonGroup.types';\n\nconst ButtonGroupWrapper = styled.div<{ $fillWidth: boolean; $type: ButtonGroupType }>`\n  display: inline-flex;\n  box-sizing: border-box;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: ${({ theme, $type }) =>\n    `${theme.click.button.group.space.panel[$type].x} ${theme.click.button.group.space.panel[$type].y}`};\n  gap: ${({ theme, $type }) => theme.click.button.group.space.panel[$type].gap};\n  border: ${({ theme, $type }) =>\n    $type === 'default'\n      ? `1px solid ${theme.click.button.group.color.panel.stroke[$type]}`\n      : 'none'};\n  background: ${({ theme }) => theme.click.button.group.color.background.panel};\n  border-radius: ${({ theme }) => theme.click.button.group.radii.panel.all};\n  width: ${({ $fillWidth }) => ($fillWidth ? '100%' : 'auto')};\n`;\n\nconst Button = styled.button<{\n  $active: boolean;\n  $fillWidth: boolean;\n  $type: ButtonGroupType;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  background: ${({ $active, theme }) =>\n    $active\n      ? theme.click.button.group.color.background.active\n      : theme.click.button.group.color.background.default};\n  color: ${({ theme }) => theme.click.button.group.color.text.default};\n  font: ${({ theme }) => theme.click.button.group.typography.label.default};\n  padding: ${({ theme, $type }) =>\n    `${theme.click.button.group.space.button[$type].y} ${theme.click.button.group.space.button[$type].x}`};\n  ${({ $fillWidth }) => ($fillWidth ? 'flex: 1;' : '')};\n  border-radius: ${({ theme, $type }) =>\n    theme.click.button.group.radii.button[$type].all};\n  cursor: pointer;\n  border: none;\n\n  &[aria-pressed='true'] {\n    background: ${({ theme }) => theme.click.button.group.color.background.active};\n    font: ${({ theme }) => theme.click.button.group.typography.label.active};\n    color: ${({ theme }) => theme.click.button.group.color.text.active};\n  }\n\n  &:hover {\n    background: ${({ theme }) => theme.click.button.group.color.background.hover};\n    font: ${({ theme }) => theme.click.button.group.typography.label.hover};\n    color: ${({ theme }) => theme.click.button.group.color.text.hover};\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    font: ${({ theme }) => theme.click.button.group.typography.label.disabled};\n    color: ${({ theme }) => theme.click.button.group.color.text.disabled};\n    background: ${({ theme, $active }) =>\n      theme.click.button.group.color.background[\n        $active ? 'disabled-active' : 'disabled'\n      ]};\n\n    &:active,\n    &:focus,\n    &[aria-pressed='true'] {\n      color: ${({ theme }) => theme.click.button.group.color.text.disabled};\n    }\n  }\n\n  &[aria-pressed='true'] {\n    background: ${({ theme }) => theme.click.button.group.color.background.active};\n    font: ${({ theme }) => theme.click.button.group.typography.label.active};\n    color: ${({ theme }) => theme.click.button.group.color.text.active};\n    &:disabled {\n      background: ${({ theme }) =>\n        theme.click.button.group.color.background['disabled-active']};\n    }\n  }\n`;\n"],"names":["normalizeToSet","value","undefined","Set","isValueSelected","selection","has","ButtonGroup","options","selected","defaultSelected","fillWidth","onClick","type","multiple","props","internalSelection","setInternalSelection","useState","isControlled","currentSelection","onButtonGroupClickCommonHandler","useCallback","newSelection","delete","add","buttons","map","label","buttonProps","isActive","ButtonGroupWrapper","styled","div","withConfig","componentId","theme","$type","click","button","group","space","panel","x","y","gap","color","stroke","background","radii","all","$fillWidth","Button","$active","active","default","text","typography","hover","disabled"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from 'react';\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    fillWidth: {\n      true: styles['button_fillwidth'],\n    },\n  },\n  defaultVariants: { type: 'default' },\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      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      ({ value, label, className: optionClassName, ...buttonProps }) => {\n        const isActive = isValueSelected(value, currentSelection);\n\n        return (\n          <button\n            key={value}\n            className={cn(buttonVariants({ type, fillWidth }), optionClassName)}\n            aria-pressed={isActive}\n            onClick={() => onButtonGroupClickCommonHandler(value)}\n            role=\"button\"\n            {...buttonProps}\n          >\n            {label}\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","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","optionClassName","buttonProps","isActive","cn","displayName"],"mappings":"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"}

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

@@ -0,0 +1,216 @@
+.header__Cn2aH {
+  max-width: 100%;
+  gap: inherit;
+}
+
+.description__4EWfD {
+  display: flex;
+  width: 100%;
+  flex: 1;
+  flex-direction: column;
+  align-self: start;
+  gap: var(--click-card-horizontal-space-md-gap);
+}
+
+.cardicon__VX2fX {
+  width: var(--click-card-horizontal-icon-size-all);
+  height: var(--click-card-horizontal-icon-size-all);
+}
+
+.contentwrapper__u9SOr {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+}
+
+.contentwrapper_size_md__lNQPZ {
+  gap: var(--click-card-horizontal-space-md-gap);
+}
+
+.contentwrapper_size_sm__GDVYr {
+  gap: var(--click-card-horizontal-space-sm-gap);
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 768px) {
+  .contentwrapper__u9SOr {
+    flex-direction: column;
+  }
+}
+
+.icontextcontentwrapper__D6gbe {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+}
+
+.icontextcontentwrapper_alignment_top__rsOIa {
+  align-items: flex-start;
+}
+
+.icontextcontentwrapper_alignment_center__GiQqi {
+  align-items: center;
+}
+
+.icontextcontentwrapper_size_md__vl0h- {
+  gap: var(--click-card-horizontal-space-md-gap);
+}
+
+.icontextcontentwrapper_size_sm__VNsIL {
+  gap: var(--click-card-horizontal-space-sm-gap);
+}
+
+.wrapper__gPLR5 {
+  display: inline-flex;
+  width: 100%;
+  max-width: 100%;
+  justify-content: flex-start;
+  align-items: center;
+  align-self: auto;
+  border: 1px solid var(--card-stroke-default);
+  border-radius: var(--click-card-horizontal-radii-all);
+  background: var(--card-bg-default);
+  color: var(--card-title-default);
+  font: var(--click-card-horizontal-typography-title-default);
+}
+
+.wrapper_color_default__cSCG8 {
+  --card-bg-default: var(--click-card-horizontal-default-color-background-default);
+  --card-bg-hover: var(--click-card-horizontal-default-color-background-hover);
+  --card-bg-active: var(--click-card-horizontal-default-color-background-active);
+  --card-bg-disabled: var(--click-card-horizontal-default-color-background-disabled);
+  --card-title-default: var(--click-card-horizontal-default-color-title-default);
+  --card-title-hover: var(--click-card-horizontal-default-color-title-hover);
+  --card-title-active: var(--click-card-horizontal-default-color-title-active);
+  --card-title-disabled: var(--click-card-horizontal-default-color-title-disabled);
+  --card-stroke-default: var(--click-card-horizontal-default-color-stroke-default);
+  --card-stroke-hover: var(--click-card-horizontal-default-color-stroke-hover);
+  --card-stroke-active: var(--click-card-horizontal-default-color-stroke-active);
+  --card-stroke-disabled: var(--click-card-horizontal-default-color-stroke-disabled);
+  --card-desc-default: var(--click-card-horizontal-default-color-description-default);
+  --card-desc-hover: var(--click-card-horizontal-default-color-description-hover);
+  --card-desc-active: var(--click-card-horizontal-default-color-description-active);
+  --card-desc-disabled: var(--click-card-horizontal-default-color-description-disabled);
+}
+
+.wrapper_color_muted__DFlsG {
+  --card-bg-default: var(--click-card-horizontal-muted-color-background-default);
+  --card-bg-hover: var(--click-card-horizontal-muted-color-background-hover);
+  --card-bg-active: var(--click-card-horizontal-muted-color-background-active);
+  --card-bg-disabled: var(--click-card-horizontal-muted-color-background-disabled);
+  --card-title-default: var(--click-card-horizontal-muted-color-title-default);
+  --card-title-hover: var(--click-card-horizontal-muted-color-title-hover);
+  --card-title-active: var(--click-card-horizontal-muted-color-title-active);
+  --card-title-disabled: var(--click-card-horizontal-muted-color-title-disabled);
+  --card-stroke-default: var(--click-card-horizontal-muted-color-stroke-default);
+  --card-stroke-hover: var(--click-card-horizontal-muted-color-stroke-hover);
+  --card-stroke-active: var(--click-card-horizontal-muted-color-stroke-active);
+  --card-stroke-disabled: var(--click-card-horizontal-muted-color-stroke-disabled);
+  --card-desc-default: var(--click-card-horizontal-muted-color-description-default);
+  --card-desc-hover: var(--click-card-horizontal-muted-color-description-hover);
+  --card-desc-active: var(--click-card-horizontal-muted-color-description-active);
+  --card-desc-disabled: var(--click-card-horizontal-muted-color-description-disabled);
+}
+
+.wrapper_alignment_top__QcYt3 {
+  align-items: flex-start;
+  align-self: stretch;
+}
+
+.wrapper_alignment_center__X8Sjf {
+  align-items: center;
+  align-self: auto;
+}
+
+.wrapper_size_md__cIFpL {
+  padding: var(--click-card-horizontal-space-md-y) var(--click-card-horizontal-space-md-x);
+}
+
+.wrapper_size_sm__alRqs {
+  padding: var(--click-card-horizontal-space-sm-y) var(--click-card-horizontal-space-sm-x);
+}
+
+.wrapper__gPLR5 .description__4EWfD {
+  color: var(--card-desc-default);
+  font: var(--click-card-horizontal-typography-description-default);
+}
+
+.wrapper__gPLR5.wrapper_selectable__shWc3 {
+  border-color: var(--card-stroke-hover);
+}
+
+.wrapper__gPLR5.wrapper_selectable__shWc3.wrapper_selected__FUouc {
+  border-color: var(--card-stroke-active);
+}
+
+.wrapper__gPLR5:hover {
+  font: var(--click-card-horizontal-typography-title-hover);
+}
+
+.wrapper__gPLR5.wrapper_selectable__shWc3:hover {
+  border-color: var(--card-stroke-default);
+  background-color: var(--card-bg-hover);
+  color: var(--card-title-hover);
+  cursor: pointer;
+}
+
+.wrapper__gPLR5.wrapper_selectable__shWc3.wrapper_selected__FUouc:hover {
+  border-color: var(--card-stroke-active);
+}
+
+.wrapper__gPLR5.wrapper_selectable__shWc3:hover .description__4EWfD {
+  color: var(--card-desc-hover);
+  font: var(--click-card-horizontal-typography-description-hover);
+}
+
+.wrapper__gPLR5.wrapper_selectable__shWc3:active,
+.wrapper__gPLR5.wrapper_selectable__shWc3:focus,
+.wrapper__gPLR5.wrapper_selectable__shWc3:focus-within {
+  border-color: var(--card-stroke-active);
+  background-color: var(--card-bg-active);
+  color: var(--card-title-active);
+}
+
+.wrapper__gPLR5.wrapper_selectable__shWc3:active .description__4EWfD,
+.wrapper__gPLR5.wrapper_selectable__shWc3:focus .description__4EWfD,
+.wrapper__gPLR5.wrapper_selectable__shWc3:focus-within .description__4EWfD {
+  color: var(--card-desc-active);
+  font: var(--click-card-horizontal-typography-description-active);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after hover/active to mirror the source cascade order;
+   pointer-events:none plus tabIndex=-1 prevent hover/focus/active from firing. */
+.wrapper__gPLR5.wrapper_disabled__QRVx8,
+.wrapper__gPLR5.wrapper_disabled__QRVx8:hover,
+.wrapper__gPLR5.wrapper_disabled__QRVx8:active,
+.wrapper__gPLR5.wrapper_disabled__QRVx8:focus,
+.wrapper__gPLR5.wrapper_disabled__QRVx8:focus-within {
+  border: 1px solid var(--card-stroke-disabled);
+  background-color: var(--card-bg-disabled);
+  color: var(--card-title-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.wrapper__gPLR5.wrapper_disabled__QRVx8.wrapper_selected__FUouc,
+.wrapper__gPLR5.wrapper_disabled__QRVx8.wrapper_selected__FUouc:hover,
+.wrapper__gPLR5.wrapper_disabled__QRVx8.wrapper_selected__FUouc:active,
+.wrapper__gPLR5.wrapper_disabled__QRVx8.wrapper_selected__FUouc:focus,
+.wrapper__gPLR5.wrapper_disabled__QRVx8.wrapper_selected__FUouc:focus-within {
+  border-color: var(--card-stroke-active);
+}
+
+.wrapper__gPLR5.wrapper_disabled__QRVx8 .description__4EWfD {
+  color: var(--card-desc-disabled);
+  font: var(--click-card-horizontal-typography-description-disabled);
+}
+
+.wrapper__gPLR5.wrapper_disabled__QRVx8:active,
+.wrapper__gPLR5.wrapper_disabled__QRVx8:focus,
+.wrapper__gPLR5.wrapper_disabled__QRVx8:focus-within {
+  border: 1px solid var(--card-stroke-active);
+}
+/* stylelint-enable no-descending-specificity */

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

@@ -0,0 +1,47 @@
+const header = "header__Cn2aH";
+const description = "description__4EWfD";
+const cardicon = "cardicon__VX2fX";
+const contentwrapper = "contentwrapper__u9SOr";
+const contentwrapper_size_md = "contentwrapper_size_md__lNQPZ";
+const contentwrapper_size_sm = "contentwrapper_size_sm__GDVYr";
+const icontextcontentwrapper = "icontextcontentwrapper__D6gbe";
+const icontextcontentwrapper_alignment_top = "icontextcontentwrapper_alignment_top__rsOIa";
+const icontextcontentwrapper_alignment_center = "icontextcontentwrapper_alignment_center__GiQqi";
+const icontextcontentwrapper_size_md = "icontextcontentwrapper_size_md__vl0h-";
+const icontextcontentwrapper_size_sm = "icontextcontentwrapper_size_sm__VNsIL";
+const wrapper = "wrapper__gPLR5";
+const wrapper_color_default = "wrapper_color_default__cSCG8";
+const wrapper_color_muted = "wrapper_color_muted__DFlsG";
+const wrapper_alignment_top = "wrapper_alignment_top__QcYt3";
+const wrapper_alignment_center = "wrapper_alignment_center__X8Sjf";
+const wrapper_size_md = "wrapper_size_md__cIFpL";
+const wrapper_size_sm = "wrapper_size_sm__alRqs";
+const wrapper_selectable = "wrapper_selectable__shWc3";
+const wrapper_selected = "wrapper_selected__FUouc";
+const wrapper_disabled = "wrapper_disabled__QRVx8";
+const styles = {
+	header: header,
+	description: description,
+	cardicon: cardicon,
+	contentwrapper: contentwrapper,
+	contentwrapper_size_md: contentwrapper_size_md,
+	contentwrapper_size_sm: contentwrapper_size_sm,
+	icontextcontentwrapper: icontextcontentwrapper,
+	icontextcontentwrapper_alignment_top: icontextcontentwrapper_alignment_top,
+	icontextcontentwrapper_alignment_center: icontextcontentwrapper_alignment_center,
+	icontextcontentwrapper_size_md: icontextcontentwrapper_size_md,
+	icontextcontentwrapper_size_sm: icontextcontentwrapper_size_sm,
+	wrapper: wrapper,
+	wrapper_color_default: wrapper_color_default,
+	wrapper_color_muted: wrapper_color_muted,
+	wrapper_alignment_top: wrapper_alignment_top,
+	wrapper_alignment_center: wrapper_alignment_center,
+	wrapper_size_md: wrapper_size_md,
+	wrapper_size_sm: wrapper_size_sm,
+	wrapper_selectable: wrapper_selectable,
+	wrapper_selected: wrapper_selected,
+	wrapper_disabled: wrapper_disabled
+};
+
+export { cardicon, contentwrapper, contentwrapper_size_md, contentwrapper_size_sm, styles as default, description, header, icontextcontentwrapper, icontextcontentwrapper_alignment_center, icontextcontentwrapper_alignment_top, icontextcontentwrapper_size_md, icontextcontentwrapper_size_sm, wrapper, wrapper_alignment_center, wrapper_alignment_top, wrapper_color_default, wrapper_color_muted, wrapper_disabled, wrapper_selectable, wrapper_selected, wrapper_size_md, wrapper_size_sm };
+//# sourceMappingURL=CardHorizontal.module.css.js.map

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

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