@clickhouse/click-ui 0.7.0 → 0.9.0

package/dist/cjs/components/Assets/Icons/Horizontal-Loading.cjs

@@ -1,58 +1,22 @@
+require("./Loaders.css");
 'use strict';
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
+const jsxRuntime = require('react/jsx-runtime');
+const cva = require('../../../lib/cva.cjs');
 const DotsHorizontal = require('./Dots-Horizontal.cjs');
-const styledComponents = require('styled-components');
+const Loaders_module = require('./Loaders.module.css.cjs');
 
-const animationCircle1 = styledComponents.keyframes`
-  0 {
-    r: 0;
-  }
-  30% {
-    r: 1.5;
-  }
-  60% {
-    r: 0;
-  }
-  100% {
-    r: 0;
-  }
-`;
-const animationCircle2 = styledComponents.keyframes`
-  0 {
-    r: 0;
-  }
-  20% {
-    r: 0;
-  }
-  40% {
-    r: 1.5;
-  }
-  80% {
-    r: 0;
-  }
-  100% {
-   r: 0
-  }
-`;
-const animationCircle3 = styledComponents.keyframes`
-  0 {
-    r: 0;
-  }
-  40% {
-    r: 0;
-  }
-  80% {
-    r: 1.5;
-  }
-  100% {
-   r: 0
-  }
-`;
-const Horizontal_Loading = styledComponents.styled(DotsHorizontal.default).withConfig({
-  componentId: "sc-52zndn-0"
-})(["circle{animation-name:horizontal-loading;animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;-webkit-animation-name:horizontal-loading;-webkit-animation-duration:1.5s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:horizontal-loading;-moz-animation-duration:1.5s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;&:nth-child(1){animation-name:", ";-webkit-animation-name:", ";-moz-animation-name:", ";}&:nth-child(2){animation-name:", ";-webkit-animation-name:", ";-moz-animation-name:", ";}&:nth-child(3){animation-name:", ";-webkit-animation-name:", ";-moz-animation-name:", ";}}"], animationCircle1, animationCircle1, animationCircle1, animationCircle2, animationCircle2, animationCircle2, animationCircle3, animationCircle3, animationCircle3);
+const Horizontal_Loading = ({
+  className,
+  // `theme` is destructured out so it is not forwarded onto the DOM <svg>: the
+  // original wrapped this icon in `styled(Dots_Horizontal)`, which consumed the
+  // `theme` prop and never rendered it as an attribute.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  theme,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(DotsHorizontal.default, { ...props, className: cva.cn(Loaders_module.default["horizontal-loading"], className) });
 
 exports.default = Horizontal_Loading;
 //# sourceMappingURL=Horizontal-Loading.cjs.map

package/dist/cjs/components/Assets/Icons/Horizontal-Loading.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Horizontal-Loading.cjs","sources":["../../../../../src/components/Assets/Icons/Horizontal-Loading.tsx"],"sourcesContent":["import Dots_Horizontal from './Dots-Horizontal';\nimport { keyframes, styled } from 'styled-components';\n\nconst animationCircle1 = keyframes`\n  0 {\n    r: 0;\n  }\n  30% {\n    r: 1.5;\n  }\n  60% {\n    r: 0;\n  }\n  100% {\n    r: 0;\n  }\n`;\nconst animationCircle2 = keyframes`\n  0 {\n    r: 0;\n  }\n  20% {\n    r: 0;\n  }\n  40% {\n    r: 1.5;\n  }\n  80% {\n    r: 0;\n  }\n  100% {\n   r: 0\n  }\n`;\nconst animationCircle3 = keyframes`\n  0 {\n    r: 0;\n  }\n  40% {\n    r: 0;\n  }\n  80% {\n    r: 1.5;\n  }\n  100% {\n   r: 0\n  }\n`;\n\nconst Horizontal_Loading = styled(Dots_Horizontal)`\n  circle {\n    animation-name: horizontal-loading;\n    animation-duration: 1.5s;\n    animation-iteration-count: infinite;\n    animation-timing-function: linear;\n    -webkit-animation-name: horizontal-loading;\n    -webkit-animation-duration: 1.5s;\n    -webkit-animation-iteration-count: infinite;\n    -webkit-animation-timing-function: linear;\n    -moz-animation-name: horizontal-loading;\n    -moz-animation-duration: 1.5s;\n    -moz-animation-iteration-count: infinite;\n    -moz-animation-timing-function: linear;\n    &:nth-child(1) {\n      animation-name: ${animationCircle1};\n      -webkit-animation-name: ${animationCircle1};\n      -moz-animation-name: ${animationCircle1};\n    }\n    &:nth-child(2) {\n      animation-name: ${animationCircle2};\n      -webkit-animation-name: ${animationCircle2};\n      -moz-animation-name: ${animationCircle2};\n    }\n    &:nth-child(3) {\n      animation-name: ${animationCircle3};\n      -webkit-animation-name: ${animationCircle3};\n      -moz-animation-name: ${animationCircle3};\n    }\n  }\n`;\n\nexport default Horizontal_Loading;\n"],"names":["animationCircle1","keyframes","animationCircle2","animationCircle3","Horizontal_Loading","styled","Dots_Horizontal","withConfig","componentId"],"mappings":";;;;;;;AAGA,MAAMA,gBAAAA,GAAmBC,0BAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAAAA;AAczB,MAAMC,gBAAAA,GAAmBD,0BAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAAAA;AAiBzB,MAAME,gBAAAA,GAAmBF,0BAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAAAA;AAezB,MAAMG,kBAAAA,GAAqBC,uBAAAA,CAAOC,sBAAe,CAAA,CAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,qdAAA,EAAA,0BAAA,EAAA,yBAAA,kCAAA,EAAA,0BAAA,EAAA,yBAAA,kCAAA,EAAA,0BAAA,EAAA,yBAAA,KAAA,CAAA,EAe1BR,kBACQA,gBAAAA,EACHA,gBAAAA,EAGLE,kBACQA,gBAAAA,EACHA,gBAAAA,EAGLC,gBAAAA,EACQA,gBAAAA,EACHA,gBAAgB;;;;"}
+{"version":3,"file":"Horizontal-Loading.cjs","sources":["../../../../../src/components/Assets/Icons/Horizontal-Loading.tsx"],"sourcesContent":["import type { SVGAssetProps } from '@/types';\nimport { cn } from '@/lib/cva';\nimport Dots_Horizontal from './Dots-Horizontal';\nimport styles from './Loaders.module.css';\n\nconst Horizontal_Loading = ({\n  className,\n  // `theme` is destructured out so it is not forwarded onto the DOM <svg>: the\n  // original wrapped this icon in `styled(Dots_Horizontal)`, which consumed the\n  // `theme` prop and never rendered it as an attribute.\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  theme,\n  ...props\n}: SVGAssetProps) => (\n  <Dots_Horizontal\n    {...props}\n    className={cn(styles['horizontal-loading'], className)}\n  />\n);\n\nexport default Horizontal_Loading;\n"],"names":["Horizontal_Loading","className","theme","props","jsx","Dots_Horizontal","cn","styles"],"mappings":";;;;;;;;;AAKA,MAAMA,qBAAqBA,CAAC;AAAA,EAC1BC,SAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKAC,KAAAA;AAAAA,EACA,GAAGC;AACU,CAAA,qBACbC,cAAA,CAACC,sBAAA,EAAA,EACC,GAAIF,KAAAA,EACJ,SAAA,EAAWG,OAAGC,sBAAAA,CAAO,oBAAoB,CAAA,EAAGN,SAAS,CAAA,EAAE;;;;"}

package/dist/cjs/components/Assets/Icons/Loaders.css

@@ -0,0 +1,94 @@
+.loading__5BGdj {
+  transform: scaleX(-1);
+}
+
+.loading-animated__hAN7V {
+  animation: loaders-spin__bMTqx 1s infinite linear;
+}
+
+.horizontal-loading__3ooCL circle {
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  animation-name: horizontal-loading__3ooCL;
+  animation-timing-function: linear;
+}
+
+.horizontal-loading__3ooCL circle:nth-child(1) {
+  animation-name: loaders-horizontal-circle-1__GJ-tO;
+}
+
+.horizontal-loading__3ooCL circle:nth-child(2) {
+  animation-name: loaders-horizontal-circle-2__QOcb2;
+}
+
+.horizontal-loading__3ooCL circle:nth-child(3) {
+  animation-name: loaders-horizontal-circle-3__R51yU;
+}
+
+@keyframes loaders-spin__bMTqx {
+  from {
+    transform: rotate(0deg) scaleX(-1);
+  }
+
+  to {
+    transform: rotate(360deg) scaleX(-1);
+  }
+}
+
+@keyframes loaders-horizontal-circle-1__GJ-tO {
+  0 {
+    r: 0;
+  }
+
+  30% {
+    r: 1.5;
+  }
+
+  60% {
+    r: 0;
+  }
+
+  100% {
+    r: 0;
+  }
+}
+
+@keyframes loaders-horizontal-circle-2__QOcb2 {
+  0 {
+    r: 0;
+  }
+
+  20% {
+    r: 0;
+  }
+
+  40% {
+    r: 1.5;
+  }
+
+  80% {
+    r: 0;
+  }
+
+  100% {
+    r: 0;
+  }
+}
+
+@keyframes loaders-horizontal-circle-3__R51yU {
+  0 {
+    r: 0;
+  }
+
+  40% {
+    r: 0;
+  }
+
+  80% {
+    r: 1.5;
+  }
+
+  100% {
+    r: 0;
+  }
+}

package/dist/cjs/components/Assets/Icons/Loaders.module.css.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const loading = "loading__5BGdj";
+const styles = {
+	loading: loading,
+	"loading-animated": "loading-animated__hAN7V",
+	"horizontal-loading": "horizontal-loading__3ooCL"};
+
+exports.default = styles;
+exports.loading = loading;
+//# sourceMappingURL=Loaders.module.css.cjs.map

package/dist/cjs/components/Assets/Icons/Loaders.module.css.cjs.map

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

package/dist/cjs/components/Assets/Icons/Loading-Animated.cjs

@@ -1,21 +1,17 @@
+require("./Loaders.css");
 'use strict';
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
-const styledComponents = require('styled-components');
+const jsxRuntime = require('react/jsx-runtime');
+const cva = require('../../../lib/cva.cjs');
 const Loading = require('./Loading.cjs');
+const Loaders_module = require('./Loaders.module.css.cjs');
 
-const spin = styledComponents.keyframes`
-  from {
-    transform: rotate(0deg) scaleX(-1);
-  }
-  to {
-    transform: rotate(360deg) scaleX(-1);
-  }
-`;
-const Loading_Animated = styledComponents.styled(Loading.default).withConfig({
-  componentId: "sc-1ia82rw-0"
-})(["animation:", " 1s infinite linear;"], spin);
+const Loading_Animated = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(Loading.default, { ...props, className: cva.cn(Loaders_module.default["loading-animated"], className) });
 
 exports.default = Loading_Animated;
 //# sourceMappingURL=Loading-Animated.cjs.map

package/dist/cjs/components/Assets/Icons/Loading-Animated.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Loading-Animated.cjs","sources":["../../../../../src/components/Assets/Icons/Loading-Animated.tsx"],"sourcesContent":["import { keyframes, styled } from 'styled-components';\nimport Loading from './Loading';\n\nconst spin = keyframes`\n  from {\n    transform: rotate(0deg) scaleX(-1);\n  }\n  to {\n    transform: rotate(360deg) scaleX(-1);\n  }\n`;\n\nconst Loading_Animated = styled(Loading)`\n  animation: ${spin} 1s infinite linear;\n`;\n\nexport default Loading_Animated;\n"],"names":["spin","keyframes","Loading_Animated","styled","Loading","withConfig","componentId"],"mappings":";;;;;;;AAGA,MAAMA,IAAAA,GAAOC,0BAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAAAA;AASb,MAAMC,gBAAAA,GAAmBC,uBAAAA,CAAOC,eAAO,CAAA,CAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,YAAA,EAAA,sBAAA,GACzBN,IAAI;;;;"}
+{"version":3,"file":"Loading-Animated.cjs","sources":["../../../../../src/components/Assets/Icons/Loading-Animated.tsx"],"sourcesContent":["import type { SVGAssetProps } from '@/types';\nimport { cn } from '@/lib/cva';\nimport Loading from './Loading';\nimport styles from './Loaders.module.css';\n\nconst Loading_Animated = ({ className, ...props }: SVGAssetProps) => (\n  <Loading\n    {...props}\n    className={cn(styles['loading-animated'], className)}\n  />\n);\n\nexport default Loading_Animated;\n"],"names":["Loading_Animated","className","props","jsx","Loading","cn","styles"],"mappings":";;;;;;;;;AAKA,MAAMA,mBAAmBA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAAW,GAAGC;AAAqB,CAAA,qBAC7DC,cAAA,CAACC,eAAA,EAAA,EACC,GAAIF,KAAAA,EACJ,SAAA,EAAWG,OAAGC,sBAAAA,CAAO,kBAAkB,CAAA,EAAGL,SAAS,CAAA,EAAE;;;;"}

package/dist/cjs/components/Assets/Icons/Loading.cjs

@@ -1,19 +1,26 @@
+require("./Loaders.css");
 'use strict';
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
+const cva = require('../../../lib/cva.cjs');
+const Loaders_module = require('./Loaders.module.css.cjs');
 
-const Loading = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
+const Loading = ({
+  className,
+  // `theme` is destructured out so it is not forwarded onto the DOM <svg>: the
+  // original wrapped this icon in `styled(Loading)`, which consumed the `theme`
+  // prop and never rendered it as an attribute.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  theme,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, className: cva.cn(Loaders_module.default.loading, className), children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.25, d: "M7.625 8.875H4.5V5.75" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19.5 12A7.495 7.495 0 0 0 5.188 8.875" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.25, d: "M16.375 15.125H19.5v3.125" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4.5 12a7.495 7.495 0 0 0 14.312 3.125" })
 ] });
-const LoadingFlipped = styledComponents.styled(Loading).withConfig({
-  componentId: "sc-1jt3d9w-0"
-})(["transform:scaleX(-1);"]);
 
-exports.default = LoadingFlipped;
+exports.default = Loading;
 //# sourceMappingURL=Loading.cjs.map

package/dist/cjs/components/Assets/Icons/Loading.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.cjs","sources":["../../../../../src/components/Assets/Icons/Loading.tsx"],"sourcesContent":["import type { SVGAssetProps } from '@/types';\nimport { styled } from 'styled-components';\n\nconst Loading = (props: SVGAssetProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={24}\n    height={24}\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    {...props}\n  >\n    <path\n      stroke=\"#161517\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.25}\n      d=\"M7.625 8.875H4.5V5.75\"\n    />\n    <path\n      stroke=\"#161517\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M19.5 12A7.495 7.495 0 0 0 5.188 8.875\"\n    />\n    <path\n      stroke=\"#161517\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.25}\n      d=\"M16.375 15.125H19.5v3.125\"\n    />\n    <path\n      stroke=\"#161517\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M4.5 12a7.495 7.495 0 0 0 14.312 3.125\"\n    />\n  </svg>\n);\n\nconst LoadingFlipped = styled(Loading)`\n  transform: scaleX(-1);\n`;\nexport default LoadingFlipped;\n"],"names":["Loading","props","jsxs","jsx","LoadingFlipped","styled","withConfig","componentId"],"mappings":";;;;;;;AAGA,MAAMA,UAAUA,CAACC,KAAAA,qBACfC,eAAA,CAAC,KAAA,EAAA,EACC,OAAM,4BAAA,EACN,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,IACR,OAAA,EAAQ,WAAA,EACR,IAAA,EAAK,MAAA,EACL,GAAID,KAAAA,EAEJ,QAAA,EAAA;AAAA,kBAAAE,cAAA,CAAC,MAAA,EAAA,EACC,MAAA,EAAO,SAAA,EACP,aAAA,EAAc,OAAA,EACd,gBAAe,OAAA,EACf,WAAA,EAAa,IAAA,EACb,CAAA,EAAE,uBAAA,EAAuB,CAAA;AAAA,kBAE3BA,cAAA,CAAC,MAAA,EAAA,EACC,MAAA,EAAO,SAAA,EACP,aAAA,EAAc,OAAA,EACd,cAAA,EAAe,OAAA,EACf,WAAA,EAAa,GAAA,EACb,CAAA,EAAE,wCAAA,EAAwC,CAAA;AAAA,kBAE5CA,cAAA,CAAC,MAAA,EAAA,EACC,MAAA,EAAO,SAAA,EACP,aAAA,EAAc,OAAA,EACd,cAAA,EAAe,OAAA,EACf,WAAA,EAAa,IAAA,EACb,CAAA,EAAE,2BAAA,EAA2B,CAAA;AAAA,kBAE/BA,cAAA,CAAC,MAAA,EAAA,EACC,MAAA,EAAO,SAAA,EACP,aAAA,EAAc,OAAA,EACd,cAAA,EAAe,OAAA,EACf,WAAA,EAAa,GAAA,EACb,CAAA,EAAE,wCAAA,EAAwC;AAAA,CAAA,EAE9C,CAAA;AAGF,MAAMC,cAAAA,GAAiBC,uBAAAA,CAAOL,OAAO,CAAA,CAACM,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,uBAAA,CAAA;;;;"}
+{"version":3,"file":"Loading.cjs","sources":["../../../../../src/components/Assets/Icons/Loading.tsx"],"sourcesContent":["import type { SVGAssetProps } from '@/types';\nimport { cn } from '@/lib/cva';\nimport styles from './Loaders.module.css';\n\nconst Loading = ({\n  className,\n  // `theme` is destructured out so it is not forwarded onto the DOM <svg>: the\n  // original wrapped this icon in `styled(Loading)`, which consumed the `theme`\n  // prop and never rendered it as an attribute.\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  theme,\n  ...props\n}: SVGAssetProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={24}\n    height={24}\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    {...props}\n    className={cn(styles.loading, className)}\n  >\n    <path\n      stroke=\"#161517\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.25}\n      d=\"M7.625 8.875H4.5V5.75\"\n    />\n    <path\n      stroke=\"#161517\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M19.5 12A7.495 7.495 0 0 0 5.188 8.875\"\n    />\n    <path\n      stroke=\"#161517\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.25}\n      d=\"M16.375 15.125H19.5v3.125\"\n    />\n    <path\n      stroke=\"#161517\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M4.5 12a7.495 7.495 0 0 0 14.312 3.125\"\n    />\n  </svg>\n);\n\nexport default Loading;\n"],"names":["Loading","className","theme","props","cn","styles","loading","jsx"],"mappings":";;;;;;;;AAIA,MAAMA,UAAUA,CAAC;AAAA,EACfC,SAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKAC,KAAAA;AAAAA,EACA,GAAGC;AACU,CAAA,qCACZ,KAAA,EAAA,EACC,KAAA,EAAM,8BACN,KAAA,EAAO,EAAA,EACP,QAAQ,EAAA,EACR,OAAA,EAAQ,aACR,IAAA,EAAK,MAAA,EACL,GAAIA,KAAAA,EACJ,SAAA,EAAWC,OAAGC,sBAAAA,CAAOC,OAAAA,EAASL,SAAS,CAAA,EAEvC,QAAA,EAAA;AAAA,kBAAAM,cAAA,CAAC,MAAA,EAAA,EACC,MAAA,EAAO,SAAA,EACP,aAAA,EAAc,OAAA,EACd,gBAAe,OAAA,EACf,WAAA,EAAa,IAAA,EACb,CAAA,EAAE,uBAAA,EAAuB,CAAA;AAAA,kBAE3BA,cAAA,CAAC,MAAA,EAAA,EACC,MAAA,EAAO,SAAA,EACP,aAAA,EAAc,OAAA,EACd,cAAA,EAAe,OAAA,EACf,WAAA,EAAa,GAAA,EACb,CAAA,EAAE,wCAAA,EAAwC,CAAA;AAAA,kBAE5CA,cAAA,CAAC,MAAA,EAAA,EACC,MAAA,EAAO,SAAA,EACP,aAAA,EAAc,OAAA,EACd,cAAA,EAAe,OAAA,EACf,WAAA,EAAa,IAAA,EACb,CAAA,EAAE,2BAAA,EAA2B,CAAA;AAAA,kBAE/BA,cAAA,CAAC,MAAA,EAAA,EACC,MAAA,EAAO,SAAA,EACP,aAAA,EAAc,OAAA,EACd,cAAA,EAAe,OAAA,EACf,WAAA,EAAa,GAAA,EACb,CAAA,EAAE,wCAAA,EAAwC;AAAA,CAAA,EAE9C;;;;"}

