@clickhouse/click-ui 0.0.187 → 0.0.189

package/dist/click-ui.es.js

@@ -855,6 +855,15 @@ const UnitedKingdom = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://ww
     /* @__PURE__ */ jsx("clipPath", { id: "ukFlagClipPath2", children: /* @__PURE__ */ jsx("path", { fill: "#fff", d: "M0 0h30v20H0z" }) })
   ] })
 ] });
+const UnitedArabEmirates = (props) => /* @__PURE__ */ jsxs("svg", { width: "30", height: "20", viewBox: "0 0 30 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_10582_2024)", children: [
+    /* @__PURE__ */ jsx("path", { d: "M30 0H0V20H30V0Z", fill: "#00732F" }),
+    /* @__PURE__ */ jsx("path", { d: "M30 6.6665H0V19.9998H30V6.6665Z", fill: "white" }),
+    /* @__PURE__ */ jsx("path", { d: "M30 13.3335H0V20.0002H30V13.3335Z", fill: "black" }),
+    /* @__PURE__ */ jsx("path", { d: "M7.5 0H0V20H7.5V0Z", fill: "#FF0000" })
+  ] }),
+  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_10582_2024", children: /* @__PURE__ */ jsx("rect", { width: "30", height: "20", fill: "white" }) }) })
+] });
 const EuropeanUnion = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 30, height: 20, viewBox: "0 0 30 20", fill: "none", ...props, children: [
   /* @__PURE__ */ jsx("g", { clipPath: "url(#euFlagClipPath1)", children: /* @__PURE__ */ jsxs("g", { clipPath: "url(#euFlagClipPath2)", children: [
     /* @__PURE__ */ jsx("path", { fill: "#039", d: "M30 0H0v20h30V0Z" }),
@@ -1082,6 +1091,18 @@ const SouthAfrica = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.
   ] }),
   /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_3880_12429", children: /* @__PURE__ */ jsx("rect", { width: "30", height: "19.9999", rx: "1", fill: "white" }) }) })
 ] });
