@clickhouse/click-ui 0.9.0 → 1.0.0-rc2

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Text.module.css';\n\nexport type TextSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'mono';\nexport type TextAlignment = 'left' | 'center' | 'right';\nexport type TextColor = 'default' | 'muted' | 'danger' | 'disabled' | 'warning';\n\nexport interface TextProps<T extends ElementType = 'p'> {\n  /** The text content to display */\n  children: ReactNode;\n  /** The text alignment */\n  align?: TextAlignment;\n  /** The text color variant */\n  color?: TextColor;\n  /** The font size of the text */\n  size?: TextSize;\n  /** The font weight of the text */\n  weight?: TextWeight;\n  /** Additional CSS class name */\n  className?: string;\n  /** Custom component to render as */\n  component?: T;\n  /** Whether the text should fill the full width of its container */\n  fillWidth?: boolean;\n}\n\ntype TextPolymorphicComponent = <T extends ElementType = 'p'>(\n  props: Omit<ComponentProps<T>, keyof TextProps<T>> & TextProps<T>\n) => ReactNode;\n\nconst textVariants = cva(styles.text, {\n  variants: {\n    color: {\n      default: styles['text_color_default'],\n      muted: styles['text_color_muted'],\n      danger: styles['text_color_danger'],\n      disabled: styles['text_color_disabled'],\n      warning: styles['text_color_warning'],\n    },\n    align: {\n      left: styles['text_align_left'],\n      center: styles['text_align_center'],\n      right: styles['text_align_right'],\n    },\n    fillWidth: {\n      true: styles['text_fill-width'],\n    },\n    size: {\n      xs: '',\n      sm: '',\n      md: '',\n      lg: '',\n    },\n    weight: {\n      normal: '',\n      medium: '',\n      semibold: '',\n      bold: '',\n      mono: '',\n    },\n  },\n  compoundVariants: [\n    { weight: 'normal', size: 'xs', class: styles['text_font_normal-xs'] },\n    { weight: 'normal', size: 'sm', class: styles['text_font_normal-sm'] },\n    { weight: 'normal', size: 'md', class: styles['text_font_normal-md'] },\n    { weight: 'normal', size: 'lg', class: styles['text_font_normal-lg'] },\n    { weight: 'medium', size: 'xs', class: styles['text_font_medium-xs'] },\n    { weight: 'medium', size: 'sm', class: styles['text_font_medium-sm'] },\n    { weight: 'medium', size: 'md', class: styles['text_font_medium-md'] },\n    { weight: 'medium', size: 'lg', class: styles['text_font_medium-lg'] },\n    { weight: 'semibold', size: 'xs', class: styles['text_font_semibold-xs'] },\n    { weight: 'semibold', size: 'sm', class: styles['text_font_semibold-sm'] },\n    { weight: 'semibold', size: 'md', class: styles['text_font_semibold-md'] },\n    { weight: 'semibold', size: 'lg', class: styles['text_font_semibold-lg'] },\n    { weight: 'bold', size: 'xs', class: styles['text_font_bold-xs'] },\n    { weight: 'bold', size: 'sm', class: styles['text_font_bold-sm'] },\n    { weight: 'bold', size: 'md', class: styles['text_font_bold-md'] },\n    { weight: 'bold', size: 'lg', class: styles['text_font_bold-lg'] },\n    { weight: 'mono', size: 'xs', class: styles['text_font_mono-xs'] },\n    { weight: 'mono', size: 'sm', class: styles['text_font_mono-sm'] },\n    { weight: 'mono', size: 'md', class: styles['text_font_mono-md'] },\n    { weight: 'mono', size: 'lg', class: styles['text_font_mono-lg'] },\n  ],\n  defaultVariants: {\n    color: 'default',\n    align: 'left',\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst _Text = <T extends ElementType = 'p'>(\n  {\n    align,\n    color,\n    size,\n    weight,\n    className,\n    children,\n    component,\n    fillWidth,\n    ...props\n  }: Omit<ComponentProps<T>, keyof TextProps<T>> & TextProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'p';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(textVariants({ color, align, size, weight, fillWidth }), className)}\n    >\n      {children}\n    </Component>\n  );\n};\n\n_Text.displayName = 'Text';\n\nexport const Text: TextPolymorphicComponent = forwardRef(_Text);\n"],"names":["textVariants","cva","styles","text","variants","color","default","muted","danger","disabled","warning","align","left","center","right","fillWidth","true","size","xs","sm","md","lg","weight","normal","medium","semibold","bold","mono","compoundVariants","class","defaultVariants","_Text","className","children","component","props","ref","Component","cn","displayName","Text","forwardRef"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Text.module.css';\n\nexport type TextSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'mono';\nexport type TextAlignment = 'left' | 'center' | 'right';\nexport type TextColor = 'default' | 'muted' | 'danger' | 'disabled' | 'warning';\n\nexport interface TextProps<T extends ElementType = 'p'> {\n  /** The text content to display */\n  children: ReactNode;\n  /** The text alignment */\n  align?: TextAlignment;\n  /** The text color variant */\n  color?: TextColor;\n  /** The font size of the text */\n  size?: TextSize;\n  /** The font weight of the text */\n  weight?: TextWeight;\n  /** Additional CSS class name */\n  className?: string;\n  /** Custom component to render as */\n  component?: T;\n  /** Whether the text should fill the full width of its container */\n  fillWidth?: boolean;\n}\n\ntype TextPolymorphicComponent = <T extends ElementType = 'p'>(\n  props: Omit<ComponentProps<T>, keyof TextProps<T>> & TextProps<T>\n) => ReactNode;\n\nconst textVariants = cva(styles.text, {\n  variants: {\n    color: {\n      default: styles['text_color_default'],\n      muted: styles['text_color_muted'],\n      danger: styles['text_color_danger'],\n      disabled: styles['text_color_disabled'],\n      warning: styles['text_color_warning'],\n    },\n    align: {\n      left: styles['text_align_left'],\n      center: styles['text_align_center'],\n      right: styles['text_align_right'],\n    },\n    fillWidth: {\n      true: styles['text_fill-width'],\n    },\n    size: {\n      xs: '',\n      sm: '',\n      md: '',\n      lg: '',\n    },\n    weight: {\n      normal: '',\n      medium: '',\n      semibold: '',\n      bold: '',\n      mono: '',\n    },\n  },\n  compoundVariants: [\n    { weight: 'normal', size: 'xs', class: styles['text_font_normal-xs'] },\n    { weight: 'normal', size: 'sm', class: styles['text_font_normal-sm'] },\n    { weight: 'normal', size: 'md', class: styles['text_font_normal-md'] },\n    { weight: 'normal', size: 'lg', class: styles['text_font_normal-lg'] },\n    { weight: 'medium', size: 'xs', class: styles['text_font_medium-xs'] },\n    { weight: 'medium', size: 'sm', class: styles['text_font_medium-sm'] },\n    { weight: 'medium', size: 'md', class: styles['text_font_medium-md'] },\n    { weight: 'medium', size: 'lg', class: styles['text_font_medium-lg'] },\n    { weight: 'semibold', size: 'xs', class: styles['text_font_semibold-xs'] },\n    { weight: 'semibold', size: 'sm', class: styles['text_font_semibold-sm'] },\n    { weight: 'semibold', size: 'md', class: styles['text_font_semibold-md'] },\n    { weight: 'semibold', size: 'lg', class: styles['text_font_semibold-lg'] },\n    { weight: 'bold', size: 'xs', class: styles['text_font_bold-xs'] },\n    { weight: 'bold', size: 'sm', class: styles['text_font_bold-sm'] },\n    { weight: 'bold', size: 'md', class: styles['text_font_bold-md'] },\n    { weight: 'bold', size: 'lg', class: styles['text_font_bold-lg'] },\n    { weight: 'mono', size: 'xs', class: styles['text_font_mono-xs'] },\n    { weight: 'mono', size: 'sm', class: styles['text_font_mono-sm'] },\n    { weight: 'mono', size: 'md', class: styles['text_font_mono-md'] },\n    { weight: 'mono', size: 'lg', class: styles['text_font_mono-lg'] },\n  ],\n  defaultVariants: {\n    color: 'default',\n    align: 'left',\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst _Text = <T extends ElementType = 'p'>(\n  {\n    align,\n    color,\n    size,\n    weight,\n    className,\n    children,\n    component,\n    fillWidth,\n    ...props\n  }: Omit<ComponentProps<T>, keyof TextProps<T>> & TextProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'p';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(textVariants({ color, align, size, weight, fillWidth }), className)}\n    >\n      {children}\n    </Component>\n  );\n};\n\n_Text.displayName = 'Text';\n\nexport const Text: TextPolymorphicComponent = forwardRef(_Text);\n"],"names":["cva","styles","jsx","cn","forwardRef"],"mappings":"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"}

package/dist/cjs/components/TextAreaField/index.cjs

@@ -7,36 +7,50 @@ const react = require('react');
 const mergeRefs = require('../../utils/mergeRefs.cjs');
 const InputWrapper = require('../InputWrapper/index.cjs');
 
-const TextAreaField = react.forwardRef(({
-  rows,
-  disabled,
-  label,
-  error,
-  id,
-  value = "",
-  onChange: onChangeProp,
-  orientation,
-  dir,
-  ...props
-}, ref) => {
-  const inputRef = react.useRef(null);
-  const defaultId = react.useId();
-  const onChange = (e) => {
-    onChangeProp(e.target.value, e);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.InputWrapper, { disabled, id: id ?? defaultId, label, error, orientation, dir, resize: "vertical", children: /* @__PURE__ */ jsxRuntime.jsx(
-    InputWrapper.TextAreaElement,
-    {
-      ref: mergeRefs.mergeRefs([inputRef, ref]),
-      rows: rows ?? 5,
-      id: id ?? defaultId,
-      disabled,
-      value,
-      onInput: onChange,
-      ...props
-    }
-  ) });
-});
+const TextAreaField = react.forwardRef(
+  ({
+    rows,
+    disabled,
+    label,
+    error,
+    id,
+    value = "",
+    onChange: onChangeProp,
+    orientation,
+    dir,
+    ...props
+  }, ref) => {
+    const inputRef = react.useRef(null);
+    const defaultId = react.useId();
+    const onChange = (e) => {
+      onChangeProp(e.target.value, e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      InputWrapper.InputWrapper,
+      {
+        disabled,
+        id: id ?? defaultId,
+        label,
+        error,
+        orientation,
+        dir,
+        resize: "vertical",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          InputWrapper.TextAreaElement,
+          {
+            ref: mergeRefs.mergeRefs([inputRef, ref]),
+            rows: rows ?? 5,
+            id: id ?? defaultId,
+            disabled,
+            value,
+            onInput: onChange,
+            ...props
+          }
+        )
+      }
+    );
+  }
+);
 
 exports.TextAreaField = TextAreaField;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/TextAreaField/TextAreaField.tsx"],"sourcesContent":["import { ChangeEvent, TextareaHTMLAttributes, forwardRef, useId, useRef } from 'react';\nimport { TextAreaElement, InputWrapper, WrapperProps } from '@/components/InputWrapper';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nexport interface TextAreaFieldProps\n  extends\n    Omit<WrapperProps, 'id' | 'children'>,\n    Omit<\n      TextareaHTMLAttributes<HTMLTextAreaElement>,\n      'children' | 'type' | 'value' | 'onChange' | 'dir'\n    > {\n  /** Number of visible text rows */\n  rows?: number;\n  /** The current value of the textarea */\n  value?: string;\n  /** Callback when the textarea value changes */\n  onChange: (inputValue: string, e?: ChangeEvent<HTMLTextAreaElement>) => 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}\n\nexport const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(\n  (\n    {\n      rows,\n      disabled,\n      label,\n      error,\n      id,\n      value = '',\n      onChange: onChangeProp,\n      orientation,\n      dir,\n      ...props\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLTextAreaElement>(null);\n    const defaultId = useId();\n    const onChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n      onChangeProp(e.target.value, e);\n    };\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        resize=\"vertical\"\n      >\n        <TextAreaElement\n          ref={mergeRefs([inputRef, ref])}\n          rows={rows ?? 5}\n          id={id ?? defaultId}\n          disabled={disabled}\n          value={value}\n          // TODO: Still uses onInput={onChange}. All other field components use onChange. This will silently break React Hook Form and Formik integrations, and consumers can't override it via ...props since onChange is already omitted from the spread type.\n          onInput={onChange}\n          {...props}\n        />\n      </InputWrapper>\n    );\n  }\n);\n"],"names":["TextAreaField","forwardRef","rows","disabled","label","error","id","value","onChange","onChangeProp","orientation","dir","props","ref","inputRef","useRef","defaultId","useId","e","target","jsx","InputWrapper","TextAreaElement","mergeRefs"],"mappings":";;;;;;;;;AAuBO,MAAMA,aAAAA,GAAgBC,iBAC3B,CACE;AAAA,EACEC,IAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,EAAAA;AAAAA,EACAC,KAAAA,GAAQ,EAAA;AAAA,EACRC,QAAAA,EAAUC,YAAAA;AAAAA,EACVC,WAAAA;AAAAA,EACAC,GAAAA;AAAAA,EACA,GAAGC;AACL,CAAA,EACAC,GAAAA,KACG;AACH,EAAA,MAAMC,QAAAA,GAAWC,aAA4B,IAAI,CAAA;AACjD,EAAA,MAAMC,YAAYC,WAAAA,EAAM;AACxB,EAAA,MAAMT,QAAAA,GAAWA,CAACU,CAAAA,KAAwC;AACxDT,IAAAA,YAAAA,CAAaS,CAAAA,CAAEC,MAAAA,CAAOZ,KAAAA,EAAOW,CAAC,CAAA;AAAA,EAChC,CAAA;AAEA,EAAA,uBACEE,cAAA,CAACC,yBAAA,EAAA,EACC,QAAA,EACA,EAAA,EAAIf,EAAAA,IAAMU,SAAAA,EACV,KAAA,EACA,KAAA,EACA,WAAA,EACA,GAAA,EACA,MAAA,EAAO,UAAA,EAEP,QAAA,kBAAAI,cAAA;AAAA,IAACE,4BAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAKC,mBAAAA,CAAU,CAACT,QAAAA,EAAUD,GAAG,CAAC,CAAA;AAAA,MAC9B,MAAMX,IAAAA,IAAQ,CAAA;AAAA,MACd,IAAII,EAAAA,IAAMU,SAAAA;AAAAA,MACV,QAAA;AAAA,MACA,KAAA;AAAA,MAEA,OAAA,EAASR,QAAAA;AAAAA,MACT,GAAII;AAAAA;AAAAA,GAAM,EAEd,CAAA;AAEJ,CACF;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/TextAreaField/TextAreaField.tsx"],"sourcesContent":["import { ChangeEvent, TextareaHTMLAttributes, forwardRef, useId, useRef } from 'react';\nimport { TextAreaElement, InputWrapper, WrapperProps } from '@/components/InputWrapper';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nexport interface TextAreaFieldProps\n  extends\n    Omit<WrapperProps, 'id' | 'children'>,\n    Omit<\n      TextareaHTMLAttributes<HTMLTextAreaElement>,\n      'children' | 'type' | 'value' | 'onChange' | 'dir'\n    > {\n  /** Number of visible text rows */\n  rows?: number;\n  /** The current value of the textarea */\n  value?: string;\n  /** Callback when the textarea value changes */\n  onChange: (inputValue: string, e?: ChangeEvent<HTMLTextAreaElement>) => 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}\n\nexport const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(\n  (\n    {\n      rows,\n      disabled,\n      label,\n      error,\n      id,\n      value = '',\n      onChange: onChangeProp,\n      orientation,\n      dir,\n      ...props\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLTextAreaElement>(null);\n    const defaultId = useId();\n    const onChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n      onChangeProp(e.target.value, e);\n    };\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        resize=\"vertical\"\n      >\n        <TextAreaElement\n          ref={mergeRefs([inputRef, ref])}\n          rows={rows ?? 5}\n          id={id ?? defaultId}\n          disabled={disabled}\n          value={value}\n          // TODO: Still uses onInput={onChange}. All other field components use onChange. This will silently break React Hook Form and Formik integrations, and consumers can't override it via ...props since onChange is already omitted from the spread type.\n          onInput={onChange}\n          {...props}\n        />\n      </InputWrapper>\n    );\n  }\n);\n"],"names":["forwardRef","useRef","useId","jsx","InputWrapper","TextAreaElement","mergeRefs"],"mappings":";;;;;;;;;AAuBO,MAAM,aAAA,GAAgBA,gBAAA;AAAA,EAC3B,CACE;AAAA,IACE,IAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,EAAA;AAAA,IACA,KAAA,GAAQ,EAAA;AAAA,IACR,QAAA,EAAU,YAAA;AAAA,IACV,WAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAWC,aAA4B,IAAI,CAAA;AACjD,IAAA,MAAM,YAAYC,WAAA,EAAM;AACxB,IAAA,MAAM,QAAA,GAAW,CAAC,CAAA,KAAwC;AACxD,MAAA,YAAA,CAAa,CAAA,CAAE,MAAA,CAAO,KAAA,EAAO,CAAC,CAAA;AAAA,IAChC,CAAA;AAEA,IAAA,uBACEC,cAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,IAAI,EAAA,IAAM,SAAA;AAAA,QACV,KAAA;AAAA,QACA,KAAA;AAAA,QACA,WAAA;AAAA,QACA,GAAA;AAAA,QACA,MAAA,EAAO,UAAA;AAAA,QAEP,QAAA,kBAAAD,cAAA;AAAA,UAACE,4BAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAKC,mBAAA,CAAU,CAAC,QAAA,EAAU,GAAG,CAAC,CAAA;AAAA,YAC9B,MAAM,IAAA,IAAQ,CAAA;AAAA,YACd,IAAI,EAAA,IAAM,SAAA;AAAA,YACV,QAAA;AAAA,YACA,KAAA;AAAA,YAEA,OAAA,EAAS,QAAA;AAAA,YACR,GAAG;AAAA;AAAA;AACN;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist/cjs/components/TextField/index.cjs

@@ -8,47 +8,95 @@ const mergeRefs = require('../../utils/mergeRefs.cjs');
 const InputWrapper = require('../InputWrapper/index.cjs');
 const Icon = require('../Icon/index.cjs');
 
-const TextField = react.forwardRef(({
-  clear,
-  type,
-  disabled,
-  label,
-  labelColor,
-  error,
-  id,
-  loading,
-  value = "",
-  onChange: onChangeProp,
-  orientation,
-  dir,
-  startContent,
-  endContent,
-  ...props
-}, ref) => {
-  const inputRef = react.useRef(null);
-  const defaultId = react.useId();
-  const onChange = (e) => {
-    onChangeProp(e.target.value, e);
-  };
-  const clearInput = () => {
-    onChangeProp("");
-  };
-  const handleStartContentClick = () => {
-    inputRef.current?.focus();
-  };
-  const hasStartContent = Boolean(startContent);
-  const hasClear = clear && value.length > 0;
-  const hasEndContent = Boolean(hasClear || loading || endContent);
-  return /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper.InputWrapper, { disabled, id: id ?? defaultId, label, labelColor, error, orientation, dir, children: [
-    startContent && /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.InputStartContent, { onClick: handleStartContentClick, children: startContent }),
-    /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.InputElement, { $hasStartContent: hasStartContent, $hasEndContent: hasEndContent, ref: mergeRefs.mergeRefs([inputRef, ref]), type, id: id ?? defaultId, disabled, value, onChange, ...props }),
-    hasEndContent && /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper.InputEndContent, { children: [
-      endContent ? endContent : null,
-      hasClear && /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.IconButton, { disabled, onClick: clearInput, "aria-label": "clear input", "data-testid": "textfield-clear", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross", size: "sm" }) }),
-      loading && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "loading-animated", size: "sm" })
-    ] })
-  ] });
-});
+const TextField = react.forwardRef(
+  ({
+    clear,
+    type,
+    disabled,
+    label,
+    labelColor,
+    error,
+    id,
+    loading,
+    value = "",
+    onChange: onChangeProp,
+    orientation,
+    dir,
+    startContent,
+    endContent,
+    ...props
+  }, ref) => {
+    const inputRef = react.useRef(null);
+    const defaultId = react.useId();
+    const onChange = (e) => {
+      onChangeProp(e.target.value, e);
+    };
+    const clearInput = () => {
+      onChangeProp("");
+    };
+    const handleStartContentClick = () => {
+      inputRef.current?.focus();
+    };
+    const hasStartContent = Boolean(startContent);
+    const hasClear = clear && value.length > 0;
+    const hasEndContent = Boolean(hasClear || loading || endContent);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      InputWrapper.InputWrapper,
+      {
+        disabled,
+        id: id ?? defaultId,
+        label,
+        labelColor,
+        error,
+        orientation,
+        dir,
+        children: [
+          startContent && /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.InputStartContent, { onClick: handleStartContentClick, children: startContent }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            InputWrapper.InputElement,
+            {
+              $hasStartContent: hasStartContent,
+              $hasEndContent: hasEndContent,
+              ref: mergeRefs.mergeRefs([inputRef, ref]),
+              type,
+              id: id ?? defaultId,
+              disabled,
+              value,
+              onChange,
+              ...props
+            }
+          ),
+          hasEndContent && /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper.InputEndContent, { children: [
+            endContent ? endContent : null,
+            hasClear && /* @__PURE__ */ jsxRuntime.jsx(
+              InputWrapper.IconButton,
+              {
+                disabled,
+                onClick: clearInput,
+                "aria-label": "clear input",
+                "data-testid": "textfield-clear",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon.Icon,
+                  {
+                    name: "cross",
+                    size: "sm"
+                  }
+                )
+              }
+            ),
+            loading && /* @__PURE__ */ jsxRuntime.jsx(
+              Icon.Icon,
+              {
+                name: "loading-animated",
+                size: "sm"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
 
 exports.TextField = TextField;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/TextField/TextField.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  IconButton,\n  InputElement,\n  InputEndContent,\n  InputStartContent,\n  InputWrapper,\n  WrapperProps,\n} from '@/components/InputWrapper';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nexport interface TextFieldProps\n  extends\n    Omit<WrapperProps, 'id' | 'children'>,\n    Omit<\n      InputHTMLAttributes<HTMLInputElement>,\n      'children' | 'type' | 'value' | 'onChange' | 'dir'\n    > {\n  /** The input type - text, email, tel, or url */\n  type?: 'text' | 'email' | 'tel' | 'url';\n  /** Whether to show a loading spinner */\n  loading?: boolean;\n  /** Custom color for the label */\n  labelColor?: string;\n  /** The current value of the input */\n  value?: string;\n  /** Whether to show a clear button when the input has content */\n  clear?: 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  /** 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 TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      clear,\n      type,\n      disabled,\n      label,\n      labelColor,\n      error,\n      id,\n      loading,\n      value = '',\n      onChange: onChangeProp,\n      orientation,\n      dir,\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    const clearInput = () => {\n      onChangeProp('');\n    };\n\n    const handleStartContentClick: React.MouseEventHandler<HTMLDivElement> = () => {\n      inputRef.current?.focus();\n    };\n\n    const hasStartContent = Boolean(startContent);\n\n    const hasClear = clear && value.length > 0;\n    const hasEndContent = Boolean(hasClear || loading || endContent);\n\n    return (\n      <InputWrapper\n        disabled={disabled}\n        id={id ?? defaultId}\n        label={label}\n        labelColor={labelColor}\n        error={error}\n        orientation={orientation}\n        dir={dir}\n      >\n        {startContent && (\n          <InputStartContent onClick={handleStartContentClick}>\n            {startContent}\n          </InputStartContent>\n        )}\n\n        <InputElement\n          $hasStartContent={hasStartContent}\n          $hasEndContent={hasEndContent}\n          ref={mergeRefs([inputRef, ref])}\n          type={type}\n          id={id ?? defaultId}\n          disabled={disabled}\n          value={value}\n          onChange={onChange}\n          {...props}\n        />\n\n        {hasEndContent && (\n          <InputEndContent>\n            {endContent ? endContent : null}\n            {hasClear && (\n              <IconButton\n                disabled={disabled}\n                onClick={clearInput}\n                aria-label=\"clear input\"\n                data-testid=\"textfield-clear\"\n              >\n                <Icon\n                  name=\"cross\"\n                  size=\"sm\"\n                />\n              </IconButton>\n            )}\n            {loading && (\n              <Icon\n                name=\"loading-animated\"\n                size=\"sm\"\n              />\n            )}\n          </InputEndContent>\n        )}\n      </InputWrapper>\n    );\n  }\n);\n"],"names":["TextField","forwardRef","clear","type","disabled","label","labelColor","error","id","loading","value","onChange","onChangeProp","orientation","dir","startContent","endContent","props","ref","inputRef","useRef","defaultId","useId","e","target","clearInput","handleStartContentClick","current","focus","hasStartContent","Boolean","hasClear","length","hasEndContent","jsxs","InputWrapper","jsx","InputStartContent","InputElement","mergeRefs","InputEndContent","IconButton","Icon"],"mappings":";;;;;;;;;;AAgDO,MAAMA,SAAAA,GAAYC,iBACvB,CACE;AAAA,EACEC,KAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,EAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,KAAAA,GAAQ,EAAA;AAAA,EACRC,QAAAA,EAAUC,YAAAA;AAAAA,EACVC,WAAAA;AAAAA,EACAC,GAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACA,GAAGC;AACL,CAAA,EACAC,GAAAA,KACG;AACH,EAAA,MAAMC,QAAAA,GAAWC,aAAyB,IAAI,CAAA;AAC9C,EAAA,MAAMC,YAAYC,WAAAA,EAAM;AACxB,EAAA,MAAMX,QAAAA,GAAWA,CAACY,CAAAA,KAAqC;AACrDX,IAAAA,YAAAA,CAAaW,CAAAA,CAAEC,MAAAA,CAAOd,KAAAA,EAAOa,CAAC,CAAA;AAAA,EAChC,CAAA;AACA,EAAA,MAAME,aAAaA,MAAM;AACvBb,IAAAA,YAAAA,CAAa,EAAE,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAMc,0BAAmEA,MAAM;AAC7EP,IAAAA,QAAAA,CAASQ,SAASC,KAAAA,EAAM;AAAA,EAC1B,CAAA;AAEA,EAAA,MAAMC,eAAAA,GAAkBC,QAAQf,YAAY,CAAA;AAE5C,EAAA,MAAMgB,QAAAA,GAAW7B,KAAAA,IAASQ,KAAAA,CAAMsB,MAAAA,GAAS,CAAA;AACzC,EAAA,MAAMC,aAAAA,GAAgBH,OAAAA,CAAQC,QAAAA,IAAYtB,OAAAA,IAAWO,UAAU,CAAA;AAE/D,EAAA,uBACEkB,eAAA,CAACC,yBAAA,EAAA,EACC,QAAA,EACA,EAAA,EAAI3B,EAAAA,IAAMa,WACV,KAAA,EACA,UAAA,EACA,KAAA,EACA,WAAA,EACA,GAAA,EAECN,QAAAA,EAAAA;AAAAA,IAAAA,YAAAA,oBACCqB,cAAA,CAACC,8BAAA,EAAA,EAAkB,OAAA,EAASX,uBAAAA,EACzBX,QAAAA,EAAAA,YAAAA,EACH,CAAA;AAAA,oBAGFqB,cAAA,CAACE,6BACC,gBAAA,EAAkBT,eAAAA,EAClB,gBAAgBI,aAAAA,EAChB,GAAA,EAAKM,oBAAU,CAACpB,QAAAA,EAAUD,GAAG,CAAC,CAAA,EAC9B,MACA,EAAA,EAAIV,EAAAA,IAAMa,WACV,QAAA,EACA,KAAA,EACA,QAAA,EACA,GAAIJ,KAAAA,EAAM,CAAA;AAAA,IAGXgB,aAAAA,oCACEO,4BAAA,EAAA,EACExB,QAAAA,EAAAA;AAAAA,MAAAA,UAAAA,GAAaA,UAAAA,GAAa,IAAA;AAAA,MAC1Be,4BACCK,cAAA,CAACK,uBAAA,EAAA,EACC,QAAA,EACA,OAAA,EAAShB,YACT,YAAA,EAAW,aAAA,EACX,aAAA,EAAY,iBAAA,EAEZ,yCAACiB,SAAA,EAAA,EACC,IAAA,EAAK,OAAA,EACL,IAAA,EAAK,MAAI,CAAA,EAEb,CAAA;AAAA,MAEDjC,2BACC2B,cAAA,CAACM,SAAA,EAAA,EACC,IAAA,EAAK,kBAAA,EACL,MAAK,IAAA,EAAI;AAAA,KAAA,EAGf;AAAA,GAAA,EAEJ,CAAA;AAEJ,CACF;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/TextField/TextField.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  IconButton,\n  InputElement,\n  InputEndContent,\n  InputStartContent,\n  InputWrapper,\n  WrapperProps,\n} from '@/components/InputWrapper';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nexport interface TextFieldProps\n  extends\n    Omit<WrapperProps, 'id' | 'children'>,\n    Omit<\n      InputHTMLAttributes<HTMLInputElement>,\n      'children' | 'type' | 'value' | 'onChange' | 'dir'\n    > {\n  /** The input type - text, email, tel, or url */\n  type?: 'text' | 'email' | 'tel' | 'url';\n  /** Whether to show a loading spinner */\n  loading?: boolean;\n  /** Custom color for the label */\n  labelColor?: string;\n  /** The current value of the input */\n  value?: string;\n  /** Whether to show a clear button when the input has content */\n  clear?: 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  /** 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 TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      clear,\n      type,\n      disabled,\n      label,\n      labelColor,\n      error,\n      id,\n      loading,\n      value = '',\n      onChange: onChangeProp,\n      orientation,\n      dir,\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    const clearInput = () => {\n      onChangeProp('');\n    };\n\n    const handleStartContentClick: React.MouseEventHandler<HTMLDivElement> = () => {\n      inputRef.current?.focus();\n    };\n\n    const hasStartContent = Boolean(startContent);\n\n    const hasClear = clear && value.length > 0;\n    const hasEndContent = Boolean(hasClear || loading || endContent);\n\n    return (\n      <InputWrapper\n        disabled={disabled}\n        id={id ?? defaultId}\n        label={label}\n        labelColor={labelColor}\n        error={error}\n        orientation={orientation}\n        dir={dir}\n      >\n        {startContent && (\n          <InputStartContent onClick={handleStartContentClick}>\n            {startContent}\n          </InputStartContent>\n        )}\n\n        <InputElement\n          $hasStartContent={hasStartContent}\n          $hasEndContent={hasEndContent}\n          ref={mergeRefs([inputRef, ref])}\n          type={type}\n          id={id ?? defaultId}\n          disabled={disabled}\n          value={value}\n          onChange={onChange}\n          {...props}\n        />\n\n        {hasEndContent && (\n          <InputEndContent>\n            {endContent ? endContent : null}\n            {hasClear && (\n              <IconButton\n                disabled={disabled}\n                onClick={clearInput}\n                aria-label=\"clear input\"\n                data-testid=\"textfield-clear\"\n              >\n                <Icon\n                  name=\"cross\"\n                  size=\"sm\"\n                />\n              </IconButton>\n            )}\n            {loading && (\n              <Icon\n                name=\"loading-animated\"\n                size=\"sm\"\n              />\n            )}\n          </InputEndContent>\n        )}\n      </InputWrapper>\n    );\n  }\n);\n"],"names":["forwardRef","useRef","useId","jsxs","InputWrapper","jsx","InputStartContent","InputElement","mergeRefs","InputEndContent","IconButton","Icon"],"mappings":";;;;;;;;;;AAgDO,MAAM,SAAA,GAAYA,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,KAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,EAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA,GAAQ,EAAA;AAAA,IACR,QAAA,EAAU,YAAA;AAAA,IACV,WAAA;AAAA,IACA,GAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAWC,aAAyB,IAAI,CAAA;AAC9C,IAAA,MAAM,YAAYC,WAAA,EAAM;AACxB,IAAA,MAAM,QAAA,GAAW,CAAC,CAAA,KAAqC;AACrD,MAAA,YAAA,CAAa,CAAA,CAAE,MAAA,CAAO,KAAA,EAAO,CAAC,CAAA;AAAA,IAChC,CAAA;AACA,IAAA,MAAM,aAAa,MAAM;AACvB,MAAA,YAAA,CAAa,EAAE,CAAA;AAAA,IACjB,CAAA;AAEA,IAAA,MAAM,0BAAmE,MAAM;AAC7E,MAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,IAC1B,CAAA;AAEA,IAAA,MAAM,eAAA,GAAkB,QAAQ,YAAY,CAAA;AAE5C,IAAA,MAAM,QAAA,GAAW,KAAA,IAAS,KAAA,CAAM,MAAA,GAAS,CAAA;AACzC,IAAA,MAAM,aAAA,GAAgB,OAAA,CAAQ,QAAA,IAAY,OAAA,IAAW,UAAU,CAAA;AAE/D,IAAA,uBACEC,eAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,IAAI,EAAA,IAAM,SAAA;AAAA,QACV,KAAA;AAAA,QACA,UAAA;AAAA,QACA,KAAA;AAAA,QACA,WAAA;AAAA,QACA,GAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,YAAA,oBACCC,cAAA,CAACC,8BAAA,EAAA,EAAkB,OAAA,EAAS,uBAAA,EACzB,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,0BAGFD,cAAA;AAAA,YAACE,yBAAA;AAAA,YAAA;AAAA,cACC,gBAAA,EAAkB,eAAA;AAAA,cAClB,cAAA,EAAgB,aAAA;AAAA,cAChB,GAAA,EAAKC,mBAAA,CAAU,CAAC,QAAA,EAAU,GAAG,CAAC,CAAA;AAAA,cAC9B,IAAA;AAAA,cACA,IAAI,EAAA,IAAM,SAAA;AAAA,cACV,QAAA;AAAA,cACA,KAAA;AAAA,cACA,QAAA;AAAA,cACC,GAAG;AAAA;AAAA,WACN;AAAA,UAEC,aAAA,oCACEC,4BAAA,EAAA,EACE,QAAA,EAAA;AAAA,YAAA,UAAA,GAAa,UAAA,GAAa,IAAA;AAAA,YAC1B,QAAA,oBACCJ,cAAA;AAAA,cAACK,uBAAA;AAAA,cAAA;AAAA,gBACC,QAAA;AAAA,gBACA,OAAA,EAAS,UAAA;AAAA,gBACT,YAAA,EAAW,aAAA;AAAA,gBACX,aAAA,EAAY,iBAAA;AAAA,gBAEZ,QAAA,kBAAAL,cAAA;AAAA,kBAACM,SAAA;AAAA,kBAAA;AAAA,oBACC,IAAA,EAAK,OAAA;AAAA,oBACL,IAAA,EAAK;AAAA;AAAA;AACP;AAAA,aACF;AAAA,YAED,OAAA,oBACCN,cAAA;AAAA,cAACM,SAAA;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/cjs/components/Title/Title.css

@@ -1,4 +1,4 @@
-.title__t68i9 {
+@layer clickui {.title__t68i9 {
   /* anchors inherit the title color via this local alias; the color
      modifiers below redefine it so links track the chosen title color. */
   --title-link-color: var(--click-global-color-title-default);
@@ -22,7 +22,7 @@
 }
 
 /* font shorthand depends on both family and size; one class per pairing
-   mirrors the single `font:` declaration emitted by styled-components. */
+   emits a single `font:` declaration. */
 
 .title_font_product-xs__IdFu4 {
   font: var(--typography-styles-product-titles-xs);
@@ -97,3 +97,4 @@
 .title_align_right__483BF {
   text-align: right;
 }
+}

package/dist/cjs/components/Title/index.cjs

@@ -32,47 +32,18 @@ const titleVariants = classVarianceAuthority.cva(Title_module.default.title, {
       xl: ""
     }
   },
-  compoundVariants: [{
-    family: "product",
-    size: "xs",
-    class: Title_module.default["title_font_product-xs"]
-  }, {
-    family: "product",
-    size: "sm",
-    class: Title_module.default["title_font_product-sm"]
-  }, {
-    family: "product",
-    size: "md",
-    class: Title_module.default["title_font_product-md"]
-  }, {
-    family: "product",
-    size: "lg",
-    class: Title_module.default["title_font_product-lg"]
-  }, {
-    family: "product",
-    size: "xl",
-    class: Title_module.default["title_font_product-xl"]
-  }, {
-    family: "brand",
-    size: "xs",
-    class: Title_module.default["title_font_brand-xs"]
-  }, {
-    family: "brand",
-    size: "sm",
-    class: Title_module.default["title_font_brand-sm"]
-  }, {
-    family: "brand",
-    size: "md",
-    class: Title_module.default["title_font_brand-md"]
-  }, {
-    family: "brand",
-    size: "lg",
-    class: Title_module.default["title_font_brand-lg"]
-  }, {
-    family: "brand",
-    size: "xl",
-    class: Title_module.default["title_font_brand-xl"]
-  }],
+  compoundVariants: [
+    { family: "product", size: "xs", class: Title_module.default["title_font_product-xs"] },
+    { family: "product", size: "sm", class: Title_module.default["title_font_product-sm"] },
+    { family: "product", size: "md", class: Title_module.default["title_font_product-md"] },
+    { family: "product", size: "lg", class: Title_module.default["title_font_product-lg"] },
+    { family: "product", size: "xl", class: Title_module.default["title_font_product-xl"] },
+    { family: "brand", size: "xs", class: Title_module.default["title_font_brand-xs"] },
+    { family: "brand", size: "sm", class: Title_module.default["title_font_brand-sm"] },
+    { family: "brand", size: "md", class: Title_module.default["title_font_brand-md"] },
+    { family: "brand", size: "lg", class: Title_module.default["title_font_brand-lg"] },
+    { family: "brand", size: "xl", class: Title_module.default["title_font_brand-xl"] }
+  ],
   defaultVariants: {
     color: "default",
     align: "left",
@@ -80,24 +51,20 @@ const titleVariants = classVarianceAuthority.cva(Title_module.default.title, {
     size: "md"
   }
 });
-const Title = react.forwardRef(({
-  align,
-  size,
-  family,
-  type,
-  color,
-  children,
-  className,
-  ...props
-}, ref) => {
-  const Component = type;
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...props, className: cva.cn(titleVariants({
-    color,
-    align,
-    family,
-    size
-  }), className), children });
-});
+const Title = react.forwardRef(
+  ({ align, size, family, type, color, children, className, ...props }, ref) => {
+    const Component = type;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        ...props,
+        className: cva.cn(titleVariants({ color, align, family, size }), className),
+        children
+      }
+    );
+  }
+);
 
 exports.Title = Title;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Title/Title.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Title.module.css';\n\nexport type TitleAlignment = 'left' | 'center' | 'right';\nexport type TitleColor = 'default' | 'muted';\nexport type TitleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type TitleFamily = 'product' | 'brand';\nexport type TitleType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /** The text alignment of the title */\n  align?: TitleAlignment;\n  /** The color variant of the title */\n  color?: TitleColor;\n  /** The font size of the title */\n  size?: TitleSize;\n  /** The font family to use - product or brand */\n  family?: TitleFamily;\n  /** The heading level (h1-h6) */\n  type: TitleType;\n}\n\nconst titleVariants = cva(styles.title, {\n  variants: {\n    color: {\n      default: styles['title_color_default'],\n      muted: styles['title_color_muted'],\n    },\n    align: {\n      left: styles['title_align_left'],\n      center: styles['title_align_center'],\n      right: styles['title_align_right'],\n    },\n    family: {\n      product: '',\n      brand: '',\n    },\n    size: {\n      xs: '',\n      sm: '',\n      md: '',\n      lg: '',\n      xl: '',\n    },\n  },\n  compoundVariants: [\n    { family: 'product', size: 'xs', class: styles['title_font_product-xs'] },\n    { family: 'product', size: 'sm', class: styles['title_font_product-sm'] },\n    { family: 'product', size: 'md', class: styles['title_font_product-md'] },\n    { family: 'product', size: 'lg', class: styles['title_font_product-lg'] },\n    { family: 'product', size: 'xl', class: styles['title_font_product-xl'] },\n    { family: 'brand', size: 'xs', class: styles['title_font_brand-xs'] },\n    { family: 'brand', size: 'sm', class: styles['title_font_brand-sm'] },\n    { family: 'brand', size: 'md', class: styles['title_font_brand-md'] },\n    { family: 'brand', size: 'lg', class: styles['title_font_brand-lg'] },\n    { family: 'brand', size: 'xl', class: styles['title_font_brand-xl'] },\n  ],\n  defaultVariants: {\n    color: 'default',\n    align: 'left',\n    family: 'product',\n    size: 'md',\n  },\n});\n\n/** The `title` component allows you to easily add headings to your pages. They do not include built in margins. */\nexport const Title = forwardRef<HTMLHeadingElement, TitleProps>(\n  ({ align, size, family, type, color, children, className, ...props }, ref) => {\n    const Component = type;\n    return (\n      <Component\n        ref={ref}\n        {...props}\n        className={cn(titleVariants({ color, align, family, size }), className)}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["titleVariants","cva","styles","title","variants","color","default","muted","align","left","center","right","family","product","brand","size","xs","sm","md","lg","xl","compoundVariants","class","defaultVariants","Title","forwardRef","type","children","className","props","ref","Component","cn"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Title/Title.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Title.module.css';\n\nexport type TitleAlignment = 'left' | 'center' | 'right';\nexport type TitleColor = 'default' | 'muted';\nexport type TitleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type TitleFamily = 'product' | 'brand';\nexport type TitleType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /** The text alignment of the title */\n  align?: TitleAlignment;\n  /** The color variant of the title */\n  color?: TitleColor;\n  /** The font size of the title */\n  size?: TitleSize;\n  /** The font family to use - product or brand */\n  family?: TitleFamily;\n  /** The heading level (h1-h6) */\n  type: TitleType;\n}\n\nconst titleVariants = cva(styles.title, {\n  variants: {\n    color: {\n      default: styles['title_color_default'],\n      muted: styles['title_color_muted'],\n    },\n    align: {\n      left: styles['title_align_left'],\n      center: styles['title_align_center'],\n      right: styles['title_align_right'],\n    },\n    family: {\n      product: '',\n      brand: '',\n    },\n    size: {\n      xs: '',\n      sm: '',\n      md: '',\n      lg: '',\n      xl: '',\n    },\n  },\n  compoundVariants: [\n    { family: 'product', size: 'xs', class: styles['title_font_product-xs'] },\n    { family: 'product', size: 'sm', class: styles['title_font_product-sm'] },\n    { family: 'product', size: 'md', class: styles['title_font_product-md'] },\n    { family: 'product', size: 'lg', class: styles['title_font_product-lg'] },\n    { family: 'product', size: 'xl', class: styles['title_font_product-xl'] },\n    { family: 'brand', size: 'xs', class: styles['title_font_brand-xs'] },\n    { family: 'brand', size: 'sm', class: styles['title_font_brand-sm'] },\n    { family: 'brand', size: 'md', class: styles['title_font_brand-md'] },\n    { family: 'brand', size: 'lg', class: styles['title_font_brand-lg'] },\n    { family: 'brand', size: 'xl', class: styles['title_font_brand-xl'] },\n  ],\n  defaultVariants: {\n    color: 'default',\n    align: 'left',\n    family: 'product',\n    size: 'md',\n  },\n});\n\n/** The `title` component allows you to easily add headings to your pages. They do not include built in margins. */\nexport const Title = forwardRef<HTMLHeadingElement, TitleProps>(\n  ({ align, size, family, type, color, children, className, ...props }, ref) => {\n    const Component = type;\n    return (\n      <Component\n        ref={ref}\n        {...props}\n        className={cn(titleVariants({ color, align, family, size }), className)}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cva","styles","forwardRef","jsx","cn"],"mappings":";;;;;;;;;;AAuBA,MAAM,aAAA,GAAgBA,0BAAA,CAAIC,oBAAA,CAAO,KAAA,EAAO;AAAA,EACtC,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,OAAA,EAASA,qBAAO,qBAAqB,CAAA;AAAA,MACrC,KAAA,EAAOA,qBAAO,mBAAmB;AAAA,KACnC;AAAA,IACA,KAAA,EAAO;AAAA,MACL,IAAA,EAAMA,qBAAO,kBAAkB,CAAA;AAAA,MAC/B,MAAA,EAAQA,qBAAO,oBAAoB,CAAA;AAAA,MACnC,KAAA,EAAOA,qBAAO,mBAAmB;AAAA,KACnC;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,OAAA,EAAS,EAAA;AAAA,MACT,KAAA,EAAO;AAAA,KACT;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,EAAA;AAAA,MACJ,EAAA,EAAI,EAAA;AAAA,MACJ,EAAA,EAAI,EAAA;AAAA,MACJ,EAAA,EAAI,EAAA;AAAA,MACJ,EAAA,EAAI;AAAA;AACN,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB,EAAE,QAAQ,SAAA,EAAW,IAAA,EAAM,MAAM,KAAA,EAAOA,oBAAA,CAAO,uBAAuB,CAAA,EAAE;AAAA,IACxE,EAAE,QAAQ,SAAA,EAAW,IAAA,EAAM,MAAM,KAAA,EAAOA,oBAAA,CAAO,uBAAuB,CAAA,EAAE;AAAA,IACxE,EAAE,QAAQ,SAAA,EAAW,IAAA,EAAM,MAAM,KAAA,EAAOA,oBAAA,CAAO,uBAAuB,CAAA,EAAE;AAAA,IACxE,EAAE,QAAQ,SAAA,EAAW,IAAA,EAAM,MAAM,KAAA,EAAOA,oBAAA,CAAO,uBAAuB,CAAA,EAAE;AAAA,IACxE,EAAE,QAAQ,SAAA,EAAW,IAAA,EAAM,MAAM,KAAA,EAAOA,oBAAA,CAAO,uBAAuB,CAAA,EAAE;AAAA,IACxE,EAAE,QAAQ,OAAA,EAAS,IAAA,EAAM,MAAM,KAAA,EAAOA,oBAAA,CAAO,qBAAqB,CAAA,EAAE;AAAA,IACpE,EAAE,QAAQ,OAAA,EAAS,IAAA,EAAM,MAAM,KAAA,EAAOA,oBAAA,CAAO,qBAAqB,CAAA,EAAE;AAAA,IACpE,EAAE,QAAQ,OAAA,EAAS,IAAA,EAAM,MAAM,KAAA,EAAOA,oBAAA,CAAO,qBAAqB,CAAA,EAAE;AAAA,IACpE,EAAE,QAAQ,OAAA,EAAS,IAAA,EAAM,MAAM,KAAA,EAAOA,oBAAA,CAAO,qBAAqB,CAAA,EAAE;AAAA,IACpE,EAAE,QAAQ,OAAA,EAAS,IAAA,EAAM,MAAM,KAAA,EAAOA,oBAAA,CAAO,qBAAqB,CAAA;AAAE,GACtE;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,KAAA,EAAO,SAAA;AAAA,IACP,KAAA,EAAO,MAAA;AAAA,IACP,MAAA,EAAQ,SAAA;AAAA,IACR,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAGM,MAAM,KAAA,GAAQC,gBAAA;AAAA,EACnB,CAAC,EAAE,KAAA,EAAO,IAAA,EAAM,MAAA,EAAQ,IAAA,EAAM,KAAA,EAAO,QAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC5E,IAAA,MAAM,SAAA,GAAY,IAAA;AAClB,IAAA,uBACEC,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,SAAA,EAAWC,MAAA,CAAG,aAAA,CAAc,EAAE,KAAA,EAAO,OAAO,MAAA,EAAQ,IAAA,EAAM,CAAA,EAAG,SAAS,CAAA;AAAA,QAErE;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist/cjs/components/Toast/Toast.css

@@ -1,4 +1,4 @@
-@keyframes toast-hide__qiqT- {
+@layer clickui {@keyframes toast-hide__qiqT- {
   from {
     opacity: 1;
   }
@@ -140,3 +140,4 @@
 .toast-viewport_align_end__QPpTu {
   right: 0;
 }
+}