@clickhouse/click-ui 0.9.0 → 0.10.0-rc1

package/dist/esm/components/ProgressBar/ProgressBar.css

@@ -1,3 +1,5 @@
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. progressBar) */
+
 .progressbar__21KMf {
   display: flex;
   min-height: 2px;
@@ -17,7 +19,7 @@
   );
   background-position: center;
   background-size: calc(100% + 2px);
-  color: var(--global-color-accent-default);
+  color: var(--click-progressBar-color-text-default);
   font: var(--typography-styles-product-text-normal-sm);
   transition: all 100ms ease-in-out;
 }
@@ -122,3 +124,4 @@
 .progressclosebutton_dismissable__p5mDJ {
   visibility: visible;
 }
+}

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

@@ -55,17 +55,23 @@ const ProgressBar = ({
         "--progress": `${progress}%`
       },
       ...props,
-      className: cn(progressBarVariants({
-        type,
-        orientation,
-        dir,
-        completed
-      }), className),
+      className: cn(
+        progressBarVariants({ type, orientation, dir, completed }),
+        className
+      ),
       children: type === "default" && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { className: styles.progresstext, children: successMessage && completed ? successMessage : `${progress}%` }),
-        /* @__PURE__ */ jsx(IconButton, { size: "sm", type: "ghost", icon: "cross", onClick: onCancel, "data-testid": "progressbar-close", className: closeButtonVariants({
-          dismissable
-        }) })
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "sm",
+            type: "ghost",
+            icon: "cross",
+            onClick: onCancel,
+            "data-testid": "progressbar-close",
+            className: closeButtonVariants({ dismissable })
+          }
+        )
       ] })
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { ProgressBarProps } from './ProgressBar.types';\nimport { IconButton } from '@/components/IconButton';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './ProgressBar.module.css';\n\nconst progressBarVariants = cva(styles.progressbar, {\n  variants: {\n    type: {\n      default: styles['progressbar_type_default'],\n      small: styles['progressbar_type_small'],\n    },\n    orientation: {\n      horizontal: styles['progressbar_orientation_horizontal'],\n      vertical: styles['progressbar_orientation_vertical'],\n    },\n    dir: {\n      start: styles['progressbar_dir_start'],\n      end: styles['progressbar_dir_end'],\n    },\n    completed: {\n      true: styles['progressbar_completed'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n    orientation: 'horizontal',\n    dir: 'start',\n  },\n});\n\nconst closeButtonVariants = cva(styles.progressclosebutton, {\n  variants: {\n    dismissable: {\n      true: styles['progressclosebutton_dismissable'],\n    },\n  },\n});\n\nexport const ProgressBar = ({\n  progress,\n  type = 'default',\n  dismissable = false,\n  onCancel,\n  successMessage,\n  orientation = 'horizontal',\n  dir = 'start',\n  className,\n  ...props\n}: ProgressBarProps) => {\n  const completed = progress === 100;\n\n  return (\n    <div\n      // Using a CSS variable avoids generating a new class per progress value.\n      style={\n        {\n          '--progress': `${progress}%`,\n        } as CSSProperties\n      }\n      {...props}\n      className={cn(\n        progressBarVariants({ type, orientation, dir, completed }),\n        className\n      )}\n    >\n      {type === 'default' && (\n        <>\n          <span className={styles.progresstext}>\n            {successMessage && completed ? successMessage : `${progress}%`}\n          </span>\n          <IconButton\n            size=\"sm\"\n            type=\"ghost\"\n            icon=\"cross\"\n            onClick={onCancel}\n            data-testid=\"progressbar-close\"\n            className={closeButtonVariants({ dismissable })}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["progressBarVariants","cva","styles","progressbar","variants","type","default","small","orientation","horizontal","vertical","dir","start","end","completed","true","defaultVariants","closeButtonVariants","progressclosebutton","dismissable","ProgressBar","progress","onCancel","successMessage","className","props","cn","progresstext"],"mappings":";;;;;;AAMA,MAAMA,mBAAAA,GAAsBC,GAAAA,CAAIC,MAAAA,CAAOC,WAAAA,EAAa;AAAA,EAClDC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,OAAO,0BAA0B,CAAA;AAAA,MAC1CK,KAAAA,EAAOL,OAAO,wBAAwB;AAAA,KACxC;AAAA,IACAM,WAAAA,EAAa;AAAA,MACXC,UAAAA,EAAYP,OAAO,oCAAoC,CAAA;AAAA,MACvDQ,QAAAA,EAAUR,OAAO,kCAAkC;AAAA,KACrD;AAAA,IACAS,GAAAA,EAAK;AAAA,MACHC,KAAAA,EAAOV,OAAO,uBAAuB,CAAA;AAAA,MACrCW,GAAAA,EAAKX,OAAO,qBAAqB;AAAA,KACnC;AAAA,IACAY,SAAAA,EAAW;AAAA,MACTC,IAAAA,EAAMb,OAAO,uBAAuB;AAAA;AACtC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,SAAA;AAAA,IACNG,WAAAA,EAAa,YAAA;AAAA,IACbG,GAAAA,EAAK;AAAA;AAET,CAAC,CAAA;AAED,MAAMM,mBAAAA,GAAsBhB,GAAAA,CAAIC,MAAAA,CAAOgB,mBAAAA,EAAqB;AAAA,EAC1Dd,QAAAA,EAAU;AAAA,IACRe,WAAAA,EAAa;AAAA,MACXJ,IAAAA,EAAMb,OAAO,iCAAiC;AAAA;AAChD;AAEJ,CAAC,CAAA;AAEM,MAAMkB,cAAcA,CAAC;AAAA,EAC1BC,QAAAA;AAAAA,EACAhB,IAAAA,GAAO,SAAA;AAAA,EACPc,WAAAA,GAAc,KAAA;AAAA,EACdG,QAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAf,WAAAA,GAAc,YAAA;AAAA,EACdG,GAAAA,GAAM,OAAA;AAAA,EACNa,SAAAA;AAAAA,EACA,GAAGC;AACa,CAAA,KAAM;AACtB,EAAA,MAAMX,YAAYO,QAAAA,KAAa,GAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,KAAA,EACE;AAAA,QACE,YAAA,EAAc,GAAGA,QAAQ,CAAA,CAAA;AAAA,OAC3B;AAAA,SAEEI,KAAAA;AAAAA,MACJ,SAAA,EAAWC,GACT1B,mBAAAA,CAAoB;AAAA,QAAEK,IAAAA;AAAAA,QAAMG,WAAAA;AAAAA,QAAaG,GAAAA;AAAAA,QAAKG;AAAAA,OAAW,GACzDU,SACF,CAAA;AAAA,MAECnB,QAAAA,EAAAA,IAAAA,KAAS,6BACR,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAWH,MAAAA,CAAOyB,YAAAA,EACrBJ,4BAAkBT,SAAAA,GAAYS,cAAAA,GAAiB,CAAA,EAAGF,QAAQ,CAAA,CAAA,CAAA,EAC7D,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EACC,IAAA,EAAK,IAAA,EACL,IAAA,EAAK,OAAA,EACL,IAAA,EAAK,OAAA,EACL,OAAA,EAASC,QAAAA,EACT,aAAA,EAAY,mBAAA,EACZ,WAAWL,mBAAAA,CAAoB;AAAA,UAAEE;AAAAA,SAAa,CAAA,EAAE;AAAA,OAAA,EAEpD;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { ProgressBarProps } from './ProgressBar.types';\nimport { IconButton } from '@/components/IconButton';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './ProgressBar.module.css';\n\nconst progressBarVariants = cva(styles.progressbar, {\n  variants: {\n    type: {\n      default: styles['progressbar_type_default'],\n      small: styles['progressbar_type_small'],\n    },\n    orientation: {\n      horizontal: styles['progressbar_orientation_horizontal'],\n      vertical: styles['progressbar_orientation_vertical'],\n    },\n    dir: {\n      start: styles['progressbar_dir_start'],\n      end: styles['progressbar_dir_end'],\n    },\n    completed: {\n      true: styles['progressbar_completed'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n    orientation: 'horizontal',\n    dir: 'start',\n  },\n});\n\nconst closeButtonVariants = cva(styles.progressclosebutton, {\n  variants: {\n    dismissable: {\n      true: styles['progressclosebutton_dismissable'],\n    },\n  },\n});\n\nexport const ProgressBar = ({\n  progress,\n  type = 'default',\n  dismissable = false,\n  onCancel,\n  successMessage,\n  orientation = 'horizontal',\n  dir = 'start',\n  className,\n  ...props\n}: ProgressBarProps) => {\n  const completed = progress === 100;\n\n  return (\n    <div\n      // Using a CSS variable avoids generating a new class per progress value.\n      style={\n        {\n          '--progress': `${progress}%`,\n        } as CSSProperties\n      }\n      {...props}\n      className={cn(\n        progressBarVariants({ type, orientation, dir, completed }),\n        className\n      )}\n    >\n      {type === 'default' && (\n        <>\n          <span className={styles.progresstext}>\n            {successMessage && completed ? successMessage : `${progress}%`}\n          </span>\n          <IconButton\n            size=\"sm\"\n            type=\"ghost\"\n            icon=\"cross\"\n            onClick={onCancel}\n            data-testid=\"progressbar-close\"\n            className={closeButtonVariants({ dismissable })}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,mBAAA,GAAsB,GAAA,CAAI,MAAA,CAAO,WAAA,EAAa;AAAA,EAClD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,OAAO,0BAA0B,CAAA;AAAA,MAC1C,KAAA,EAAO,OAAO,wBAAwB;AAAA,KACxC;AAAA,IACA,WAAA,EAAa;AAAA,MACX,UAAA,EAAY,OAAO,oCAAoC,CAAA;AAAA,MACvD,QAAA,EAAU,OAAO,kCAAkC;AAAA,KACrD;AAAA,IACA,GAAA,EAAK;AAAA,MACH,KAAA,EAAO,OAAO,uBAAuB,CAAA;AAAA,MACrC,GAAA,EAAK,OAAO,qBAAqB;AAAA,KACnC;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,OAAO,uBAAuB;AAAA;AACtC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,YAAA;AAAA,IACb,GAAA,EAAK;AAAA;AAET,CAAC,CAAA;AAED,MAAM,mBAAA,GAAsB,GAAA,CAAI,MAAA,CAAO,mBAAA,EAAqB;AAAA,EAC1D,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,IAAA,EAAM,OAAO,iCAAiC;AAAA;AAChD;AAEJ,CAAC,CAAA;AAEM,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,WAAA,GAAc,KAAA;AAAA,EACd,QAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA,GAAM,OAAA;AAAA,EACN,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAwB;AACtB,EAAA,MAAM,YAAY,QAAA,KAAa,GAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,KAAA,EACE;AAAA,QACE,YAAA,EAAc,GAAG,QAAQ,CAAA,CAAA;AAAA,OAC3B;AAAA,MAED,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,EAAA;AAAA,QACT,oBAAoB,EAAE,IAAA,EAAM,WAAA,EAAa,GAAA,EAAK,WAAW,CAAA;AAAA,QACzD;AAAA,OACF;AAAA,MAEC,QAAA,EAAA,IAAA,KAAS,6BACR,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,MAAA,CAAO,YAAA,EACrB,4BAAkB,SAAA,GAAY,cAAA,GAAiB,CAAA,EAAG,QAAQ,CAAA,CAAA,CAAA,EAC7D,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,IAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,OAAA,EAAS,QAAA;AAAA,YACT,aAAA,EAAY,mBAAA;AAAA,YACZ,SAAA,EAAW,mBAAA,CAAoB,EAAE,WAAA,EAAa;AAAA;AAAA;AAChD,OAAA,EACF;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/esm/components/RadioGroup/RadioGroup.css

@@ -1,4 +1,4 @@
-.radio-group__RXgmX {
+@layer clickui {.radio-group__RXgmX {
   display: flex;
   flex-wrap: wrap;
   gap: var(--click-checkbox-space-gap);
@@ -97,3 +97,4 @@
   background: var(--click-radio-color-indicator-disabled);
 }
 /* stylelint-enable no-descending-specificity */
+}

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

@@ -40,16 +40,46 @@ const RadioGroup = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: true, children: [
-    /* @__PURE__ */ jsxs(FormElementContainer, { children: [
-      /* @__PURE__ */ jsx(RadixRadioGroup.Root, { orientation: inline ? "horizontal" : "vertical", disabled, id, dir: itemDir, ...props, className: cn(radioGroupVariants({
-        inline: inline === false ? false : true,
-        error: !!error
-      }), className), children }),
-      !!error && error !== true && /* @__PURE__ */ jsx(Error, { children: error })
-    ] }),
-    label && /* @__PURE__ */ jsx(Label, { htmlFor: id, disabled, error: !!error, children: label })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    FormRoot,
+    {
+      $orientation: orientation,
+      $dir: dir,
+      $addLabelPadding: true,
+      children: [
+        /* @__PURE__ */ jsxs(FormElementContainer, { children: [
+          /* @__PURE__ */ jsx(
+            RadixRadioGroup.Root,
+            {
+              orientation: inline ? "horizontal" : "vertical",
+              disabled,
+              id,
+              dir: itemDir,
+              ...props,
+              className: cn(
+                radioGroupVariants({
+                  inline: inline === false ? false : true,
+                  error: !!error
+                }),
+                className
+              ),
+              children
+            }
+          ),
+          !!error && error !== true && /* @__PURE__ */ jsx(Error, { children: error })
+        ] }),
+        label && /* @__PURE__ */ jsx(
+          Label,
+          {
+            htmlFor: id,
+            disabled,
+            error: !!error,
+            children: label
+          }
+        )
+      ]
+    }
+  );
 };
 const RadioGroupItem = ({
   id,
@@ -61,10 +91,38 @@ const RadioGroupItem = ({
   ...props
 }) => {
   const defaultId = useId();
-  return /* @__PURE__ */ jsxs(FormRoot, { $orientation: "horizontal", $dir: "end", $addLabelPadding: false, ...props, className: cn(styles.item, className), children: [
-    /* @__PURE__ */ jsx(RadixRadioGroup.Item, { value, id: id ?? defaultId, disabled, required, "aria-label": `${label}`, className: styles["radio-input"], children: /* @__PURE__ */ jsx(RadixRadioGroup.Indicator, { className: styles["radio-indicator"] }) }),
-    label && /* @__PURE__ */ jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    FormRoot,
+    {
+      $orientation: "horizontal",
+      $dir: "end",
+      $addLabelPadding: false,
+      ...props,
+      className: cn(styles.item, className),
+      children: [
+        /* @__PURE__ */ jsx(
+          RadixRadioGroup.Item,
+          {
+            value,
+            id: id ?? defaultId,
+            disabled,
+            required,
+            "aria-label": `${label}`,
+            className: styles["radio-input"],
+            children: /* @__PURE__ */ jsx(RadixRadioGroup.Indicator, { className: styles["radio-indicator"] })
+          }
+        ),
+        label && /* @__PURE__ */ jsx(
+          GenericLabel,
+          {
+            htmlFor: id ?? defaultId,
+            disabled,
+            children: label
+          }
+        )
+      ]
+    }
+  );
 };
 RadioGroupItem.displayName = "RadioGroupItem";
 RadioGroup.Item = RadioGroupItem;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as RadixRadioGroup from '@radix-ui/react-radio-group';\nimport { HTMLAttributes, ReactNode, useId } from 'react';\nimport { GenericLabel } from '@/components/GenericLabel';\nimport { Label } from '@/components/Label';\nimport { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends Omit<RadixRadioGroup.RadioGroupProps, 'dir'> {\n  /** Whether to display radio items inline (horizontally) */\n  inline?: boolean;\n  /** The orientation of the label relative to the radio group */\n  orientation?: 'vertical' | 'horizontal';\n  /** The direction/position of the label - start places label before, end places label after */\n  dir?: 'start' | 'end';\n  /** Text direction for radio items - ltr or rtl */\n  itemDir?: 'rtl' | 'ltr';\n  /** The label text displayed next to the radio group */\n  label?: ReactNode;\n  /** Error message to display below the radio group */\n  error?: ReactNode;\n}\n\nconst radioGroupVariants = cva(styles['radio-group'], {\n  variants: {\n    inline: {\n      true: styles['radio-group_inline'],\n      false: styles['radio-group_inline_false'],\n    },\n    error: {\n      true: styles['radio-group_error'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    inline: true,\n    error: false,\n  },\n});\n\nexport const RadioGroup = ({\n  children,\n  inline,\n  orientation,\n  dir,\n  error,\n  itemDir,\n  label,\n  disabled,\n  id,\n  className,\n  ...props\n}: RadioGroupProps) => {\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      $addLabelPadding\n    >\n      <FormElementContainer>\n        <RadixRadioGroup.Root\n          orientation={inline ? 'horizontal' : 'vertical'}\n          disabled={disabled}\n          id={id}\n          dir={itemDir}\n          {...props}\n          className={cn(\n            radioGroupVariants({\n              inline: inline === false ? false : true,\n              error: !!error,\n            }),\n            className\n          )}\n        >\n          {children}\n        </RadixRadioGroup.Root>\n        {!!error && error !== true && <Error>{error}</Error>}\n      </FormElementContainer>\n      {label && (\n        <Label\n          htmlFor={id}\n          disabled={disabled}\n          error={!!error}\n        >\n          {label}\n        </Label>\n      )}\n    </FormRoot>\n  );\n};\n\ninterface RadioGroupInputProps extends RadixRadioGroup.RadioGroupItemProps {\n  /** The label text displayed next to the radio item */\n  label?: ReactNode;\n}\n\nexport type RadioGroupItemProps = RadioGroupInputProps & HTMLAttributes<HTMLDivElement>;\n\nconst RadioGroupItem = ({\n  id,\n  label,\n  value,\n  disabled,\n  required,\n  className,\n  ...props\n}: RadioGroupItemProps) => {\n  const defaultId = useId();\n  return (\n    <FormRoot\n      $orientation=\"horizontal\"\n      $dir=\"end\"\n      $addLabelPadding={false}\n      {...props}\n      className={cn(styles.item, className)}\n    >\n      <RadixRadioGroup.Item\n        value={value}\n        id={id ?? defaultId}\n        disabled={disabled}\n        required={required}\n        aria-label={`${label}`}\n        className={styles['radio-input']}\n      >\n        <RadixRadioGroup.Indicator className={styles['radio-indicator']} />\n      </RadixRadioGroup.Item>\n      {label && (\n        <GenericLabel\n          htmlFor={id ?? defaultId}\n          disabled={disabled}\n        >\n          {label}\n        </GenericLabel>\n      )}\n    </FormRoot>\n  );\n};\n\nRadioGroupItem.displayName = 'RadioGroupItem';\nRadioGroup.Item = RadioGroupItem;\n"],"names":["radioGroupVariants","cva","styles","variants","inline","true","false","error","defaultVariants","RadioGroup","children","orientation","dir","itemDir","label","disabled","id","className","props","cn","RadioGroupItem","value","required","defaultId","useId","item","displayName","Item"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as RadixRadioGroup from '@radix-ui/react-radio-group';\nimport { HTMLAttributes, ReactNode, useId } from 'react';\nimport { GenericLabel } from '@/components/GenericLabel';\nimport { Label } from '@/components/Label';\nimport { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends Omit<RadixRadioGroup.RadioGroupProps, 'dir'> {\n  /** Whether to display radio items inline (horizontally) */\n  inline?: boolean;\n  /** The orientation of the label relative to the radio group */\n  orientation?: 'vertical' | 'horizontal';\n  /** The direction/position of the label - start places label before, end places label after */\n  dir?: 'start' | 'end';\n  /** Text direction for radio items - ltr or rtl */\n  itemDir?: 'rtl' | 'ltr';\n  /** The label text displayed next to the radio group */\n  label?: ReactNode;\n  /** Error message to display below the radio group */\n  error?: ReactNode;\n}\n\nconst radioGroupVariants = cva(styles['radio-group'], {\n  variants: {\n    inline: {\n      true: styles['radio-group_inline'],\n      false: styles['radio-group_inline_false'],\n    },\n    error: {\n      true: styles['radio-group_error'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    inline: true,\n    error: false,\n  },\n});\n\nexport const RadioGroup = ({\n  children,\n  inline,\n  orientation,\n  dir,\n  error,\n  itemDir,\n  label,\n  disabled,\n  id,\n  className,\n  ...props\n}: RadioGroupProps) => {\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      $addLabelPadding\n    >\n      <FormElementContainer>\n        <RadixRadioGroup.Root\n          orientation={inline ? 'horizontal' : 'vertical'}\n          disabled={disabled}\n          id={id}\n          dir={itemDir}\n          {...props}\n          className={cn(\n            radioGroupVariants({\n              inline: inline === false ? false : true,\n              error: !!error,\n            }),\n            className\n          )}\n        >\n          {children}\n        </RadixRadioGroup.Root>\n        {!!error && error !== true && <Error>{error}</Error>}\n      </FormElementContainer>\n      {label && (\n        <Label\n          htmlFor={id}\n          disabled={disabled}\n          error={!!error}\n        >\n          {label}\n        </Label>\n      )}\n    </FormRoot>\n  );\n};\n\ninterface RadioGroupInputProps extends RadixRadioGroup.RadioGroupItemProps {\n  /** The label text displayed next to the radio item */\n  label?: ReactNode;\n}\n\nexport type RadioGroupItemProps = RadioGroupInputProps & HTMLAttributes<HTMLDivElement>;\n\nconst RadioGroupItem = ({\n  id,\n  label,\n  value,\n  disabled,\n  required,\n  className,\n  ...props\n}: RadioGroupItemProps) => {\n  const defaultId = useId();\n  return (\n    <FormRoot\n      $orientation=\"horizontal\"\n      $dir=\"end\"\n      $addLabelPadding={false}\n      {...props}\n      className={cn(styles.item, className)}\n    >\n      <RadixRadioGroup.Item\n        value={value}\n        id={id ?? defaultId}\n        disabled={disabled}\n        required={required}\n        aria-label={`${label}`}\n        className={styles['radio-input']}\n      >\n        <RadixRadioGroup.Indicator className={styles['radio-indicator']} />\n      </RadixRadioGroup.Item>\n      {label && (\n        <GenericLabel\n          htmlFor={id ?? defaultId}\n          disabled={disabled}\n        >\n          {label}\n        </GenericLabel>\n      )}\n    </FormRoot>\n  );\n};\n\nRadioGroupItem.displayName = 'RadioGroupItem';\nRadioGroup.Item = RadioGroupItem;\n"],"names":[],"mappings":"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"}

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

@@ -3,13 +3,25 @@ import { forwardRef } from 'react';
 import { TextField } from '../TextField/index.js';
 import { Icon as SvgImage } from '../Icon/index.js';
 
-const SearchField = forwardRef(({
-  isFilter = false,
-  clear = true,
-  ...props
-}, ref) => {
-  return /* @__PURE__ */ jsx(TextField, { startContent: /* @__PURE__ */ jsx(SvgImage, { name: isFilter ? "filter" : "search", size: "sm" }), clear, ref, ...props });
-});
+const SearchField = forwardRef(
+  ({ isFilter = false, clear = true, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      TextField,
+      {
+        startContent: /* @__PURE__ */ jsx(
+          SvgImage,
+          {
+            name: isFilter ? "filter" : "search",
+            size: "sm"
+          }
+        ),
+        clear,
+        ref,
+        ...props
+      }
+    );
+  }
+);
 
 export { SearchField };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { TextField, type TextFieldProps } from '@/components/TextField';\nimport { Icon } from '@/components/Icon';\n\nexport interface SearchFieldProps extends Omit<\n  TextFieldProps,\n  'type' | 'startContent' | 'endContent'\n> {\n  isFilter?: boolean;\n}\n\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  ({ isFilter = false, clear = true, ...props }, ref) => {\n    return (\n      <TextField\n        startContent={\n          <Icon\n            name={isFilter ? 'filter' : 'search'}\n            size=\"sm\"\n          />\n        }\n        clear={clear}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\n"],"names":["SearchField","forwardRef","isFilter","clear","props","ref","Icon"],"mappings":";;;;;AAYO,MAAMA,WAAAA,GAAcC,WACzB,CAAC;AAAA,EAAEC,QAAAA,GAAW,KAAA;AAAA,EAAOC,KAAAA,GAAQ,IAAA;AAAA,EAAM,GAAGC;AAAM,CAAA,EAAGC,GAAAA,KAAQ;AACrD,EAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EACC,YAAA,kBACE,GAAA,CAACC,YACC,IAAA,EAAMJ,QAAAA,GAAW,QAAA,GAAW,QAAA,EAC5B,MAAK,IAAA,KAGT,KAAA,EACA,GAAA,EACA,GAAIE,KAAAA,EAAM,CAAA;AAGhB,CACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { TextField, type TextFieldProps } from '@/components/TextField';\nimport { Icon } from '@/components/Icon';\n\nexport interface SearchFieldProps extends Omit<\n  TextFieldProps,\n  'type' | 'startContent' | 'endContent'\n> {\n  isFilter?: boolean;\n}\n\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  ({ isFilter = false, clear = true, ...props }, ref) => {\n    return (\n      <TextField\n        startContent={\n          <Icon\n            name={isFilter ? 'filter' : 'search'}\n            size=\"sm\"\n          />\n        }\n        clear={clear}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\n"],"names":["Icon"],"mappings":";;;;;AAYO,MAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CAAC,EAAE,QAAA,GAAW,KAAA,EAAO,QAAQ,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACrD,IAAA,uBACE,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,YAAA,kBACE,GAAA;AAAA,UAACA,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,WAAW,QAAA,GAAW,QAAA;AAAA,YAC5B,IAAA,EAAK;AAAA;AAAA,SACP;AAAA,QAEF,KAAA;AAAA,QACA,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}

package/dist/esm/components/Select/MultiSelectValue.css

@@ -1,4 +1,4 @@
-.badge-list__WpJAq {
+@layer clickui {.badge-list__WpJAq {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
@@ -17,3 +17,4 @@
   max-width: fit-content;
   /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
 }
+}

package/dist/esm/components/Select/MultiSelectValue.js

@@ -5,9 +5,7 @@ import ReactSortableModule from 'react-sortablejs/dist/index.js';
 import styles from './MultiSelectValue.module.css.js';
 import { Badge } from '../Badge/index.js';
 
-const {
-  ReactSortable
-} = ReactSortableModule;
+const { ReactSortable } = ReactSortableModule;
 const MultiSelectValue = ({
   selectedValues,
   valueNode,
@@ -17,53 +15,71 @@ const MultiSelectValue = ({
   disabled
 }) => {
   const id = useId();
-  const [values, setValues] = useState(selectedValues.map((value) => ({
-    id: `multi-select-${id}-${value}`,
-    value
-  })));
-  useEffect(() => {
-    setValues(selectedValues.map((value) => ({
+  const [values, setValues] = useState(
+    selectedValues.map((value) => ({
       id: `multi-select-${id}-${value}`,
       value
-    })));
+    }))
+  );
+  useEffect(() => {
+    setValues(
+      selectedValues.map((value) => ({
+        id: `multi-select-${id}-${value}`,
+        value
+      }))
+    );
   }, [id, selectedValues]);
   if (selectedValues.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(ReactSortable, { className: styles["badge-list"], disabled: !sortable, list: values, setList: setValues, onEnd: (e) => {
-    const {
-      newDraggableIndex,
-      oldDraggableIndex
-    } = e;
-    if (typeof newDraggableIndex === "number" && typeof oldDraggableIndex === "number" && oldDraggableIndex !== newDraggableIndex) {
-      const temp = selectedValues[oldDraggableIndex];
-      selectedValues[oldDraggableIndex] = selectedValues[newDraggableIndex];
-      selectedValues[newDraggableIndex] = temp;
-      onChange(selectedValues);
-    }
-  }, revertOnSpill: true, children: selectedValues.map((value) => {
-    const nodeProps = valueNode.get(value) ?? {
-      children: value,
-      value
-    };
-    let otherProps = {
-      text: nodeProps.label ?? nodeProps.children,
-      icon: nodeProps?.icon,
-      iconDir: nodeProps?.iconDir
-    };
-    if (!disabled && !nodeProps.disabled) {
-      otherProps = {
-        ...otherProps,
-        dismissible: true,
-        onClose: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          onSelect(nodeProps.value);
+  return /* @__PURE__ */ jsx(
+    ReactSortable,
+    {
+      className: styles["badge-list"],
+      disabled: !sortable,
+      list: values,
+      setList: setValues,
+      onEnd: (e) => {
+        const { newDraggableIndex, oldDraggableIndex } = e;
+        if (typeof newDraggableIndex === "number" && typeof oldDraggableIndex === "number" && oldDraggableIndex !== newDraggableIndex) {
+          const temp = selectedValues[oldDraggableIndex];
+          selectedValues[oldDraggableIndex] = selectedValues[newDraggableIndex];
+          selectedValues[newDraggableIndex] = temp;
+          onChange(selectedValues);
+        }
+      },
+      revertOnSpill: true,
+      children: selectedValues.map((value) => {
+        const nodeProps = valueNode.get(value) ?? { children: value, value };
+        let otherProps = {
+          text: nodeProps.label ?? nodeProps.children,
+          icon: nodeProps?.icon,
+          iconDir: nodeProps?.iconDir
+        };
+        if (!disabled && !nodeProps.disabled) {
+          otherProps = {
+            ...otherProps,
+            dismissible: true,
+            onClose: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onSelect(nodeProps.value);
+            }
+          };
         }
-      };
+        return /* @__PURE__ */ jsx(
+          Badge,
+          {
+            className: styles["multi-select-badge"],
+            size: "sm",
+            state: disabled ? "disabled" : "default",
+            ...otherProps
+          },
+          `multi-select-${id}-${value}`
+        );
+      })
     }
-    return /* @__PURE__ */ jsx(Badge, { className: styles["multi-select-badge"], size: "sm", state: disabled ? "disabled" : "default", ...otherProps }, `multi-select-${id}-${value}`);
-  }) });
+  );
 };
 
 export { MultiSelectValue };

package/dist/esm/components/Select/MultiSelectValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectValue.js","sources":["../../../../src/components/Select/MultiSelectValue.tsx"],"sourcesContent":["import {\n  Badge,\n  BadgeProps,\n  DismissibleBadge,\n  NonDismissibleBadge,\n} from '@/components/Badge';\nimport { MouseEvent, useEffect, useId, useState } from 'react';\nimport ReactSortableModule from 'react-sortablejs/dist/index.js';\nimport type { ItemInterface } from 'react-sortablejs';\nconst { ReactSortable } = ReactSortableModule;\n\nimport { SelectItemProps } from './common/types';\nimport styles from './MultiSelectValue.module.css';\n\ninterface MultiSelectValueProps {\n  selectedValues: string[];\n  valueNode: Map<string, SelectItemProps>;\n  onChange: (selectedValues: string[]) => void;\n  onSelect: (selectedValue: string) => void;\n  sortable: boolean;\n  disabled: boolean;\n}\n\nexport const MultiSelectValue = ({\n  selectedValues,\n  valueNode,\n  onChange,\n  sortable,\n  onSelect,\n  disabled,\n}: MultiSelectValueProps) => {\n  const id = useId();\n  const [values, setValues] = useState<ItemInterface[]>(\n    selectedValues.map(value => ({\n      id: `multi-select-${id}-${value}`,\n      value,\n    }))\n  );\n  useEffect(() => {\n    setValues(\n      selectedValues.map(value => ({\n        id: `multi-select-${id}-${value}`,\n        value,\n      }))\n    );\n  }, [id, selectedValues]);\n  if (selectedValues.length === 0) {\n    return null;\n  }\n\n  return (\n    <ReactSortable\n      className={styles['badge-list']}\n      disabled={!sortable}\n      list={values}\n      setList={setValues}\n      onEnd={e => {\n        const { newDraggableIndex, oldDraggableIndex } = e;\n        if (\n          typeof newDraggableIndex === 'number' &&\n          typeof oldDraggableIndex === 'number' &&\n          oldDraggableIndex !== newDraggableIndex\n        ) {\n          const temp = selectedValues[oldDraggableIndex];\n          selectedValues[oldDraggableIndex] = selectedValues[newDraggableIndex];\n          selectedValues[newDraggableIndex] = temp;\n          onChange(selectedValues);\n        }\n      }}\n      revertOnSpill\n    >\n      {selectedValues.map(value => {\n        const nodeProps = valueNode.get(value) ?? { children: value, value: value };\n        let otherProps: BadgeProps = {\n          text: nodeProps.label ?? nodeProps.children,\n          icon: nodeProps?.icon,\n          iconDir: nodeProps?.iconDir,\n        } as NonDismissibleBadge;\n        if (!disabled && !nodeProps.disabled) {\n          otherProps = {\n            ...otherProps,\n            dismissible: true,\n            onClose: (e: MouseEvent<HTMLOrSVGElement>) => {\n              e.preventDefault();\n              e.stopPropagation();\n              onSelect(nodeProps.value);\n            },\n          } as DismissibleBadge;\n        }\n        return (\n          <Badge\n            className={styles['multi-select-badge']}\n            key={`multi-select-${id}-${value}`}\n            size=\"sm\"\n            state={disabled ? 'disabled' : 'default'}\n            {...otherProps}\n          />\n        );\n      })}\n    </ReactSortable>\n  );\n};\n"],"names":["ReactSortable","ReactSortableModule","MultiSelectValue","selectedValues","valueNode","onChange","sortable","onSelect","disabled","id","useId","values","setValues","useState","map","value","useEffect","length","styles","e","newDraggableIndex","oldDraggableIndex","temp","nodeProps","get","children","otherProps","text","label","icon","iconDir","dismissible","onClose","preventDefault","stopPropagation"],"mappings":"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"}
+{"version":3,"file":"MultiSelectValue.js","sources":["../../../../src/components/Select/MultiSelectValue.tsx"],"sourcesContent":["import {\n  Badge,\n  BadgeProps,\n  DismissibleBadge,\n  NonDismissibleBadge,\n} from '@/components/Badge';\nimport { MouseEvent, useEffect, useId, useState } from 'react';\nimport ReactSortableModule from 'react-sortablejs/dist/index.js';\nimport type { ItemInterface } from 'react-sortablejs';\nconst { ReactSortable } = ReactSortableModule;\n\nimport { SelectItemProps } from './common/types';\nimport styles from './MultiSelectValue.module.css';\n\ninterface MultiSelectValueProps {\n  selectedValues: string[];\n  valueNode: Map<string, SelectItemProps>;\n  onChange: (selectedValues: string[]) => void;\n  onSelect: (selectedValue: string) => void;\n  sortable: boolean;\n  disabled: boolean;\n}\n\nexport const MultiSelectValue = ({\n  selectedValues,\n  valueNode,\n  onChange,\n  sortable,\n  onSelect,\n  disabled,\n}: MultiSelectValueProps) => {\n  const id = useId();\n  const [values, setValues] = useState<ItemInterface[]>(\n    selectedValues.map(value => ({\n      id: `multi-select-${id}-${value}`,\n      value,\n    }))\n  );\n  useEffect(() => {\n    setValues(\n      selectedValues.map(value => ({\n        id: `multi-select-${id}-${value}`,\n        value,\n      }))\n    );\n  }, [id, selectedValues]);\n  if (selectedValues.length === 0) {\n    return null;\n  }\n\n  return (\n    <ReactSortable\n      className={styles['badge-list']}\n      disabled={!sortable}\n      list={values}\n      setList={setValues}\n      onEnd={e => {\n        const { newDraggableIndex, oldDraggableIndex } = e;\n        if (\n          typeof newDraggableIndex === 'number' &&\n          typeof oldDraggableIndex === 'number' &&\n          oldDraggableIndex !== newDraggableIndex\n        ) {\n          const temp = selectedValues[oldDraggableIndex];\n          selectedValues[oldDraggableIndex] = selectedValues[newDraggableIndex];\n          selectedValues[newDraggableIndex] = temp;\n          onChange(selectedValues);\n        }\n      }}\n      revertOnSpill\n    >\n      {selectedValues.map(value => {\n        const nodeProps = valueNode.get(value) ?? { children: value, value: value };\n        let otherProps: BadgeProps = {\n          text: nodeProps.label ?? nodeProps.children,\n          icon: nodeProps?.icon,\n          iconDir: nodeProps?.iconDir,\n        } as NonDismissibleBadge;\n        if (!disabled && !nodeProps.disabled) {\n          otherProps = {\n            ...otherProps,\n            dismissible: true,\n            onClose: (e: MouseEvent<HTMLOrSVGElement>) => {\n              e.preventDefault();\n              e.stopPropagation();\n              onSelect(nodeProps.value);\n            },\n          } as DismissibleBadge;\n        }\n        return (\n          <Badge\n            className={styles['multi-select-badge']}\n            key={`multi-select-${id}-${value}`}\n            size=\"sm\"\n            state={disabled ? 'disabled' : 'default'}\n            {...otherProps}\n          />\n        );\n      })}\n    </ReactSortable>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/components/Select/SingleSelectValue.css

@@ -1,4 +1,4 @@
-.select-value-container__I2dbz {
+@layer clickui {.select-value-container__I2dbz {
   display: flex;
   width: 100%;
   overflow: hidden;
@@ -8,3 +8,4 @@
   pointer-events: inherit;
   text-overflow: ellipsis;
 }
+}

package/dist/esm/components/Select/SingleSelectValue.js

@@ -10,13 +10,17 @@ const SingleSelectValue = ({
   if (value === void 0 || value === null) {
     return null;
   }
-  const {
-    icon,
-    iconDir,
-    children,
-    label
-  } = valueNode ?? {};
-  return /* @__PURE__ */ jsx("div", { className: styles["select-value-container"], children: /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, gap: "xxs", isResponsive: false, children: label ?? children ?? value }) });
+  const { icon, iconDir, children, label } = valueNode ?? {};
+  return /* @__PURE__ */ jsx("div", { className: styles["select-value-container"], children: /* @__PURE__ */ jsx(
+    IconWrapper,
+    {
+      icon,
+      iconDir,
+      gap: "xxs",
+      isResponsive: false,
+      children: label ?? children ?? value
+    }
+  ) });
 };
 
 export { SingleSelectValue as default };

package/dist/esm/components/Select/SingleSelectValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectValue.js","sources":["../../../../src/components/Select/SingleSelectValue.tsx"],"sourcesContent":["import { SelectItemProps } from './common/types';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport styles from './SingleSelectValue.module.css';\n\nconst SingleSelectValue = ({\n  valueNode,\n  value,\n}: {\n  valueNode?: SelectItemProps;\n  value: string;\n}) => {\n  if (value === undefined || value === null) {\n    return null;\n  }\n\n  const { icon, iconDir, children, label } = valueNode ?? {};\n\n  return (\n    <div className={styles['select-value-container']}>\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n        gap=\"xxs\"\n        isResponsive={false}\n      >\n        {label ?? children ?? value}\n      </IconWrapper>\n    </div>\n  );\n};\n\nexport default SingleSelectValue;\n"],"names":["SingleSelectValue","valueNode","value","undefined","icon","iconDir","children","label","styles"],"mappings":";;;;AAIA,MAAMA,oBAAoBA,CAAC;AAAA,EACzBC,SAAAA;AAAAA,EACAC;AAIF,CAAA,KAAM;AACJ,EAAA,IAAIA,KAAAA,KAAUC,MAAAA,IAAaD,KAAAA,KAAU,IAAA,EAAM;AACzC,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM;AAAA,IAAEE,IAAAA;AAAAA,IAAMC,OAAAA;AAAAA,IAASC,QAAAA;AAAAA,IAAUC;AAAAA,GAAM,GAAIN,aAAa,EAAC;AAEzD,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAWO,MAAAA,CAAO,wBAAwB,GAC7C,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EACC,IAAA,EACA,OAAA,EACA,KAAI,KAAA,EACJ,YAAA,EAAc,OAEbD,QAAAA,EAAAA,KAAAA,IAASD,QAAAA,IAAYJ,OACxB,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SingleSelectValue.js","sources":["../../../../src/components/Select/SingleSelectValue.tsx"],"sourcesContent":["import { SelectItemProps } from './common/types';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport styles from './SingleSelectValue.module.css';\n\nconst SingleSelectValue = ({\n  valueNode,\n  value,\n}: {\n  valueNode?: SelectItemProps;\n  value: string;\n}) => {\n  if (value === undefined || value === null) {\n    return null;\n  }\n\n  const { icon, iconDir, children, label } = valueNode ?? {};\n\n  return (\n    <div className={styles['select-value-container']}>\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n        gap=\"xxs\"\n        isResponsive={false}\n      >\n        {label ?? children ?? value}\n      </IconWrapper>\n    </div>\n  );\n};\n\nexport default SingleSelectValue;\n"],"names":[],"mappings":";;;;AAIA,MAAM,oBAAoB,CAAC;AAAA,EACzB,SAAA;AAAA,EACA;AACF,CAAA,KAGM;AACJ,EAAA,IAAI,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AACzC,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,EAAE,IAAA,EAAM,OAAA,EAAS,UAAU,KAAA,EAAM,GAAI,aAAa,EAAC;AAEzD,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,wBAAwB,CAAA,EAC7C,QAAA,kBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAA,EAAI,KAAA;AAAA,MACJ,YAAA,EAAc,KAAA;AAAA,MAEb,mBAAS,QAAA,IAAY;AAAA;AAAA,GACxB,EACF,CAAA;AAEJ;;;;"}