package/dist/cjs/components/AutoComplete/AutoComplete.css

@@ -0,0 +1,97 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu, sectionHeader) */
+
+.popover-content__arM9z {
+  display: flex;
+  width: var(--radix-popover-trigger-width);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+}
+
+.select-group-container__DGzBt {
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same width fallback chain so the container fills the available inline space. */
+  display: flex;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  overflow: hidden;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  background: transparent;
+  color: var(--click-genericMenu-item-color-default-text-muted);
+  font: var(--click-genericMenu-item-typography-sectionHeader-default);
+}
+
+.select-group-container__DGzBt[aria-selected] {
+  outline: none;
+}
+
+.select-group-container__DGzBt[hidden] {
+  display: none;
+}
+
+.select-group-name__-5Apt {
+  display: flex;
+  width: 100%;
+  padding: var(--click-genericMenu-sectionHeader-space-top)
+    var(--click-genericMenu-item-space-x)
+    var(--click-genericMenu-sectionHeader-space-bottom);
+  overflow: hidden;
+  flex-direction: column;
+  gap: var(--click-genericMenu-item-space-gap);
+  border-bottom: 1px solid var(--click-genericMenu-item-color-default-stroke-default);
+  color: var(--click-genericMenu-item-color-default-text-muted);
+  font: var(--click-genericMenu-item-typography-sectionHeader-default);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.select-group-content__A5aqT {
+  width: inherit;
+}
+
+.select-list-content__BPiuX {
+  width: inherit;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features, declaration-property-value-no-unknown, declaration-property-value-keyword-no-deprecated -- the original used `overflow: overlay` (modern browsers alias it to `auto`); preserved for byte-for-byte parity. */
+  overflow: overlay;
+  flex: 1;
+}
+
+.select-no-data-container__IqJP5 {
+  display: block;
+  padding: var(--click-genericMenu-button-space-y) var(--click-genericMenu-item-space-x);
+  overflow: hidden;
+  border: none;
+  background: var(--click-genericMenu-button-color-background-default);
+  color: var(--click-genericMenu-button-color-label-default);
+  font: var(--click-genericMenu-button-typography-label-default);
+  text-align: left;
+  white-space: nowrap;
+  cursor: default;
+  text-overflow: ellipsis;
+}
+
+.select-no-data-container__IqJP5[hidden='true'] {
+  display: none;
+}
+
+.select-list__Az2Cn {
+  display: flex;
+  width: inherit;
+  max-height: var(--radix-popover-content-available-height);
+  flex-direction: column;
+  border: 1px solid var(--click-genericMenu-item-color-default-stroke-default);
+  border-radius: 0.25rem;
+  background: var(--click-genericMenu-item-color-default-background-default);
+  box-shadow: var(--click-genericMenu-panel-shadow-default);
+}
+
+.check-icon__YHNzk {
+  opacity: 0;
+}
+
+.check-icon_show-check__pYenS {
+  opacity: 1;
+}

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"popover-content": "popover-content__arM9z",
+	"select-group-container": "select-group-container__DGzBt",
+	"select-group-name": "select-group-name__-5Apt",
+	"select-group-content": "select-group-content__A5aqT",
+	"select-list-content": "select-list-content__BPiuX",
+	"select-no-data-container": "select-no-data-container__IqJP5",
+	"select-list": "select-list__Az2Cn",
+	"check-icon": "check-icon__YHNzk",
+	"check-icon_show-check": "check-icon_show-check__pYenS"
+};
+
+exports.default = styles;
+//# sourceMappingURL=AutoComplete.module.css.cjs.map

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

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

