@clickhouse/click-ui 0.9.0 → 0.10.0-rc1

package/dist/cjs/components/Checkbox/index.cjs

@@ -42,7 +42,8 @@ const checkInputVariants = classVarianceAuthority.cva(Checkbox_module.default.ch
       var3: Checkbox_module.default["checkinput_variant_var3"],
       var4: Checkbox_module.default["checkinput_variant_var4"],
       var5: Checkbox_module.default["checkinput_variant_var5"],
-      var6: Checkbox_module.default["checkinput_variant_var6"]
+      var6: Checkbox_module.default["checkinput_variant_var6"],
+      var7: Checkbox_module.default["checkinput_variant_var7"]
     }
   },
   defaultVariants: {
@@ -61,12 +62,43 @@ const Checkbox = ({
   ...delegated
 }) => {
   const defaultId = react.useId();
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormRoot.FormRoot, { $orientation: orientation, $dir: dir, className: Checkbox_module.default.wrapper, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RadixCheckbox__namespace.Root, { id: id ?? defaultId, "data-testid": "checkbox", disabled, "aria-label": `${label}`, checked, ...delegated, className: cva.cn(checkInputVariants({
-      variant
-    }), className), children: /* @__PURE__ */ jsxRuntime.jsx(RadixCheckbox__namespace.Indicator, { className: Checkbox_module.default.checkicon, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: checked === "indeterminate" ? "minus" : "check", size: "sm" }) }) }),
-    label && /* @__PURE__ */ jsxRuntime.jsx(GenericLabel.GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    FormRoot.FormRoot,
+    {
+      $orientation: orientation,
+      $dir: dir,
+      className: Checkbox_module.default.wrapper,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RadixCheckbox__namespace.Root,
+          {
+            id: id ?? defaultId,
+            "data-testid": "checkbox",
+            disabled,
+            "aria-label": `${label}`,
+            checked,
+            ...delegated,
+            className: cva.cn(checkInputVariants({ variant }), className),
+            children: /* @__PURE__ */ jsxRuntime.jsx(RadixCheckbox__namespace.Indicator, { className: Checkbox_module.default.checkicon, children: /* @__PURE__ */ jsxRuntime.jsx(
+              Icon.Icon,
+              {
+                name: checked === "indeterminate" ? "minus" : "check",
+                size: "sm"
+              }
+            ) })
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          GenericLabel.GenericLabel,
+          {
+            htmlFor: id ?? defaultId,
+            disabled,
+            children: label
+          }
+        )
+      ]
+    }
+  );
 };
 
 exports.Checkbox = Checkbox;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { GenericLabel } from '@/components/GenericLabel';\nimport { Icon } from '@/components/Icon';\n\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { useId } from 'react';\nimport { FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Checkbox.module.css';\nimport { CheckboxProps } from './Checkbox.types';\n\nconst checkInputVariants = cva(styles.checkinput, {\n  variants: {\n    variant: {\n      default: styles['checkinput_variant_default'],\n      var1: styles['checkinput_variant_var1'],\n      var2: styles['checkinput_variant_var2'],\n      var3: styles['checkinput_variant_var3'],\n      var4: styles['checkinput_variant_var4'],\n      var5: styles['checkinput_variant_var5'],\n      var6: styles['checkinput_variant_var6'],\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport const Checkbox = ({\n  id,\n  label,\n  variant = 'default',\n  disabled,\n  orientation = 'horizontal',\n  dir = 'end',\n  checked,\n  className,\n  ...delegated\n}: CheckboxProps) => {\n  const defaultId = useId();\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      className={styles.wrapper}\n    >\n      <RadixCheckbox.Root\n        id={id ?? defaultId}\n        data-testid=\"checkbox\"\n        disabled={disabled}\n        aria-label={`${label}`}\n        checked={checked}\n        {...delegated}\n        className={cn(checkInputVariants({ variant }), className)}\n      >\n        <RadixCheckbox.Indicator className={styles.checkicon}>\n          <Icon\n            name={checked === 'indeterminate' ? 'minus' : 'check'}\n            size=\"sm\"\n          />\n        </RadixCheckbox.Indicator>\n      </RadixCheckbox.Root>\n      {label && (\n        <GenericLabel\n          htmlFor={id ?? defaultId}\n          disabled={disabled}\n        >\n          {label}\n        </GenericLabel>\n      )}\n    </FormRoot>\n  );\n};\n"],"names":["checkInputVariants","cva","styles","checkinput","variants","variant","default","var1","var2","var3","var4","var5","var6","defaultVariants","Checkbox","id","label","disabled","orientation","dir","checked","className","delegated","defaultId","useId","jsxs","FormRoot","wrapper","jsx","RadixCheckbox","cn","checkicon","Icon","GenericLabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,kBAAAA,GAAqBC,0BAAAA,CAAIC,uBAAAA,CAAOC,UAAAA,EAAY;AAAA,EAChDC,QAAAA,EAAU;AAAA,IACRC,OAAAA,EAAS;AAAA,MACPC,OAAAA,EAASJ,wBAAO,4BAA4B,CAAA;AAAA,MAC5CK,IAAAA,EAAML,wBAAO,yBAAyB,CAAA;AAAA,MACtCM,IAAAA,EAAMN,wBAAO,yBAAyB,CAAA;AAAA,MACtCO,IAAAA,EAAMP,wBAAO,yBAAyB,CAAA;AAAA,MACtCQ,IAAAA,EAAMR,wBAAO,yBAAyB,CAAA;AAAA,MACtCS,IAAAA,EAAMT,wBAAO,yBAAyB,CAAA;AAAA,MACtCU,IAAAA,EAAMV,wBAAO,yBAAyB;AAAA;AACxC,GACF;AAAA,EACAW,eAAAA,EAAiB;AAAA,IACfR,OAAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAEM,MAAMS,WAAWA,CAAC;AAAA,EACvBC,EAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAX,OAAAA,GAAU,SAAA;AAAA,EACVY,QAAAA;AAAAA,EACAC,WAAAA,GAAc,YAAA;AAAA,EACdC,GAAAA,GAAM,KAAA;AAAA,EACNC,OAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACU,CAAA,KAAM;AACnB,EAAA,MAAMC,YAAYC,WAAAA,EAAM;AACxB,EAAA,uBACEC,eAAA,CAACC,qBACC,YAAA,EAAcR,WAAAA,EACd,MAAMC,GAAAA,EACN,SAAA,EAAWjB,wBAAOyB,OAAAA,EAElB,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,yBAAc,IAAA,EAAd,EACC,IAAId,EAAAA,IAAMQ,SAAAA,EACV,eAAY,UAAA,EACZ,QAAA,EACA,YAAA,EAAY,CAAA,EAAGP,KAAK,CAAA,CAAA,EACpB,OAAA,EACA,GAAIM,SAAAA,EACJ,SAAA,EAAWQ,OAAG9B,kBAAAA,CAAmB;AAAA,MAAEK;AAAAA,KAAS,GAAGgB,SAAS,CAAA,EAExD,yCAACQ,wBAAA,CAAc,SAAA,EAAd,EAAwB,SAAA,EAAW3B,uBAAAA,CAAO6B,WACzC,QAAA,kBAAAH,cAAA,CAACI,SAAA,EAAA,EACC,MAAMZ,OAAAA,KAAY,eAAA,GAAkB,UAAU,OAAA,EAC9C,IAAA,EAAK,IAAA,EAAI,CAAA,EAEb,CAAA,EACF,CAAA;AAAA,IACCJ,yBACCY,cAAA,CAACK,yBAAA,EAAA,EACC,SAASlB,EAAAA,IAAMQ,SAAAA,EACf,UAECP,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { GenericLabel } from '@/components/GenericLabel';\nimport { Icon } from '@/components/Icon';\n\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { useId } from 'react';\nimport { FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Checkbox.module.css';\nimport { CheckboxProps } from './Checkbox.types';\n\nconst checkInputVariants = cva(styles.checkinput, {\n  variants: {\n    variant: {\n      default: styles['checkinput_variant_default'],\n      var1: styles['checkinput_variant_var1'],\n      var2: styles['checkinput_variant_var2'],\n      var3: styles['checkinput_variant_var3'],\n      var4: styles['checkinput_variant_var4'],\n      var5: styles['checkinput_variant_var5'],\n      var6: styles['checkinput_variant_var6'],\n      var7: styles['checkinput_variant_var7'],\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport const Checkbox = ({\n  id,\n  label,\n  variant = 'default',\n  disabled,\n  orientation = 'horizontal',\n  dir = 'end',\n  checked,\n  className,\n  ...delegated\n}: CheckboxProps) => {\n  const defaultId = useId();\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      className={styles.wrapper}\n    >\n      <RadixCheckbox.Root\n        id={id ?? defaultId}\n        data-testid=\"checkbox\"\n        disabled={disabled}\n        aria-label={`${label}`}\n        checked={checked}\n        {...delegated}\n        className={cn(checkInputVariants({ variant }), className)}\n      >\n        <RadixCheckbox.Indicator className={styles.checkicon}>\n          <Icon\n            name={checked === 'indeterminate' ? 'minus' : 'check'}\n            size=\"sm\"\n          />\n        </RadixCheckbox.Indicator>\n      </RadixCheckbox.Root>\n      {label && (\n        <GenericLabel\n          htmlFor={id ?? defaultId}\n          disabled={disabled}\n        >\n          {label}\n        </GenericLabel>\n      )}\n    </FormRoot>\n  );\n};\n"],"names":["cva","styles","useId","jsxs","FormRoot","jsx","RadixCheckbox","cn","Icon","GenericLabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,kBAAA,GAAqBA,0BAAA,CAAIC,uBAAA,CAAO,UAAA,EAAY;AAAA,EAChD,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,OAAA,EAASA,wBAAO,4BAA4B,CAAA;AAAA,MAC5C,IAAA,EAAMA,wBAAO,yBAAyB,CAAA;AAAA,MACtC,IAAA,EAAMA,wBAAO,yBAAyB,CAAA;AAAA,MACtC,IAAA,EAAMA,wBAAO,yBAAyB,CAAA;AAAA,MACtC,IAAA,EAAMA,wBAAO,yBAAyB,CAAA;AAAA,MACtC,IAAA,EAAMA,wBAAO,yBAAyB,CAAA;AAAA,MACtC,IAAA,EAAMA,wBAAO,yBAAyB,CAAA;AAAA,MACtC,IAAA,EAAMA,wBAAO,yBAAyB;AAAA;AACxC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAEM,MAAM,WAAW,CAAC;AAAA,EACvB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,QAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA,GAAM,KAAA;AAAA,EACN,OAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAqB;AACnB,EAAA,MAAM,YAAYC,WAAA,EAAM;AACxB,EAAA,uBACEC,eAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAc,WAAA;AAAA,MACd,IAAA,EAAM,GAAA;AAAA,MACN,WAAWH,uBAAA,CAAO,OAAA;AAAA,MAElB,QAAA,EAAA;AAAA,wBAAAI,cAAA;AAAA,UAACC,wBAAA,CAAc,IAAA;AAAA,UAAd;AAAA,YACC,IAAI,EAAA,IAAM,SAAA;AAAA,YACV,aAAA,EAAY,UAAA;AAAA,YACZ,QAAA;AAAA,YACA,YAAA,EAAY,GAAG,KAAK,CAAA,CAAA;AAAA,YACpB,OAAA;AAAA,YACC,GAAG,SAAA;AAAA,YACJ,WAAWC,MAAA,CAAG,kBAAA,CAAmB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,YAExD,yCAACD,wBAAA,CAAc,SAAA,EAAd,EAAwB,SAAA,EAAWL,wBAAO,SAAA,EACzC,QAAA,kBAAAI,cAAA;AAAA,cAACG,SAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAM,OAAA,KAAY,eAAA,GAAkB,OAAA,GAAU,OAAA;AAAA,gBAC9C,IAAA,EAAK;AAAA;AAAA,aACP,EACF;AAAA;AAAA,SACF;AAAA,QACC,KAAA,oBACCH,cAAA;AAAA,UAACI,yBAAA;AAAA,UAAA;AAAA,YACC,SAAS,EAAA,IAAM,SAAA;AAAA,YACf,QAAA;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/cjs/components/CheckboxMultiSelect/index.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/CheckboxMultiSelect/CheckboxMultiSelect.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { useUpdateEffect } from '@/hooks/internal';\nimport {\n  SelectGroup,\n  InternalSelect,\n  MultiSelectCheckboxItem,\n  SelectItemDescription,\n} from '@/components/Select/common/InternalSelect';\n\nimport type { SelectOptionProp, SelectionType } from '@/components/Select/common/types';\nimport type { CheckboxMultiSelectProps } from './CheckboxMultiSelect.types';\n\nexport const CheckboxMultiSelect = ({\n  value: valueProp,\n  defaultValue,\n  onSelect: onSelectProp,\n  options,\n  children,\n  defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  selectLabel,\n  ...props\n}: CheckboxMultiSelectProps) => {\n  const [selectedValues, setSelectedValues] = useState<string[]>(\n    valueProp ?? defaultValue ?? []\n  );\n  const [open, setOpen] = useState(defaultOpen ?? false);\n\n  const onOpenChange = useCallback(\n    (open: boolean) => {\n      setOpen(open);\n      if (typeof onOpenChangeProp === 'function') {\n        onOpenChangeProp(open);\n      }\n    },\n    [onOpenChangeProp]\n  );\n\n  useUpdateEffect(() => {\n    setSelectedValues(valueProp ?? []);\n  }, [valueProp]);\n\n  const onChange = useCallback(\n    (values: string[], type?: SelectionType) => {\n      setSelectedValues(values);\n      if (typeof onSelectProp === 'function') {\n        onSelectProp(values, type);\n      }\n    },\n    [onSelectProp]\n  );\n\n  const onSelect = useCallback(\n    (value: string, type?: SelectionType) => {\n      let newValues = [];\n      if (selectedValues.includes(value)) {\n        newValues = selectedValues.filter(currentValue => currentValue !== value);\n      } else {\n        newValues = [...selectedValues, value];\n      }\n\n      onChange(newValues, type);\n    },\n    [onChange, selectedValues]\n  );\n\n  const conditionalProps: Partial<SelectOptionProp> = {};\n  if (options) {\n    conditionalProps.options = options;\n  } else {\n    conditionalProps.children = children;\n  }\n\n  return (\n    <InternalSelect\n      onChange={onChange}\n      value={selectedValues}\n      open={open}\n      onOpenChange={onOpenChange}\n      onSelect={onSelect}\n      checkbox={true}\n      selectLabel={selectLabel}\n      {...conditionalProps}\n      {...props}\n    />\n  );\n};\n\nCheckboxMultiSelect.Group = SelectGroup;\nCheckboxMultiSelect.Item = MultiSelectCheckboxItem;\nCheckboxMultiSelect.ItemDescription = SelectItemDescription;\n"],"names":["CheckboxMultiSelect","value","valueProp","defaultValue","onSelect","onSelectProp","options","children","defaultOpen","onOpenChange","onOpenChangeProp","selectLabel","props","selectedValues","setSelectedValues","useState","open","setOpen","useCallback","useUpdateEffect","onChange","values","type","newValues","includes","filter","currentValue","conditionalProps","jsx","InternalSelect","Group","SelectGroup","Item","MultiSelectCheckboxItem","ItemDescription","SelectItemDescription"],"mappings":";;;;;;;;;AAYO,MAAMA,sBAAsBA,CAAC;AAAA,EAClCC,KAAAA,EAAOC,SAAAA;AAAAA,EACPC,YAAAA;AAAAA,EACAC,QAAAA,EAAUC,YAAAA;AAAAA,EACVC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,YAAAA,EAAcC,gBAAAA;AAAAA,EACdC,WAAAA;AAAAA,EACA,GAAGC;AACqB,CAAA,KAAM;AAC9B,EAAA,MAAM,CAACC,gBAAgBC,iBAAiB,CAAA,GAAIC,eAC1Cb,SAAAA,IAAaC,YAAAA,IAAgB,EAC/B,CAAA;AACA,EAAA,MAAM,CAACa,IAAAA,EAAMC,OAAO,CAAA,GAAIF,cAAAA,CAASP,eAAe,KAAK,CAAA;AAErD,EAAA,MAAMC,YAAAA,GAAeS,iBAAAA,CACnB,CAACF,KAAAA,KAAkB;AACjBC,IAAAA,OAAAA,CAAQD,KAAI,CAAA;AACZ,IAAA,IAAI,OAAON,qBAAqB,UAAA,EAAY;AAC1CA,MAAAA,gBAAAA,CAAiBM,KAAI,CAAA;AAAA,IACvB;AAAA,EACF,CAAA,EACA,CAACN,gBAAgB,CACnB,CAAA;AAEAS,EAAAA,+BAAAA,CAAgB,MAAM;AACpBL,IAAAA,iBAAAA,CAAkBZ,SAAAA,IAAa,EAAE,CAAA;AAAA,EACnC,CAAA,EAAG,CAACA,SAAS,CAAC,CAAA;AAEd,EAAA,MAAMkB,QAAAA,GAAWF,iBAAAA,CACf,CAACG,MAAAA,EAAkBC,IAAAA,KAAyB;AAC1CR,IAAAA,iBAAAA,CAAkBO,MAAM,CAAA;AACxB,IAAA,IAAI,OAAOhB,iBAAiB,UAAA,EAAY;AACtCA,MAAAA,YAAAA,CAAagB,QAAQC,IAAI,CAAA;AAAA,IAC3B;AAAA,EACF,CAAA,EACA,CAACjB,YAAY,CACf,CAAA;AAEA,EAAA,MAAMD,QAAAA,GAAWc,iBAAAA,CACf,CAACjB,KAAAA,EAAeqB,IAAAA,KAAyB;AACvC,IAAA,IAAIC,YAAY,EAAA;AAChB,IAAA,IAAIV,cAAAA,CAAeW,QAAAA,CAASvB,KAAK,CAAA,EAAG;AAClCsB,MAAAA,SAAAA,GAAYV,cAAAA,CAAeY,MAAAA,CAAOC,CAAAA,YAAAA,KAAgBA,YAAAA,KAAiBzB,KAAK,CAAA;AAAA,IAC1E,CAAA,MAAO;AACLsB,MAAAA,SAAAA,GAAY,CAAC,GAAGV,cAAAA,EAAgBZ,KAAK,CAAA;AAAA,IACvC;AAEAmB,IAAAA,QAAAA,CAASG,WAAWD,IAAI,CAAA;AAAA,EAC1B,CAAA,EACA,CAACF,QAAAA,EAAUP,cAAc,CAC3B,CAAA;AAEA,EAAA,MAAMc,mBAA8C,EAAC;AACrD,EAAA,IAAIrB,OAAAA,EAAS;AACXqB,IAAAA,gBAAAA,CAAiBrB,OAAAA,GAAUA,OAAAA;AAAAA,EAC7B,CAAA,MAAO;AACLqB,IAAAA,gBAAAA,CAAiBpB,QAAAA,GAAWA,QAAAA;AAAAA,EAC9B;AAEA,EAAA,uBACEqB,cAAA,CAACC,6BAAA,EAAA,EACC,QAAA,EACA,KAAA,EAAOhB,gBACP,IAAA,EACA,YAAA,EACA,QAAA,EACA,QAAA,EAAU,IAAA,EACV,WAAA,EACA,GAAIc,gBAAAA,EACJ,GAAIf,KAAAA,EAAM,CAAA;AAGhB;AAEAZ,mBAAAA,CAAoB8B,KAAAA,GAAQC,0BAAAA;AAC5B/B,mBAAAA,CAAoBgC,IAAAA,GAAOC,sCAAAA;AAC3BjC,mBAAAA,CAAoBkC,eAAAA,GAAkBC,oCAAAA;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/CheckboxMultiSelect/CheckboxMultiSelect.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { useUpdateEffect } from '@/hooks/internal';\nimport {\n  SelectGroup,\n  InternalSelect,\n  MultiSelectCheckboxItem,\n  SelectItemDescription,\n} from '@/components/Select/common/InternalSelect';\n\nimport type { SelectOptionProp, SelectionType } from '@/components/Select/common/types';\nimport type { CheckboxMultiSelectProps } from './CheckboxMultiSelect.types';\n\nexport const CheckboxMultiSelect = ({\n  value: valueProp,\n  defaultValue,\n  onSelect: onSelectProp,\n  options,\n  children,\n  defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  selectLabel,\n  ...props\n}: CheckboxMultiSelectProps) => {\n  const [selectedValues, setSelectedValues] = useState<string[]>(\n    valueProp ?? defaultValue ?? []\n  );\n  const [open, setOpen] = useState(defaultOpen ?? false);\n\n  const onOpenChange = useCallback(\n    (open: boolean) => {\n      setOpen(open);\n      if (typeof onOpenChangeProp === 'function') {\n        onOpenChangeProp(open);\n      }\n    },\n    [onOpenChangeProp]\n  );\n\n  useUpdateEffect(() => {\n    setSelectedValues(valueProp ?? []);\n  }, [valueProp]);\n\n  const onChange = useCallback(\n    (values: string[], type?: SelectionType) => {\n      setSelectedValues(values);\n      if (typeof onSelectProp === 'function') {\n        onSelectProp(values, type);\n      }\n    },\n    [onSelectProp]\n  );\n\n  const onSelect = useCallback(\n    (value: string, type?: SelectionType) => {\n      let newValues = [];\n      if (selectedValues.includes(value)) {\n        newValues = selectedValues.filter(currentValue => currentValue !== value);\n      } else {\n        newValues = [...selectedValues, value];\n      }\n\n      onChange(newValues, type);\n    },\n    [onChange, selectedValues]\n  );\n\n  const conditionalProps: Partial<SelectOptionProp> = {};\n  if (options) {\n    conditionalProps.options = options;\n  } else {\n    conditionalProps.children = children;\n  }\n\n  return (\n    <InternalSelect\n      onChange={onChange}\n      value={selectedValues}\n      open={open}\n      onOpenChange={onOpenChange}\n      onSelect={onSelect}\n      checkbox={true}\n      selectLabel={selectLabel}\n      {...conditionalProps}\n      {...props}\n    />\n  );\n};\n\nCheckboxMultiSelect.Group = SelectGroup;\nCheckboxMultiSelect.Item = MultiSelectCheckboxItem;\nCheckboxMultiSelect.ItemDescription = SelectItemDescription;\n"],"names":["useState","useCallback","open","useUpdateEffect","jsx","InternalSelect","SelectGroup","MultiSelectCheckboxItem","SelectItemDescription"],"mappings":";;;;;;;;;AAYO,MAAM,sBAAsB,CAAC;AAAA,EAClC,KAAA,EAAO,SAAA;AAAA,EACP,YAAA;AAAA,EACA,QAAA,EAAU,YAAA;AAAA,EACV,OAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA,EAAc,gBAAA;AAAA,EACd,WAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAgC;AAC9B,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,cAAA;AAAA,IAC1C,SAAA,IAAa,gBAAgB;AAAC,GAChC;AACA,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIA,cAAA,CAAS,eAAe,KAAK,CAAA;AAErD,EAAA,MAAM,YAAA,GAAeC,iBAAA;AAAA,IACnB,CAACC,KAAAA,KAAkB;AACjB,MAAA,OAAA,CAAQA,KAAI,CAAA;AACZ,MAAA,IAAI,OAAO,qBAAqB,UAAA,EAAY;AAC1C,QAAA,gBAAA,CAAiBA,KAAI,CAAA;AAAA,MACvB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,gBAAgB;AAAA,GACnB;AAEA,EAAAC,+BAAA,CAAgB,MAAM;AACpB,IAAA,iBAAA,CAAkB,SAAA,IAAa,EAAE,CAAA;AAAA,EACnC,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,MAAM,QAAA,GAAWF,iBAAA;AAAA,IACf,CAAC,QAAkB,IAAA,KAAyB;AAC1C,MAAA,iBAAA,CAAkB,MAAM,CAAA;AACxB,MAAA,IAAI,OAAO,iBAAiB,UAAA,EAAY;AACtC,QAAA,YAAA,CAAa,QAAQ,IAAI,CAAA;AAAA,MAC3B;AAAA,IACF,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,MAAM,QAAA,GAAWA,iBAAA;AAAA,IACf,CAAC,OAAe,IAAA,KAAyB;AACvC,MAAA,IAAI,YAAY,EAAC;AACjB,MAAA,IAAI,cAAA,CAAe,QAAA,CAAS,KAAK,CAAA,EAAG;AAClC,QAAA,SAAA,GAAY,cAAA,CAAe,MAAA,CAAO,CAAA,YAAA,KAAgB,YAAA,KAAiB,KAAK,CAAA;AAAA,MAC1E,CAAA,MAAO;AACL,QAAA,SAAA,GAAY,CAAC,GAAG,cAAA,EAAgB,KAAK,CAAA;AAAA,MACvC;AAEA,MAAA,QAAA,CAAS,WAAW,IAAI,CAAA;AAAA,IAC1B,CAAA;AAAA,IACA,CAAC,UAAU,cAAc;AAAA,GAC3B;AAEA,EAAA,MAAM,mBAA8C,EAAC;AACrD,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,gBAAA,CAAiB,OAAA,GAAU,OAAA;AAAA,EAC7B,CAAA,MAAO;AACL,IAAA,gBAAA,CAAiB,QAAA,GAAW,QAAA;AAAA,EAC9B;AAEA,EAAA,uBACEG,cAAA;AAAA,IAACC,6BAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA,KAAA,EAAO,cAAA;AAAA,MACP,IAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA,EAAU,IAAA;AAAA,MACV,WAAA;AAAA,MACC,GAAG,gBAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,mBAAA,CAAoB,KAAA,GAAQC,0BAAA;AAC5B,mBAAA,CAAoB,IAAA,GAAOC,sCAAA;AAC3B,mBAAA,CAAoB,eAAA,GAAkBC,oCAAA;;;;"}

package/dist/cjs/components/CodeBlock/CodeBlock.css

@@ -1,4 +1,4 @@
-.codeblock__pRWOC {
+@layer clickui {.codeblock__pRWOC {
   position: relative;
   width: 100%;
   /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original
@@ -46,3 +46,4 @@
   right: var(--click-codeblock-space-x);
   gap: 0.625rem;
 }
+}

package/dist/cjs/components/CodeBlock/InlineCodeBlock.cjs

@@ -10,7 +10,13 @@ const InlineCodeBlock_module = require('./InlineCodeBlock.module.css.cjs');
 const InlineCodeBlock = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, className: cva.cn(InlineCodeBlock_module.default.inline, className) });
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "span",
+  {
+    ...props,
+    className: cva.cn(InlineCodeBlock_module.default.inline, className)
+  }
+);
 
 exports.InlineCodeBlock = InlineCodeBlock;
 //# sourceMappingURL=InlineCodeBlock.cjs.map

package/dist/cjs/components/CodeBlock/InlineCodeBlock.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlineCodeBlock.cjs","sources":["../../../../src/components/CodeBlock/InlineCodeBlock.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './InlineCodeBlock.module.css';\n\nexport const InlineCodeBlock = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    {...props}\n    className={cn(styles.inline, className)}\n  />\n);\n"],"names":["InlineCodeBlock","className","props","jsx","cn","styles","inline"],"mappings":";;;;;;;;AAIO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,SAAAA;AAAAA,EACA,GAAGC;AAC4B,CAAA,qBAC/BC,cAAA,CAAC,UACC,GAAID,KAAAA,EACJ,WAAWE,MAAAA,CAAGC,8BAAAA,CAAOC,MAAAA,EAAQL,SAAS,CAAA,EAAE;;;;"}
+{"version":3,"file":"InlineCodeBlock.cjs","sources":["../../../../src/components/CodeBlock/InlineCodeBlock.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './InlineCodeBlock.module.css';\n\nexport const InlineCodeBlock = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    {...props}\n    className={cn(styles.inline, className)}\n  />\n);\n"],"names":["jsx","cn","styles"],"mappings":";;;;;;;;AAIO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAA;AAAA,EACA,GAAG;AACL,CAAA,qBACEA,cAAA;AAAA,EAAC,MAAA;AAAA,EAAA;AAAA,IACE,GAAG,KAAA;AAAA,IACJ,SAAA,EAAWC,MAAA,CAAGC,8BAAA,CAAO,MAAA,EAAQ,SAAS;AAAA;AACxC;;;;"}

