@clickhouse/click-ui 0.9.0 → 1.0.0-rc2

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

@@ -51,15 +51,26 @@ const _Link = ({
   ...props
 }, ref) => {
   const Component = component ?? "a";
-  return /* @__PURE__ */ jsxs(Component, { ref, onClick, ...props, className: cn(linkVariants({
-    size,
-    weight
-  }), className), children: [
-    children,
-    icon && /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(SvgImage, { name: icon, className: cn(iconVariants({
-      size
-    })), "data-testid": icon }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      ref,
+      onClick,
+      ...props,
+      className: cn(linkVariants({ size, weight }), className),
+      children: [
+        children,
+        icon && /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+          SvgImage,
+          {
+            name: icon,
+            className: cn(iconVariants({ size })),
+            "data-testid": icon
+          }
+        ) })
+      ]
+    }
+  );
 };
 const Link = forwardRef(_Link);
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactEventHandler,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Link.module.css';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n  /** The font size of the link text */\n  size?: TextSize;\n  /** The font weight of the link text */\n  weight?: TextWeight;\n  /** Click event handler */\n  onClick?: ReactEventHandler;\n  /** The content to display inside the link */\n  children?: React.ReactNode;\n  /** Optional icon to display after the link text */\n  icon?: IconName;\n  /** Custom component to render as the link element */\n  component?: T;\n}\n\nconst linkVariants = cva(styles.link, {\n  variants: {\n    size: {\n      xs: styles['link_size_xs'],\n      sm: styles['link_size_sm'],\n      md: styles['link_size_md'],\n      lg: styles['link_size_lg'],\n    },\n    weight: {\n      normal: styles['link_weight_normal'],\n      medium: styles['link_weight_medium'],\n      semibold: styles['link_weight_semibold'],\n      bold: styles['link_weight_bold'],\n      mono: styles['link_weight_mono'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst iconVariants = cva(styles['link__icon'], {\n  variants: {\n    size: {\n      xs: styles['link__icon_size_xs'],\n      sm: styles['link__icon_size_sm'],\n      md: styles['link__icon_size_md'],\n      lg: styles['link__icon_size_lg'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n  props: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n  {\n    size = 'md',\n    weight = 'normal',\n    onClick,\n    icon,\n    children,\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'a';\n  return (\n    <Component\n      ref={ref}\n      onClick={onClick}\n      {...props}\n      className={cn(linkVariants({ size, weight }), className)}\n    >\n      {children}\n      {icon && (\n        <span>\n          <Icon\n            name={icon}\n            className={cn(iconVariants({ size }))}\n            data-testid={icon}\n          />\n        </span>\n      )}\n    </Component>\n  );\n};\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["linkVariants","cva","styles","link","variants","size","xs","sm","md","lg","weight","normal","medium","semibold","bold","mono","defaultVariants","iconVariants","_Link","onClick","icon","children","component","className","props","ref","Component","cn","Icon","Link","forwardRef"],"mappings":";;;;;;;AA6BA,MAAMA,YAAAA,GAAeC,GAAAA,CAAIC,MAAAA,CAAOC,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,OAAO,cAAc,CAAA;AAAA,MACzBK,EAAAA,EAAIL,OAAO,cAAc,CAAA;AAAA,MACzBM,EAAAA,EAAIN,OAAO,cAAc,CAAA;AAAA,MACzBO,EAAAA,EAAIP,OAAO,cAAc;AAAA,KAC3B;AAAA,IACAQ,MAAAA,EAAQ;AAAA,MACNC,MAAAA,EAAQT,OAAO,oBAAoB,CAAA;AAAA,MACnCU,MAAAA,EAAQV,OAAO,oBAAoB,CAAA;AAAA,MACnCW,QAAAA,EAAUX,OAAO,sBAAsB,CAAA;AAAA,MACvCY,IAAAA,EAAMZ,OAAO,kBAAkB,CAAA;AAAA,MAC/Ba,IAAAA,EAAMb,OAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,IAAA;AAAA,IACNK,MAAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAED,MAAMO,YAAAA,GAAehB,GAAAA,CAAIC,MAAAA,CAAO,YAAY,CAAA,EAAG;AAAA,EAC7CE,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,OAAO,oBAAoB,CAAA;AAAA,MAC/BK,EAAAA,EAAIL,OAAO,oBAAoB,CAAA;AAAA,MAC/BM,EAAAA,EAAIN,OAAO,oBAAoB,CAAA;AAAA,MAC/BO,EAAAA,EAAIP,OAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAOD,MAAMa,QAAQ,CACZ;AAAA,EACEb,IAAAA,GAAO,IAAA;AAAA,EACPK,MAAAA,GAAS,QAAA;AAAA,EACTS,OAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACgF,CAAA,EACrFC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,SAAAA,IAAa,GAAA;AAC/B,EAAA,uBACE,IAAA,CAAC,aACC,GAAA,EACA,OAAA,EACA,GAAIE,KAAAA,EACJ,SAAA,EAAWG,GAAG3B,YAAAA,CAAa;AAAA,IAAEK,IAAAA;AAAAA,IAAMK;AAAAA,GAAQ,CAAA,EAAGa,SAAS,CAAA,EAEtDF,QAAAA,EAAAA;AAAAA,IAAAA,QAAAA;AAAAA,IACAD,IAAAA,wBACE,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAACQ,YACC,IAAA,EAAMR,IAAAA,EACN,SAAA,EAAWO,EAAAA,CAAGV,YAAAA,CAAa;AAAA,MAAEZ;AAAAA,KAAM,CAAC,CAAA,EACpC,aAAA,EAAae,MAAK,CAAA,EAEtB;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AACO,MAAMS,IAAAA,GAAiCC,WAAWZ,KAAK;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactEventHandler,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Link.module.css';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n  /** The font size of the link text */\n  size?: TextSize;\n  /** The font weight of the link text */\n  weight?: TextWeight;\n  /** Click event handler */\n  onClick?: ReactEventHandler;\n  /** The content to display inside the link */\n  children?: React.ReactNode;\n  /** Optional icon to display after the link text */\n  icon?: IconName;\n  /** Custom component to render as the link element */\n  component?: T;\n}\n\nconst linkVariants = cva(styles.link, {\n  variants: {\n    size: {\n      xs: styles['link_size_xs'],\n      sm: styles['link_size_sm'],\n      md: styles['link_size_md'],\n      lg: styles['link_size_lg'],\n    },\n    weight: {\n      normal: styles['link_weight_normal'],\n      medium: styles['link_weight_medium'],\n      semibold: styles['link_weight_semibold'],\n      bold: styles['link_weight_bold'],\n      mono: styles['link_weight_mono'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst iconVariants = cva(styles['link__icon'], {\n  variants: {\n    size: {\n      xs: styles['link__icon_size_xs'],\n      sm: styles['link__icon_size_sm'],\n      md: styles['link__icon_size_md'],\n      lg: styles['link__icon_size_lg'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n  props: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n  {\n    size = 'md',\n    weight = 'normal',\n    onClick,\n    icon,\n    children,\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'a';\n  return (\n    <Component\n      ref={ref}\n      onClick={onClick}\n      {...props}\n      className={cn(linkVariants({ size, weight }), className)}\n    >\n      {children}\n      {icon && (\n        <span>\n          <Icon\n            name={icon}\n            className={cn(iconVariants({ size }))}\n            data-testid={icon}\n          />\n        </span>\n      )}\n    </Component>\n  );\n};\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["Icon"],"mappings":";;;;;;;AA6BA,MAAM,YAAA,GAAe,GAAA,CAAI,MAAA,CAAO,IAAA,EAAM;AAAA,EACpC,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,OAAO,cAAc,CAAA;AAAA,MACzB,EAAA,EAAI,OAAO,cAAc,CAAA;AAAA,MACzB,EAAA,EAAI,OAAO,cAAc,CAAA;AAAA,MACzB,EAAA,EAAI,OAAO,cAAc;AAAA,KAC3B;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,MAAA,EAAQ,OAAO,oBAAoB,CAAA;AAAA,MACnC,MAAA,EAAQ,OAAO,oBAAoB,CAAA;AAAA,MACnC,QAAA,EAAU,OAAO,sBAAsB,CAAA;AAAA,MACvC,IAAA,EAAM,OAAO,kBAAkB,CAAA;AAAA,MAC/B,IAAA,EAAM,OAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,MAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAED,MAAM,YAAA,GAAe,GAAA,CAAI,MAAA,CAAO,YAAY,CAAA,EAAG;AAAA,EAC7C,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,OAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAI,OAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAI,OAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAI,OAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAOD,MAAM,QAAQ,CACZ;AAAA,EACE,IAAA,GAAO,IAAA;AAAA,EACP,MAAA,GAAS,QAAA;AAAA,EACT,OAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,KACG;AACH,EAAA,MAAM,YAAY,SAAA,IAAa,GAAA;AAC/B,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,OAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,GAAG,YAAA,CAAa,EAAE,MAAM,MAAA,EAAQ,GAAG,SAAS,CAAA;AAAA,MAEtD,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,IAAA,wBACE,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,UAACA,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,WAAW,EAAA,CAAG,YAAA,CAAa,EAAE,IAAA,EAAM,CAAC,CAAA;AAAA,YACpC,aAAA,EAAa;AAAA;AAAA,SACf,EACF;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AACO,MAAM,IAAA,GAAiC,WAAW,KAAK;;;;"}

package/dist/esm/components/MiddleTruncator/MiddleTruncator.css

@@ -1,4 +1,4 @@
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
 .truncator__j4dr4 {
   display: flex;
   width: auto;
@@ -20,3 +20,4 @@
   flex-shrink: 0;
   white-space: nowrap;
 }
+}

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

@@ -8,10 +8,18 @@ const MiddleTruncator = ({
 }) => {
   const startText = text.slice(0, -trailingChars);
   const endText = text.slice(-trailingChars);
-  return /* @__PURE__ */ jsxs("div", { className: styles.truncator, title: text, "aria-label": text, children: [
-    /* @__PURE__ */ jsx("span", { className: styles.truncator__start, children: startText }),
-    /* @__PURE__ */ jsx("span", { className: styles.truncator__end, children: endText })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styles.truncator,
+      title: text,
+      "aria-label": text,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: styles.truncator__start, children: startText }),
+        /* @__PURE__ */ jsx("span", { className: styles.truncator__end, children: endText })
+      ]
+    }
+  );
 };
 
 export { MiddleTruncator };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/MiddleTruncator/MiddleTruncator.tsx"],"sourcesContent":["import styles from './MiddleTruncator.module.css';\n\nexport const MiddleTruncator = ({\n  text,\n  trailingChars = 10,\n}: {\n  text: string;\n  trailingChars?: number;\n}) => {\n  const startText = text.slice(0, -trailingChars);\n  const endText = text.slice(-trailingChars);\n\n  return (\n    <div\n      className={styles.truncator}\n      title={text}\n      aria-label={text}\n    >\n      <span className={styles.truncator__start}>{startText}</span>\n      <span className={styles.truncator__end}>{endText}</span>\n    </div>\n  );\n};\n"],"names":["MiddleTruncator","text","trailingChars","startText","slice","endText","styles","truncator","truncator__start","truncator__end"],"mappings":";;;AAEO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,IAAAA;AAAAA,EACAC,aAAAA,GAAgB;AAIlB,CAAA,KAAM;AACJ,EAAA,MAAMC,SAAAA,GAAYF,IAAAA,CAAKG,KAAAA,CAAM,CAAA,EAAG,CAACF,aAAa,CAAA;AAC9C,EAAA,MAAMG,OAAAA,GAAUJ,IAAAA,CAAKG,KAAAA,CAAM,CAACF,aAAa,CAAA;AAEzC,EAAA,uBACE,IAAA,CAAC,SACC,SAAA,EAAWI,MAAAA,CAAOC,WAClB,KAAA,EAAON,IAAAA,EACP,cAAYA,IAAAA,EAEZ,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWK,MAAAA,CAAOE,gBAAAA,EAAmBL,QAAAA,EAAAA,SAAAA,EAAU,CAAA;AAAA,oBACrD,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWG,MAAAA,CAAOG,gBAAiBJ,QAAAA,EAAAA,OAAAA,EAAQ;AAAA,GAAA,EACnD,CAAA;AAEJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/MiddleTruncator/MiddleTruncator.tsx"],"sourcesContent":["import styles from './MiddleTruncator.module.css';\n\nexport const MiddleTruncator = ({\n  text,\n  trailingChars = 10,\n}: {\n  text: string;\n  trailingChars?: number;\n}) => {\n  const startText = text.slice(0, -trailingChars);\n  const endText = text.slice(-trailingChars);\n\n  return (\n    <div\n      className={styles.truncator}\n      title={text}\n      aria-label={text}\n    >\n      <span className={styles.truncator__start}>{startText}</span>\n      <span className={styles.truncator__end}>{endText}</span>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AAEO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,IAAA;AAAA,EACA,aAAA,GAAgB;AAClB,CAAA,KAGM;AACJ,EAAA,MAAM,SAAA,GAAY,IAAA,CAAK,KAAA,CAAM,CAAA,EAAG,CAAC,aAAa,CAAA;AAC9C,EAAA,MAAM,OAAA,GAAU,IAAA,CAAK,KAAA,CAAM,CAAC,aAAa,CAAA;AAEzC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAA,CAAO,SAAA;AAAA,MAClB,KAAA,EAAO,IAAA;AAAA,MACP,YAAA,EAAY,IAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,gBAAA,EAAmB,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,wBACrD,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,gBAAiB,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA;AAAA,GACnD;AAEJ;;;;"}

package/dist/esm/components/MultiAccordion/MultiAccordion.css

@@ -1,4 +1,4 @@
-.multi-accordion__ntYTM {
+@layer clickui {.multi-accordion__ntYTM {
   display: flex;
   flex-direction: column;
   justify-content: start;
@@ -198,3 +198,4 @@
 .multi-accordion__status-icon_completed__z5-XJ svg path:first-of-type {
   stroke: var(--global-color-accent-default) !important;
 }
+}

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

@@ -56,10 +56,14 @@ const MultiAccordion = ({
     showCheck,
     markAsCompleted
   };
-  return /* @__PURE__ */ jsx(RadixAccordion.Root, { ...delegated, className: cn(rootVariants({
-    fillWidth,
-    gap
-  }), className), children: /* @__PURE__ */ jsx(MultiAccordionContext.Provider, { value: contextValue, children }) });
+  return /* @__PURE__ */ jsx(
+    RadixAccordion.Root,
+    {
+      ...delegated,
+      className: cn(rootVariants({ fillWidth, gap }), className),
+      children: /* @__PURE__ */ jsx(MultiAccordionContext.Provider, { value: contextValue, children })
+    }
+  );
 };
 const itemVariants = cva(styles["multi-accordion__item"], {
   variants: {
@@ -126,13 +130,7 @@ const MultiAccordionItem = ({
   className,
   ...props
 }) => {
-  const {
-    fillWidth,
-    size,
-    showBorder,
-    showCheck,
-    markAsCompleted
-  } = useContext(MultiAccordionContext);
+  const { fillWidth, size, showBorder, showCheck, markAsCompleted } = useContext(MultiAccordionContext);
   const onClickStatus = (e) => {
     e.preventDefault();
     if (typeof markAsCompleted === "function") {
@@ -140,31 +138,88 @@ const MultiAccordionItem = ({
     }
   };
   const customSize = size === "none" ? "sm" : size;
-  return /* @__PURE__ */ jsxs(RadixAccordion.Item, { value, ...props, className: cn(itemVariants({
-    showBorder,
-    fillWidth
-  }), className), children: [
-    /* @__PURE__ */ jsxs(RadixAccordion.Trigger, { className: triggerVariants({
-      size,
-      font: customSize,
-      color: color ?? "default"
-    }), children: [
-      /* @__PURE__ */ jsxs("div", { className: styles["multi-accordion__icons-wrapper"], children: [
-        /* @__PURE__ */ jsx("div", { className: styles["multi-accordion__icon-wrapper"], children: /* @__PURE__ */ jsx(SvgImage, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
-        icon ? /* @__PURE__ */ jsx(SvgImage, { name: icon, size: iconSize ?? customSize }) : null
-      ] }),
-      /* @__PURE__ */ jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", overflow: "hidden", children: [
-        /* @__PURE__ */ jsx(Text, { className: styles["multi-accordion__title"], component: "span", size: customSize, fillWidth, children: title }),
-        showCheck && /* @__PURE__ */ jsx(SvgImage, { className: cn(styles["multi-accordion__status-icon"], isCompleted && styles["multi-accordion__status-icon_completed"]), name: isCompleted ? "check-in-circle" : "circle", size: iconSize ?? customSize, "aria-label": "accordion icon status", onClick: onClickStatus, "data-icon": "accordion-status", "data-testid": "accordion-status-icon" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(RadixAccordion.Content, { className: contentVariants({
-      size
-    }), children: [
-      /* @__PURE__ */ jsx(Spacer, { size: gap }),
-      children
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    RadixAccordion.Item,
+    {
+      value,
+      ...props,
+      className: cn(itemVariants({ showBorder, fillWidth }), className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          RadixAccordion.Trigger,
+          {
+            className: triggerVariants({
+              size,
+              font: customSize,
+              color: color ?? "default"
+            }),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: styles["multi-accordion__icons-wrapper"], children: [
+                /* @__PURE__ */ jsx("div", { className: styles["multi-accordion__icon-wrapper"], children: /* @__PURE__ */ jsx(
+                  SvgImage,
+                  {
+                    name: "chevron-right",
+                    size: iconSize ?? customSize,
+                    "aria-label": "accordion icon"
+                  }
+                ) }),
+                icon ? /* @__PURE__ */ jsx(
+                  SvgImage,
+                  {
+                    name: icon,
+                    size: iconSize ?? customSize
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ jsxs(
+                Container,
+                {
+                  isResponsive: false,
+                  gap: "sm",
+                  alignItems: "center",
+                  fillWidth: true,
+                  justifyContent: "space-between",
+                  component: "span",
+                  overflow: "hidden",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        className: styles["multi-accordion__title"],
+                        component: "span",
+                        size: customSize,
+                        fillWidth,
+                        children: title
+                      }
+                    ),
+                    showCheck && /* @__PURE__ */ jsx(
+                      SvgImage,
+                      {
+                        className: cn(
+                          styles["multi-accordion__status-icon"],
+                          isCompleted && styles["multi-accordion__status-icon_completed"]
+                        ),
+                        name: isCompleted ? "check-in-circle" : "circle",
+                        size: iconSize ?? customSize,
+                        "aria-label": "accordion icon status",
+                        onClick: onClickStatus,
+                        "data-icon": "accordion-status",
+                        "data-testid": "accordion-status-icon"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(RadixAccordion.Content, { className: contentVariants({ size }), children: [
+          /* @__PURE__ */ jsx(Spacer, { size: gap }),
+          children
+        ] })
+      ]
+    }
+  );
 };
 MultiAccordionItem.displayName = "MultiAccordion.Item";
 MultiAccordion.Item = MultiAccordionItem;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/MultiAccordion/MultiAccordion.tsx"],"sourcesContent":["import * as RadixAccordion from '@radix-ui/react-accordion';\nimport type { AssetSize } from '@/types';\nimport { Icon, type IconName } from '@/components/Icon';\n\nimport { Container } from '@/components/Container';\nimport { Spacer } from '@/components/Spacer';\nimport { Text } from '@/components/Text';\nimport {\n  createContext,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n  useContext,\n} from 'react';\nimport { GapOptions } from '@/components/Container';\nimport { SizeType as SpacerSizeType } from '@/components/Spacer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './MultiAccordion.module.css';\n\ntype Size = 'none' | 'sm' | 'md' | 'lg';\ntype Color = 'default' | 'link';\n\ntype MarkAsCompletedFunctionType = (value: string) => void | Promise<void>;\n\ninterface MultiAccordionCommonProps {\n  /** The accordion items to render */\n  children: React.ReactNode;\n  /** The size variant of the accordion */\n  size?: Size;\n  /** Whether the accordion should fill the full width of its container */\n  fillWidth?: boolean;\n  /** The gap between accordion items */\n  gap?: GapOptions;\n  /** Whether to show a border around each accordion item */\n  showBorder?: boolean;\n  /** Whether to show a check/completion indicator on items */\n  showCheck?: boolean;\n  /** Callback function to mark an item as completed */\n  markAsCompleted?: MarkAsCompletedFunctionType;\n}\n\nexport type MultiAccordionProps = MultiAccordionCommonProps &\n  (\n    | Omit<RadixAccordion.AccordionMultipleProps, 'children'>\n    | Omit<RadixAccordion.AccordionSingleProps, 'children'>\n  );\n\ninterface MultiAccordionContextProps {\n  size: Size;\n  fillWidth: boolean;\n  showBorder: boolean;\n  showCheck: boolean;\n  markAsCompleted?: MarkAsCompletedFunctionType;\n}\n\nconst MultiAccordionContext = createContext<MultiAccordionContextProps>({\n  size: 'md',\n  fillWidth: true,\n  showBorder: true,\n  showCheck: false,\n});\n\nconst rootVariants = cva(styles['multi-accordion'], {\n  variants: {\n    fillWidth: {\n      true: styles['multi-accordion_fill-width'],\n      false: '',\n    },\n    gap: {\n      none: styles['multi-accordion_gap_none'],\n      xxs: styles['multi-accordion_gap_xxs'],\n      xs: styles['multi-accordion_gap_xs'],\n      sm: styles['multi-accordion_gap_sm'],\n      md: styles['multi-accordion_gap_md'],\n      lg: styles['multi-accordion_gap_lg'],\n      xl: styles['multi-accordion_gap_xl'],\n      xxl: styles['multi-accordion_gap_xxl'],\n    },\n  },\n  defaultVariants: {\n    fillWidth: true,\n    gap: 'md',\n  },\n});\n\nexport const MultiAccordion = ({\n  size = 'md',\n  children,\n  fillWidth = true,\n  showCheck = false,\n  showBorder = true,\n  gap = 'md',\n  markAsCompleted,\n  className,\n  ...delegated\n}: MultiAccordionProps) => {\n  const contextValue = {\n    size,\n    fillWidth,\n    showBorder,\n    showCheck,\n    markAsCompleted,\n  };\n\n  return (\n    <RadixAccordion.Root\n      {...delegated}\n      className={cn(rootVariants({ fillWidth, gap }), className)}\n    >\n      <MultiAccordionContext.Provider value={contextValue}>\n        {children}\n      </MultiAccordionContext.Provider>\n    </RadixAccordion.Root>\n  );\n};\ninterface MultiAccordionItemProps extends Omit<\n  RadixAccordion.AccordionItemProps,\n  'title'\n> {\n  /** The title text or element displayed in the accordion item header */\n  title: ReactNode;\n  /** The color variant of the item */\n  color?: Color;\n  /** Optional icon to display next to the title */\n  icon?: IconName;\n  /** Size of the optional icon */\n  iconSize?: AssetSize;\n  /** Gap size between the header and content */\n  gap?: SpacerSizeType;\n  /** Whether this item is marked as completed */\n  isCompleted?: boolean;\n}\n\nconst itemVariants = cva(styles['multi-accordion__item'], {\n  variants: {\n    showBorder: {\n      true: '',\n      false: styles['multi-accordion__item_no-border'],\n    },\n    fillWidth: {\n      true: styles['multi-accordion__item_fill-width'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showBorder: true,\n    fillWidth: true,\n  },\n});\n\nconst triggerVariants = cva(styles['multi-accordion__trigger'], {\n  variants: {\n    size: {\n      none: styles['multi-accordion__trigger_size_none'],\n      sm: styles['multi-accordion__trigger_size_sm'],\n      md: styles['multi-accordion__trigger_size_md'],\n      lg: styles['multi-accordion__trigger_size_lg'],\n    },\n    font: {\n      sm: styles['multi-accordion__trigger_font_sm'],\n      md: styles['multi-accordion__trigger_font_md'],\n      lg: styles['multi-accordion__trigger_font_lg'],\n    },\n    color: {\n      default: styles['multi-accordion__trigger_color_default'],\n      link: styles['multi-accordion__trigger_color_link'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    font: 'md',\n    color: 'default',\n  },\n});\n\nconst contentVariants = cva(styles['multi-accordion__content'], {\n  variants: {\n    size: {\n      none: styles['multi-accordion__content_padding_none'],\n      sm: styles['multi-accordion__content_padding_sm'],\n      md: styles['multi-accordion__content_padding_md'],\n      lg: styles['multi-accordion__content_padding_lg'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst MultiAccordionItem = ({\n  value,\n  title,\n  color,\n  icon,\n  iconSize,\n  gap,\n  children,\n  isCompleted = false,\n  className,\n  ...props\n}: MultiAccordionItemProps): ReactElement => {\n  const { fillWidth, size, showBorder, showCheck, markAsCompleted } =\n    useContext(MultiAccordionContext);\n\n  const onClickStatus: MouseEventHandler<HTMLOrSVGElement> = e => {\n    e.preventDefault();\n    if (typeof markAsCompleted === 'function') {\n      markAsCompleted(value);\n    }\n  };\n\n  const customSize = size === 'none' ? 'sm' : size;\n\n  return (\n    <RadixAccordion.Item\n      value={value}\n      {...props}\n      className={cn(itemVariants({ showBorder, fillWidth }), className)}\n    >\n      <RadixAccordion.Trigger\n        className={triggerVariants({\n          size,\n          font: customSize,\n          color: color ?? 'default',\n        })}\n      >\n        <div className={styles['multi-accordion__icons-wrapper']}>\n          <div className={styles['multi-accordion__icon-wrapper']}>\n            <Icon\n              name=\"chevron-right\"\n              size={iconSize ?? customSize}\n              aria-label=\"accordion icon\"\n            />\n          </div>\n          {icon ? (\n            <Icon\n              name={icon}\n              size={iconSize ?? customSize}\n            />\n          ) : null}\n        </div>\n        <Container\n          isResponsive={false}\n          gap=\"sm\"\n          alignItems=\"center\"\n          fillWidth\n          justifyContent=\"space-between\"\n          component=\"span\"\n          overflow=\"hidden\"\n        >\n          <Text\n            className={styles['multi-accordion__title']}\n            component=\"span\"\n            size={customSize}\n            fillWidth={fillWidth}\n          >\n            {title}\n          </Text>\n          {showCheck && (\n            <Icon\n              className={cn(\n                styles['multi-accordion__status-icon'],\n                isCompleted && styles['multi-accordion__status-icon_completed']\n              )}\n              name={isCompleted ? 'check-in-circle' : 'circle'}\n              size={iconSize ?? customSize}\n              aria-label=\"accordion icon status\"\n              onClick={onClickStatus}\n              data-icon=\"accordion-status\"\n              data-testid=\"accordion-status-icon\"\n            />\n          )}\n        </Container>\n      </RadixAccordion.Trigger>\n      <RadixAccordion.Content className={contentVariants({ size })}>\n        <Spacer size={gap} />\n        {children}\n      </RadixAccordion.Content>\n    </RadixAccordion.Item>\n  );\n};\n\nMultiAccordionItem.displayName = 'MultiAccordion.Item';\nMultiAccordion.Item = MultiAccordionItem;\n"],"names":["MultiAccordionContext","createContext","size","fillWidth","showBorder","showCheck","rootVariants","cva","styles","variants","true","false","gap","none","xxs","xs","sm","md","lg","xl","xxl","defaultVariants","MultiAccordion","children","markAsCompleted","className","delegated","contextValue","cn","itemVariants","triggerVariants","font","color","default","link","contentVariants","MultiAccordionItem","value","title","icon","iconSize","isCompleted","props","useContext","onClickStatus","e","preventDefault","customSize","Icon","displayName","Item"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/MultiAccordion/MultiAccordion.tsx"],"sourcesContent":["import * as RadixAccordion from '@radix-ui/react-accordion';\nimport type { AssetSize } from '@/types';\nimport { Icon, type IconName } from '@/components/Icon';\n\nimport { Container } from '@/components/Container';\nimport { Spacer } from '@/components/Spacer';\nimport { Text } from '@/components/Text';\nimport {\n  createContext,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n  useContext,\n} from 'react';\nimport { GapOptions } from '@/components/Container';\nimport { SizeType as SpacerSizeType } from '@/components/Spacer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './MultiAccordion.module.css';\n\ntype Size = 'none' | 'sm' | 'md' | 'lg';\ntype Color = 'default' | 'link';\n\ntype MarkAsCompletedFunctionType = (value: string) => void | Promise<void>;\n\ninterface MultiAccordionCommonProps {\n  /** The accordion items to render */\n  children: React.ReactNode;\n  /** The size variant of the accordion */\n  size?: Size;\n  /** Whether the accordion should fill the full width of its container */\n  fillWidth?: boolean;\n  /** The gap between accordion items */\n  gap?: GapOptions;\n  /** Whether to show a border around each accordion item */\n  showBorder?: boolean;\n  /** Whether to show a check/completion indicator on items */\n  showCheck?: boolean;\n  /** Callback function to mark an item as completed */\n  markAsCompleted?: MarkAsCompletedFunctionType;\n}\n\nexport type MultiAccordionProps = MultiAccordionCommonProps &\n  (\n    | Omit<RadixAccordion.AccordionMultipleProps, 'children'>\n    | Omit<RadixAccordion.AccordionSingleProps, 'children'>\n  );\n\ninterface MultiAccordionContextProps {\n  size: Size;\n  fillWidth: boolean;\n  showBorder: boolean;\n  showCheck: boolean;\n  markAsCompleted?: MarkAsCompletedFunctionType;\n}\n\nconst MultiAccordionContext = createContext<MultiAccordionContextProps>({\n  size: 'md',\n  fillWidth: true,\n  showBorder: true,\n  showCheck: false,\n});\n\nconst rootVariants = cva(styles['multi-accordion'], {\n  variants: {\n    fillWidth: {\n      true: styles['multi-accordion_fill-width'],\n      false: '',\n    },\n    gap: {\n      none: styles['multi-accordion_gap_none'],\n      xxs: styles['multi-accordion_gap_xxs'],\n      xs: styles['multi-accordion_gap_xs'],\n      sm: styles['multi-accordion_gap_sm'],\n      md: styles['multi-accordion_gap_md'],\n      lg: styles['multi-accordion_gap_lg'],\n      xl: styles['multi-accordion_gap_xl'],\n      xxl: styles['multi-accordion_gap_xxl'],\n    },\n  },\n  defaultVariants: {\n    fillWidth: true,\n    gap: 'md',\n  },\n});\n\nexport const MultiAccordion = ({\n  size = 'md',\n  children,\n  fillWidth = true,\n  showCheck = false,\n  showBorder = true,\n  gap = 'md',\n  markAsCompleted,\n  className,\n  ...delegated\n}: MultiAccordionProps) => {\n  const contextValue = {\n    size,\n    fillWidth,\n    showBorder,\n    showCheck,\n    markAsCompleted,\n  };\n\n  return (\n    <RadixAccordion.Root\n      {...delegated}\n      className={cn(rootVariants({ fillWidth, gap }), className)}\n    >\n      <MultiAccordionContext.Provider value={contextValue}>\n        {children}\n      </MultiAccordionContext.Provider>\n    </RadixAccordion.Root>\n  );\n};\ninterface MultiAccordionItemProps extends Omit<\n  RadixAccordion.AccordionItemProps,\n  'title'\n> {\n  /** The title text or element displayed in the accordion item header */\n  title: ReactNode;\n  /** The color variant of the item */\n  color?: Color;\n  /** Optional icon to display next to the title */\n  icon?: IconName;\n  /** Size of the optional icon */\n  iconSize?: AssetSize;\n  /** Gap size between the header and content */\n  gap?: SpacerSizeType;\n  /** Whether this item is marked as completed */\n  isCompleted?: boolean;\n}\n\nconst itemVariants = cva(styles['multi-accordion__item'], {\n  variants: {\n    showBorder: {\n      true: '',\n      false: styles['multi-accordion__item_no-border'],\n    },\n    fillWidth: {\n      true: styles['multi-accordion__item_fill-width'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showBorder: true,\n    fillWidth: true,\n  },\n});\n\nconst triggerVariants = cva(styles['multi-accordion__trigger'], {\n  variants: {\n    size: {\n      none: styles['multi-accordion__trigger_size_none'],\n      sm: styles['multi-accordion__trigger_size_sm'],\n      md: styles['multi-accordion__trigger_size_md'],\n      lg: styles['multi-accordion__trigger_size_lg'],\n    },\n    font: {\n      sm: styles['multi-accordion__trigger_font_sm'],\n      md: styles['multi-accordion__trigger_font_md'],\n      lg: styles['multi-accordion__trigger_font_lg'],\n    },\n    color: {\n      default: styles['multi-accordion__trigger_color_default'],\n      link: styles['multi-accordion__trigger_color_link'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    font: 'md',\n    color: 'default',\n  },\n});\n\nconst contentVariants = cva(styles['multi-accordion__content'], {\n  variants: {\n    size: {\n      none: styles['multi-accordion__content_padding_none'],\n      sm: styles['multi-accordion__content_padding_sm'],\n      md: styles['multi-accordion__content_padding_md'],\n      lg: styles['multi-accordion__content_padding_lg'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst MultiAccordionItem = ({\n  value,\n  title,\n  color,\n  icon,\n  iconSize,\n  gap,\n  children,\n  isCompleted = false,\n  className,\n  ...props\n}: MultiAccordionItemProps): ReactElement => {\n  const { fillWidth, size, showBorder, showCheck, markAsCompleted } =\n    useContext(MultiAccordionContext);\n\n  const onClickStatus: MouseEventHandler<HTMLOrSVGElement> = e => {\n    e.preventDefault();\n    if (typeof markAsCompleted === 'function') {\n      markAsCompleted(value);\n    }\n  };\n\n  const customSize = size === 'none' ? 'sm' : size;\n\n  return (\n    <RadixAccordion.Item\n      value={value}\n      {...props}\n      className={cn(itemVariants({ showBorder, fillWidth }), className)}\n    >\n      <RadixAccordion.Trigger\n        className={triggerVariants({\n          size,\n          font: customSize,\n          color: color ?? 'default',\n        })}\n      >\n        <div className={styles['multi-accordion__icons-wrapper']}>\n          <div className={styles['multi-accordion__icon-wrapper']}>\n            <Icon\n              name=\"chevron-right\"\n              size={iconSize ?? customSize}\n              aria-label=\"accordion icon\"\n            />\n          </div>\n          {icon ? (\n            <Icon\n              name={icon}\n              size={iconSize ?? customSize}\n            />\n          ) : null}\n        </div>\n        <Container\n          isResponsive={false}\n          gap=\"sm\"\n          alignItems=\"center\"\n          fillWidth\n          justifyContent=\"space-between\"\n          component=\"span\"\n          overflow=\"hidden\"\n        >\n          <Text\n            className={styles['multi-accordion__title']}\n            component=\"span\"\n            size={customSize}\n            fillWidth={fillWidth}\n          >\n            {title}\n          </Text>\n          {showCheck && (\n            <Icon\n              className={cn(\n                styles['multi-accordion__status-icon'],\n                isCompleted && styles['multi-accordion__status-icon_completed']\n              )}\n              name={isCompleted ? 'check-in-circle' : 'circle'}\n              size={iconSize ?? customSize}\n              aria-label=\"accordion icon status\"\n              onClick={onClickStatus}\n              data-icon=\"accordion-status\"\n              data-testid=\"accordion-status-icon\"\n            />\n          )}\n        </Container>\n      </RadixAccordion.Trigger>\n      <RadixAccordion.Content className={contentVariants({ size })}>\n        <Spacer size={gap} />\n        {children}\n      </RadixAccordion.Content>\n    </RadixAccordion.Item>\n  );\n};\n\nMultiAccordionItem.displayName = 'MultiAccordion.Item';\nMultiAccordion.Item = MultiAccordionItem;\n"],"names":["Icon"],"mappings":"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"}

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

@@ -13,39 +13,62 @@ const MultiSelect = ({
   onOpenChange: onOpenChangeProp,
   ...props
 }) => {
-  const [selectedValues, setSelectedValues] = useState(valueProp ?? defaultValue ?? []);
+  const [selectedValues, setSelectedValues] = useState(
+    valueProp ?? defaultValue ?? []
+  );
   const [open, setOpen] = useState(defaultOpen ?? false);
-  const onOpenChange = useCallback((open2) => {
-    setOpen(open2);
-    if (typeof onOpenChangeProp === "function") {
-      onOpenChangeProp(open2);
-    }
-  }, [onOpenChangeProp]);
+  const onOpenChange = useCallback(
+    (open2) => {
+      setOpen(open2);
+      if (typeof onOpenChangeProp === "function") {
+        onOpenChangeProp(open2);
+      }
+    },
+    [onOpenChangeProp]
+  );
   useUpdateEffect(() => {
     setSelectedValues(valueProp ?? []);
   }, [valueProp]);
-  const onChange = useCallback((values, type, evt) => {
-    setSelectedValues(values);
-    if (typeof onSelectProp === "function") {
-      onSelectProp(values, type, evt);
-    }
-  }, [onSelectProp]);
-  const onSelect = useCallback((value, type) => {
-    let newValues = [];
-    if (selectedValues.includes(value)) {
-      newValues = selectedValues.filter((currentValue) => currentValue !== value);
-    } else {
-      newValues = [...selectedValues, value];
-    }
-    onChange(newValues, type);
-  }, [onChange, selectedValues]);
+  const onChange = useCallback(
+    (values, type, evt) => {
+      setSelectedValues(values);
+      if (typeof onSelectProp === "function") {
+        onSelectProp(values, type, evt);
+      }
+    },
+    [onSelectProp]
+  );
+  const onSelect = useCallback(
+    (value, type) => {
+      let newValues = [];
+      if (selectedValues.includes(value)) {
+        newValues = selectedValues.filter((currentValue) => currentValue !== value);
+      } else {
+        newValues = [...selectedValues, value];
+      }
+      onChange(newValues, type);
+    },
+    [onChange, selectedValues]
+  );
   const conditionalProps = {};
   if (options) {
     conditionalProps.options = options;
   } else {
     conditionalProps.children = children;
   }
-  return /* @__PURE__ */ jsx(InternalSelect, { onChange, value: valueProp ?? selectedValues, open, onOpenChange, onSelect, multiple: true, ...conditionalProps, ...props });
+  return /* @__PURE__ */ jsx(
+    InternalSelect,
+    {
+      onChange,
+      value: valueProp ?? selectedValues,
+      open,
+      onOpenChange,
+      onSelect,
+      multiple: true,
+      ...conditionalProps,
+      ...props
+    }
+  );
 };
 MultiSelect.Group = SelectGroup;
 MultiSelect.Item = SelectItem;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { KeyboardEvent, useCallback, useState } from 'react';\n\nimport { useUpdateEffect } from '@/hooks/internal';\n\nimport type { SelectOptionProp, SelectionType } from '@/components/Select/common/types';\nimport {\n  SelectGroup,\n  SelectItem,\n  InternalSelect,\n  SelectItemDescription,\n} from '@/components/Select/common/InternalSelect';\nimport { MultiSelectProps } from './MultiSelect.types';\n\nexport const MultiSelect = ({\n  value: valueProp,\n  defaultValue,\n  onSelect: onSelectProp,\n  options,\n  children,\n  defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  ...props\n}: MultiSelectProps) => {\n  const [selectedValues, setSelectedValues] = useState<string[]>(\n    valueProp ?? defaultValue ?? []\n  );\n  const [open, setOpen] = useState(defaultOpen ?? false);\n\n  const onOpenChange = useCallback(\n    (open: boolean) => {\n      setOpen(open);\n      if (typeof onOpenChangeProp === 'function') {\n        onOpenChangeProp(open);\n      }\n    },\n    [onOpenChangeProp]\n  );\n\n  useUpdateEffect(() => {\n    setSelectedValues(valueProp ?? []);\n  }, [valueProp]);\n\n  const onChange = useCallback(\n    (values: string[], type?: SelectionType, evt?: KeyboardEvent<HTMLElement>) => {\n      setSelectedValues(values);\n      if (typeof onSelectProp === 'function') {\n        onSelectProp(values, type, evt);\n      }\n    },\n    [onSelectProp]\n  );\n\n  const onSelect = useCallback(\n    (value: string, type?: SelectionType) => {\n      let newValues = [];\n      if (selectedValues.includes(value)) {\n        newValues = selectedValues.filter(currentValue => currentValue !== value);\n      } else {\n        newValues = [...selectedValues, value];\n      }\n\n      onChange(newValues, type);\n    },\n    [onChange, selectedValues]\n  );\n\n  const conditionalProps: Partial<SelectOptionProp> = {};\n  if (options) {\n    conditionalProps.options = options;\n  } else {\n    conditionalProps.children = children;\n  }\n\n  return (\n    <InternalSelect\n      onChange={onChange}\n      value={valueProp ?? selectedValues}\n      open={open}\n      onOpenChange={onOpenChange}\n      onSelect={onSelect}\n      multiple\n      {...conditionalProps}\n      {...props}\n    />\n  );\n};\n\nMultiSelect.Group = SelectGroup;\nMultiSelect.Item = SelectItem;\nMultiSelect.ItemDescription = SelectItemDescription;\n"],"names":["MultiSelect","value","valueProp","defaultValue","onSelect","onSelectProp","options","children","defaultOpen","onOpenChange","onOpenChangeProp","props","selectedValues","setSelectedValues","useState","open","setOpen","useCallback","useUpdateEffect","onChange","values","type","evt","newValues","includes","filter","currentValue","conditionalProps","Group","SelectGroup","Item","SelectItem","ItemDescription","SelectItemDescription"],"mappings":";;;;;AAaO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC,KAAAA,EAAOC,SAAAA;AAAAA,EACPC,YAAAA;AAAAA,EACAC,QAAAA,EAAUC,YAAAA;AAAAA,EACVC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,YAAAA,EAAcC,gBAAAA;AAAAA,EACd,GAAGC;AACa,CAAA,KAAM;AACtB,EAAA,MAAM,CAACC,gBAAgBC,iBAAiB,CAAA,GAAIC,SAC1CZ,SAAAA,IAAaC,YAAAA,IAAgB,EAC/B,CAAA;AACA,EAAA,MAAM,CAACY,IAAAA,EAAMC,OAAO,CAAA,GAAIF,QAAAA,CAASN,eAAe,KAAK,CAAA;AAErD,EAAA,MAAMC,YAAAA,GAAeQ,WAAAA,CACnB,CAACF,KAAAA,KAAkB;AACjBC,IAAAA,OAAAA,CAAQD,KAAI,CAAA;AACZ,IAAA,IAAI,OAAOL,qBAAqB,UAAA,EAAY;AAC1CA,MAAAA,gBAAAA,CAAiBK,KAAI,CAAA;AAAA,IACvB;AAAA,EACF,CAAA,EACA,CAACL,gBAAgB,CACnB,CAAA;AAEAQ,EAAAA,eAAAA,CAAgB,MAAM;AACpBL,IAAAA,iBAAAA,CAAkBX,SAAAA,IAAa,EAAE,CAAA;AAAA,EACnC,CAAA,EAAG,CAACA,SAAS,CAAC,CAAA;AAEd,EAAA,MAAMiB,QAAAA,GAAWF,WAAAA,CACf,CAACG,MAAAA,EAAkBC,MAAsBC,GAAAA,KAAqC;AAC5ET,IAAAA,iBAAAA,CAAkBO,MAAM,CAAA;AACxB,IAAA,IAAI,OAAOf,iBAAiB,UAAA,EAAY;AACtCA,MAAAA,YAAAA,CAAae,MAAAA,EAAQC,MAAMC,GAAG,CAAA;AAAA,IAChC;AAAA,EACF,CAAA,EACA,CAACjB,YAAY,CACf,CAAA;AAEA,EAAA,MAAMD,QAAAA,GAAWa,WAAAA,CACf,CAAChB,KAAAA,EAAeoB,IAAAA,KAAyB;AACvC,IAAA,IAAIE,YAAY,EAAA;AAChB,IAAA,IAAIX,cAAAA,CAAeY,QAAAA,CAASvB,KAAK,CAAA,EAAG;AAClCsB,MAAAA,SAAAA,GAAYX,cAAAA,CAAea,MAAAA,CAAOC,CAAAA,YAAAA,KAAgBA,YAAAA,KAAiBzB,KAAK,CAAA;AAAA,IAC1E,CAAA,MAAO;AACLsB,MAAAA,SAAAA,GAAY,CAAC,GAAGX,cAAAA,EAAgBX,KAAK,CAAA;AAAA,IACvC;AAEAkB,IAAAA,QAAAA,CAASI,WAAWF,IAAI,CAAA;AAAA,EAC1B,CAAA,EACA,CAACF,QAAAA,EAAUP,cAAc,CAC3B,CAAA;AAEA,EAAA,MAAMe,mBAA8C,EAAC;AACrD,EAAA,IAAIrB,OAAAA,EAAS;AACXqB,IAAAA,gBAAAA,CAAiBrB,OAAAA,GAAUA,OAAAA;AAAAA,EAC7B,CAAA,MAAO;AACLqB,IAAAA,gBAAAA,CAAiBpB,QAAAA,GAAWA,QAAAA;AAAAA,EAC9B;AAEA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EACC,QAAA,EACA,KAAA,EAAOL,aAAaU,cAAAA,EACpB,IAAA,EACA,YAAA,EACA,QAAA,EACA,QAAA,EAAQ,IAAA,KACJe,gBAAAA,EACJ,GAAIhB,KAAAA,EAAM,CAAA;AAGhB;AAEAX,WAAAA,CAAY4B,KAAAA,GAAQC,WAAAA;AACpB7B,WAAAA,CAAY8B,IAAAA,GAAOC,UAAAA;AACnB/B,WAAAA,CAAYgC,eAAAA,GAAkBC,qBAAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { KeyboardEvent, useCallback, useState } from 'react';\n\nimport { useUpdateEffect } from '@/hooks/internal';\n\nimport type { SelectOptionProp, SelectionType } from '@/components/Select/common/types';\nimport {\n  SelectGroup,\n  SelectItem,\n  InternalSelect,\n  SelectItemDescription,\n} from '@/components/Select/common/InternalSelect';\nimport { MultiSelectProps } from './MultiSelect.types';\n\nexport const MultiSelect = ({\n  value: valueProp,\n  defaultValue,\n  onSelect: onSelectProp,\n  options,\n  children,\n  defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  ...props\n}: MultiSelectProps) => {\n  const [selectedValues, setSelectedValues] = useState<string[]>(\n    valueProp ?? defaultValue ?? []\n  );\n  const [open, setOpen] = useState(defaultOpen ?? false);\n\n  const onOpenChange = useCallback(\n    (open: boolean) => {\n      setOpen(open);\n      if (typeof onOpenChangeProp === 'function') {\n        onOpenChangeProp(open);\n      }\n    },\n    [onOpenChangeProp]\n  );\n\n  useUpdateEffect(() => {\n    setSelectedValues(valueProp ?? []);\n  }, [valueProp]);\n\n  const onChange = useCallback(\n    (values: string[], type?: SelectionType, evt?: KeyboardEvent<HTMLElement>) => {\n      setSelectedValues(values);\n      if (typeof onSelectProp === 'function') {\n        onSelectProp(values, type, evt);\n      }\n    },\n    [onSelectProp]\n  );\n\n  const onSelect = useCallback(\n    (value: string, type?: SelectionType) => {\n      let newValues = [];\n      if (selectedValues.includes(value)) {\n        newValues = selectedValues.filter(currentValue => currentValue !== value);\n      } else {\n        newValues = [...selectedValues, value];\n      }\n\n      onChange(newValues, type);\n    },\n    [onChange, selectedValues]\n  );\n\n  const conditionalProps: Partial<SelectOptionProp> = {};\n  if (options) {\n    conditionalProps.options = options;\n  } else {\n    conditionalProps.children = children;\n  }\n\n  return (\n    <InternalSelect\n      onChange={onChange}\n      value={valueProp ?? selectedValues}\n      open={open}\n      onOpenChange={onOpenChange}\n      onSelect={onSelect}\n      multiple\n      {...conditionalProps}\n      {...props}\n    />\n  );\n};\n\nMultiSelect.Group = SelectGroup;\nMultiSelect.Item = SelectItem;\nMultiSelect.ItemDescription = SelectItemDescription;\n"],"names":["open"],"mappings":";;;;;AAaO,MAAM,cAAc,CAAC;AAAA,EAC1B,KAAA,EAAO,SAAA;AAAA,EACP,YAAA;AAAA,EACA,QAAA,EAAU,YAAA;AAAA,EACV,OAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA,EAAc,gBAAA;AAAA,EACd,GAAG;AACL,CAAA,KAAwB;AACtB,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,QAAA;AAAA,IAC1C,SAAA,IAAa,gBAAgB;AAAC,GAChC;AACA,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,QAAA,CAAS,eAAe,KAAK,CAAA;AAErD,EAAA,MAAM,YAAA,GAAe,WAAA;AAAA,IACnB,CAACA,KAAAA,KAAkB;AACjB,MAAA,OAAA,CAAQA,KAAI,CAAA;AACZ,MAAA,IAAI,OAAO,qBAAqB,UAAA,EAAY;AAC1C,QAAA,gBAAA,CAAiBA,KAAI,CAAA;AAAA,MACvB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,gBAAgB;AAAA,GACnB;AAEA,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,iBAAA,CAAkB,SAAA,IAAa,EAAE,CAAA;AAAA,EACnC,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,MAAM,QAAA,GAAW,WAAA;AAAA,IACf,CAAC,MAAA,EAAkB,IAAA,EAAsB,GAAA,KAAqC;AAC5E,MAAA,iBAAA,CAAkB,MAAM,CAAA;AACxB,MAAA,IAAI,OAAO,iBAAiB,UAAA,EAAY;AACtC,QAAA,YAAA,CAAa,MAAA,EAAQ,MAAM,GAAG,CAAA;AAAA,MAChC;AAAA,IACF,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,MAAM,QAAA,GAAW,WAAA;AAAA,IACf,CAAC,OAAe,IAAA,KAAyB;AACvC,MAAA,IAAI,YAAY,EAAC;AACjB,MAAA,IAAI,cAAA,CAAe,QAAA,CAAS,KAAK,CAAA,EAAG;AAClC,QAAA,SAAA,GAAY,cAAA,CAAe,MAAA,CAAO,CAAA,YAAA,KAAgB,YAAA,KAAiB,KAAK,CAAA;AAAA,MAC1E,CAAA,MAAO;AACL,QAAA,SAAA,GAAY,CAAC,GAAG,cAAA,EAAgB,KAAK,CAAA;AAAA,MACvC;AAEA,MAAA,QAAA,CAAS,WAAW,IAAI,CAAA;AAAA,IAC1B,CAAA;AAAA,IACA,CAAC,UAAU,cAAc;AAAA,GAC3B;AAEA,EAAA,MAAM,mBAA8C,EAAC;AACrD,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,gBAAA,CAAiB,OAAA,GAAU,OAAA;AAAA,EAC7B,CAAA,MAAO;AACL,IAAA,gBAAA,CAAiB,QAAA,GAAW,QAAA;AAAA,EAC9B;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA,OAAO,SAAA,IAAa,cAAA;AAAA,MACpB,IAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA,EAAQ,IAAA;AAAA,MACP,GAAG,gBAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,WAAA,CAAY,KAAA,GAAQ,WAAA;AACpB,WAAA,CAAY,IAAA,GAAO,UAAA;AACnB,WAAA,CAAY,eAAA,GAAkB,qBAAA;;;;"}

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

@@ -4,39 +4,71 @@ import { mergeRefs } from '../../utils/mergeRefs.js';
 import { InputWrapper, InputStartContent, NumberInputElement, InputEndContent } from '../InputWrapper/index.js';
 import { Icon as SvgImage } from '../Icon/index.js';
 
-const NumberField = forwardRef(({
-  disabled,
-  label,
-  error,
-  id,
-  loading,
-  onChange: onChangeProp,
-  orientation,
-  dir,
-  hideControls,
-  startContent,
-  endContent,
-  ...props
-}, ref) => {
-  const inputRef = useRef(null);
-  const defaultId = useId();
-  const onChange = (e) => {
-    onChangeProp(e.target.value, e);
-  };
-  const handleStartContentClick = () => {
-    inputRef.current?.focus();
-  };
-  const hasStartContent = Boolean(startContent);
-  const hasEndContent = Boolean(loading || endContent);
-  return /* @__PURE__ */ jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error, orientation, dir, children: [
-    startContent && /* @__PURE__ */ jsx(InputStartContent, { onClick: handleStartContentClick, children: startContent }),
-    /* @__PURE__ */ jsx(NumberInputElement, { ref: mergeRefs([inputRef, ref]), type: "number", id: id ?? defaultId, disabled, onChange, $hideControls: hideControls, $hasStartContent: hasStartContent, $hasEndContent: hasEndContent, ...props }),
-    hasEndContent && /* @__PURE__ */ jsxs(InputEndContent, { children: [
-      endContent ? endContent : null,
-      loading && /* @__PURE__ */ jsx(SvgImage, { name: "loading-animated", size: "sm" })
-    ] })
-  ] });
-});
+const NumberField = forwardRef(
+  ({
+    disabled,
+    label,
+    error,
+    id,
+    loading,
+    onChange: onChangeProp,
+    orientation,
+    dir,
+    hideControls,
+    startContent,
+    endContent,
+    ...props
+  }, ref) => {
+    const inputRef = useRef(null);
+    const defaultId = useId();
+    const onChange = (e) => {
+      onChangeProp(e.target.value, e);
+    };
+    const handleStartContentClick = () => {
+      inputRef.current?.focus();
+    };
+    const hasStartContent = Boolean(startContent);
+    const hasEndContent = Boolean(loading || endContent);
+    return /* @__PURE__ */ jsxs(
+      InputWrapper,
+      {
+        disabled,
+        id: id ?? defaultId,
+        label,
+        error,
+        orientation,
+        dir,
+        children: [
+          startContent && /* @__PURE__ */ jsx(InputStartContent, { onClick: handleStartContentClick, children: startContent }),
+          /* @__PURE__ */ jsx(
+            NumberInputElement,
+            {
+              ref: mergeRefs([inputRef, ref]),
+              type: "number",
+              id: id ?? defaultId,
+              disabled,
+              onChange,
+              $hideControls: hideControls,
+              $hasStartContent: hasStartContent,
+              $hasEndContent: hasEndContent,
+              ...props
+            }
+          ),
+          hasEndContent && /* @__PURE__ */ jsxs(InputEndContent, { children: [
+            endContent ? endContent : null,
+            loading && /* @__PURE__ */ jsx(
+              SvgImage,
+              {
+                name: "loading-animated",
+                size: "sm"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
 
 export { NumberField };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n  useRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport {\n  InputEndContent,\n  InputStartContent,\n  InputWrapper,\n  NumberInputElement,\n  WrapperProps,\n} from '@/components/InputWrapper';\nimport { mergeRefs } from '@/utils/mergeRefs';\nexport interface NumberFieldProps\n  extends\n    Omit<WrapperProps, 'id' | 'children'>,\n    Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'dir'> {\n  /** The input type - always number for NumberField */\n  type?: 'number';\n  /** Whether to show a loading spinner */\n  loading?: boolean;\n  /** Callback when the input value changes */\n  onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;\n  /** The orientation of the label relative to the input */\n  orientation?: 'vertical' | 'horizontal';\n  /** The direction/position of the label - start places label before, end places label after */\n  dir?: 'start' | 'end';\n  /** Whether to hide the increment/decrement controls */\n  hideControls?: boolean;\n  /** Additional content to the left of the control */\n  startContent?: ReactNode;\n  /** Additional content to the right of the control */\n  endContent?: ReactNode;\n}\n\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(\n  (\n    {\n      disabled,\n      label,\n      error,\n      id,\n      loading,\n      onChange: onChangeProp,\n      orientation,\n      dir,\n      hideControls,\n      startContent,\n      endContent,\n      ...props\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const defaultId = useId();\n    const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChangeProp(e.target.value, e);\n    };\n\n    const handleStartContentClick: React.MouseEventHandler<HTMLDivElement> = () => {\n      inputRef.current?.focus();\n    };\n\n    const hasStartContent = Boolean(startContent);\n    const hasEndContent = Boolean(loading || endContent);\n\n    return (\n      <InputWrapper\n        disabled={disabled}\n        id={id ?? defaultId}\n        label={label}\n        error={error}\n        orientation={orientation}\n        dir={dir}\n      >\n        {startContent && (\n          <InputStartContent onClick={handleStartContentClick}>\n            {startContent}\n          </InputStartContent>\n        )}\n        <NumberInputElement\n          ref={mergeRefs([inputRef, ref])}\n          type=\"number\"\n          id={id ?? defaultId}\n          disabled={disabled}\n          onChange={onChange}\n          $hideControls={hideControls}\n          $hasStartContent={hasStartContent}\n          $hasEndContent={hasEndContent}\n          {...props}\n        />\n        {hasEndContent && (\n          <InputEndContent>\n            {endContent ? endContent : null}\n            {loading && (\n              <Icon\n                name=\"loading-animated\"\n                size=\"sm\"\n              />\n            )}\n          </InputEndContent>\n        )}\n      </InputWrapper>\n    );\n  }\n);\n"],"names":["NumberField","forwardRef","disabled","label","error","id","loading","onChange","onChangeProp","orientation","dir","hideControls","startContent","endContent","props","ref","inputRef","useRef","defaultId","useId","e","target","value","handleStartContentClick","current","focus","hasStartContent","Boolean","hasEndContent","mergeRefs","Icon"],"mappings":";;;;;;AAuCO,MAAMA,WAAAA,GAAcC,WACzB,CACE;AAAA,EACEC,QAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,EAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,QAAAA,EAAUC,YAAAA;AAAAA,EACVC,WAAAA;AAAAA,EACAC,GAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACA,GAAGC;AACL,CAAA,EACAC,GAAAA,KACG;AACH,EAAA,MAAMC,QAAAA,GAAWC,OAAyB,IAAI,CAAA;AAC9C,EAAA,MAAMC,YAAYC,KAAAA,EAAM;AACxB,EAAA,MAAMZ,QAAAA,GAAWA,CAACa,CAAAA,KAAqC;AACrDZ,IAAAA,YAAAA,CAAaY,CAAAA,CAAEC,MAAAA,CAAOC,KAAAA,EAAOF,CAAC,CAAA;AAAA,EAChC,CAAA;AAEA,EAAA,MAAMG,0BAAmEA,MAAM;AAC7EP,IAAAA,QAAAA,CAASQ,SAASC,KAAAA,EAAM;AAAA,EAC1B,CAAA;AAEA,EAAA,MAAMC,eAAAA,GAAkBC,QAAQf,YAAY,CAAA;AAC5C,EAAA,MAAMgB,aAAAA,GAAgBD,OAAAA,CAAQrB,OAAAA,IAAWO,UAAU,CAAA;AAEnD,EAAA,uBACE,IAAA,CAAC,gBACC,QAAA,EACA,EAAA,EAAIR,MAAMa,SAAAA,EACV,KAAA,EACA,KAAA,EACA,WAAA,EACA,GAAA,EAECN,QAAAA,EAAAA;AAAAA,IAAAA,YAAAA,oBACC,GAAA,CAAC,iBAAA,EAAA,EAAkB,OAAA,EAASW,uBAAAA,EACzBX,QAAAA,EAAAA,YAAAA,EACH,CAAA;AAAA,oBAEF,GAAA,CAAC,sBACC,GAAA,EAAKiB,SAAAA,CAAU,CAACb,QAAAA,EAAUD,GAAG,CAAC,CAAA,EAC9B,IAAA,EAAK,QAAA,EACL,IAAIV,EAAAA,IAAMa,SAAAA,EACV,QAAA,EACA,QAAA,EACA,aAAA,EAAeP,YAAAA,EACf,kBAAkBe,eAAAA,EAClB,cAAA,EAAgBE,aAAAA,EAChB,GAAId,KAAAA,EAAM,CAAA;AAAA,IAEXc,aAAAA,yBACE,eAAA,EAAA,EACEf,QAAAA,EAAAA;AAAAA,MAAAA,UAAAA,GAAaA,UAAAA,GAAa,IAAA;AAAA,MAC1BP,2BACC,GAAA,CAACwB,QAAA,EAAA,EACC,IAAA,EAAK,kBAAA,EACL,MAAK,IAAA,EAAI;AAAA,KAAA,EAGf;AAAA,GAAA,EAEJ,CAAA;AAEJ,CACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n  useRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport {\n  InputEndContent,\n  InputStartContent,\n  InputWrapper,\n  NumberInputElement,\n  WrapperProps,\n} from '@/components/InputWrapper';\nimport { mergeRefs } from '@/utils/mergeRefs';\nexport interface NumberFieldProps\n  extends\n    Omit<WrapperProps, 'id' | 'children'>,\n    Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'dir'> {\n  /** The input type - always number for NumberField */\n  type?: 'number';\n  /** Whether to show a loading spinner */\n  loading?: boolean;\n  /** Callback when the input value changes */\n  onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;\n  /** The orientation of the label relative to the input */\n  orientation?: 'vertical' | 'horizontal';\n  /** The direction/position of the label - start places label before, end places label after */\n  dir?: 'start' | 'end';\n  /** Whether to hide the increment/decrement controls */\n  hideControls?: boolean;\n  /** Additional content to the left of the control */\n  startContent?: ReactNode;\n  /** Additional content to the right of the control */\n  endContent?: ReactNode;\n}\n\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(\n  (\n    {\n      disabled,\n      label,\n      error,\n      id,\n      loading,\n      onChange: onChangeProp,\n      orientation,\n      dir,\n      hideControls,\n      startContent,\n      endContent,\n      ...props\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const defaultId = useId();\n    const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChangeProp(e.target.value, e);\n    };\n\n    const handleStartContentClick: React.MouseEventHandler<HTMLDivElement> = () => {\n      inputRef.current?.focus();\n    };\n\n    const hasStartContent = Boolean(startContent);\n    const hasEndContent = Boolean(loading || endContent);\n\n    return (\n      <InputWrapper\n        disabled={disabled}\n        id={id ?? defaultId}\n        label={label}\n        error={error}\n        orientation={orientation}\n        dir={dir}\n      >\n        {startContent && (\n          <InputStartContent onClick={handleStartContentClick}>\n            {startContent}\n          </InputStartContent>\n        )}\n        <NumberInputElement\n          ref={mergeRefs([inputRef, ref])}\n          type=\"number\"\n          id={id ?? defaultId}\n          disabled={disabled}\n          onChange={onChange}\n          $hideControls={hideControls}\n          $hasStartContent={hasStartContent}\n          $hasEndContent={hasEndContent}\n          {...props}\n        />\n        {hasEndContent && (\n          <InputEndContent>\n            {endContent ? endContent : null}\n            {loading && (\n              <Icon\n                name=\"loading-animated\"\n                size=\"sm\"\n              />\n            )}\n          </InputEndContent>\n        )}\n      </InputWrapper>\n    );\n  }\n);\n"],"names":["Icon"],"mappings":";;;;;;AAuCO,MAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CACE;AAAA,IACE,QAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,EAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA,EAAU,YAAA;AAAA,IACV,WAAA;AAAA,IACA,GAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAW,OAAyB,IAAI,CAAA;AAC9C,IAAA,MAAM,YAAY,KAAA,EAAM;AACxB,IAAA,MAAM,QAAA,GAAW,CAAC,CAAA,KAAqC;AACrD,MAAA,YAAA,CAAa,CAAA,CAAE,MAAA,CAAO,KAAA,EAAO,CAAC,CAAA;AAAA,IAChC,CAAA;AAEA,IAAA,MAAM,0BAAmE,MAAM;AAC7E,MAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,IAC1B,CAAA;AAEA,IAAA,MAAM,eAAA,GAAkB,QAAQ,YAAY,CAAA;AAC5C,IAAA,MAAM,aAAA,GAAgB,OAAA,CAAQ,OAAA,IAAW,UAAU,CAAA;AAEnD,IAAA,uBACE,IAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,IAAI,EAAA,IAAM,SAAA;AAAA,QACV,KAAA;AAAA,QACA,KAAA;AAAA,QACA,WAAA;AAAA,QACA,GAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,YAAA,oBACC,GAAA,CAAC,iBAAA,EAAA,EAAkB,OAAA,EAAS,uBAAA,EACzB,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,0BAEF,GAAA;AAAA,YAAC,kBAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,SAAA,CAAU,CAAC,QAAA,EAAU,GAAG,CAAC,CAAA;AAAA,cAC9B,IAAA,EAAK,QAAA;AAAA,cACL,IAAI,EAAA,IAAM,SAAA;AAAA,cACV,QAAA;AAAA,cACA,QAAA;AAAA,cACA,aAAA,EAAe,YAAA;AAAA,cACf,gBAAA,EAAkB,eAAA;AAAA,cAClB,cAAA,EAAgB,aAAA;AAAA,cACf,GAAG;AAAA;AAAA,WACN;AAAA,UACC,aAAA,yBACE,eAAA,EAAA,EACE,QAAA,EAAA;AAAA,YAAA,UAAA,GAAa,UAAA,GAAa,IAAA;AAAA,YAC1B,OAAA,oBACC,GAAA;AAAA,cAACA,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,kBAAA;AAAA,gBACL,IAAA,EAAK;AAAA;AAAA;AACP,WAAA,EAEJ;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;;;"}

package/dist/esm/components/Pagination/Pagination.css

@@ -1,7 +1,8 @@
-/* Doubled class raises specificity to (0,2,0) so this width wins over the
+@layer clickui {/* Doubled class raises specificity to (0,2,0) so this width wins over the
    Select root's own `width: 100%` rule, which styled() injects into <head>
    at runtime (after the bundled CSS). The previous styled() wrapper relied
    on runtime injection order for the same effect. */
 .custom-select__iARgW.custom-select__iARgW {
   width: 150px;
 }
+}