@clickhouse/click-ui 0.4.0 → 0.6.0-rc1

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

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const iconbutton = "iconbutton__G-cEu";
+const iconbutton_size_sm = "iconbutton_size_sm__tT3BV";
+const iconbutton_size_xs = "iconbutton_size_xs__CxWtP";
+const iconbutton_type_primary = "iconbutton_type_primary__QEfNk";
+const iconbutton_type_secondary = "iconbutton_type_secondary__qeL8h";
+const iconbutton_type_ghost = "iconbutton_type_ghost__nLh8i";
+const iconbutton_type_danger = "iconbutton_type_danger__CjQg-";
+const iconbutton_type_info = "iconbutton_type_info__Ue7wb";
+const styles = {
+	iconbutton: iconbutton,
+	iconbutton_size_sm: iconbutton_size_sm,
+	iconbutton_size_xs: iconbutton_size_xs,
+	iconbutton_type_primary: iconbutton_type_primary,
+	iconbutton_type_secondary: iconbutton_type_secondary,
+	iconbutton_type_ghost: iconbutton_type_ghost,
+	iconbutton_type_danger: iconbutton_type_danger,
+	iconbutton_type_info: iconbutton_type_info
+};
+
+exports.default = styles;
+exports.iconbutton = iconbutton;
+exports.iconbutton_size_sm = iconbutton_size_sm;
+exports.iconbutton_size_xs = iconbutton_size_xs;
+exports.iconbutton_type_danger = iconbutton_type_danger;
+exports.iconbutton_type_ghost = iconbutton_type_ghost;
+exports.iconbutton_type_info = iconbutton_type_info;
+exports.iconbutton_type_primary = iconbutton_type_primary;
+exports.iconbutton_type_secondary = iconbutton_type_secondary;
+//# sourceMappingURL=IconButton.module.css.cjs.map

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

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

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

