@clickhouse/click-ui 0.8.0 → 0.10.0-rc1

package/dist/cjs/components/Icon/index.cjs

@@ -50,41 +50,68 @@ const SVGIcon = ({
   ...props
 }) => {
   const Component = IconCommon.ICONS_MAP[name];
-  const wrapperStyle = react.useMemo(() => ({
-    ...color !== void 0 ? {
-      "--svg-icon-color": color
-    } : {},
-    ...width !== void 0 ? {
-      "--svg-width": String(width)
-    } : {},
-    ...height !== void 0 ? {
-      "--svg-height": String(height)
-    } : {}
-  }), [color, width, height]);
+  const wrapperStyle = react.useMemo(
+    () => ({
+      ...color !== void 0 ? { "--svg-icon-color": color } : {},
+      ...width !== void 0 ? { "--svg-width": String(width) } : {},
+      ...height !== void 0 ? { "--svg-height": String(height) } : {}
+    }),
+    [color, width, height]
+  );
   if (!Component) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cva.cn(svgWrapperVariants({
-    size,
-    state
-  }), className), style: wrapperStyle, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cva.cn(svgWrapperVariants({ size, state }), className),
+      style: wrapperStyle,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props })
+    }
+  );
 };
-const SvgImage = ({
-  name,
-  size,
-  theme,
-  ...props
-}) => {
+const SvgImage = ({ name, size, theme, ...props }) => {
   if (Object.keys(FlagsLight.default).includes(name)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Flag.Flag, { name, size, ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Flag.Flag,
+      {
+        name,
+        size,
+        ...props
+      }
+    );
   }
   if (Object.keys(LogosLight.default).includes(name)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Logo.Logo, { name, theme, size, ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Logo.Logo,
+      {
+        name,
+        theme,
+        size,
+        ...props
+      }
+    );
   }
   if (Object.keys(PaymentsLight.default).includes(name)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Payment.Payment, { name, size, ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Payment.Payment,
+      {
+        name,
+        size,
+        ...props
+      }
+    );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(SVGIcon, { name, size, role: "img", "aria-label": name, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SVGIcon,
+    {
+      name,
+      size,
+      role: "img",
+      "aria-label": name,
+      ...props
+    }
+  );
 };
 SvgImage.displayName = "Icon";
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { CSSProperties, useMemo } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { IconName, IconProps, ImageType } from './Icon.types';\nimport { ICONS_MAP } from '@/components/Icon/IconCommon';\nimport { Flag } from '@/components/Assets/Flags/system/Flag';\nimport FlagsLight from '@/components/Assets/Flags/system/FlagsLight';\nimport { FlagName } from '@/components/Assets/Flags/system/types';\nimport { Logo } from '@/components/Assets/Logos/system/Logo';\nimport LogosLight from '@/components/Assets/Logos/system/LogosLight';\nimport { LogoName } from '@/components/Assets/Logos/system/types';\nimport { Payment } from '@/components/Assets/Payments/system/Payment';\nimport { PaymentName } from '@/components/Assets/Payments/system/types';\nimport PaymentsLight from '@/components/Assets/Payments/system/PaymentsLight';\nimport styles from './Icon.module.css';\n\nconst svgWrapperVariants = cva(styles['svg-wrapper'], {\n  variants: {\n    size: {\n      xs: styles['svg-wrapper_size_xs'],\n      sm: styles['svg-wrapper_size_sm'],\n      md: styles['svg-wrapper_size_md'],\n      lg: styles['svg-wrapper_size_lg'],\n      xl: styles['svg-wrapper_size_xl'],\n      xxl: styles['svg-wrapper_size_xxl'],\n    },\n    state: {\n      default: '',\n      success: styles['svg-wrapper_state_success'],\n      warning: styles['svg-wrapper_state_warning'],\n      danger: styles['svg-wrapper_state_danger'],\n      info: styles['svg-wrapper_state_info'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    state: 'default',\n  },\n});\n\nconst SVGIcon = ({\n  name,\n  color,\n  width,\n  height,\n  state,\n  className,\n  size,\n  ...props\n}: IconProps) => {\n  const Component = ICONS_MAP[name];\n\n  const wrapperStyle = useMemo(\n    () =>\n      ({\n        ...(color !== undefined ? { '--svg-icon-color': color } : {}),\n        ...(width !== undefined ? { '--svg-width': String(width) } : {}),\n        ...(height !== undefined ? { '--svg-height': String(height) } : {}),\n      }) as CSSProperties,\n    [color, width, height]\n  );\n\n  if (!Component) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(svgWrapperVariants({ size, state }), className)}\n      style={wrapperStyle}\n    >\n      <Component {...props} />\n    </div>\n  );\n};\n\nconst SvgImage = ({ name, size, theme, ...props }: ImageType) => {\n  if (Object.keys(FlagsLight).includes(name)) {\n    return (\n      <Flag\n        name={name as FlagName}\n        size={size}\n        {...props}\n      />\n    );\n  }\n  if (Object.keys(LogosLight).includes(name)) {\n    return (\n      <Logo\n        name={name as LogoName}\n        theme={theme}\n        size={size}\n        {...props}\n      />\n    );\n  }\n  if (Object.keys(PaymentsLight).includes(name)) {\n    return (\n      <Payment\n        name={name as PaymentName}\n        size={size}\n        {...props}\n      />\n    );\n  }\n  return (\n    <SVGIcon\n      name={name as IconName}\n      size={size}\n      role=\"img\"\n      aria-label={name}\n      {...props}\n    />\n  );\n};\n\nSvgImage.displayName = 'Icon';\n\nexport { SvgImage as Icon };\n"],"names":["svgWrapperVariants","cva","styles","variants","size","xs","sm","md","lg","xl","xxl","state","default","success","warning","danger","info","defaultVariants","SVGIcon","name","color","width","height","className","props","Component","ICONS_MAP","wrapperStyle","useMemo","undefined","String","jsx","cn","SvgImage","theme","Object","keys","FlagsLight","includes","Flag","LogosLight","Logo","PaymentsLight","Payment","displayName"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { CSSProperties, useMemo } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { IconName, IconProps, ImageType } from './Icon.types';\nimport { ICONS_MAP } from '@/components/Icon/IconCommon';\nimport { Flag } from '@/components/Assets/Flags/system/Flag';\nimport FlagsLight from '@/components/Assets/Flags/system/FlagsLight';\nimport { FlagName } from '@/components/Assets/Flags/system/types';\nimport { Logo } from '@/components/Assets/Logos/system/Logo';\nimport LogosLight from '@/components/Assets/Logos/system/LogosLight';\nimport { LogoName } from '@/components/Assets/Logos/system/types';\nimport { Payment } from '@/components/Assets/Payments/system/Payment';\nimport { PaymentName } from '@/components/Assets/Payments/system/types';\nimport PaymentsLight from '@/components/Assets/Payments/system/PaymentsLight';\nimport styles from './Icon.module.css';\n\nconst svgWrapperVariants = cva(styles['svg-wrapper'], {\n  variants: {\n    size: {\n      xs: styles['svg-wrapper_size_xs'],\n      sm: styles['svg-wrapper_size_sm'],\n      md: styles['svg-wrapper_size_md'],\n      lg: styles['svg-wrapper_size_lg'],\n      xl: styles['svg-wrapper_size_xl'],\n      xxl: styles['svg-wrapper_size_xxl'],\n    },\n    state: {\n      default: '',\n      success: styles['svg-wrapper_state_success'],\n      warning: styles['svg-wrapper_state_warning'],\n      danger: styles['svg-wrapper_state_danger'],\n      info: styles['svg-wrapper_state_info'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    state: 'default',\n  },\n});\n\nconst SVGIcon = ({\n  name,\n  color,\n  width,\n  height,\n  state,\n  className,\n  size,\n  ...props\n}: IconProps) => {\n  const Component = ICONS_MAP[name];\n\n  const wrapperStyle = useMemo(\n    () =>\n      ({\n        ...(color !== undefined ? { '--svg-icon-color': color } : {}),\n        ...(width !== undefined ? { '--svg-width': String(width) } : {}),\n        ...(height !== undefined ? { '--svg-height': String(height) } : {}),\n      }) as CSSProperties,\n    [color, width, height]\n  );\n\n  if (!Component) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(svgWrapperVariants({ size, state }), className)}\n      style={wrapperStyle}\n    >\n      <Component {...props} />\n    </div>\n  );\n};\n\nconst SvgImage = ({ name, size, theme, ...props }: ImageType) => {\n  if (Object.keys(FlagsLight).includes(name)) {\n    return (\n      <Flag\n        name={name as FlagName}\n        size={size}\n        {...props}\n      />\n    );\n  }\n  if (Object.keys(LogosLight).includes(name)) {\n    return (\n      <Logo\n        name={name as LogoName}\n        theme={theme}\n        size={size}\n        {...props}\n      />\n    );\n  }\n  if (Object.keys(PaymentsLight).includes(name)) {\n    return (\n      <Payment\n        name={name as PaymentName}\n        size={size}\n        {...props}\n      />\n    );\n  }\n  return (\n    <SVGIcon\n      name={name as IconName}\n      size={size}\n      role=\"img\"\n      aria-label={name}\n      {...props}\n    />\n  );\n};\n\nSvgImage.displayName = 'Icon';\n\nexport { SvgImage as Icon };\n"],"names":["cva","styles","ICONS_MAP","useMemo","jsx","cn","FlagsLight","Flag","LogosLight","Logo","PaymentsLight","Payment"],"mappings":"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"}

package/dist/cjs/components/IconButton/IconButton.css

@@ -1,4 +1,4 @@
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
 
 .iconbutton__G-cEu {
   padding: var(--click-button-iconButton-default-space-y)
@@ -143,3 +143,4 @@
   color: var(--click-button-iconButton-color-disabled-text-default);
   cursor: not-allowed;
 }
+}

package/dist/cjs/components/IconButton/index.cjs

@@ -30,21 +30,30 @@ const iconButtonVariants = classVarianceAuthority.cva(IconButton_module.default.
     size: "default"
   }
 });
-const IconButton = react.forwardRef(({
-  type = "primary",
-  htmlType,
-  icon,
-  size,
-  disabled,
-  className,
-  ...props
-}, ref) => {
-  const iconName = icon ? icon.toString() : "unknown icon";
-  return /* @__PURE__ */ jsxRuntime.jsx("button", { ...props, type: htmlType, className: cva.cn(iconButtonVariants({
-    type,
-    size
-  }), className), disabled, ref, role: "button", "aria-label": iconName, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" }) });
-});
+const IconButton = react.forwardRef(
+  ({ type = "primary", htmlType, icon, size, disabled, className, ...props }, ref) => {
+    const iconName = icon ? icon.toString() : "unknown icon";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ...props,
+        type: htmlType,
+        className: cva.cn(iconButtonVariants({ type, size }), className),
+        disabled,
+        ref,
+        role: "button",
+        "aria-label": iconName,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            name: icon,
+            size: "sm"
+          }
+        )
+      }
+    );
+  }
+);
 IconButton.displayName = "IconButton";
 
 exports.IconButton = IconButton;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { IconButtonProps } from './IconButton.types';\nimport styles from './IconButton.module.css';\n\nconst iconButtonVariants = cva(styles.iconbutton, {\n  variants: {\n    type: {\n      primary: styles['iconbutton_type_primary'],\n      secondary: styles['iconbutton_type_secondary'],\n      ghost: styles['iconbutton_type_ghost'],\n      danger: styles['iconbutton_type_danger'],\n      info: styles['iconbutton_type_info'],\n    },\n    size: {\n      default: '',\n      sm: styles['iconbutton_size_sm'],\n      xs: styles['iconbutton_size_xs'],\n    },\n  },\n  defaultVariants: {\n    type: 'primary',\n    size: 'default',\n  },\n});\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ type = 'primary', htmlType, icon, size, disabled, className, ...props }, ref) => {\n    const iconName = icon ? icon.toString() : 'unknown icon';\n\n    return (\n      <button\n        {...props}\n        type={htmlType}\n        className={cn(iconButtonVariants({ type, size }), className)}\n        disabled={disabled}\n        ref={ref}\n        role=\"button\"\n        aria-label={iconName}\n      >\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      </button>\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["iconButtonVariants","cva","styles","iconbutton","variants","type","primary","secondary","ghost","danger","info","size","default","sm","xs","defaultVariants","IconButton","forwardRef","htmlType","icon","disabled","className","props","ref","iconName","toString","jsx","cn","Icon","displayName"],"mappings":";;;;;;;;;;;AAMA,MAAMA,kBAAAA,GAAqBC,0BAAAA,CAAIC,yBAAAA,CAAOC,UAAAA,EAAY;AAAA,EAChDC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,0BAAO,yBAAyB,CAAA;AAAA,MACzCK,SAAAA,EAAWL,0BAAO,2BAA2B,CAAA;AAAA,MAC7CM,KAAAA,EAAON,0BAAO,uBAAuB,CAAA;AAAA,MACrCO,MAAAA,EAAQP,0BAAO,wBAAwB,CAAA;AAAA,MACvCQ,IAAAA,EAAMR,0BAAO,sBAAsB;AAAA,KACrC;AAAA,IACAS,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAAS,EAAA;AAAA,MACTC,EAAAA,EAAIX,0BAAO,oBAAoB,CAAA;AAAA,MAC/BY,EAAAA,EAAIZ,0BAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACAa,eAAAA,EAAiB;AAAA,IACfV,IAAAA,EAAM,SAAA;AAAA,IACNM,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAEM,MAAMK,UAAAA,GAAaC,iBACxB,CAAC;AAAA,EAAEZ,IAAAA,GAAO,SAAA;AAAA,EAAWa,QAAAA;AAAAA,EAAUC,IAAAA;AAAAA,EAAMR,IAAAA;AAAAA,EAAMS,QAAAA;AAAAA,EAAUC,SAAAA;AAAAA,EAAW,GAAGC;AAAM,CAAA,EAAGC,GAAAA,KAAQ;AAClF,EAAA,MAAMC,QAAAA,GAAWL,IAAAA,GAAOA,IAAAA,CAAKM,QAAAA,EAAS,GAAI,cAAA;AAE1C,EAAA,uBACEC,cAAA,CAAC,eACKJ,KAAAA,EACJ,MAAMJ,QAAAA,EACN,SAAA,EAAWS,OAAG3B,kBAAAA,CAAmB;AAAA,IAAEK,IAAAA;AAAAA,IAAMM;AAAAA,GAAM,CAAA,EAAGU,SAAS,CAAA,EAC3D,QAAA,EACA,KACA,IAAA,EAAK,QAAA,EACL,YAAA,EAAYG,QAAAA,EAEZ,yCAACI,SAAA,EAAA,EACC,IAAA,EAAMT,IAAAA,EACN,IAAA,EAAK,MAAI,CAAA,EAEb,CAAA;AAEJ,CACF;AAEAH,UAAAA,CAAWa,WAAAA,GAAc,YAAA;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { IconButtonProps } from './IconButton.types';\nimport styles from './IconButton.module.css';\n\nconst iconButtonVariants = cva(styles.iconbutton, {\n  variants: {\n    type: {\n      primary: styles['iconbutton_type_primary'],\n      secondary: styles['iconbutton_type_secondary'],\n      ghost: styles['iconbutton_type_ghost'],\n      danger: styles['iconbutton_type_danger'],\n      info: styles['iconbutton_type_info'],\n    },\n    size: {\n      default: '',\n      sm: styles['iconbutton_size_sm'],\n      xs: styles['iconbutton_size_xs'],\n    },\n  },\n  defaultVariants: {\n    type: 'primary',\n    size: 'default',\n  },\n});\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ type = 'primary', htmlType, icon, size, disabled, className, ...props }, ref) => {\n    const iconName = icon ? icon.toString() : 'unknown icon';\n\n    return (\n      <button\n        {...props}\n        type={htmlType}\n        className={cn(iconButtonVariants({ type, size }), className)}\n        disabled={disabled}\n        ref={ref}\n        role=\"button\"\n        aria-label={iconName}\n      >\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      </button>\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["cva","styles","forwardRef","jsx","cn","Icon"],"mappings":";;;;;;;;;;;AAMA,MAAM,kBAAA,GAAqBA,0BAAA,CAAIC,yBAAA,CAAO,UAAA,EAAY;AAAA,EAChD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,OAAA,EAASA,0BAAO,yBAAyB,CAAA;AAAA,MACzC,SAAA,EAAWA,0BAAO,2BAA2B,CAAA;AAAA,MAC7C,KAAA,EAAOA,0BAAO,uBAAuB,CAAA;AAAA,MACrC,MAAA,EAAQA,0BAAO,wBAAwB,CAAA;AAAA,MACvC,IAAA,EAAMA,0BAAO,sBAAsB;AAAA,KACrC;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,EAAA;AAAA,MACT,EAAA,EAAIA,0BAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAIA,0BAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,SAAA;AAAA,IACN,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAEM,MAAM,UAAA,GAAaC,gBAAA;AAAA,EACxB,CAAC,EAAE,IAAA,GAAO,SAAA,EAAW,QAAA,EAAU,IAAA,EAAM,IAAA,EAAM,QAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAClF,IAAA,MAAM,QAAA,GAAW,IAAA,GAAO,IAAA,CAAK,QAAA,EAAS,GAAI,cAAA;AAE1C,IAAA,uBACEC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,IAAA,EAAM,QAAA;AAAA,QACN,SAAA,EAAWC,OAAG,kBAAA,CAAmB,EAAE,MAAM,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,QAC3D,QAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAY,QAAA;AAAA,QAEZ,QAAA,kBAAAD,cAAA;AAAA,UAACE,SAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,IAAA,EAAK;AAAA;AAAA;AACP;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

package/dist/cjs/components/IconWrapper/index.cjs

@@ -20,11 +20,43 @@ const IconWrapper = ({
   ...props
 }) => {
   const TextWrapper = ellipsisContent ? EllipsisContent.EllipsisContent : "div";
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { orientation: "horizontal", gap, overflow: "hidden", isResponsive, ...props, children: [
-    icon && iconDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size, width, height }),
-    /* @__PURE__ */ jsxRuntime.jsx(TextWrapper, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-icon-wrapper-text`, children }),
-    icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size, width, height })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Container.Container,
+    {
+      orientation: "horizontal",
+      gap,
+      overflow: "hidden",
+      isResponsive,
+      ...props,
+      children: [
+        icon && iconDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            name: icon,
+            size,
+            width,
+            height
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TextWrapper,
+          {
+            "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-icon-wrapper-text`,
+            children
+          }
+        ),
+        icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            name: icon,
+            size,
+            width,
+            height
+          }
+        )
+      ]
+    }
+  );
 };
 
 exports.IconWrapper = IconWrapper;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/IconWrapper/IconWrapper.tsx"],"sourcesContent":["import { Container } from '@/components/Container';\nimport { EllipsisContent } from '@/components/EllipsisContent';\nimport { Icon } from '@/components/Icon';\nimport { IconWrapperProps } from './IconWrapper.types';\n\nexport const IconWrapper = ({\n  icon,\n  iconDir = 'start',\n  size = 'sm',\n  width,\n  height,\n  children,\n  ellipsisContent = true,\n  gap = 'sm',\n  isResponsive = true,\n  ...props\n}: IconWrapperProps) => {\n  const TextWrapper = ellipsisContent ? EllipsisContent : 'div';\n  return (\n    <Container\n      orientation=\"horizontal\"\n      gap={gap}\n      overflow=\"hidden\"\n      isResponsive={isResponsive}\n      {...props}\n    >\n      {icon && iconDir === 'start' && (\n        <Icon\n          name={icon}\n          size={size}\n          width={width}\n          height={height}\n        />\n      )}\n      <TextWrapper\n        data-testid={`${ellipsisContent ? 'ellipsed' : 'normal'}-icon-wrapper-text`}\n      >\n        {children}\n      </TextWrapper>\n      {icon && iconDir === 'end' && (\n        <Icon\n          name={icon}\n          size={size}\n          width={width}\n          height={height}\n        />\n      )}\n    </Container>\n  );\n};\n"],"names":["IconWrapper","icon","iconDir","size","width","height","children","ellipsisContent","gap","isResponsive","props","TextWrapper","EllipsisContent","jsxs","Container","jsx","Icon"],"mappings":";;;;;;;;;AAKO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC,IAAAA;AAAAA,EACAC,OAAAA,GAAU,OAAA;AAAA,EACVC,IAAAA,GAAO,IAAA;AAAA,EACPC,KAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,eAAAA,GAAkB,IAAA;AAAA,EAClBC,GAAAA,GAAM,IAAA;AAAA,EACNC,YAAAA,GAAe,IAAA;AAAA,EACf,GAAGC;AACa,CAAA,KAAM;AACtB,EAAA,MAAMC,WAAAA,GAAcJ,kBAAkBK,+BAAAA,GAAkB,KAAA;AACxD,EAAA,uBACEC,eAAA,CAACC,uBACC,WAAA,EAAY,YAAA,EACZ,KACA,QAAA,EAAS,QAAA,EACT,YAAA,EACA,GAAIJ,KAAAA,EAEHT,QAAAA,EAAAA;AAAAA,IAAAA,IAAAA,IAAQC,OAAAA,KAAY,2BACnBa,cAAA,CAACC,SAAA,EAAA,EACC,MAAMf,IAAAA,EACN,IAAA,EACA,OACA,MAAA,EAAe,CAAA;AAAA,oBAGnBc,cAAA,CAAC,eACC,aAAA,EAAa,CAAA,EAAGR,kBAAkB,UAAA,GAAa,QAAQ,sBAEtDD,QAAAA,EACH,CAAA;AAAA,IACCL,IAAAA,IAAQC,YAAY,KAAA,oBACnBa,cAAA,CAACC,aACC,IAAA,EAAMf,IAAAA,EACN,IAAA,EACA,KAAA,EACA,MAAA,EAAe;AAAA,GAAA,EAGrB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/IconWrapper/IconWrapper.tsx"],"sourcesContent":["import { Container } from '@/components/Container';\nimport { EllipsisContent } from '@/components/EllipsisContent';\nimport { Icon } from '@/components/Icon';\nimport { IconWrapperProps } from './IconWrapper.types';\n\nexport const IconWrapper = ({\n  icon,\n  iconDir = 'start',\n  size = 'sm',\n  width,\n  height,\n  children,\n  ellipsisContent = true,\n  gap = 'sm',\n  isResponsive = true,\n  ...props\n}: IconWrapperProps) => {\n  const TextWrapper = ellipsisContent ? EllipsisContent : 'div';\n  return (\n    <Container\n      orientation=\"horizontal\"\n      gap={gap}\n      overflow=\"hidden\"\n      isResponsive={isResponsive}\n      {...props}\n    >\n      {icon && iconDir === 'start' && (\n        <Icon\n          name={icon}\n          size={size}\n          width={width}\n          height={height}\n        />\n      )}\n      <TextWrapper\n        data-testid={`${ellipsisContent ? 'ellipsed' : 'normal'}-icon-wrapper-text`}\n      >\n        {children}\n      </TextWrapper>\n      {icon && iconDir === 'end' && (\n        <Icon\n          name={icon}\n          size={size}\n          width={width}\n          height={height}\n        />\n      )}\n    </Container>\n  );\n};\n"],"names":["EllipsisContent","jsxs","Container","jsx","Icon"],"mappings":";;;;;;;;;AAKO,MAAM,cAAc,CAAC;AAAA,EAC1B,IAAA;AAAA,EACA,OAAA,GAAU,OAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA,GAAkB,IAAA;AAAA,EAClB,GAAA,GAAM,IAAA;AAAA,EACN,YAAA,GAAe,IAAA;AAAA,EACf,GAAG;AACL,CAAA,KAAwB;AACtB,EAAA,MAAM,WAAA,GAAc,kBAAkBA,+BAAA,GAAkB,KAAA;AACxD,EAAA,uBACEC,eAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAY,YAAA;AAAA,MACZ,GAAA;AAAA,MACA,QAAA,EAAS,QAAA;AAAA,MACT,YAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,IAAQ,YAAY,OAAA,oBACnBC,cAAA;AAAA,UAACC,SAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,IAAA;AAAA,YACA,KAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,wBAEFD,cAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,CAAA,EAAG,eAAA,GAAkB,UAAA,GAAa,QAAQ,CAAA,kBAAA,CAAA;AAAA,YAEtD;AAAA;AAAA,SACH;AAAA,QACC,IAAA,IAAQ,YAAY,KAAA,oBACnBA,cAAA;AAAA,UAACC,SAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,IAAA;AAAA,YACA,KAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/cjs/components/InputWrapper/InputWrapper.css