+const SouthKorea = (props) => /* @__PURE__ */ jsxs("svg", { width: "30", height: "20", viewBox: "0 0 30 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_10582_2008)", children: [
+    /* @__PURE__ */ jsx("path", { d: "M0 0V20H30V0H0Z", fill: "white" }),
+    /* @__PURE__ */ jsx("path", { d: "M7.71973 2.1416L4.94623 6.30185L7.71973 2.1416ZM5.98629 6.99523L8.75979 2.83498L5.98629 6.99523ZM9.79985 3.52835L7.02635 7.6886L9.79985 3.52835ZM20.2005 16.4714L21.4717 14.5646L20.2005 16.4714ZM21.7028 14.2179L22.974 12.3111L21.7028 14.2179ZM24.014 13.0045L22.7429 14.9113L24.014 13.0045ZM22.5117 15.258L21.2405 17.1647L22.5117 15.258ZM22.2806 17.8581L23.5518 15.9513L22.2806 17.8581ZM23.7829 15.6046L25.0541 13.6979L23.7829 15.6046Z", fill: "black" }),
+    /* @__PURE__ */ jsx("path", { d: "M7.71973 2.1416L4.94623 6.30185M5.98629 6.99523L8.75979 2.83498M9.79985 3.52835L7.02635 7.6886M20.2005 16.4714L21.4717 14.5646M21.7028 14.2179L22.974 12.3111M24.014 13.0045L22.7429 14.9113M22.5117 15.258L21.2405 17.1647M22.2806 17.8581L23.5518 15.9513M23.7829 15.6046L25.0541 13.6979", stroke: "black", strokeWidth: "0.833333" }),
+    /* @__PURE__ */ jsx("path", { d: "M4.94629 13.6982L7.71979 17.8585L4.94629 13.6982ZM8.75985 17.1651L7.48866 15.2583L8.75985 17.1651ZM7.25754 14.9116L5.98635 13.0049L7.25754 14.9116ZM7.02641 12.3115L9.79992 16.4717L7.02641 12.3115ZM22.974 7.68899L21.7029 5.78221L22.974 7.68899ZM21.4717 5.43552L20.2005 3.52874L21.4717 5.43552ZM21.2406 2.83536L24.0141 6.99561L21.2406 2.83536ZM25.0542 6.30224L23.783 4.39546L25.0542 6.30224ZM23.5519 4.04877L22.2807 2.14199L23.5519 4.04877Z", fill: "black" }),
+    /* @__PURE__ */ jsx("path", { d: "M4.94629 13.6982L7.71979 17.8585M8.75985 17.1651L7.48867 15.2583M7.25754 14.9116L5.98635 13.0049M7.02641 12.3115L9.79992 16.4717M22.974 7.68899L21.7029 5.78221M21.4717 5.43552L20.2005 3.52874M21.2406 2.83536L24.0141 6.99561M25.0542 6.30224L23.783 4.39546M23.5519 4.04877L22.2807 2.14199", stroke: "black", strokeWidth: "0.833333" }),
+    /* @__PURE__ */ jsx("path", { d: "M17.0802 11.3869C16.5285 12.2144 15.6707 12.7889 14.6954 12.984C13.7202 13.179 12.7074 12.9787 11.8798 12.427C11.0523 11.8753 10.4778 11.0175 10.2828 10.0422C10.0877 9.06697 10.2881 8.05418 10.8398 7.22666C11.5754 6.12329 12.7191 5.35732 14.0195 5.09726C15.3198 4.83719 16.6702 5.10433 17.7735 5.83991C18.8769 6.57549 19.6429 7.71925 19.9029 9.01958C20.163 10.3199 19.8959 11.6703 19.1603 12.7737", fill: "#CD2E3A" }),
+    /* @__PURE__ */ jsx("path", { d: "M15.0001 10.0001C15.3679 9.44843 15.9397 9.06544 16.5899 8.93541C17.2401 8.80538 17.9153 8.93895 18.4669 9.30674C19.0186 9.67452 19.4016 10.2464 19.5316 10.8966C19.6617 11.5467 19.5281 12.2219 19.1603 12.7736C18.4247 13.877 17.281 14.6429 15.9806 14.903C14.6803 15.1631 13.3299 14.8959 12.2266 14.1604C11.1232 13.4248 10.3572 12.281 10.0972 10.9807C9.83709 9.68036 10.1042 8.32998 10.8398 7.22661C10.472 7.77829 10.3385 8.45349 10.4685 9.10365C10.5985 9.75382 10.9815 10.3257 11.5332 10.6935C12.0849 11.0613 12.7601 11.1948 13.4102 11.0648C14.0604 10.9348 14.6323 10.5518 15.0001 10.0001Z", fill: "#0047A0" })
+  ] }),
+  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_10582_2008", children: /* @__PURE__ */ jsx("rect", { width: "30", height: "20", fill: "white" }) }) })
+] });
 const Brazil = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "21", viewBox: "0 0 30 21", fill: "none", ...props, children: [
   /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_3880_11917)", children: [
     /* @__PURE__ */ jsx("path", { d: "M0 1C0 0.447715 0.447715 0 1 0H29C29.5523 0 30 0.447715 30 1V19C30 19.5523 29.5523 20 29 20H1C0.447716 20 0 19.5523 0 19V1Z", fill: "#009B3A" }),