package/dist/cjs/components/AutoComplete/index.cjs

@@ -1,3 +1,4 @@
+require("./AutoComplete.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -5,7 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const RadixPopover = require('@radix-ui/react-popover');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
 const GenericMenu = require('../GenericMenu/index.cjs');
 const IconWrapper = require('../IconWrapper/index.cjs');
 const getTextFromNodes = require('../../lib/getTextFromNodes.cjs');
@@ -13,49 +14,12 @@ const mergeRefs = require('../../utils/mergeRefs.cjs');
 const PortalContext = require('../../providers/PortalContext.cjs');
 const useOption = require('./useOption.cjs');
 const OptionContext = require('./OptionContext.cjs');
+const AutoComplete_module = require('./AutoComplete.module.css.cjs');
 const SearchField = require('../SearchField/index.cjs');
 const Icon = require('../Icon/index.cjs');
 const Separator = require('../Separator/index.cjs');
 
-const SelectPopoverRoot = styledComponents.styled(RadixPopover.Root).withConfig({
-  componentId: "sc-87wbnc-0"
-})(["width:100%;", " overflow:hidden;display:flex;padding:0.5rem 0rem;align-items:flex-start;gap:0.625rem;"], ({
-  theme
-}) => `
-    border: 1px solid ${theme.click.genericMenu.item.color.default.stroke.default};
-    background: ${theme.click.genericMenu.item.color.default.background.default};
-    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
-      0px 1px 2px 0px rgba(16, 24, 40, 0.06);
-    border-radius: 0.25rem;
-  `);
-const PopoverContent = styledComponents.styled(RadixPopover.Content).withConfig({
-  componentId: "sc-87wbnc-1"
-})(["width:var(--radix-popover-trigger-width);display:flex;flex-direction:column;align-items:flex-start;gap:5px;"]);
-const SelectGroupContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-87wbnc-2"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:-webkit-fill-available;width:fill-available;width:stretch;overflow:hidden;background:transparent;&[aria-selected]{outline:none;}", ";&[hidden]{display:none;}"], ({
-  theme
-}) => `
-    font: ${theme.click.genericMenu.item.typography.sectionHeader.default};
-    color: ${theme.click.genericMenu.item.color.default.text.muted};
-  `);
-const SelectGroupName = styledComponents.styled.div.withConfig({
-  componentId: "sc-87wbnc-3"
-})(["display:flex;width:100%;flex-direction:column;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;", ""], ({
-  theme
-}) => `
-     font: ${theme.click.genericMenu.item.typography.sectionHeader.default};
-     color: ${theme.click.genericMenu.item.color.default.text.muted};
-     padding: ${theme.click.genericMenu.sectionHeader.space.top} ${theme.click.genericMenu.item.space.x} ${theme.click.genericMenu.sectionHeader.space.bottom};
-     gap: ${theme.click.genericMenu.item.space.gap};
-     border-bottom: 1px solid ${theme.click.genericMenu.item.color.default.stroke.default};
-   `);
-const SelectGroupContent = styledComponents.styled.div.withConfig({
-  componentId: "sc-87wbnc-4"
-})(["width:inherit;"]);
-const SelectListContent = styledComponents.styled.div.withConfig({
-  componentId: "sc-87wbnc-5"
-})(["width:inherit;overflow:overlay;flex:1;"]);
+const SelectPopoverRoot = RadixPopover.Root;
 const childrenToComboboxItemArray = (children, callback, heading) => {
   return react.Children.toArray(children).flatMap((child) => {
     if (react.isValidElement(child) && child && typeof child === "object") {
@@ -87,26 +51,6 @@ const childrenToComboboxItemArray = (children, callback, heading) => {
     return [];
   });
 };
-const SelectNoDataContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-87wbnc-6"
-})(["border:none;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;cursor:default;&[hidden='true']{display:none;}", ""], ({
-  theme
-}) => `
-    font: ${theme.click.genericMenu.button.typography.label.default}
-    padding: ${theme.click.genericMenu.button.space.y} ${theme.click.genericMenu.item.space.x};
-    background: ${theme.click.genericMenu.button.color.background.default};
-    color: ${theme.click.genericMenu.button.color.label.default};
-  `);
-const SelectList = styledComponents.styled.div.withConfig({
-  componentId: "sc-87wbnc-7"
-})(["display:flex;flex-direction:column;width:inherit;max-height:var(--radix-popover-content-available-height);", ""], ({
-  theme
-}) => `
-    border: 1px solid ${theme.click.genericMenu.item.color.default.stroke.default};
-    background: ${theme.click.genericMenu.item.color.default.background.default};
-    box-shadow: ${theme.click.genericMenu.panel.shadow.default};
-    border-radius: 0.25rem;
-  `);
 const AutoComplete = ({
   onSelect: onSelectProp,
   options,
@@ -290,7 +234,7 @@ const AutoComplete = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(SelectPopoverRoot, { open, onOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Trigger, { asChild: true, disabled, "data-testid": "autocomplete-trigger", children: /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: onTriggerClick, children: /* @__PURE__ */ jsxRuntime.jsx(SearchField.SearchField, { ref: inputRef, value: search, onChange: onUpdateSearch, onKeyDown, disabled, placeholder, ...props }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { sideOffset: 5, onFocus, onCloseAutoFocus: () => {
+    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Content, { className: AutoComplete_module.default["popover-content"], sideOffset: 5, onFocus, onCloseAutoFocus: () => {
       onUpdateSearch("");
       inputRef.current?.focus();
     }, onOpenAutoFocus: (e) => {
@@ -299,8 +243,8 @@ const AutoComplete = ({
       inputRef.current?.focus();
     }, align: "start", onPointerDownOutside: () => {
       onOpenChange(false);
-    }, onFocusOutside, children: /* @__PURE__ */ jsxRuntime.jsxs(SelectList, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SelectListContent, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionContext.OptionContext.Provider, { value: optionContextValue, children: options && options.length > 0 ? options.map((optionProps, index) => {
+    }, onFocusOutside, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AutoComplete_module.default["select-list"], children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: AutoComplete_module.default["select-list-content"], children: /* @__PURE__ */ jsxRuntime.jsx(OptionContext.OptionContext.Provider, { value: optionContextValue, children: options && options.length > 0 ? options.map((optionProps, index) => {
         if ("options" in optionProps) {
           const {
             options: itemList = [],
@@ -314,7 +258,7 @@ const AutoComplete = ({
           return /* @__PURE__ */ jsxRuntime.jsx(Item, { ...optionProps }, `autocomplete-${defaultId}-item-${index}`);
         }
       }) : children }) }),
-      visibleList.current.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(SelectNoDataContainer, { ...props, children: [
+      visibleList.current.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, className: cva.cn(AutoComplete_module.default["select-no-data-container"], props.className), children: [
         "No Options found",
         search.length > 0 ? ` for "${search}" ` : ""
       ] })
@@ -324,10 +268,11 @@ const AutoComplete = ({
 const Group = react.forwardRef(({
   children,
   heading,
+  className,
   ...props
 }, forwardedRef) => {
   useOption.useSearch();
-  return /* @__PURE__ */ jsxRuntime.jsxs(SelectGroupContainer, { ...props, ref: mergeRefs.mergeRefs([forwardedRef, (node) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, ref: mergeRefs.mergeRefs([forwardedRef, (node) => {
     const hidden = node?.querySelectorAll("[cui-autocomplete-item]").length === 0;
     if (hidden) {
       node?.setAttribute("hidden", "");
@@ -335,17 +280,12 @@ const Group = react.forwardRef(({
       node?.removeAttribute("hidden");
     }
     node?.setAttribute("aria-hidden", hidden.toString());
-  }]), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SelectGroupName, { children: heading }),
-    /* @__PURE__ */ jsxRuntime.jsx(SelectGroupContent, { children })
+  }]), className: cva.cn(AutoComplete_module.default["select-group-container"], className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: AutoComplete_module.default["select-group-name"], children: heading }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: AutoComplete_module.default["select-group-content"], children })
   ] });
 });
 Group.displayName = "AutoComplete.Group";
-const CheckIcon = styledComponents.styled.svg.withConfig({
-  componentId: "sc-87wbnc-8"
-})(["opacity:", ";"], ({
-  $showCheck
-}) => $showCheck ? 1 : 0);
 const Item = react.forwardRef(({
   disabled = false,
   children,
@@ -388,7 +328,7 @@ const Item = react.forwardRef(({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(GenericMenu.GenericMenuItem, { ...props, "data-value": value, onClick: onSelectValue, onMouseOver, ref: forwardedRef, "data-state": isChecked ? "checked" : "unchecked", "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "cui-autocomplete-item": "", children: [
       /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children: label ?? children }),
-      /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { as: Icon.Icon, name: "check", size: "sm", $showCheck: isChecked })
+      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { className: cva.cn(AutoComplete_module.default["check-icon"], isChecked && AutoComplete_module.default["check-icon_show-check"]), name: "check", size: "sm" })
     ] }),
     separator && /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { size: "sm" })
   ] });