@@ -1,4 +1,4 @@
-/* Design tokens use camelCase segments (e.g. fieldText). */
+@layer clickui {/* Design tokens use camelCase segments (e.g. fieldText). */
 /* stylelint-disable custom-property-pattern */
 /* The original styled-components used vendor-prefixed autofill/appearance
    overrides and native resize; `:autofill` overrides require `-webkit-box-shadow`
@@ -219,3 +219,4 @@
   gap: var(--click-field-space-gap);
   white-space: nowrap;
 }
+}

package/dist/cjs/components/InputWrapper/index.cjs

@@ -43,18 +43,41 @@ const InputWrapper = ({
   dir,
   resize = "none"
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormRoot.FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: true, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(FormElementContainer.FormElementContainer, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-resize": resize, className: cva.cn(wrapperVariants({
-        error: !!error,
-        resize
-      }), disabled && InputWrapper_module.default.disabled, className), children }),
-      !!error && error !== true && /* @__PURE__ */ jsxRuntime.jsx(Error.Error, { children: error })
-    ] }),
-    label && /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { htmlFor: id, disabled, error: !!error, style: labelColor ? {
-      color: labelColor
-    } : void 0, children: label })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    FormRoot.FormRoot,
+    {
+      $orientation: orientation,
+      $dir: dir,
+      $addLabelPadding: true,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(FormElementContainer.FormElementContainer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-resize": resize,
+              className: cva.cn(
+                wrapperVariants({ error: !!error, resize }),
+                disabled && InputWrapper_module.default.disabled,
+                className
+              ),
+              children
+            }
+          ),
+          !!error && error !== true && /* @__PURE__ */ jsxRuntime.jsx(Error.Error, { children: error })
+        ] }),
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          Label.Label,
+          {
+            htmlFor: id,
+            disabled,
+            error: !!error,
+            style: labelColor ? { color: labelColor } : void 0,
+            children: label
+          }
+        )
+      ]
+    }
+  );
 };
 const inputVariants = classVarianceAuthority.cva(InputWrapper_module.default.input, {
   variants: {
@@ -72,46 +95,78 @@ const inputVariants = classVarianceAuthority.cva(InputWrapper_module.default.inp
     hasEndContent: false
   }
 });
-const _InputElement = ({
-  as,
-  $hasStartContent,
-  $hasEndContent,
-  className,
-  ...props
-}, ref) => {
+const _InputElement = ({ as, $hasStartContent, $hasEndContent, className, ...props }, ref) => {
   const Component = as ?? "input";
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...props, className: cva.cn(inputVariants({
-    hasStartContent: !!$hasStartContent,
-    hasEndContent: !!$hasEndContent
-  }), className) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref,
+      ...props,
+      className: cva.cn(
+        inputVariants({
+          hasStartContent: !!$hasStartContent,
+          hasEndContent: !!$hasEndContent
+        }),
+        className
+      )
+    }
+  );
 };
 const InputElement = react.forwardRef(_InputElement);