@@ -1502,6 +1523,7 @@ const Switzerland = (props) => /* @__PURE__ */ jsxs("svg", { width: "30", height
   /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_8668_6183", children: /* @__PURE__ */ jsx("rect", { width: "30", height: "20", fill: "white" }) }) })
 ] });
 const FlagList = {
+  ae: UnitedArabEmirates,
   au: Australia,
   br: Brazil,
   ca: Canada,
@@ -1515,6 +1537,7 @@ const FlagList = {
   nl: Netherlands,
   sg: Singapore,
   za: SouthAfrica,
+  kr: SouthKorea,
   sw: Sweden,
   uk: UnitedKingdom,
   usa: UnitedStates
@@ -9300,13 +9323,14 @@ const Wrapper$c = styled.div.withConfig({
 })(["display:inline-flex;", ""], ({
   $state = "default",
   $size = "md",
+  $type = "opaque",
   theme: theme2
 }) => `
-    background-color: ${theme2.click.badge.color.background[$state]};
-    color: ${theme2.click.badge.color.text[$state]};
+    background-color: ${theme2.click.badge[$type].color.background[$state]};
+    color: ${theme2.click.badge[$type].color.text[$state]};
     font: ${theme2.click.badge.typography.label[$size].default};
     border-radius: ${theme2.click.badge.radii.all};
-    border: ${theme2.click.badge.stroke} solid ${theme2.click.badge.color.stroke[$state]};
+    border: ${theme2.click.badge.stroke} solid ${theme2.click.badge[$type].color.stroke[$state]};
     padding: ${theme2.click.badge.space[$size].y} ${theme2.click.badge.space[$size].x};
   `);
 const Content$4 = styled.div.withConfig({
@@ -9320,9 +9344,10 @@ const SvgContainer = styled.svg.withConfig({
 })(["", ""], ({
   $state = "default",
   $size = "md",
+  $type = "opaque",
   theme: theme2
 }) => `
-    color: ${theme2.click.badge.color.text[$state]};
+    color: ${theme2.click.badge[$type].color.text[$state]};
     height: ${theme2.click.badge.icon[$size].size.height};
     width: ${theme2.click.badge.icon[$size].size.width};
   `);
@@ -9330,12 +9355,13 @@ const BadgeContent = styled.div.withConfig({
   componentId: "sc-471xo0-3"
 })(["width:auto;overflow:hidden;svg{", "}"], ({
   $state = "default",
-  size: size2 = "md",
+  $size = "md",
+  $type = "opaque",
   theme: theme2
 }) => `
-    color: ${theme2.click.badge.color.text[$state]};
-    height: ${theme2.click.badge.icon[size2].size.height};
-    width: ${theme2.click.badge.icon[size2].size.width};
+    color: ${theme2.click.badge[$type].color.text[$state]};
+    height: ${theme2.click.badge.icon[$size].size.height};
+    width: ${theme2.click.badge.icon[$size].size.width};
     gap: inherit;
   `);
 const Badge = ({
@@ -9344,10 +9370,11 @@ const Badge = ({
   text: text2,
   state = "default",
   size: size2,
+  type,
   dismissible,
   onClose,
   ...props
-}) => /* @__PURE__ */ jsx(Wrapper$c, { $state: state, $size: size2, ...props, children: /* @__PURE__ */ jsxs(Content$4, { children: [
+}) => /* @__PURE__ */ jsx(Wrapper$c, { $state: state, $size: size2, $type: type, ...props, children: /* @__PURE__ */ jsxs(Content$4, { children: [
   /* @__PURE__ */ jsx(BadgeContent, { as: IconWrapper$3, icon, iconDir, size: size2, $state: state, children: text2 }),
   dismissible && /* @__PURE__ */ jsx(SvgContainer, { name: "cross", $state: state, as: SvgImage, onClick: onClose, "aria-label": "close" })
 ] }) });
@@ -34004,6 +34031,16 @@ const SearchField = forwardRef(({
     loading && /* @__PURE__ */ jsx(SvgImage, { name: "loading-animated", size: "sm" })
   ] });
 });
+const useUpdateEffect = (effect, deps) => {
+  const isFirstMount = useRef(true);
+  useEffect(() => {
+    if (isFirstMount) {
+      isFirstMount.current = false;
+      return;
+    }
+    return effect();
+  }, deps);
+};
 const SelectPopoverRoot = styled($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9).withConfig({
   componentId: "sc-oudbwg-0"
 })(["width:100%;"]);
@@ -37993,7 +38030,7 @@ const Select = ({
       onSelect(values[0]);
     }
   }, [selectedValues, onSelect]);
-  useEffect(() => {
+  useUpdateEffect(() => {
     setSelectedValues(valueProp ? [valueProp] : []);
   }, [valueProp]);
   const conditionalProps = {};
@@ -38023,7 +38060,7 @@ const MultiSelect = ({
       onOpenChangeProp(open22);
     }
   }, [onOpenChangeProp]);
-  useEffect(() => {
+  useUpdateEffect(() => {
     setSelectedValues(valueProp ?? []);
   }, [valueProp]);
   const onChange = useCallback((values, type) => {
@@ -42880,33 +42917,66 @@ const click$2 = {
     }
   },
   badge: {
-    color: {
-      background: {
-        "default": "#1F1F1C",
-        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)",
-        disabled: "#414141",
-        info: "rgb(26.3% 49.4% 93.7% / 0.2)",
-        warning: "rgb(100% 46.7% 16.1% / 0.2)"
-      },
-      text: {
-        "default": "#b3b6bd",
-        success: "#CCFFD0",
-        neutral: "#c0c0c0",
-        danger: "#ffbaba",
-        disabled: "#808080",
-        info: "#D0DFFB",
-        warning: "#FFB88F"
-      },
-      stroke: {
-        "default": "#323232",
-        success: "rgb(20% 100% 26.7% / 0.1)",
-        neutral: "rgb(62.7% 62.7% 62.7% / 0.1)",
-        danger: "rgb(100% 22.3% 22.3% / 0.2)",
-        disabled: "rgb(24.2% 24.2% 24.2%)",
-        info: "rgb(26.3% 49.4% 93.7% / 0.1)",
-        warning: "rgb(100% 46.7% 16.1% / 0.1)"
+    opaque: {
+      color: {
+        background: {
+          "default": "#1F1F1C",
+          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)",
+          disabled: "#414141",
+          info: "rgb(26.3% 49.4% 93.7% / 0.2)",
+          warning: "rgb(100% 46.7% 16.1% / 0.2)"
+        },
+        text: {
+          "default": "#b3b6bd",
+          success: "#CCFFD0",
+          neutral: "#c0c0c0",
+          danger: "#ffbaba",
+          disabled: "#808080",
+          info: "#D0DFFB",
+          warning: "#FFB88F"
+        },
+        stroke: {
+          "default": "#323232",
+          success: "rgb(20% 100% 26.7% / 0.1)",
+          neutral: "rgb(62.7% 62.7% 62.7% / 0.1)",
+          danger: "rgb(100% 22.3% 22.3% / 0.2)",
+          disabled: "rgb(24.2% 24.2% 24.2%)",
+          info: "rgb(26.3% 49.4% 93.7% / 0.1)",
+          warning: "rgb(100% 46.7% 16.1% / 0.1)"
+        }
+      }
+    },
+    solid: {
+      color: {
+        background: {
+          "default": "#c0c0c0",
+          success: "#99FFA1",
+          neutral: "#c0c0c0",
+          danger: "#ff9898",
+          disabled: "#414141",
+          info: "#A1BEF7",
+          warning: "#FF9457"
+        },
+        text: {
+          "default": "#1F1F1C",
+          success: "#1F1F1C",
+          neutral: "#1F1F1C",
+          danger: "#1F1F1C",
+          disabled: "#808080",
+          info: "#1F1F1C",
+          warning: "#1F1F1C"
+        },
+        stroke: {
+          "default": "rgb(19.6% 19.6% 19.6% / 0.1)",
+          success: "rgb(20% 100% 26.7% / 0.1)",
+          neutral: "rgb(62.7% 62.7% 62.7% / 0.1)",
+          danger: "rgb(100% 22.3% 22.3% / 0.2)",
+          disabled: "rgb(24.2% 24.2% 24.2%)",
+          info: "rgb(26.3% 49.4% 93.7% / 0.1)",
+          warning: "rgb(100% 46.7% 16.1% / 0.1)"
+        }
       }
     }
   },
@@ -44628,33 +44698,66 @@ const click$1 = {
     }
   },
   badge: {
-    color: {
-      background: {
-        "default": "#f6f7fa",
-        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)",
-        disabled: "#dfdfdf",
-        info: "rgb(26.3% 49.4% 93.7% / 0.1)",
-        warning: "rgb(100% 46.7% 16.1% / 0.1)"
-      },
-      text: {
-        "default": "#696e79",
-        success: "#008A0B",
-        neutral: "#53575f",
-        danger: "#c10000",
-        disabled: "#a0a0a0",
-        info: "#437EEF",
-        warning: "#A33C00"
-      },
-      stroke: {
-        "default": "#e6e7e9",
-        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)",
-        disabled: "rgb(83.1% 83.1% 83.1%)",
-        info: "rgb(26.3% 49.4% 93.7% / 0.05)",
-        warning: "rgb(100% 46.7% 16.1% / 0.05)"
+    opaque: {
+      color: {
+        background: {
+          "default": "#f6f7fa",
+          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)",
+          disabled: "#dfdfdf",
+          info: "rgb(26.3% 49.4% 93.7% / 0.1)",
+          warning: "rgb(100% 46.7% 16.1% / 0.1)"
+        },
+        text: {
+          "default": "#696e79",
+          success: "#008A0B",
+          neutral: "#53575f",
+          danger: "#c10000",
+          disabled: "#a0a0a0",
+          info: "#437EEF",
+          warning: "#A33C00"
+        },
+        stroke: {
+          "default": "#e6e7e9",
+          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)",
+          disabled: "rgb(83.1% 83.1% 83.1%)",
+          info: "rgb(26.3% 49.4% 93.7% / 0.05)",
+          warning: "rgb(100% 46.7% 16.1% / 0.05)"
+        }
+      }
+    },
+    solid: {
+      color: {
+        background: {
+          "default": "#a0a0a0",
+          success: "#008A0B",
+          neutral: "#606060",
+          danger: "#c10000",
+          disabled: "#dfdfdf",
+          info: "#104EC6",
+          warning: "#D64F00"
+        },
+        text: {
+          "default": "#ffffff",
+          success: "#ffffff",
+          neutral: "#ffffff",
+          danger: "#ffffff",
+          disabled: "#a0a0a0",
+          info: "#ffffff",
+          warning: "#ffffff"
+        },
+        stroke: {
+          "default": "rgb(90.2% 90.6% 91.4% / 0.1)",
+          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)",
+          disabled: "rgb(83.1% 83.1% 83.1%)",
+          info: "rgb(26.3% 49.4% 93.7% / 0.05)",
+          warning: "rgb(100% 46.7% 16.1% / 0.05)"
+        }
       }
     }
   },
@@ -46524,33 +46627,66 @@ const click = {
         }
       }
     },
-    color: {
-      background: {
-        "default": "#f6f7fa",
-        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)",
-        disabled: "#dfdfdf",
-        info: "rgb(26.3% 49.4% 93.7% / 0.1)",
-        warning: "rgb(100% 46.7% 16.1% / 0.1)"
-      },
-      text: {
-        "default": "#696e79",
-        success: "#008A0B",
-        neutral: "#53575f",
-        danger: "#c10000",
-        disabled: "#a0a0a0",
-        info: "#437EEF",
-        warning: "#A33C00"
-      },
-      stroke: {
-        "default": "#e6e7e9",
-        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)",
-        disabled: "rgb(83.1% 83.1% 83.1%)",
-        info: "rgb(26.3% 49.4% 93.7% / 0.05)",
-        warning: "rgb(100% 46.7% 16.1% / 0.05)"
+    opaque: {
+      color: {
+        background: {
+          "default": "#f6f7fa",
+          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)",
+          disabled: "#dfdfdf",
+          info: "rgb(26.3% 49.4% 93.7% / 0.1)",
+          warning: "rgb(100% 46.7% 16.1% / 0.1)"
+        },
+        text: {
+          "default": "#696e79",
+          success: "#008A0B",
+          neutral: "#53575f",
+          danger: "#c10000",
+          disabled: "#a0a0a0",
+          info: "#437EEF",
+          warning: "#A33C00"
+        },
+        stroke: {
+          "default": "#e6e7e9",
+          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)",
+          disabled: "rgb(83.1% 83.1% 83.1%)",
+          info: "rgb(26.3% 49.4% 93.7% / 0.05)",
+          warning: "rgb(100% 46.7% 16.1% / 0.05)"
+        }
+      }
+    },
+    solid: {
+      color: {
+        background: {
+          "default": "#a0a0a0",
+          success: "#008A0B",
+          neutral: "#606060",
+          danger: "#c10000",
+          disabled: "#dfdfdf",
+          info: "#104EC6",
+          warning: "#D64F00"
+        },
+        text: {
+          "default": "#ffffff",
+          success: "#ffffff",
+          neutral: "#ffffff",
+          danger: "#ffffff",
+          disabled: "#a0a0a0",
+          info: "#ffffff",
+          warning: "#ffffff"
+        },
+        stroke: {
+          "default": "rgb(90.2% 90.6% 91.4% / 0.1)",
+          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)",
+          disabled: "rgb(83.1% 83.1% 83.1%)",
+          info: "rgb(26.3% 49.4% 93.7% / 0.05)",
+          warning: "rgb(100% 46.7% 16.1% / 0.05)"
+        }
       }
     }
   },