@clickhouse/click-ui 0.0.163 → 0.0.164

package/dist/click-ui.es.js

@@ -1546,7 +1546,7 @@ const CalendarWithTime = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg"
   /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6.74728 17.4532C6.7342 17.4529 6.72157 17.458 6.71232 17.4672C6.70306 17.4765 6.69799 17.4891 6.69826 17.5022C6.69827 17.5221 6.71032 17.54 6.72876 17.5475C6.7472 17.5551 6.76836 17.5507 6.7823 17.5365C6.79624 17.5222 6.80018 17.501 6.79228 17.4827C6.78438 17.4644 6.7662 17.4527 6.74628 17.4532", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
 ] });
 const Cpu = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { "clip-path": "url(#clip0_7971_4934)", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_7971_4934)", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14.25 9.75H9.75V14.25H14.25V9.75Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M18.75 4.5H5.25C4.83579 4.5 4.5 4.83579 4.5 5.25V18.75C4.5 19.1642 4.83579 19.5 5.25 19.5H18.75C19.1642 19.5 19.5 19.1642 19.5 18.75V5.25C19.5 4.83579 19.1642 4.5 18.75 4.5Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19.5 9.75H21.75", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -1562,7 +1562,7 @@ const Cpu = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "2
 ] });
 const Minus = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M18.5 11.5H5.5", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 const Pipe = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { "clip-path": "url(#clip0_8130_6058)", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_8130_6058)", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M10.5 15.75V13.5C10.5 12.7044 10.8161 11.9413 11.3787 11.3787C11.9413 10.8161 12.7044 10.5 13.5 10.5H15.75", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M15.75 4.5H13.5C11.1131 4.5 8.82387 5.44821 7.13604 7.13604C5.44821 8.82387 4.5 11.1131 4.5 13.5V15.75", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M18 3.75H16.5C16.0858 3.75 15.75 4.08579 15.75 4.5V10.5C15.75 10.9142 16.0858 11.25 16.5 11.25H18C18.4142 11.25 18.75 10.9142 18.75 10.5V4.5C18.75 4.08579 18.4142 3.75 18 3.75Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -1575,7 +1575,7 @@ const Pipe = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "
   /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "clip0_8130_6058", children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "24", height: "24", fill: "white" }) }) })
 ] });
 const TreeStructure = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { "clip-path": "url(#clip0_7969_2214)", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_7969_2214)", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6 9.75H3C2.58579 9.75 2.25 10.0858 2.25 10.5V13.5C2.25 13.9142 2.58579 14.25 3 14.25H6C6.41421 14.25 6.75 13.9142 6.75 13.5V10.5C6.75 10.0858 6.41421 9.75 6 9.75Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M20.25 3.75H15.75C15.3358 3.75 15 4.08579 15 4.5V9C15 9.41421 15.3358 9.75 15.75 9.75H20.25C20.6642 9.75 21 9.41421 21 9V4.5C21 4.08579 20.6642 3.75 20.25 3.75Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M20.25 14.25H15.75C15.3358 14.25 15 14.5858 15 15V19.5C15 19.9142 15.3358 20.25 15.75 20.25H20.25C20.6642 20.25 21 19.9142 21 19.5V15C21 14.5858 20.6642 14.25 20.25 14.25Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -2383,7 +2383,7 @@ styled.span.withConfig({
   componentId: "sc-1sddmxu-8"
 })(["display:flex;white-space:nowrap;overflow:hidden;justify-content:flex-end;gap:inherit;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]);
 const Switzerland = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "30", height: "20", viewBox: "0 0 30 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { "clip-path": "url(#clip0_8668_6183)", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_8668_6183)", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M30 0H0V20H30V0Z", fill: "#D52B1E" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M21.6663 7.77783H8.33301V12.2223H21.6663V7.77783Z", fill: "white" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M17.2218 3.3335H12.7773V16.6668H17.2218V3.3335Z", fill: "white" })
@@ -3206,6 +3206,7 @@ const SVGIcon = ({
   color,
   width,
   height,
+  state,
   className,
   size: size2,
   ...props
@@ -3214,11 +3215,11 @@ const SVGIcon = ({
   if (!Component2) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(SvgWrapper, { $color: color, $width: width, $height: height, $size: size2, className, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component2, { ...props }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SvgWrapper, { $color: color, $width: width, $height: height, $size: size2, className, state, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component2, { ...props }) });
 };
 const SvgWrapper = styled.div.withConfig({
   componentId: "sc-29ieut-0"
-})(["display:flex;align-items:center;", ""], ({
+})(["display:flex;align-items:center;", " ", ""], ({
   theme: theme2,
   $color = "currentColor",
   $width,
@@ -3237,6 +3238,16 @@ const SvgWrapper = styled.div.withConfig({
       width: ${$width || theme2.click.image[$size || "md"].size.width || "24px"};
       height: ${$height || theme2.click.image[$size || "md"].size.height || "24px"};
     }
+  `, ({
+  theme: theme2,
+  $color = "currentColor",
+  state = "default",
+  $size = "md"
+}) => `
+    background: ${theme2.click.icon.color.background[state]};
+    border-radius: ${theme2.border.radii.full};
+    padding: ${state === "default" ? "none" : theme2.click.icon.space[$size].all};
+    color: ${state === "default" ? $color : theme2.click.icon.color.text[state]};
   `);
 const SvgImage = ({
   name: name2,
@@ -33501,7 +33512,7 @@ const SelectList = styled.div.withConfig({
 })(["display:flex;flex-direction:column;width:inherit;max-height:calc(var(--radix-popover-content-available-height) - 1rem);"]);
 const SelectListContent = styled.div.withConfig({
   componentId: "sc-oudbwg-8"
-})(["width:inherit;overflow:overlay;flex:1;"]);
+})(["width:inherit;overflow:auto;flex:1;"]);
 const HiddenSelectElement = styled.select.withConfig({
   componentId: "sc-oudbwg-9"
 })(["visibility:hidden;position:absolute;z-index:-1;height:0;"]);
@@ -43367,6 +43378,34 @@ const click$2 = {
       }
     }
   },
+  icon: {
+    color: {
+      background: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.2)",
+        neutral: "rgb(62.7% 62.7% 62.7% / 0.2)",
+        danger: "rgb(100% 13.7% 13.7% / 0.2)",
+        info: "rgb(7.45% 35.7% 90.2% / 0.2)",
+        warning: "rgb(100% 58% 8.63% / 0.2)"
+      },
+      text: {
+        "default": "rgba(0,0,0,0)",
+        success: "#CCFFD0",
+        neutral: "#c0c0c0",
+        danger: "#ffbaba",
+        info: "#b5cdf9",
+        warning: "#ffca8b"
+      },
+      stroke: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.05)",
+        neutral: "rgb(62.7% 62.7% 62.7% / 0.2)",
+        danger: "rgb(100% 13.7% 13.7% / 0.05)",
+        info: "rgb(7.45% 35.7% 90.2% / 0.05)",
+        warning: "rgb(100% 58% 8.63% / 0.05)"
+      }
+    }
+  },
   global: {
     color: {
       background: {
@@ -44834,6 +44873,34 @@ const click$1 = {
       }
     }
   },
+  icon: {
+    color: {
+      background: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.1)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.1)",
+        info: "rgb(7.45% 35.7% 90.2% / 0.1)",
+        warning: "rgb(100% 58% 8.63% / 0.1)"
+      },
+      text: {
+        "default": "rgba(0,0,0,0)",
+        success: "#00990D",
+        neutral: "#53575f",
+        danger: "#c10000",
+        info: "#135be6",
+        warning: "#9e5600"
+      },
+      stroke: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.05)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.05)",
+        info: "rgb(7.45% 35.7% 90.2% / 0.05)",
+        warning: "rgb(100% 58% 8.63% / 0.05)"
+      }
+    }
+  },
   global: {
     color: {
       background: {
@@ -47649,6 +47716,54 @@ const click = {
       unset: ""
     }
   },
+  icon: {
+    space: {
+      xs: {
+        all: "0.25rem"
+      },
+      sm: {
+        all: "0.25rem"
+      },
+      md: {
+        all: "0.365rem"
+      },
+      lg: {
+        all: "0.5rem"
+      },
+      xl: {
+        all: "0.75rem"
+      },
+      xxl: {
+        all: "1rem"
+      }
+    },
+    color: {
+      background: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.1)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.1)",
+        info: "rgb(7.45% 35.7% 90.2% / 0.1)",
+        warning: "rgb(100% 58% 8.63% / 0.1)"
+      },
+      text: {
+        "default": "rgba(0,0,0,0)",
+        success: "#00990D",
+        neutral: "#53575f",
+        danger: "#c10000",
+        info: "#135be6",
+        warning: "#9e5600"
+      },
+      stroke: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.05)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.05)",
+        info: "rgb(7.45% 35.7% 90.2% / 0.05)",
+        warning: "rgb(100% 58% 8.63% / 0.05)"
+      }
+    }
+  },
   global: {
     color: {
       background: {

package/dist/click-ui.umd.js

@@ -1563,7 +1563,7 @@ var __publicField = (obj, key, value) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6.74728 17.4532C6.7342 17.4529 6.72157 17.458 6.71232 17.4672C6.70306 17.4765 6.69799 17.4891 6.69826 17.5022C6.69827 17.5221 6.71032 17.54 6.72876 17.5475C6.7472 17.5551 6.76836 17.5507 6.7823 17.5365C6.79624 17.5222 6.80018 17.501 6.79228 17.4827C6.78438 17.4644 6.7662 17.4527 6.74628 17.4532", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
   const Cpu = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { "clip-path": "url(#clip0_7971_4934)", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_7971_4934)", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14.25 9.75H9.75V14.25H14.25V9.75Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M18.75 4.5H5.25C4.83579 4.5 4.5 4.83579 4.5 5.25V18.75C4.5 19.1642 4.83579 19.5 5.25 19.5H18.75C19.1642 19.5 19.5 19.1642 19.5 18.75V5.25C19.5 4.83579 19.1642 4.5 18.75 4.5Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19.5 9.75H21.75", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -1579,7 +1579,7 @@ var __publicField = (obj, key, value) => {
   ] });
   const Minus = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M18.5 11.5H5.5", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
   const Pipe = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { "clip-path": "url(#clip0_8130_6058)", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_8130_6058)", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M10.5 15.75V13.5C10.5 12.7044 10.8161 11.9413 11.3787 11.3787C11.9413 10.8161 12.7044 10.5 13.5 10.5H15.75", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M15.75 4.5H13.5C11.1131 4.5 8.82387 5.44821 7.13604 7.13604C5.44821 8.82387 4.5 11.1131 4.5 13.5V15.75", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M18 3.75H16.5C16.0858 3.75 15.75 4.08579 15.75 4.5V10.5C15.75 10.9142 16.0858 11.25 16.5 11.25H18C18.4142 11.25 18.75 10.9142 18.75 10.5V4.5C18.75 4.08579 18.4142 3.75 18 3.75Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -1592,7 +1592,7 @@ var __publicField = (obj, key, value) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "clip0_8130_6058", children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "24", height: "24", fill: "white" }) }) })
   ] });
   const TreeStructure = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { "clip-path": "url(#clip0_7969_2214)", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_7969_2214)", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6 9.75H3C2.58579 9.75 2.25 10.0858 2.25 10.5V13.5C2.25 13.9142 2.58579 14.25 3 14.25H6C6.41421 14.25 6.75 13.9142 6.75 13.5V10.5C6.75 10.0858 6.41421 9.75 6 9.75Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M20.25 3.75H15.75C15.3358 3.75 15 4.08579 15 4.5V9C15 9.41421 15.3358 9.75 15.75 9.75H20.25C20.6642 9.75 21 9.41421 21 9V4.5C21 4.08579 20.6642 3.75 20.25 3.75Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M20.25 14.25H15.75C15.3358 14.25 15 14.5858 15 15V19.5C15 19.9142 15.3358 20.25 15.75 20.25H20.25C20.6642 20.25 21 19.9142 21 19.5V15C21 14.5858 20.6642 14.25 20.25 14.25Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -2400,7 +2400,7 @@ var __publicField = (obj, key, value) => {
     componentId: "sc-1sddmxu-8"
   })(["display:flex;white-space:nowrap;overflow:hidden;justify-content:flex-end;gap:inherit;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]);
   const Switzerland = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "30", height: "20", viewBox: "0 0 30 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { "clip-path": "url(#clip0_8668_6183)", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_8668_6183)", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M30 0H0V20H30V0Z", fill: "#D52B1E" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M21.6663 7.77783H8.33301V12.2223H21.6663V7.77783Z", fill: "white" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M17.2218 3.3335H12.7773V16.6668H17.2218V3.3335Z", fill: "white" })
@@ -3223,6 +3223,7 @@ var __publicField = (obj, key, value) => {
     color,
     width,
     height,
+    state,
     className,
     size: size2,
     ...props
@@ -3231,11 +3232,11 @@ var __publicField = (obj, key, value) => {
     if (!Component) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(SvgWrapper, { $color: color, $width: width, $height: height, $size: size2, className, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...props }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(SvgWrapper, { $color: color, $width: width, $height: height, $size: size2, className, state, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...props }) });
   };
   const SvgWrapper = styled.div.withConfig({
     componentId: "sc-29ieut-0"
-  })(["display:flex;align-items:center;", ""], ({
+  })(["display:flex;align-items:center;", " ", ""], ({
     theme: theme2,
     $color = "currentColor",
     $width,
@@ -3254,6 +3255,16 @@ var __publicField = (obj, key, value) => {
       width: ${$width || theme2.click.image[$size || "md"].size.width || "24px"};
       height: ${$height || theme2.click.image[$size || "md"].size.height || "24px"};
     }
+  `, ({
+    theme: theme2,
+    $color = "currentColor",
+    state = "default",
+    $size = "md"
+  }) => `
+    background: ${theme2.click.icon.color.background[state]};
+    border-radius: ${theme2.border.radii.full};
+    padding: ${state === "default" ? "none" : theme2.click.icon.space[$size].all};
+    color: ${state === "default" ? $color : theme2.click.icon.color.text[state]};
   `);
   const SvgImage = ({
     name: name2,
@@ -33518,7 +33529,7 @@ var __publicField = (obj, key, value) => {
   })(["display:flex;flex-direction:column;width:inherit;max-height:calc(var(--radix-popover-content-available-height) - 1rem);"]);
   const SelectListContent = styled.div.withConfig({
     componentId: "sc-oudbwg-8"
-  })(["width:inherit;overflow:overlay;flex:1;"]);
+  })(["width:inherit;overflow:auto;flex:1;"]);
   const HiddenSelectElement = styled.select.withConfig({
     componentId: "sc-oudbwg-9"
   })(["visibility:hidden;position:absolute;z-index:-1;height:0;"]);
@@ -43384,6 +43395,34 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    icon: {
+      color: {
+        background: {
+          "default": "rgba(0,0,0,0)",
+          success: "rgb(20% 100% 26.7% / 0.2)",
+          neutral: "rgb(62.7% 62.7% 62.7% / 0.2)",
+          danger: "rgb(100% 13.7% 13.7% / 0.2)",
+          info: "rgb(7.45% 35.7% 90.2% / 0.2)",
+          warning: "rgb(100% 58% 8.63% / 0.2)"
+        },
+        text: {
+          "default": "rgba(0,0,0,0)",
+          success: "#CCFFD0",
+          neutral: "#c0c0c0",
+          danger: "#ffbaba",
+          info: "#b5cdf9",
+          warning: "#ffca8b"
+        },
+        stroke: {
+          "default": "rgba(0,0,0,0)",
+          success: "rgb(20% 100% 26.7% / 0.05)",
+          neutral: "rgb(62.7% 62.7% 62.7% / 0.2)",
+          danger: "rgb(100% 13.7% 13.7% / 0.05)",
+          info: "rgb(7.45% 35.7% 90.2% / 0.05)",
+          warning: "rgb(100% 58% 8.63% / 0.05)"
+        }
+      }
+    },
     global: {
       color: {
         background: {
@@ -44851,6 +44890,34 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    icon: {
+      color: {
+        background: {
+          "default": "rgba(0,0,0,0)",
+          success: "rgb(20% 100% 26.7% / 0.1)",
+          neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+          danger: "rgb(100% 13.7% 13.7% / 0.1)",
+          info: "rgb(7.45% 35.7% 90.2% / 0.1)",
+          warning: "rgb(100% 58% 8.63% / 0.1)"
+        },
+        text: {
+          "default": "rgba(0,0,0,0)",
+          success: "#00990D",
+          neutral: "#53575f",
+          danger: "#c10000",
+          info: "#135be6",
+          warning: "#9e5600"
+        },
+        stroke: {
+          "default": "rgba(0,0,0,0)",
+          success: "rgb(20% 100% 26.7% / 0.05)",
+          neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+          danger: "rgb(100% 13.7% 13.7% / 0.05)",
+          info: "rgb(7.45% 35.7% 90.2% / 0.05)",
+          warning: "rgb(100% 58% 8.63% / 0.05)"
+        }
+      }
+    },
     global: {
       color: {
         background: {
@@ -47666,6 +47733,54 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         unset: ""
       }
     },
+    icon: {
+      space: {
+        xs: {
+          all: "0.25rem"
+        },
+        sm: {
+          all: "0.25rem"
+        },
+        md: {
+          all: "0.365rem"
+        },
+        lg: {
+          all: "0.5rem"
+        },
+        xl: {
+          all: "0.75rem"
+        },
+        xxl: {
+          all: "1rem"
+        }
+      },
+      color: {
+        background: {
+          "default": "rgba(0,0,0,0)",
+          success: "rgb(20% 100% 26.7% / 0.1)",
+          neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+          danger: "rgb(100% 13.7% 13.7% / 0.1)",
+          info: "rgb(7.45% 35.7% 90.2% / 0.1)",
+          warning: "rgb(100% 58% 8.63% / 0.1)"
+        },
+        text: {
+          "default": "rgba(0,0,0,0)",
+          success: "#00990D",
+          neutral: "#53575f",
+          danger: "#c10000",
+          info: "#135be6",
+          warning: "#9e5600"
+        },
+        stroke: {
+          "default": "rgba(0,0,0,0)",
+          success: "rgb(20% 100% 26.7% / 0.05)",
+          neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+          danger: "rgb(100% 13.7% 13.7% / 0.05)",
+          info: "rgb(7.45% 35.7% 90.2% / 0.05)",
+          warning: "rgb(100% 58% 8.63% / 0.05)"
+        }
+      }
+    },
     global: {
       color: {
         background: {

package/dist/components/Icon/types.d.ts

@@ -5,12 +5,14 @@ import { LogoName } from '../Logos/types';
 import { PaymentName, PaymentProps } from '../icons/Payments';
 
 export type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type IconState = "default" | "success" | "warning" | "danger" | "info";
 export declare const ICON_NAMES: readonly ["activity", "alarm", "arrow-down", "arrow-left", "arrow-right", "arrow-triangle", "arrow-directions", "arrow-up", "auth-app", "auth-sms", "backups", "bar-chart", "bell", "beta", "blog", "book", "brackets", "briefcase", "building", "burger-menu", "calendar", "calendar-with-time", "cards", "cell-tower", "chat", "check", "check-in-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clock", "cloud", "cloud-keys", "code", "code-in-square", "connect", "connect-alt", "console", "copy", "cpu", "cross", "credit-card", "data", "database", "disk", "display", "document", "dot", "dots-horizontal", "dots-triangle", "dots-vertical", "dots-vertical-double", "double-check", "download", "download-in-circle", "email", "empty", "enter", "eye", "eye-closed", "filter", "fire", "flag", "flask", "folder-closed", "folder-open", "gear", "gift", "git-merge", "history", "horizontal-loading", "home", "http", "http-monitoring", "info-in-circle", "information", "insert-row", "integrations", "key", "keys", "lifebuoy", "light-bulb", "lightening", "line-in-circle", "loading", "loading-animated", "lock", "metrics", "metrics-alt", "minus", "no-cloud", "pause", "payment", "pencil", "pie-chart", "pipe", "play", "play-in-circle", "plus", "popout", "puzzle-piece", "query", "question", "refresh", "rocket", "sandglass", "search", "secure", "server", "services", "settings", "share", "share-arrow", "share-network", "slide-in", "slide-out", "sort-alt", "sort", "sparkle", "speaker", "speed", "star", "stop", "support", "table", "taxi", "trash", "tree-structure", "upload", "url", "user", "users", "warning", "waves"];
 export type IconName = (typeof ICON_NAMES)[number];
 export interface IconProps extends SVGAttributes<HTMLOrSVGElement> {
     name: IconName;
     color?: string;
     size?: IconSize;
+    state?: IconState;
 }
 type NoThemeType = {
     theme?: never;

package/dist/styles/types.d.ts

@@ -2651,6 +2651,54 @@ export interface Theme {
                 "unset": string;
             };
         };
+        "icon": {
+            "space": {
+                "xs": {
+                    "all": string;
+                };
+                "sm": {
+                    "all": string;
+                };
+                "md": {
+                    "all": string;
+                };
+                "lg": {
+                    "all": string;
+                };
+                "xl": {
+                    "all": string;
+                };
+                "xxl": {
+                    "all": string;
+                };
+            };
+            "color": {
+                "background": {
+                    "default": string;
+                    "success": string;
+                    "neutral": string;
+                    "danger": string;
+                    "info": string;
+                    "warning": string;
+                };
+                "text": {
+                    "default": string;
+                    "success": string;
+                    "neutral": string;
+                    "danger": string;
+                    "info": string;
+                    "warning": string;
+                };
+                "stroke": {
+                    "default": string;
+                    "success": string;
+                    "neutral": string;
+                    "danger": string;
+                    "info": string;
+                    "warning": string;
+                };
+            };
+        };
         "global": {
             "color": {
                 "background": {

package/dist/styles/variables.dark.json.d.ts

@@ -1310,6 +1310,34 @@ declare const _default: {
         }
       }
     },
+    "icon": {
+      "color": {
+        "background": {
+          "default": "rgba(0,0,0,0)",
+          "success": "rgb(20% 100% 26.7% / 0.2)",
+          "neutral": "rgb(62.7% 62.7% 62.7% / 0.2)",
+          "danger": "rgb(100% 13.7% 13.7% / 0.2)",
+          "info": "rgb(7.45% 35.7% 90.2% / 0.2)",
+          "warning": "rgb(100% 58% 8.63% / 0.2)"
+        },
+        "text": {
+          "default": "rgba(0,0,0,0)",
+          "success": "#CCFFD0",
+          "neutral": "#c0c0c0",
+          "danger": "#ffbaba",
+          "info": "#b5cdf9",
+          "warning": "#ffca8b"
+        },
+        "stroke": {
+          "default": "rgba(0,0,0,0)",
+          "success": "rgb(20% 100% 26.7% / 0.05)",
+          "neutral": "rgb(62.7% 62.7% 62.7% / 0.2)",
+          "danger": "rgb(100% 13.7% 13.7% / 0.05)",
+          "info": "rgb(7.45% 35.7% 90.2% / 0.05)",
+          "warning": "rgb(100% 58% 8.63% / 0.05)"
+        }
+      }
+    },
     "global": {
       "color": {
         "background": {

package/dist/styles/variables.json.d.ts

@@ -2651,6 +2651,54 @@ declare const _default: {
         "unset": ""
       }
     },
+    "icon": {
+      "space": {
+        "xs": {
+          "all": "0.25rem"
+        },
+        "sm": {
+          "all": "0.25rem"
+        },
+        "md": {
+          "all": "0.365rem"
+        },
+        "lg": {
+          "all": "0.5rem"
+        },
+        "xl": {
+          "all": "0.75rem"
+        },
+        "xxl": {
+          "all": "1rem"
+        }
+      },
+      "color": {
+        "background": {
+          "default": "rgba(0,0,0,0)",
+          "success": "rgb(20% 100% 26.7% / 0.1)",
+          "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
+          "danger": "rgb(100% 13.7% 13.7% / 0.1)",
+          "info": "rgb(7.45% 35.7% 90.2% / 0.1)",
+          "warning": "rgb(100% 58% 8.63% / 0.1)"
+        },
+        "text": {
+          "default": "rgba(0,0,0,0)",
+          "success": "#00990D",
+          "neutral": "#53575f",
+          "danger": "#c10000",
+          "info": "#135be6",
+          "warning": "#9e5600"
+        },
+        "stroke": {
+          "default": "rgba(0,0,0,0)",
+          "success": "rgb(20% 100% 26.7% / 0.05)",
+          "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
+          "danger": "rgb(100% 13.7% 13.7% / 0.05)",
+          "info": "rgb(7.45% 35.7% 90.2% / 0.05)",
+          "warning": "rgb(100% 58% 8.63% / 0.05)"
+        }
+      }
+    },
     "global": {
       "color": {
         "background": {

package/dist/styles/variables.light.json.d.ts

@@ -1303,6 +1303,34 @@ declare const _default: {
         }
       }
     },
+    "icon": {
+      "color": {
+        "background": {
+          "default": "rgba(0,0,0,0)",
+          "success": "rgb(20% 100% 26.7% / 0.1)",
+          "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
+          "danger": "rgb(100% 13.7% 13.7% / 0.1)",
+          "info": "rgb(7.45% 35.7% 90.2% / 0.1)",
+          "warning": "rgb(100% 58% 8.63% / 0.1)"
+        },
+        "text": {
+          "default": "rgba(0,0,0,0)",
+          "success": "#00990D",
+          "neutral": "#53575f",
+          "danger": "#c10000",
+          "info": "#135be6",
+          "warning": "#9e5600"
+        },
+        "stroke": {
+          "default": "rgba(0,0,0,0)",
+          "success": "rgb(20% 100% 26.7% / 0.05)",
+          "neutral": "rgb(41.2% 43.1% 47.5% / 0.1)",
+          "danger": "rgb(100% 13.7% 13.7% / 0.05)",
+          "info": "rgb(7.45% 35.7% 90.2% / 0.05)",
+          "warning": "rgb(100% 58% 8.63% / 0.05)"
+        }
+      }
+    },
     "global": {
       "color": {
         "background": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.163",
+  "version": "0.0.164",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",