-const NumberInputElement = react.forwardRef(({
-  $hideControls,
-  $hasStartContent,
-  $hasEndContent,
-  className,
-  ...props
-}, ref) => /* @__PURE__ */ jsxRuntime.jsx("input", { ref, ...props, className: cva.cn(inputVariants({
-  hasStartContent: !!$hasStartContent,
-  hasEndContent: !!$hasEndContent
-}), $hideControls && InputWrapper_module.default["number-input_hide-controls"], className) }));
-const TextAreaElement = react.forwardRef(({
-  className,
-  ...props
-}, ref) => /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref, ...props, className: cva.cn(InputWrapper_module.default.textarea, className) }));
-const IconButton = react.forwardRef(({
-  className,
-  ...props
-}, ref) => /* @__PURE__ */ jsxRuntime.jsx("button", { ref, type: "button", ...props, className: cva.cn(InputWrapper_module.default["icon-button"], className) }));
+const NumberInputElement = react.forwardRef(
+  ({ $hideControls, $hasStartContent, $hasEndContent, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref,
+      ...props,
+      className: cva.cn(
+        inputVariants({
+          hasStartContent: !!$hasStartContent,
+          hasEndContent: !!$hasEndContent
+        }),
+        $hideControls && InputWrapper_module.default["number-input_hide-controls"],
+        className
+      )
+    }
+  )
+);
+const TextAreaElement = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "textarea",
+  {
+    ref,
+    ...props,
+    className: cva.cn(InputWrapper_module.default.textarea, className)
+  }
+));
+const IconButton = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    ref,
+    type: "button",
+    ...props,
+    className: cva.cn(InputWrapper_module.default["icon-button"], className)
+  }
+));
 const InputStartContent = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cva.cn(InputWrapper_module.default["start-content"], className) });
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ...props,
+    className: cva.cn(InputWrapper_module.default["start-content"], className)
+  }
+);
 const InputEndContent = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cva.cn(InputWrapper_module.default["end-content"], className) });
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ...props,
+    className: cva.cn(InputWrapper_module.default["end-content"], className)
+  }
+);
 
 exports.IconButton = IconButton;
 exports.InputElement = InputElement;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/InputWrapper/InputWrapper.tsx"],"sourcesContent":["import { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';\nimport { Label } from '@/components/Label';\nimport { cn, cva } from '@/lib/cva';\nimport {\n  ButtonHTMLAttributes,\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  ReactNode,\n  SVGProps,\n  TextareaHTMLAttributes,\n  forwardRef,\n} from 'react';\nimport styles from './InputWrapper.module.css';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    error: {\n      true: styles.wrapper_error,\n      false: '',\n    },\n    resize: {\n      none: '',\n      vertical: styles.wrapper_resize_vertical,\n      horizontal: styles.wrapper_resize_horizontal,\n      both: styles.wrapper_resize_both,\n    },\n  },\n  defaultVariants: {\n    error: false,\n    resize: 'none',\n  },\n});\n\nexport interface WrapperProps {\n  className?: string;\n  id: string;\n  label?: ReactNode;\n  labelColor?: string;\n  error?: ReactNode;\n  disabled?: boolean;\n  children: ReactNode;\n  orientation?: 'vertical' | 'horizontal';\n  dir?: 'start' | 'end';\n  resize?: 'none' | 'vertical' | 'horizontal' | 'both';\n}\n\nexport const InputWrapper = ({\n  className,\n  id,\n  label = '',\n  labelColor,\n  error,\n  disabled,\n  children,\n  orientation,\n  dir,\n  resize = 'none',\n}: WrapperProps) => {\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      $addLabelPadding\n    >\n      <FormElementContainer>\n        <div\n          data-resize={resize}\n          className={cn(\n            wrapperVariants({ error: !!error, resize }),\n            disabled && styles.disabled,\n            className\n          )}\n        >\n          {children}\n        </div>\n        {!!error && error !== true && <Error>{error}</Error>}\n      </FormElementContainer>\n      {label && (\n        <Label\n          htmlFor={id}\n          disabled={disabled}\n          error={!!error}\n          style={labelColor ? { color: labelColor } : undefined}\n        >\n          {label}\n        </Label>\n      )}\n    </FormRoot>\n  );\n};\n\nconst inputVariants = cva(styles.input, {\n  variants: {\n    hasStartContent: {\n      true: styles['input_has-start-content'],\n      false: '',\n    },\n    hasEndContent: {\n      true: styles['input_has-end-content'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    hasStartContent: false,\n    hasEndContent: false,\n  },\n});\n\ninterface InputElementOwnProps {\n  $hasStartContent?: boolean;\n  $hasEndContent?: boolean;\n  /** Render as a different element/component (mirrors styled-components `as`). */\n  as?: ElementType;\n}\n\nexport type InputElementProps<T extends ElementType = 'input'> = Omit<\n  ComponentProps<T>,\n  keyof InputElementOwnProps\n> &\n  InputElementOwnProps;\n\ntype InputElementPolymorphicComponent = <T extends ElementType = 'input'>(\n  props: InputElementProps<T>\n) => ReactNode;\n\nconst _InputElement = <T extends ElementType = 'input'>(\n  { as, $hasStartContent, $hasEndContent, className, ...props }: InputElementProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'input';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(\n        inputVariants({\n          hasStartContent: !!$hasStartContent,\n          hasEndContent: !!$hasEndContent,\n        }),\n        className\n      )}\n    />\n  );\n};\n\nexport const InputElement: InputElementPolymorphicComponent = forwardRef(_InputElement);\n\nexport interface NumberInputElementProps extends InputHTMLAttributes<HTMLInputElement> {\n  $hasStartContent?: boolean;\n  $hasEndContent?: boolean;\n  $hideControls?: boolean;\n}\n\nexport const NumberInputElement = forwardRef<HTMLInputElement, NumberInputElementProps>(\n  ({ $hideControls, $hasStartContent, $hasEndContent, className, ...props }, ref) => (\n    <input\n      ref={ref}\n      {...props}\n      className={cn(\n        inputVariants({\n          hasStartContent: !!$hasStartContent,\n          hasEndContent: !!$hasEndContent,\n        }),\n        $hideControls && styles['number-input_hide-controls'],\n        className\n      )}\n    />\n  )\n);\n\nexport const TextAreaElement = forwardRef<\n  HTMLTextAreaElement,\n  TextareaHTMLAttributes<HTMLTextAreaElement>\n>(({ className, ...props }, ref) => (\n  <textarea\n    ref={ref}\n    {...props}\n    className={cn(styles.textarea, className)}\n  />\n));\n\nexport const IconButton = forwardRef<\n  HTMLButtonElement,\n  ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, ...props }, ref) => (\n  <button\n    ref={ref}\n    type=\"button\"\n    {...props}\n    className={cn(styles['icon-button'], className)}\n  />\n));\n\nexport const IconWrapper = ({ className, ...props }: SVGProps<SVGSVGElement>) => (\n  <svg\n    {...props}\n    className={cn(styles['icon-wrapper'], className)}\n  />\n);\n\nexport const InputStartContent = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    {...props}\n    className={cn(styles['start-content'], className)}\n  />\n);\n\nexport const InputEndContent = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    {...props}\n    className={cn(styles['end-content'], className)}\n  />\n);\n"],"names":["wrapperVariants","cva","styles","wrapper","variants","error","true","wrapper_error","false","resize","none","vertical","wrapper_resize_vertical","horizontal","wrapper_resize_horizontal","both","wrapper_resize_both","defaultVariants","InputWrapper","className","id","label","labelColor","disabled","children","orientation","dir","FormRoot","jsxs","FormElementContainer","jsx","cn","Error","Label","color","undefined","inputVariants","input","hasStartContent","hasEndContent","_InputElement","as","$hasStartContent","$hasEndContent","props","ref","Component","InputElement","forwardRef","NumberInputElement","$hideControls","TextAreaElement","textarea","IconButton","InputStartContent","InputEndContent"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/InputWrapper/InputWrapper.tsx"],"sourcesContent":["import { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';\nimport { Label } from '@/components/Label';\nimport { cn, cva } from '@/lib/cva';\nimport {\n  ButtonHTMLAttributes,\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  ReactNode,\n  SVGProps,\n  TextareaHTMLAttributes,\n  forwardRef,\n} from 'react';\nimport styles from './InputWrapper.module.css';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    error: {\n      true: styles.wrapper_error,\n      false: '',\n    },\n    resize: {\n      none: '',\n      vertical: styles.wrapper_resize_vertical,\n      horizontal: styles.wrapper_resize_horizontal,\n      both: styles.wrapper_resize_both,\n    },\n  },\n  defaultVariants: {\n    error: false,\n    resize: 'none',\n  },\n});\n\nexport interface WrapperProps {\n  className?: string;\n  id: string;\n  label?: ReactNode;\n  labelColor?: string;\n  error?: ReactNode;\n  disabled?: boolean;\n  children: ReactNode;\n  orientation?: 'vertical' | 'horizontal';\n  dir?: 'start' | 'end';\n  resize?: 'none' | 'vertical' | 'horizontal' | 'both';\n}\n\nexport const InputWrapper = ({\n  className,\n  id,\n  label = '',\n  labelColor,\n  error,\n  disabled,\n  children,\n  orientation,\n  dir,\n  resize = 'none',\n}: WrapperProps) => {\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      $addLabelPadding\n    >\n      <FormElementContainer>\n        <div\n          data-resize={resize}\n          className={cn(\n            wrapperVariants({ error: !!error, resize }),\n            disabled && styles.disabled,\n            className\n          )}\n        >\n          {children}\n        </div>\n        {!!error && error !== true && <Error>{error}</Error>}\n      </FormElementContainer>\n      {label && (\n        <Label\n          htmlFor={id}\n          disabled={disabled}\n          error={!!error}\n          style={labelColor ? { color: labelColor } : undefined}\n        >\n          {label}\n        </Label>\n      )}\n    </FormRoot>\n  );\n};\n\nconst inputVariants = cva(styles.input, {\n  variants: {\n    hasStartContent: {\n      true: styles['input_has-start-content'],\n      false: '',\n    },\n    hasEndContent: {\n      true: styles['input_has-end-content'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    hasStartContent: false,\n    hasEndContent: false,\n  },\n});\n\ninterface InputElementOwnProps {\n  $hasStartContent?: boolean;\n  $hasEndContent?: boolean;\n  /** Render as a different element/component. */\n  as?: ElementType;\n}\n\nexport type InputElementProps<T extends ElementType = 'input'> = Omit<\n  ComponentProps<T>,\n  keyof InputElementOwnProps\n> &\n  InputElementOwnProps;\n\ntype InputElementPolymorphicComponent = <T extends ElementType = 'input'>(\n  props: InputElementProps<T>\n) => ReactNode;\n\nconst _InputElement = <T extends ElementType = 'input'>(\n  { as, $hasStartContent, $hasEndContent, className, ...props }: InputElementProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'input';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(\n        inputVariants({\n          hasStartContent: !!$hasStartContent,\n          hasEndContent: !!$hasEndContent,\n        }),\n        className\n      )}\n    />\n  );\n};\n\nexport const InputElement: InputElementPolymorphicComponent = forwardRef(_InputElement);\n\nexport interface NumberInputElementProps extends InputHTMLAttributes<HTMLInputElement> {\n  $hasStartContent?: boolean;\n  $hasEndContent?: boolean;\n  $hideControls?: boolean;\n}\n\nexport const NumberInputElement = forwardRef<HTMLInputElement, NumberInputElementProps>(\n  ({ $hideControls, $hasStartContent, $hasEndContent, className, ...props }, ref) => (\n    <input\n      ref={ref}\n      {...props}\n      className={cn(\n        inputVariants({\n          hasStartContent: !!$hasStartContent,\n          hasEndContent: !!$hasEndContent,\n        }),\n        $hideControls && styles['number-input_hide-controls'],\n        className\n      )}\n    />\n  )\n);\n\nexport const TextAreaElement = forwardRef<\n  HTMLTextAreaElement,\n  TextareaHTMLAttributes<HTMLTextAreaElement>\n>(({ className, ...props }, ref) => (\n  <textarea\n    ref={ref}\n    {...props}\n    className={cn(styles.textarea, className)}\n  />\n));\n\nexport const IconButton = forwardRef<\n  HTMLButtonElement,\n  ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, ...props }, ref) => (\n  <button\n    ref={ref}\n    type=\"button\"\n    {...props}\n    className={cn(styles['icon-button'], className)}\n  />\n));\n\nexport const IconWrapper = ({ className, ...props }: SVGProps<SVGSVGElement>) => (\n  <svg\n    {...props}\n    className={cn(styles['icon-wrapper'], className)}\n  />\n);\n\nexport const InputStartContent = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    {...props}\n    className={cn(styles['start-content'], className)}\n  />\n);\n\nexport const InputEndContent = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    {...props}\n    className={cn(styles['end-content'], className)}\n  />\n);\n"],"names":["cva","styles","jsxs","FormRoot","FormElementContainer","jsx","cn","Error","Label","forwardRef"],"mappings":"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"}