@@ -1,61 +1,50 @@
+require("./IconButton.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const IconButton_module = require('./IconButton.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
-
+const classVarianceAuthority = require('class-variance-authority');
+
+const iconButtonVariants = classVarianceAuthority.cva(IconButton_module.default.iconbutton, {
+  variants: {
+    type: {
+      primary: IconButton_module.default["iconbutton_type_primary"],
+      secondary: IconButton_module.default["iconbutton_type_secondary"],
+      ghost: IconButton_module.default["iconbutton_type_ghost"],
+      danger: IconButton_module.default["iconbutton_type_danger"],
+      info: IconButton_module.default["iconbutton_type_info"]
+    },
+    size: {
+      default: "",
+      sm: IconButton_module.default["iconbutton_size_sm"],
+      xs: IconButton_module.default["iconbutton_size_xs"]
+    }
+  },
+  defaultVariants: {
+    type: "primary",
+    size: "default"
+  }
+});
 const IconButton = react.forwardRef(({
   type = "primary",
   icon,
   size,
   disabled,
+  className,
   ...props
 }, ref) => {
   const iconName = icon ? icon.toString() : "unknown icon";
-  return /* @__PURE__ */ jsxRuntime.jsx(Button, { ...props, $styleType: type, $size: size, disabled, ref, role: "button", "aria-label": iconName, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { ...props, 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";
-const Button = styledComponents.styled.button.withConfig({
-  componentId: "sc-4ff7ue-0"
-})(["", ""], ({
-  theme,
-  $size,
-  $styleType = "primary"
-}) => `
-  border-radius: ${theme.click.button.iconButton.radii.all};
-  border: ${theme.click.button.stroke} solid ${theme.click.button.iconButton.color[$styleType].stroke.default};
-  cursor: pointer;
-  padding: ${$size ? `${theme.click.button.iconButton[$size].space.y} ${theme.click.button.iconButton[$size].space.x}` : `${theme.click.button.iconButton.default.space.y} ${theme.click.button.iconButton.default.space.x}`};
-
-  background-color: ${theme.click.button.iconButton.color[$styleType].background.default};
-
-  color: ${theme.click.button.iconButton.color[$styleType].text.default};
-  &:not([disabled]) {
-    &:hover {
-      background-color: ${theme.click.button.iconButton.color[$styleType].background.hover};
-      color: ${theme.click.button.iconButton.color[$styleType].text.hover};
-      border-color: ${theme.click.button.iconButton.color[$styleType].stroke.hover};
-    }
-
-    &:focus, &:active, &:focus-within {
-      background-color: ${theme.click.button.iconButton.color[$styleType].background.active};
-      color: ${theme.click.button.iconButton.color[$styleType].text.active};
-      border-color: ${theme.click.button.iconButton.color[$styleType].stroke.active};
-    }
-  }
-  &:visited {
-    background-color: ${theme.click.button.iconButton.color[$styleType].background.default};
-  }
-
-  &[disabled] {
-    background-color: ${theme.click.button.iconButton.color.disabled.background.default};
-    color: ${theme.click.button.iconButton.color.disabled.text.default};
-    cursor: not-allowed;
-  }
-  `);
 
 exports.IconButton = IconButton;
 //# sourceMappingURL=index.cjs.map

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 { styled } from 'styled-components';\nimport { Icon } from '@/components/Icon';\nimport { IconButtonProps } from './IconButton.types';\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ type = 'primary', icon, size, disabled, ...props }, ref) => {\n    const iconName = icon ? icon.toString() : 'unknown icon';\n\n    return (\n      <Button\n        {...props}\n        $styleType={type}\n        $size={size}\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\nconst Button = styled.button<{\n  $styleType?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'info';\n  $size?: 'default' | 'sm' | 'xs';\n}>`\n  ${({ theme, $size, $styleType = 'primary' }) => `\n  border-radius: ${theme.click.button.iconButton.radii.all};\n  border: ${theme.click.button.stroke} solid ${\n    theme.click.button.iconButton.color[$styleType].stroke.default\n  };\n  cursor: pointer;\n  padding: ${\n    $size\n      ? `${theme.click.button.iconButton[$size].space.y} ${theme.click.button.iconButton[$size].space.x}`\n      : `${theme.click.button.iconButton.default.space.y} ${theme.click.button.iconButton.default.space.x}`\n  };\n\n  background-color: ${theme.click.button.iconButton.color[$styleType].background.default};\n\n  color: ${theme.click.button.iconButton.color[$styleType].text.default};\n  &:not([disabled]) {\n    &:hover {\n      background-color: ${theme.click.button.iconButton.color[$styleType].background.hover};\n      color: ${theme.click.button.iconButton.color[$styleType].text.hover};\n      border-color: ${theme.click.button.iconButton.color[$styleType].stroke.hover};\n    }\n\n    &:focus, &:active, &:focus-within {\n      background-color: ${\n        theme.click.button.iconButton.color[$styleType].background.active\n      };\n      color: ${theme.click.button.iconButton.color[$styleType].text.active};\n      border-color: ${theme.click.button.iconButton.color[$styleType].stroke.active};\n    }\n  }\n  &:visited {\n    background-color: ${\n      theme.click.button.iconButton.color[$styleType].background.default\n    };\n  }\n\n  &[disabled] {\n    background-color: ${theme.click.button.iconButton.color.disabled.background.default};\n    color: ${theme.click.button.iconButton.color.disabled.text.default};\n    cursor: not-allowed;\n  }\n  `}\n`;\n"],"names":["IconButton","forwardRef","type","icon","size","disabled","props","ref","iconName","toString","jsx","Icon","displayName","Button","styled","button","withConfig","componentId","theme","$size","$styleType","click","iconButton","radii","all","stroke","color","default","space","y","x","background","text","hover","active"],"mappings":"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"}
+{"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', icon, size, disabled, className, ...props }, ref) => {\n    const iconName = icon ? icon.toString() : 'unknown icon';\n\n    return (\n      <button\n        {...props}\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","icon","disabled","className","props","ref","iconName","toString","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,IAAAA;AAAAA,EAAMP,IAAAA;AAAAA,EAAMQ,QAAAA;AAAAA,EAAUC,SAAAA;AAAAA,EAAW,GAAGC;AAAM,CAAA,EAAGC,GAAAA,KAAQ;AACxE,EAAA,MAAMC,QAAAA,GAAWL,IAAAA,GAAOA,IAAAA,CAAKM,QAAAA,EAAS,GAAI,cAAA;AAE1C,EAAA,sCACG,QAAA,EAAA,EACC,GAAIH,KAAAA,EACJ,SAAA,EAAWI,OAAGzB,kBAAAA,CAAmB;AAAA,IAAEK,IAAAA;AAAAA,IAAMM;AAAAA,GAAM,CAAA,EAAGS,SAAS,CAAA,EAC3D,QAAA,EACA,KACA,IAAA,EAAK,QAAA,EACL,YAAA,EAAYG,QAAAA,EAEZ,yCAACG,SAAA,EAAA,EACC,IAAA,EAAMR,IAAAA,EACN,IAAA,EAAK,MAAI,CAAA,EAEb,CAAA;AAEJ,CACF;AAEAF,UAAAA,CAAWW,WAAAA,GAAc,YAAA;;;;"}

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

@@ -0,0 +1,32 @@
+.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. */
+.label__RaRvM:not(.label_error__k6yT0, .label_disabled__8BGcG):hover {
+  color: var(--click-field-color-label-hover);
+  font: var(--click-field-typography-label-hover);
+}
+
+.label__RaRvM:not(.label_error__k6yT0, .label_disabled__8BGcG):focus,
+.label__RaRvM:not(.label_error__k6yT0, .label_disabled__8BGcG):focus-within {
+  color: var(--click-field-color-label-active);
+  font: var(--click-field-typography-label-active);
+}
+
+.label_error__k6yT0 {
+  color: var(--click-field-color-label-error);
+  font: var(--click-field-typography-label-error);
+}
+
+.label_disabled__8BGcG {
+  color: var(--click-field-color-label-disabled);
+  font: var(--click-field-typography-label-disabled);
+}

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const label = "label__RaRvM";
+const label_error = "label_error__k6yT0";
+const label_disabled = "label_disabled__8BGcG";
+const styles = {
+	label: label,
+	label_error: label_error,
+	label_disabled: label_disabled
+};
+
+exports.default = styles;
+exports.label = label;
+exports.label_disabled = label_disabled;
+exports.label_error = label_error;
+//# sourceMappingURL=Label.module.css.cjs.map

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

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

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

@@ -1,42 +1,39 @@
+require("./Label.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const Label_module = require('./Label.module.css.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
-const FormFieldLabel = styledComponents.styled.label.withConfig({
-  componentId: "sc-1gg29zb-0"
-})(["", ""], ({
-  theme,
-  disabled,
-  $error
-}) => `
-    ${disabled ? `
-    color: ${theme.click.field.color.label.disabled};
-    font: ${theme.click.field.typography.label.disabled};
-    ` : $error ? `
-    color: ${theme.click.field.color.label.error};
-    font: ${theme.click.field.typography.label.error};
-    ` : `
-    color: ${theme.click.field.color.label.default};
-    font: ${theme.click.field.typography.label.default};
-    &:hover {
-      color: ${theme.click.field.color.label.hover};
-      font: ${theme.click.field.typography.label.hover};
-    }
-    &:focus, &:focus-within {
-      color: ${theme.click.field.color.label.active};
-      font: ${theme.click.field.typography.label.active};
+const labelVariants = classVarianceAuthority.cva(Label_module.default.label, {
+  variants: {
+    disabled: {
+      true: Label_module.default["label_disabled"],
+      false: ""
+    },
+    error: {
+      true: Label_module.default["label_error"],
+      false: ""
     }
-    `};
-  `);
+  },
+  defaultVariants: {
+    disabled: false,
+    error: false
+  }
+});
 const Label = ({
   disabled,
   error,
   children,
+  className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(FormFieldLabel, { disabled, $error: error, ...props, children });
+}) => /* @__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 { styled } from 'styled-components';\nimport { LabelProps } from './Label.types';\n\ninterface FormFieldLableProps {\n  disabled?: boolean;\n  $error?: boolean;\n  htmlFor?: string;\n}\n\nconst FormFieldLabel = styled.label<FormFieldLableProps>`\n  ${({ theme, disabled, $error }) => `\n    ${\n      disabled\n        ? `\n    color: ${theme.click.field.color.label.disabled};\n    font: ${theme.click.field.typography.label.disabled};\n    `\n        : $error\n          ? `\n    color: ${theme.click.field.color.label.error};\n    font: ${theme.click.field.typography.label.error};\n    `\n          : `\n    color: ${theme.click.field.color.label.default};\n    font: ${theme.click.field.typography.label.default};\n    &:hover {\n      color: ${theme.click.field.color.label.hover};\n      font: ${theme.click.field.typography.label.hover};\n    }\n    &:focus, &:focus-within {\n      color: ${theme.click.field.color.label.active};\n      font: ${theme.click.field.typography.label.active};\n    }\n    `\n    };\n  `}\n`;\n\nexport const Label = ({ disabled, error, children, ...props }: LabelProps) => (\n  <FormFieldLabel\n    disabled={disabled}\n    $error={error}\n    {...props}\n  >\n    {children}\n  </FormFieldLabel>\n);\n"],"names":["FormFieldLabel","styled","label","withConfig","componentId","theme","disabled","$error","click","field","color","typography","error","default","hover","active","Label","children","props"],"mappings":";;;;;;;AASA,MAAMA,cAAAA,GAAiBC,uBAAAA,CAAOC,KAAAA,CAAKC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GAC/B,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC,QAAAA;AAAAA,EAAUC;AAAO,CAAA,KAAM;AAAA,IAAA,EAE/BD,QAAAA,GACI;AAAA,WAAA,EACGD,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMR,MAAMI,QAAQ,CAAA;AAAA,UAAA,EACvCD,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAME,UAAAA,CAAWT,MAAMI,QAAQ,CAAA;AAAA,IAAA,CAAA,GAE7CC,MAAAA,GACE;AAAA,WAAA,EACCF,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMR,MAAMU,KAAK,CAAA;AAAA,UAAA,EACpCP,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAME,UAAAA,CAAWT,MAAMU,KAAK,CAAA;AAAA,IAAA,CAAA,GAExC;AAAA,WAAA,EACCP,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMR,MAAMW,OAAO,CAAA;AAAA,UAAA,EACtCR,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAME,UAAAA,CAAWT,MAAMW,OAAO,CAAA;AAAA;AAAA,aAAA,EAEvCR,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMR,MAAMY,KAAK,CAAA;AAAA,YAAA,EACpCT,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAME,UAAAA,CAAWT,MAAMY,KAAK,CAAA;AAAA;AAAA;AAAA,aAAA,EAGvCT,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMR,MAAMa,MAAM,CAAA;AAAA,YAAA,EACrCV,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAME,UAAAA,CAAWT,MAAMa,MAAM,CAAA;AAAA;AAAA,IAAA,CAElD,CAAA;AAAA,EAAA,CAEF,CAAA;AAGI,MAAMC,QAAQA,CAAC;AAAA,EAAEV,QAAAA;AAAAA,EAAUM,KAAAA;AAAAA,EAAOK,QAAAA;AAAAA,EAAU,GAAGC;AAAkB,CAAA,oCACrE,cAAA,EAAA,EACC,QAAA,EACA,QAAQN,KAAAA,EACR,GAAIM,OAEHD,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":["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;;;;"}

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

@@ -0,0 +1,135 @@
+.link__Ly-e3 {
+  display: inline-flex;
+  margin: 0;
+  margin-right: var(--link-gap);
+  align-items: center;
+  gap: var(--link-gap);
+  color: var(--click-global-color-text-link-default);
+  font: var(--link-font);
+  text-decoration: none;
+}
+
+.link__Ly-e3:hover,
+.link__Ly-e3:focus {
+  color: var(--click-global-color-text-link-hover);
+  text-decoration: underline;
+  cursor: pointer;
+  transition: var(--transition-default);
+}
+
+.link__Ly-e3:visited {
+  color: var(--click-global-color-text-link-default);
+}
+
+/* The original emitted theme.click.link.space.sm.gap for size xs/sm and
+   theme.click.link.space.md.gap for md/lg. Alias to a local custom property
+   so the gap/margin-right rule on .link stays single-source. */
+.link_size_xs__kYknu,
+.link_size_sm__Qqpi3 {
+  --link-gap: var(--click-link-space-sm-gap);
+}
+
+.link_size_md__QlDJt,
+.link_size_lg__FkICb {
+  --link-gap: var(--click-link-space-md-gap);
+}
+
+/* Size + weight compose to pick a single typography token —
+   theme.typography.styles.product.text[$weight][$size]. Emit one compound
+   class per combination and set --link-font, which the base .link rule
+   consumes. */
+.link_size_xs__kYknu.link_weight_normal__shPkj {
+  --link-font: var(--typography-styles-product-text-normal-xs);
+}
+
+.link_size_sm__Qqpi3.link_weight_normal__shPkj {
+  --link-font: var(--typography-styles-product-text-normal-sm);
+}
+
+.link_size_md__QlDJt.link_weight_normal__shPkj {
+  --link-font: var(--typography-styles-product-text-normal-md);
+}
+
+.link_size_lg__FkICb.link_weight_normal__shPkj {
+  --link-font: var(--typography-styles-product-text-normal-lg);
+}
+
+.link_size_xs__kYknu.link_weight_medium__Sot5E {
+  --link-font: var(--typography-styles-product-text-medium-xs);
+}
+
+.link_size_sm__Qqpi3.link_weight_medium__Sot5E {
+  --link-font: var(--typography-styles-product-text-medium-sm);
+}
+
+.link_size_md__QlDJt.link_weight_medium__Sot5E {
+  --link-font: var(--typography-styles-product-text-medium-md);
+}
+
+.link_size_lg__FkICb.link_weight_medium__Sot5E {
+  --link-font: var(--typography-styles-product-text-medium-lg);
+}
+
+.link_size_xs__kYknu.link_weight_semibold__6STFO {
+  --link-font: var(--typography-styles-product-text-semibold-xs);
+}
+
+.link_size_sm__Qqpi3.link_weight_semibold__6STFO {
+  --link-font: var(--typography-styles-product-text-semibold-sm);
+}
+
+.link_size_md__QlDJt.link_weight_semibold__6STFO {
+  --link-font: var(--typography-styles-product-text-semibold-md);
+}
+
+.link_size_lg__FkICb.link_weight_semibold__6STFO {
+  --link-font: var(--typography-styles-product-text-semibold-lg);
+}
+
+.link_size_xs__kYknu.link_weight_bold__FWQyo {
+  --link-font: var(--typography-styles-product-text-bold-xs);
+}
+
+.link_size_sm__Qqpi3.link_weight_bold__FWQyo {
+  --link-font: var(--typography-styles-product-text-bold-sm);
+}
+
+.link_size_md__QlDJt.link_weight_bold__FWQyo {
+  --link-font: var(--typography-styles-product-text-bold-md);
+}
+
+.link_size_lg__FkICb.link_weight_bold__FWQyo {
+  --link-font: var(--typography-styles-product-text-bold-lg);
+}
+
+.link_size_xs__kYknu.link_weight_mono__Mzdum {
+  --link-font: var(--typography-styles-product-text-mono-xs);
+}
+
+.link_size_sm__Qqpi3.link_weight_mono__Mzdum {
+  --link-font: var(--typography-styles-product-text-mono-sm);
+}
+
+.link_size_md__QlDJt.link_weight_mono__Mzdum {
+  --link-font: var(--typography-styles-product-text-mono-md);
+}
+
+.link_size_lg__FkICb.link_weight_mono__Mzdum {
+  --link-font: var(--typography-styles-product-text-mono-lg);
+}
+
+/* The inner Icon receives .external-icon via className. The original used a
+   descendant selector inside IconWrapper; here we pass the scoped class
+   straight to the Icon so the selector stays a single class with the same
+   effective specificity. */
+.external-icon_size_xs__hRWrg,
+.external-icon_size_sm__QFJoc {
+  width: var(--click-link-icon-size-sm-width);
+  height: var(--click-link-icon-size-sm-height);
+}
+
+.external-icon_size_md__-bbPt,
+.external-icon_size_lg__XGkpl {
+  width: var(--click-link-icon-size-md-width);
+  height: var(--click-link-icon-size-md-height);
+}

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

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const link = "link__Ly-e3";
+const link_size_xs = "link_size_xs__kYknu";
+const link_size_sm = "link_size_sm__Qqpi3";
+const link_size_md = "link_size_md__QlDJt";
+const link_size_lg = "link_size_lg__FkICb";
+const link_weight_normal = "link_weight_normal__shPkj";
+const link_weight_medium = "link_weight_medium__Sot5E";
+const link_weight_semibold = "link_weight_semibold__6STFO";
+const link_weight_bold = "link_weight_bold__FWQyo";
+const link_weight_mono = "link_weight_mono__Mzdum";
+const styles = {
+	link: link,
+	link_size_xs: link_size_xs,
+	link_size_sm: link_size_sm,
+	link_size_md: link_size_md,
+	link_size_lg: link_size_lg,
+	link_weight_normal: link_weight_normal,
+	link_weight_medium: link_weight_medium,
+	link_weight_semibold: link_weight_semibold,
+	link_weight_bold: link_weight_bold,
+	link_weight_mono: link_weight_mono,
+	"external-icon_size_xs": "external-icon_size_xs__hRWrg",
+	"external-icon_size_sm": "external-icon_size_sm__QFJoc",
+	"external-icon_size_md": "external-icon_size_md__-bbPt",
+	"external-icon_size_lg": "external-icon_size_lg__XGkpl"
+};
+
+exports.default = styles;
+exports.link = link;
+exports.link_size_lg = link_size_lg;
+exports.link_size_md = link_size_md;
+exports.link_size_sm = link_size_sm;
+exports.link_size_xs = link_size_xs;
+exports.link_weight_bold = link_weight_bold;
+exports.link_weight_medium = link_weight_medium;
+exports.link_weight_mono = link_weight_mono;
+exports.link_weight_normal = link_weight_normal;
+exports.link_weight_semibold = link_weight_semibold;
+//# sourceMappingURL=Link.module.css.cjs.map

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

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

package/dist/cjs/components/Link/index.cjs

@@ -1,25 +1,49 @@
+require("./Link.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
-const styledComponents = require('styled-components');
-const common = require('./common.cjs');
+const cva = require('../../lib/cva.cjs');
+const Link_module = require('./Link.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
-const CuiLink = styledComponents.styled.a.withConfig({
-  componentId: "sc-1bwz77u-0"
-})(["", ""], common.linkStyles);
-const IconWrapper = styledComponents.styled.span.withConfig({
-  componentId: "sc-1bwz77u-1"
-})([".external-icon{height:", ";width:", ";}"], ({
-  $size,
-  theme
-}) => $size === "xs" || $size === "sm" ? theme.click.link.icon.size.sm.height : theme.click.link.icon.size.md.height, ({
-  $size,
-  theme
-}) => $size === "xs" || $size === "sm" ? theme.click.link.icon.size.sm.width : theme.click.link.icon.size.md.width);
+const linkVariants = classVarianceAuthority.cva(Link_module.default.link, {
+  variants: {
+    size: {
+      xs: Link_module.default["link_size_xs"],
+      sm: Link_module.default["link_size_sm"],
+      md: Link_module.default["link_size_md"],
+      lg: Link_module.default["link_size_lg"]
+    },
+    weight: {
+      normal: Link_module.default["link_weight_normal"],
+      medium: Link_module.default["link_weight_medium"],
+      semibold: Link_module.default["link_weight_semibold"],
+      bold: Link_module.default["link_weight_bold"],
+      mono: Link_module.default["link_weight_mono"]
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    weight: "normal"
+  }
+});
+const externalIconVariants = classVarianceAuthority.cva("", {
+  variants: {
+    size: {
+      xs: Link_module.default["external-icon_size_xs"],
+      sm: Link_module.default["external-icon_size_sm"],
+      md: Link_module.default["external-icon_size_md"],
+      lg: Link_module.default["external-icon_size_lg"]
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
 const _Link = ({
   size = "md",
   weight = "normal",
@@ -27,11 +51,20 @@ const _Link = ({
   icon,
   children,
   component,
+  className,
   ...props
-}, ref) => /* @__PURE__ */ jsxRuntime.jsxs(CuiLink, { ref, $size: size, $weight: weight, as: component ?? "a", onClick, ...props, children: [
-  children,
-  icon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { $size: size, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, className: "external-icon", "data-testid": icon }) })
-] });
+}, ref) => {
+  const Component = component ?? "a";
+  return /* @__PURE__ */ jsxRuntime.jsxs(Component, { ref, onClick, ...props, className: cva.cn(linkVariants({
+    size,
+    weight
+  }), className), children: [
+    children,
+    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, className: cva.cn("external-icon", externalIconVariants({
+      size
+    })), "data-testid": icon }) })
+  ] });
+};
 const Link = react.forwardRef(_Link);
 
 exports.Link = Link;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactEventHandler,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { styled } from 'styled-components';\nimport { linkStyles } from './common';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n  /** The font size of the link text */\n  size?: TextSize;\n  /** The font weight of the link text */\n  weight?: TextWeight;\n  /** Click event handler */\n  onClick?: ReactEventHandler;\n  /** The content to display inside the link */\n  children?: React.ReactNode;\n  /** Optional icon to display after the link text */\n  icon?: IconName;\n  /** Custom component to render as the link element */\n  component?: T;\n}\n\nconst CuiLink = styled.a<{ $size: TextSize; $weight: TextWeight }>`\n  ${linkStyles}\n`;\n\nconst IconWrapper = styled.span<{ $size: TextSize }>`\n  .external-icon {\n    height: ${({ $size, theme }) =>\n      $size === 'xs' || $size === 'sm'\n        ? theme.click.link.icon.size.sm.height\n        : theme.click.link.icon.size.md.height};\n    width: ${({ $size, theme }) =>\n      $size === 'xs' || $size === 'sm'\n        ? theme.click.link.icon.size.sm.width\n        : theme.click.link.icon.size.md.width};\n  }\n`;\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n  props: Omit<ComponentProps<T>, keyof T> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n  {\n    size = 'md',\n    weight = 'normal',\n    onClick,\n    icon,\n    children,\n    component,\n    ...props\n  }: Omit<ComponentProps<T>, keyof T> & LinkProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <CuiLink\n    ref={ref}\n    $size={size}\n    $weight={weight}\n    as={component ?? 'a'}\n    onClick={onClick}\n    {...props}\n  >\n    {children}\n    {icon && (\n      <IconWrapper $size={size}>\n        <Icon\n          name={icon}\n          className=\"external-icon\"\n          data-testid={icon}\n        />\n      </IconWrapper>\n    )}\n  </CuiLink>\n);\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["CuiLink","styled","a","withConfig","componentId","linkStyles","IconWrapper","span","$size","theme","click","link","icon","size","sm","height","md","width","_Link","weight","onClick","children","component","props","ref","jsxs","jsx","Icon","Link","forwardRef"],"mappings":";;;;;;;;;;AA6BA,MAAMA,OAAAA,GAAUC,uBAAAA,CAAOC,CAAAA,CAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GACpBC,iBAAU,CAAA;AAGd,MAAMC,WAAAA,GAAcL,uBAAAA,CAAOM,IAAAA,CAAIJ,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,wBAAA,EAAA,SAAA,EAAA,IAAA,GAEjB,CAAC;AAAA,EAAEI,KAAAA;AAAAA,EAAOC;AAAM,CAAA,KACxBD,UAAU,IAAA,IAAQA,KAAAA,KAAU,OACxBC,KAAAA,CAAMC,KAAAA,CAAMC,KAAKC,IAAAA,CAAKC,IAAAA,CAAKC,EAAAA,CAAGC,MAAAA,GAC9BN,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,KAAKC,IAAAA,CAAKG,EAAAA,CAAGD,QAC3B,CAAC;AAAA,EAAEP,KAAAA;AAAAA,EAAOC;AAAM,CAAA,KACvBD,UAAU,IAAA,IAAQA,KAAAA,KAAU,IAAA,GACxBC,KAAAA,CAAMC,MAAMC,IAAAA,CAAKC,IAAAA,CAAKC,IAAAA,CAAKC,EAAAA,CAAGG,QAC9BR,KAAAA,CAAMC,KAAAA,CAAMC,KAAKC,IAAAA,CAAKC,IAAAA,CAAKG,GAAGC,KAAK,CAAA;AAS7C,MAAMC,QAAQ,CACZ;AAAA,EACEL,IAAAA,GAAO,IAAA;AAAA,EACPM,MAAAA,GAAS,QAAA;AAAA,EACTC,OAAAA;AAAAA,EACAR,IAAAA;AAAAA,EACAS,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AAC4C,CAAA,EACjDC,GAAAA,qBAEAC,eAAA,CAAC,OAAA,EAAA,EACC,GAAA,EACA,KAAA,EAAOZ,IAAAA,EACP,OAAA,EAASM,MAAAA,EACT,EAAA,EAAIG,SAAAA,IAAa,GAAA,EACjB,OAAA,EACA,GAAIC,KAAAA,EAEHF,QAAAA,EAAAA;AAAAA,EAAAA,QAAAA;AAAAA,EACAT,IAAAA,oBACCc,cAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAOb,IAAAA,EAClB,QAAA,kBAAAa,cAAA,CAACC,SAAA,EAAA,EACC,IAAA,EAAMf,IAAAA,EACN,SAAA,EAAU,eAAA,EACV,aAAA,EAAaA,MAAK,CAAA,EAEtB;AAAA,CAAA,EAEJ,CAAA;AAEK,MAAMgB,IAAAA,GAAiCC,iBAAWX,KAAK;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactEventHandler,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Link.module.css';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n  /** The font size of the link text */\n  size?: TextSize;\n  /** The font weight of the link text */\n  weight?: TextWeight;\n  /** Click event handler */\n  onClick?: ReactEventHandler;\n  /** The content to display inside the link */\n  children?: React.ReactNode;\n  /** Optional icon to display after the link text */\n  icon?: IconName;\n  /** Custom component to render as the link element */\n  component?: T;\n}\n\nconst linkVariants = cva(styles.link, {\n  variants: {\n    size: {\n      xs: styles['link_size_xs'],\n      sm: styles['link_size_sm'],\n      md: styles['link_size_md'],\n      lg: styles['link_size_lg'],\n    },\n    weight: {\n      normal: styles['link_weight_normal'],\n      medium: styles['link_weight_medium'],\n      semibold: styles['link_weight_semibold'],\n      bold: styles['link_weight_bold'],\n      mono: styles['link_weight_mono'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst externalIconVariants = cva('', {\n  variants: {\n    size: {\n      xs: styles['external-icon_size_xs'],\n      sm: styles['external-icon_size_sm'],\n      md: styles['external-icon_size_md'],\n      lg: styles['external-icon_size_lg'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n  props: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n  {\n    size = 'md',\n    weight = 'normal',\n    onClick,\n    icon,\n    children,\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'a';\n  return (\n    <Component\n      ref={ref}\n      onClick={onClick}\n      {...props}\n      className={cn(linkVariants({ size, weight }), className)}\n    >\n      {children}\n      {icon && (\n        <span>\n          <Icon\n            name={icon}\n            className={cn('external-icon', externalIconVariants({ size }))}\n            data-testid={icon}\n          />\n        </span>\n      )}\n    </Component>\n  );\n};\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["linkVariants","cva","styles","link","variants","size","xs","sm","md","lg","weight","normal","medium","semibold","bold","mono","defaultVariants","externalIconVariants","_Link","onClick","icon","children","component","className","props","ref","Component","jsxs","cn","jsx","Icon","Link","forwardRef"],"mappings":";;;;;;;;;;;AA6BA,MAAMA,YAAAA,GAAeC,0BAAAA,CAAIC,mBAAAA,CAAOC,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,cAAc,CAAA;AAAA,MACzBK,EAAAA,EAAIL,oBAAO,cAAc,CAAA;AAAA,MACzBM,EAAAA,EAAIN,oBAAO,cAAc,CAAA;AAAA,MACzBO,EAAAA,EAAIP,oBAAO,cAAc;AAAA,KAC3B;AAAA,IACAQ,MAAAA,EAAQ;AAAA,MACNC,MAAAA,EAAQT,oBAAO,oBAAoB,CAAA;AAAA,MACnCU,MAAAA,EAAQV,oBAAO,oBAAoB,CAAA;AAAA,MACnCW,QAAAA,EAAUX,oBAAO,sBAAsB,CAAA;AAAA,MACvCY,IAAAA,EAAMZ,oBAAO,kBAAkB,CAAA;AAAA,MAC/Ba,IAAAA,EAAMb,oBAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,IAAA;AAAA,IACNK,MAAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAED,MAAMO,oBAAAA,GAAuBhB,2BAAI,EAAA,EAAI;AAAA,EACnCG,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,uBAAuB,CAAA;AAAA,MAClCK,EAAAA,EAAIL,oBAAO,uBAAuB,CAAA;AAAA,MAClCM,EAAAA,EAAIN,oBAAO,uBAAuB,CAAA;AAAA,MAClCO,EAAAA,EAAIP,oBAAO,uBAAuB;AAAA;AACpC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAOD,MAAMa,QAAQ,CACZ;AAAA,EACEb,IAAAA,GAAO,IAAA;AAAA,EACPK,MAAAA,GAAS,QAAA;AAAA,EACTS,OAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACgF,CAAA,EACrFC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,SAAAA,IAAa,GAAA;AAC/B,EAAA,uBACEK,eAAA,CAAC,aACC,GAAA,EACA,OAAA,EACA,GAAIH,KAAAA,EACJ,SAAA,EAAWI,OAAG5B,YAAAA,CAAa;AAAA,IAAEK,IAAAA;AAAAA,IAAMK;AAAAA,GAAQ,CAAA,EAAGa,SAAS,CAAA,EAEtDF,QAAAA,EAAAA;AAAAA,IAAAA,QAAAA;AAAAA,IACAD,IAAAA,oBACCS,cAAA,CAAC,MAAA,EAAA,EACC,QAAA,kBAAAA,cAAA,CAACC,SAAA,EAAA,EACC,MAAMV,IAAAA,EACN,SAAA,EAAWQ,MAAAA,CAAG,eAAA,EAAiBX,oBAAAA,CAAqB;AAAA,MAAEZ;AAAAA,KAAM,CAAC,CAAA,EAC7D,aAAA,EAAae,MAAK,CAAA,EAEtB;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AACO,MAAMW,IAAAA,GAAiCC,iBAAWd,KAAK;;;;"}