package/dist/cjs/components/CodeBlock/InlineCodeBlock.css

@@ -1,4 +1,4 @@
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. codeInline) */
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. codeInline) */
 
 .inline__jYdpl {
   padding: 0 var(--click-codeInline-space-x);
@@ -8,3 +8,4 @@
   color: var(--click-codeInline-color-text-default);
   font: var(--click-codeInline-typography-text-default);
 }
+}

package/dist/cjs/components/CodeBlock/index.cjs

@@ -71,44 +71,82 @@ const CodeBlock = ({
   const wrapElement = () => {
     setWrap((wrap2) => !wrap2);
   };
-  const CodeWithRef = (props2) => /* @__PURE__ */ jsxRuntime.jsx("code", { ...props2, className: cva.cn(CodeBlock_module.default["codeblock__content"], props2.className) });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, style: {
-    "--codeblock-numbers": numbersColor,
-    ...style
-  }, className: cva.cn(CodeBlock_module.default.codeblock, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CodeBlock_module.default["codeblock__button-container"], children: [
-      showWrapButton && /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { className: CodeBlock_module.default["codeblock__button"], icon: "document", onClick: wrapElement }),
-      /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { className: CodeBlock_module.default["codeblock__button"], style: {
-        "--codeblock-button": copied ? buttonStateColors.success : errorCopy ? buttonStateColors.danger : void 0
-      }, icon: copied ? "check" : errorCopy ? "warning" : "copy", onClick: copyCodeToClipboard })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactSyntaxHighlighter.Light, { language, style: customStyle, CodeTag: CodeWithRef, className: CodeBlock_module.default["codeblock__highlighter"], renderer: ({
-      rows,
-      stylesheet,
-      useInlineStyles
-    }) => {
-      return rows.map((row, index) => {
-        const children2 = row.children;
-        const lineNumberElement = children2?.shift();
-        if (lineNumberElement) {
-          row.children = [lineNumberElement, {
-            children: children2,
-            properties: {
-              className: []
+  const CodeWithRef = (props2) => /* @__PURE__ */ jsxRuntime.jsx(
+    "code",
+    {
+      ...props2,
+      className: cva.cn(CodeBlock_module.default["codeblock__content"], props2.className)
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...props,
+      style: { "--codeblock-numbers": numbersColor, ...style },
+      className: cva.cn(CodeBlock_module.default.codeblock, className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CodeBlock_module.default["codeblock__button-container"], children: [
+          showWrapButton && /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton.IconButton,
+            {
+              className: CodeBlock_module.default["codeblock__button"],
+              icon: "document",
+              onClick: wrapElement
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton.IconButton,
+            {
+              className: CodeBlock_module.default["codeblock__button"],
+              style: {
+                "--codeblock-button": copied ? buttonStateColors.success : errorCopy ? buttonStateColors.danger : void 0
+              },
+              icon: copied ? "check" : errorCopy ? "warning" : "copy",
+              onClick: copyCodeToClipboard
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactSyntaxHighlighter.Light,
+          {
+            language,
+            style: customStyle,
+            CodeTag: CodeWithRef,
+            className: CodeBlock_module.default["codeblock__highlighter"],
+            renderer: ({ rows, stylesheet, useInlineStyles }) => {
+              return rows.map((row, index) => {
+                const children2 = row.children;
+                const lineNumberElement = children2?.shift();
+                if (lineNumberElement) {
+                  row.children = [
+                    lineNumberElement,
+                    {
+                      children: children2,
+                      properties: {
+                        className: []
+                      },
+                      tagName: "span",
+                      type: "element"
+                    }
+                  ];
+                }
+                return reactSyntaxHighlighter.createElement({
+                  node: row,
+                  stylesheet,
+                  useInlineStyles,
+                  key: index
+                });
+              });
             },
-            tagName: "span",
-            type: "element"
-          }];
-        }
-        return reactSyntaxHighlighter.createElement({
-          node: row,
-          stylesheet,
-          useInlineStyles,
-          key: index
-        });
-      });
-    }, showLineNumbers, wrapLines: wrap || wrapLines, wrapLongLines: wrap || wrapLines, children })
-  ] });
+            showLineNumbers,
+            wrapLines: wrap || wrapLines,
+            wrapLongLines: wrap || wrapLines,
+            children
+          }
+        )
+      ]
+    }
+  );
 };
 
 exports.CodeBlock = CodeBlock;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState } from 'react';\nimport { Light as SyntaxHighlighter, createElement } from 'react-syntax-highlighter';\n\nimport { IconButton } from '@/components/IconButton';\n\nimport { cn } from '@/lib/cva';\nimport useColorStyle, { useButtonStateColors, useNumbersColor } from './useColorStyle';\nimport { CodeBlockProps } from './CodeBlock.types';\nimport styles from './CodeBlock.module.css';\n\n/* eslint-disable import/extensions */\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport tsx from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport plaintext from 'react-syntax-highlighter/dist/cjs/languages/hljs/plaintext.js';\n/* eslint-enable import/extensions */\n\nSyntaxHighlighter.registerLanguage('sql', sql.default || sql);\nSyntaxHighlighter.registerLanguage('bash', bash.default || bash);\nSyntaxHighlighter.registerLanguage('json', json.default || json);\nSyntaxHighlighter.registerLanguage('tsx', tsx.default || tsx);\nSyntaxHighlighter.registerLanguage('plaintext', plaintext.default || plaintext);\n\ninterface RendererNodeType {\n  type: 'element' | 'text';\n  value?: string | number | undefined;\n  tagName?: keyof React.JSX.IntrinsicElements | React.ComponentType | undefined;\n  properties?: { className: unknown[]; [key: string]: unknown };\n  children?: RendererNodeType[];\n}\ninterface CustomRendererProps {\n  rows: RendererNodeType[];\n  stylesheet: { [key: string]: React.CSSProperties };\n  useInlineStyles: boolean;\n}\n\nexport const CodeBlock = ({\n  children,\n  language,\n  theme,\n  showLineNumbers,\n  showWrapButton = false,\n  wrapLines = false,\n  onCopy,\n  onCopyError,\n  className,\n  style,\n  ...props\n}: CodeBlockProps) => {\n  const [copied, setCopied] = useState(false);\n  const [errorCopy, setErrorCopy] = useState(false);\n  const [wrap, setWrap] = useState(wrapLines);\n  const customStyle = useColorStyle(theme);\n  const numbersColor = useNumbersColor(theme);\n  const buttonStateColors = useButtonStateColors();\n\n  const copyCodeToClipboard = async () => {\n    try {\n      await navigator.clipboard.writeText(children);\n      if (typeof onCopy == 'function') {\n        onCopy(children);\n      }\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (error) {\n      let message = 'Unable to copy code';\n      if (error instanceof Error) {\n        message = error.message;\n      }\n      setErrorCopy(true);\n      if (typeof onCopyError === 'function') {\n        onCopyError(message);\n      }\n      setTimeout(() => setErrorCopy(false), 2000);\n    }\n  };\n  const wrapElement = () => {\n    setWrap(wrap => !wrap);\n  };\n\n  const CodeWithRef = (props: HTMLAttributes<HTMLElement>) => (\n    <code\n      {...props}\n      className={cn(styles['codeblock__content'], props.className)}\n    />\n  );\n  return (\n    <div\n      {...props}\n      style={{ '--codeblock-numbers': numbersColor, ...style } as React.CSSProperties}\n      className={cn(styles.codeblock, className)}\n    >\n      <div className={styles['codeblock__button-container']}>\n        {showWrapButton && (\n          <IconButton\n            className={styles['codeblock__button']}\n            icon=\"document\"\n            onClick={wrapElement}\n          />\n        )}\n        <IconButton\n          className={styles['codeblock__button']}\n          style={\n            {\n              '--codeblock-button': copied\n                ? buttonStateColors.success\n                : errorCopy\n                  ? buttonStateColors.danger\n                  : undefined,\n            } as React.CSSProperties\n          }\n          icon={copied ? 'check' : errorCopy ? 'warning' : 'copy'}\n          onClick={copyCodeToClipboard}\n        />\n      </div>\n      <SyntaxHighlighter\n        language={language}\n        style={customStyle}\n        CodeTag={CodeWithRef}\n        className={styles['codeblock__highlighter']}\n        renderer={({ rows, stylesheet, useInlineStyles }: CustomRendererProps) => {\n          return rows.map((row, index) => {\n            const children = row.children;\n            const lineNumberElement = children?.shift();\n\n            /**\n             * We will take current structure of the rows and rebuild it\n             * according to the suggestion here https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/376#issuecomment-1246115899\n             */\n            if (lineNumberElement) {\n              row.children = [\n                lineNumberElement,\n                {\n                  children,\n                  properties: {\n                    className: [],\n                  },\n                  tagName: 'span',\n                  type: 'element',\n                },\n              ];\n            }\n\n            return createElement({\n              node: row,\n              stylesheet,\n              useInlineStyles,\n              key: index,\n            });\n          });\n        }}\n        showLineNumbers={showLineNumbers}\n        wrapLines={wrap || wrapLines}\n        wrapLongLines={wrap || wrapLines}\n      >\n        {children}\n      </SyntaxHighlighter>\n    </div>\n  );\n};\n"],"names":["SyntaxHighlighter","registerLanguage","sql","default","bash","json","tsx","plaintext","CodeBlock","children","language","theme","showLineNumbers","showWrapButton","wrapLines","onCopy","onCopyError","className","style","props","copied","setCopied","useState","errorCopy","setErrorCopy","wrap","setWrap","customStyle","useColorStyle","numbersColor","useNumbersColor","buttonStateColors","useButtonStateColors","copyCodeToClipboard","navigator","clipboard","writeText","setTimeout","error","message","Error","wrapElement","CodeWithRef","jsx","cn","styles","jsxs","codeblock","IconButton","success","danger","undefined","rows","stylesheet","useInlineStyles","map","row","index","lineNumberElement","shift","properties","tagName","type","createElement","node","key"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState } from 'react';\nimport { Light as SyntaxHighlighter, createElement } from 'react-syntax-highlighter';\n\nimport { IconButton } from '@/components/IconButton';\n\nimport { cn } from '@/lib/cva';\nimport useColorStyle, { useButtonStateColors, useNumbersColor } from './useColorStyle';\nimport { CodeBlockProps } from './CodeBlock.types';\nimport styles from './CodeBlock.module.css';\n\n/* eslint-disable import/extensions */\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport tsx from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport plaintext from 'react-syntax-highlighter/dist/cjs/languages/hljs/plaintext.js';\n/* eslint-enable import/extensions */\n\nSyntaxHighlighter.registerLanguage('sql', sql.default || sql);\nSyntaxHighlighter.registerLanguage('bash', bash.default || bash);\nSyntaxHighlighter.registerLanguage('json', json.default || json);\nSyntaxHighlighter.registerLanguage('tsx', tsx.default || tsx);\nSyntaxHighlighter.registerLanguage('plaintext', plaintext.default || plaintext);\n\ninterface RendererNodeType {\n  type: 'element' | 'text';\n  value?: string | number | undefined;\n  tagName?: keyof React.JSX.IntrinsicElements | React.ComponentType | undefined;\n  properties?: { className: unknown[]; [key: string]: unknown };\n  children?: RendererNodeType[];\n}\ninterface CustomRendererProps {\n  rows: RendererNodeType[];\n  stylesheet: { [key: string]: React.CSSProperties };\n  useInlineStyles: boolean;\n}\n\nexport const CodeBlock = ({\n  children,\n  language,\n  theme,\n  showLineNumbers,\n  showWrapButton = false,\n  wrapLines = false,\n  onCopy,\n  onCopyError,\n  className,\n  style,\n  ...props\n}: CodeBlockProps) => {\n  const [copied, setCopied] = useState(false);\n  const [errorCopy, setErrorCopy] = useState(false);\n  const [wrap, setWrap] = useState(wrapLines);\n  const customStyle = useColorStyle(theme);\n  const numbersColor = useNumbersColor(theme);\n  const buttonStateColors = useButtonStateColors();\n\n  const copyCodeToClipboard = async () => {\n    try {\n      await navigator.clipboard.writeText(children);\n      if (typeof onCopy == 'function') {\n        onCopy(children);\n      }\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (error) {\n      let message = 'Unable to copy code';\n      if (error instanceof Error) {\n        message = error.message;\n      }\n      setErrorCopy(true);\n      if (typeof onCopyError === 'function') {\n        onCopyError(message);\n      }\n      setTimeout(() => setErrorCopy(false), 2000);\n    }\n  };\n  const wrapElement = () => {\n    setWrap(wrap => !wrap);\n  };\n\n  const CodeWithRef = (props: HTMLAttributes<HTMLElement>) => (\n    <code\n      {...props}\n      className={cn(styles['codeblock__content'], props.className)}\n    />\n  );\n  return (\n    <div\n      {...props}\n      style={{ '--codeblock-numbers': numbersColor, ...style } as React.CSSProperties}\n      className={cn(styles.codeblock, className)}\n    >\n      <div className={styles['codeblock__button-container']}>\n        {showWrapButton && (\n          <IconButton\n            className={styles['codeblock__button']}\n            icon=\"document\"\n            onClick={wrapElement}\n          />\n        )}\n        <IconButton\n          className={styles['codeblock__button']}\n          style={\n            {\n              '--codeblock-button': copied\n                ? buttonStateColors.success\n                : errorCopy\n                  ? buttonStateColors.danger\n                  : undefined,\n            } as React.CSSProperties\n          }\n          icon={copied ? 'check' : errorCopy ? 'warning' : 'copy'}\n          onClick={copyCodeToClipboard}\n        />\n      </div>\n      <SyntaxHighlighter\n        language={language}\n        style={customStyle}\n        CodeTag={CodeWithRef}\n        className={styles['codeblock__highlighter']}\n        renderer={({ rows, stylesheet, useInlineStyles }: CustomRendererProps) => {\n          return rows.map((row, index) => {\n            const children = row.children;\n            const lineNumberElement = children?.shift();\n\n            /**\n             * We will take current structure of the rows and rebuild it\n             * according to the suggestion here https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/376#issuecomment-1246115899\n             */\n            if (lineNumberElement) {\n              row.children = [\n                lineNumberElement,\n                {\n                  children,\n                  properties: {\n                    className: [],\n                  },\n                  tagName: 'span',\n                  type: 'element',\n                },\n              ];\n            }\n\n            return createElement({\n              node: row,\n              stylesheet,\n              useInlineStyles,\n              key: index,\n            });\n          });\n        }}\n        showLineNumbers={showLineNumbers}\n        wrapLines={wrap || wrapLines}\n        wrapLongLines={wrap || wrapLines}\n      >\n        {children}\n      </SyntaxHighlighter>\n    </div>\n  );\n};\n"],"names":["SyntaxHighlighter","sql","bash","json","tsx","plaintext","useState","useColorStyle","useNumbersColor","useButtonStateColors","wrap","props","jsx","cn","styles","jsxs","IconButton","children","createElement"],"mappings":"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"}

package/dist/cjs/components/CodeBlock/useColorStyle.cjs

@@ -2,10 +2,10 @@
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
-const styledComponents = require('styled-components');
+const ThemeContext = require('../../theme/ThemeContext.cjs');
 
 const useColorStyle = (defaultTheme) => {
-  const theme = styledComponents.useTheme();
+  const theme = ThemeContext.useTheme();
   const inheritedThemeName = theme.name;
   const themeName = !defaultTheme ? inheritedThemeName : defaultTheme;
   const codeTheme = theme.click.codeblock[`${themeName}Mode`].color;
@@ -124,13 +124,13 @@ const useColorStyle = (defaultTheme) => {
   };
 };
 const useNumbersColor = (defaultTheme) => {
-  const theme = styledComponents.useTheme();
+  const theme = ThemeContext.useTheme();
   const inheritedThemeName = theme.name;
   const themeName = !defaultTheme ? inheritedThemeName : defaultTheme;
   return theme.click.codeblock[`${themeName}Mode`].color.numbers.default;
 };
 const useButtonStateColors = () => {
-  const theme = styledComponents.useTheme();
+  const theme = ThemeContext.useTheme();
   return {
     success: theme.click.alert.color.text.success,
     danger: theme.click.alert.color.text.danger

package/dist/cjs/components/CodeBlock/useColorStyle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useColorStyle.cjs","sources":["../../../../src/components/CodeBlock/useColorStyle.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { useTheme } from 'styled-components';\nimport { CodeThemeType } from './CodeBlock.types';\n\nconst useColorStyle = (defaultTheme?: CodeThemeType): Record<string, CSSProperties> => {\n  const theme = useTheme();\n  const inheritedThemeName = theme.name as CodeThemeType;\n  const themeName = !defaultTheme ? inheritedThemeName : defaultTheme;\n  const codeTheme = theme.click.codeblock[`${themeName}Mode`].color;\n\n  return {\n    hljs: {\n      display: 'block',\n      overflowX: 'auto',\n      padding: `${theme.click.codeblock.space.y} ${theme.click.codeblock.space.x}`,\n      color: codeTheme.text.default,\n      background: codeTheme.background.default,\n      borderRadius: theme.click.codeblock.radii.all,\n      font: theme.click.codeblock.typography.text.default,\n    },\n    'hljs-comment': {\n      color: themeName === 'dark' ? '#999999' : '#656e77',\n    },\n    'hljs-keyword': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-selector-tag': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-meta-keyword': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-doctag': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-section': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-selector-class': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-meta': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-selector-pseudo': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-attr': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-attribute': {\n      color: themeName === 'dark' ? '#c59bc1' : '#803378',\n    },\n    'hljs-name': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-type': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-number': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-selector-id': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-quote': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-template-tag': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-built_in': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-title': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-literal': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-string': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-regexp': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-symbol': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-variable': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-template-variable': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-link': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-selector-attr': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-meta-string': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-bullet': {\n      color: themeName === 'dark' ? '#cccccc' : '#535a60',\n    },\n    'hljs-code': {\n      color: themeName === 'dark' ? '#cccccc' : '#535a60',\n    },\n    'hljs-deletion': {\n      color: themeName === 'dark' ? '#de7176' : '#c02d2e',\n    },\n    'hljs-addition': {\n      color: themeName === 'dark' ? '#76c490' : '#2f6f44',\n    },\n    'hljs-emphasis': {\n      fontStyle: 'italic',\n    },\n    'hljs-strong': {\n      fontWeight: 'bold',\n    },\n  };\n};\n\nexport const useNumbersColor = (defaultTheme?: CodeThemeType): string => {\n  const theme = useTheme();\n  const inheritedThemeName = theme.name as CodeThemeType;\n  const themeName = !defaultTheme ? inheritedThemeName : defaultTheme;\n  return theme.click.codeblock[`${themeName}Mode`].color.numbers.default;\n};\n\nexport const useButtonStateColors = (): { success: string; danger: string } => {\n  const theme = useTheme();\n  return {\n    success: theme.click.alert.color.text.success,\n    danger: theme.click.alert.color.text.danger,\n  };\n};\n\nexport default useColorStyle;\n"],"names":["useColorStyle","defaultTheme","theme","useTheme","inheritedThemeName","name","themeName","codeTheme","click","codeblock","color","hljs","display","overflowX","padding","space","y","x","text","default","background","borderRadius","radii","all","font","typography","fontStyle","fontWeight","useNumbersColor","numbers","useButtonStateColors","success","alert","danger"],"mappings":"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"}
+{"version":3,"file":"useColorStyle.cjs","sources":["../../../../src/components/CodeBlock/useColorStyle.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { useTheme } from '@/theme/ThemeContext';\nimport { CodeThemeType } from './CodeBlock.types';\n\nconst useColorStyle = (defaultTheme?: CodeThemeType): Record<string, CSSProperties> => {\n  const theme = useTheme();\n  const inheritedThemeName = theme.name as CodeThemeType;\n  const themeName = !defaultTheme ? inheritedThemeName : defaultTheme;\n  const codeTheme = theme.click.codeblock[`${themeName}Mode`].color;\n\n  return {\n    hljs: {\n      display: 'block',\n      overflowX: 'auto',\n      padding: `${theme.click.codeblock.space.y} ${theme.click.codeblock.space.x}`,\n      color: codeTheme.text.default,\n      background: codeTheme.background.default,\n      borderRadius: theme.click.codeblock.radii.all,\n      font: theme.click.codeblock.typography.text.default,\n    },\n    'hljs-comment': {\n      color: themeName === 'dark' ? '#999999' : '#656e77',\n    },\n    'hljs-keyword': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-selector-tag': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-meta-keyword': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-doctag': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-section': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-selector-class': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-meta': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-selector-pseudo': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-attr': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-attribute': {\n      color: themeName === 'dark' ? '#c59bc1' : '#803378',\n    },\n    'hljs-name': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-type': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-number': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-selector-id': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-quote': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-template-tag': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-built_in': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-title': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-literal': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-string': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-regexp': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-symbol': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-variable': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-template-variable': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-link': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-selector-attr': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-meta-string': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-bullet': {\n      color: themeName === 'dark' ? '#cccccc' : '#535a60',\n    },\n    'hljs-code': {\n      color: themeName === 'dark' ? '#cccccc' : '#535a60',\n    },\n    'hljs-deletion': {\n      color: themeName === 'dark' ? '#de7176' : '#c02d2e',\n    },\n    'hljs-addition': {\n      color: themeName === 'dark' ? '#76c490' : '#2f6f44',\n    },\n    'hljs-emphasis': {\n      fontStyle: 'italic',\n    },\n    'hljs-strong': {\n      fontWeight: 'bold',\n    },\n  };\n};\n\nexport const useNumbersColor = (defaultTheme?: CodeThemeType): string => {\n  const theme = useTheme();\n  const inheritedThemeName = theme.name as CodeThemeType;\n  const themeName = !defaultTheme ? inheritedThemeName : defaultTheme;\n  return theme.click.codeblock[`${themeName}Mode`].color.numbers.default;\n};\n\nexport const useButtonStateColors = (): { success: string; danger: string } => {\n  const theme = useTheme();\n  return {\n    success: theme.click.alert.color.text.success,\n    danger: theme.click.alert.color.text.danger,\n  };\n};\n\nexport default useColorStyle;\n"],"names":["useTheme"],"mappings":"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"}

package/dist/cjs/components/Collapsible/Collapsible.css

@@ -1,4 +1,4 @@
-.collapsible__8jmKP {
+@layer clickui {.collapsible__8jmKP {
   width: 100%;
 }
 
@@ -77,3 +77,4 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+}

package/dist/cjs/components/Collapsible/IconWrapper.cjs

@@ -14,9 +14,21 @@ const IconWrapper = ({
   children
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cva.cn(Collapsible_module.default.collapsible__label), children: [
-    icon && iconDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" }),
+    icon && iconDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(
+      Icon.Icon,
+      {
+        name: icon,
+        size: "sm"
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: cva.cn(Collapsible_module.default.collapsible__ellipsis), children }),
-    icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" })
+    icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(
+      Icon.Icon,
+      {
+        name: icon,
+        size: "sm"
+      }
+    )
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"IconWrapper.cjs","sources":["../../../../src/components/Collapsible/IconWrapper.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport type { ImageName } from '@/components/Icon';\n\nimport { cn } from '@/lib/cva';\nimport styles from './Collapsible.module.css';\n\nexport const IconWrapper = ({\n  icon,\n  iconDir = 'start',\n  children,\n}: {\n  // TODO: The consumer app seem to expect to use other assets\n  // this needs to be investigated why it had type IconName\n  icon?: ImageName;\n  iconDir?: HorizontalDirection;\n  children: ReactNode;\n}) => {\n  return (\n    <span className={cn(styles.collapsible__label)}>\n      {icon && iconDir === 'start' && (\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      )}\n      <span className={cn(styles.collapsible__ellipsis)}>{children}</span>\n      {icon && iconDir === 'end' && (\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      )}\n    </span>\n  );\n};\n"],"names":["IconWrapper","icon","iconDir","children","cn","styles","collapsible__label","jsx","Icon","collapsible__ellipsis"],"mappings":";;;;;;;;;AAQO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC,IAAAA;AAAAA,EACAC,OAAAA,GAAU,OAAA;AAAA,EACVC;AAOF,CAAA,KAAM;AACJ,EAAA,uCACG,MAAA,EAAA,EAAK,SAAA,EAAWC,MAAAA,CAAGC,0BAAAA,CAAOC,kBAAkB,CAAA,EAC1CL,QAAAA,EAAAA;AAAAA,IAAAA,IAAAA,IAAQC,YAAY,OAAA,oBACnBK,cAAA,CAACC,aACC,IAAA,EAAMP,IAAAA,EACN,MAAK,IAAA,EAAI,CAAA;AAAA,mCAGZ,MAAA,EAAA,EAAK,SAAA,EAAWG,OAAGC,0BAAAA,CAAOI,qBAAqB,GAAIN,QAAAA,EAAS,CAAA;AAAA,IAC5DF,IAAAA,IAAQC,YAAY,KAAA,oBACnBK,cAAA,CAACC,aACC,IAAA,EAAMP,IAAAA,EACN,MAAK,IAAA,EAAI;AAAA,GAAA,EAGf,CAAA;AAEJ;;;;"}
+{"version":3,"file":"IconWrapper.cjs","sources":["../../../../src/components/Collapsible/IconWrapper.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport type { ImageName } from '@/components/Icon';\n\nimport { cn } from '@/lib/cva';\nimport styles from './Collapsible.module.css';\n\nexport const IconWrapper = ({\n  icon,\n  iconDir = 'start',\n  children,\n}: {\n  // TODO: The consumer app seem to expect to use other assets\n  // this needs to be investigated why it had type IconName\n  icon?: ImageName;\n  iconDir?: HorizontalDirection;\n  children: ReactNode;\n}) => {\n  return (\n    <span className={cn(styles.collapsible__label)}>\n      {icon && iconDir === 'start' && (\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      )}\n      <span className={cn(styles.collapsible__ellipsis)}>{children}</span>\n      {icon && iconDir === 'end' && (\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      )}\n    </span>\n  );\n};\n"],"names":["cn","styles","jsx","Icon"],"mappings":";;;;;;;;;AAQO,MAAM,cAAc,CAAC;AAAA,EAC1B,IAAA;AAAA,EACA,OAAA,GAAU,OAAA;AAAA,EACV;AACF,CAAA,KAMM;AACJ,EAAA,uCACG,MAAA,EAAA,EAAK,SAAA,EAAWA,MAAA,CAAGC,0BAAA,CAAO,kBAAkB,CAAA,EAC1C,QAAA,EAAA;AAAA,IAAA,IAAA,IAAQ,YAAY,OAAA,oBACnBC,cAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,IAAA;AAAA,QACN,IAAA,EAAK;AAAA;AAAA,KACP;AAAA,mCAED,MAAA,EAAA,EAAK,SAAA,EAAWH,OAAGC,0BAAA,CAAO,qBAAqB,GAAI,QAAA,EAAS,CAAA;AAAA,IAC5D,IAAA,IAAQ,YAAY,KAAA,oBACnBC,cAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,IAAA;AAAA,QACN,IAAA,EAAK;AAAA;AAAA;AACP,GAAA,EAEJ,CAAA;AAEJ;;;;"}