package/dist/cjs/components/Label/Label.css

@@ -1,15 +1,14 @@
-.label__RaRvM {
+@layer clickui {.label__RaRvM {
   color: var(--click-field-color-label-default);
   font: var(--click-field-typography-label-default);
 }
 
 /* Hover/focus rules only apply when neither disabled nor error is set, matching
-   the original styled-components behavior (which simply didn't emit them in
-   those states). The :not() chain also raises specificity above 0-1-0 so these
-   rules win over InputWrapper's `labelColor` override (a 0-1-0 single-class
-   styled-components selector injected later in the cascade). The .label_error
-   and .label_disabled modifiers below stay at 0-1-0 on purpose, so labelColor
-   continues to override them. */
+   the pre-migration behavior (which simply didn't emit them in those states).
+   The :not() chain also raises specificity above 0-1-0 so these rules win over
+   InputWrapper's `labelColor` override. The .label_error and .label_disabled
+   modifiers below stay at 0-1-0 on purpose, so labelColor continues to
+   override them. */
 .label__RaRvM:not(.label_error__k6yT0, .label_disabled__8BGcG):hover {
   color: var(--click-field-color-label-hover);
   font: var(--click-field-typography-label-hover);
@@ -30,3 +29,4 @@
   color: var(--click-field-color-label-disabled);
   font: var(--click-field-typography-label-disabled);
 }
+}

package/dist/cjs/components/Label/index.cjs

@@ -24,16 +24,14 @@ const labelVariants = classVarianceAuthority.cva(Label_module.default.label, {
     error: false
   }
 });
-const Label = ({
-  disabled,
-  error,
-  children,
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx("label", { ...props, className: cva.cn(labelVariants({
-  disabled,
-  error
-}), className), children });
+const Label = ({ disabled, error, children, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "label",
+  {
+    ...props,
+    className: cva.cn(labelVariants({ disabled, error }), className),
+    children
+  }
+);
 
 exports.Label = Label;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Label/Label.tsx"],"sourcesContent":["import { cn, cva } from '@/lib/cva';\nimport { LabelProps } from './Label.types';\nimport styles from './Label.module.css';\n\nconst labelVariants = cva(styles.label, {\n  variants: {\n    disabled: {\n      true: styles['label_disabled'],\n      false: '',\n    },\n    error: {\n      true: styles['label_error'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n    error: false,\n  },\n});\n\nexport const Label = ({ disabled, error, children, className, ...props }: LabelProps) => (\n  <label\n    {...props}\n    className={cn(labelVariants({ disabled, error }), className)}\n  >\n    {children}\n  </label>\n);\n"],"names":["labelVariants","cva","styles","label","variants","disabled","true","false","error","defaultVariants","Label","children","className","props","cn"],"mappings":";;;;;;;;;AAIA,MAAMA,aAAAA,GAAgBC,0BAAAA,CAAIC,oBAAAA,CAAOC,KAAAA,EAAO;AAAA,EACtCC,QAAAA,EAAU;AAAA,IACRC,QAAAA,EAAU;AAAA,MACRC,IAAAA,EAAMJ,qBAAO,gBAAgB,CAAA;AAAA,MAC7BK,KAAAA,EAAO;AAAA,KACT;AAAA,IACAC,KAAAA,EAAO;AAAA,MACLF,IAAAA,EAAMJ,qBAAO,aAAa,CAAA;AAAA,MAC1BK,KAAAA,EAAO;AAAA;AACT,GACF;AAAA,EACAE,eAAAA,EAAiB;AAAA,IACfJ,QAAAA,EAAU,KAAA;AAAA,IACVG,KAAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAEM,MAAME,QAAQA,CAAC;AAAA,EAAEL,QAAAA;AAAAA,EAAUG,KAAAA;AAAAA,EAAOG,QAAAA;AAAAA,EAAUC,SAAAA;AAAAA,EAAW,GAAGC;AAAkB,CAAA,oCAChF,OAAA,EAAA,EACC,GAAIA,KAAAA,EACJ,SAAA,EAAWC,OAAGd,aAAAA,CAAc;AAAA,EAAEK,QAAAA;AAAAA,EAAUG;AAAM,CAAC,CAAA,EAAGI,SAAS,CAAA,EAE1DD,QAAAA,EACH;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Label/Label.tsx"],"sourcesContent":["import { cn, cva } from '@/lib/cva';\nimport { LabelProps } from './Label.types';\nimport styles from './Label.module.css';\n\nconst labelVariants = cva(styles.label, {\n  variants: {\n    disabled: {\n      true: styles['label_disabled'],\n      false: '',\n    },\n    error: {\n      true: styles['label_error'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n    error: false,\n  },\n});\n\nexport const Label = ({ disabled, error, children, className, ...props }: LabelProps) => (\n  <label\n    {...props}\n    className={cn(labelVariants({ disabled, error }), className)}\n  >\n    {children}\n  </label>\n);\n"],"names":["cva","styles","jsx","cn"],"mappings":";;;;;;;;;AAIA,MAAM,aAAA,GAAgBA,0BAAA,CAAIC,oBAAA,CAAO,KAAA,EAAO;AAAA,EACtC,QAAA,EAAU;AAAA,IACR,QAAA,EAAU;AAAA,MACR,IAAA,EAAMA,qBAAO,gBAAgB,CAAA;AAAA,MAC7B,KAAA,EAAO;AAAA,KACT;AAAA,IACA,KAAA,EAAO;AAAA,MACL,IAAA,EAAMA,qBAAO,aAAa,CAAA;AAAA,MAC1B,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,QAAA,EAAU,KAAA;AAAA,IACV,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAEM,MAAM,KAAA,GAAQ,CAAC,EAAE,QAAA,EAAU,OAAO,QAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAM,qBACrEC,cAAA;AAAA,EAAC,OAAA;AAAA,EAAA;AAAA,IACE,GAAG,KAAA;AAAA,IACJ,SAAA,EAAWC,OAAG,aAAA,CAAc,EAAE,UAAU,KAAA,EAAO,GAAG,SAAS,CAAA;AAAA,IAE1D;AAAA;AACH;;;;"}

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

@@ -1,4 +1,4 @@
-.link__Ly-e3 {
+@layer clickui {.link__Ly-e3 {
   display: inline-flex;
   margin: 0;
   margin-right: var(--link-gap);
@@ -137,3 +137,4 @@
   width: var(--click-link-icon-size-md-width);
   height: var(--click-link-icon-size-md-height);
 }
+}