@clickhouse/click-ui 0.0.187 → 0.0.189

package/dist/click-ui.umd.js

@@ -871,6 +871,15 @@ var __publicField = (obj, key, value) => {
       /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "ukFlagClipPath2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#fff", d: "M0 0h30v20H0z" }) })
     ] })
   ] });
+  const UnitedArabEmirates = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "30", height: "20", viewBox: "0 0 30 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_10582_2024)", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M30 0H0V20H30V0Z", fill: "#00732F" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M30 6.6665H0V19.9998H30V6.6665Z", fill: "white" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M30 13.3335H0V20.0002H30V13.3335Z", fill: "black" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 0H0V20H7.5V0Z", fill: "#FF0000" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_10582_2024", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "30", height: "20", fill: "white" }) }) })
+  ] });
   const EuropeanUnion = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 30, height: 20, viewBox: "0 0 30 20", fill: "none", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#euFlagClipPath1)", children: /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#euFlagClipPath2)", children: [
       /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#039", d: "M30 0H0v20h30V0Z" }),
@@ -1098,6 +1107,18 @@ var __publicField = (obj, key, value) => {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_3880_12429", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "30", height: "19.9999", rx: "1", fill: "white" }) }) })
   ] });
+  const SouthKorea = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "30", height: "20", viewBox: "0 0 30 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_10582_2008)", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 0V20H30V0H0Z", fill: "white" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_10582_2008", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "30", height: "20", fill: "white" }) }) })
+  ] });
   const Brazil = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "21", viewBox: "0 0 30 21", fill: "none", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_3880_11917)", children: [
       /* @__PURE__ */ jsxRuntime.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" }),
@@ -1518,6 +1539,7 @@ var __publicField = (obj, key, value) => {
     /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_8668_6183", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "30", height: "20", fill: "white" }) }) })
   ] });
   const FlagList = {
+    ae: UnitedArabEmirates,
     au: Australia,
     br: Brazil,
     ca: Canada,
@@ -1531,6 +1553,7 @@ var __publicField = (obj, key, value) => {
     nl: Netherlands,
     sg: Singapore,
     za: SouthAfrica,
+    kr: SouthKorea,
     sw: Sweden,
     uk: UnitedKingdom,
     usa: UnitedStates
@@ -9316,13 +9339,14 @@ var __publicField = (obj, key, value) => {
   })(["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 = styledComponents.styled.div.withConfig({
@@ -9336,9 +9360,10 @@ var __publicField = (obj, key, value) => {
   })(["", ""], ({
     $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};
   `);
@@ -9346,12 +9371,13 @@ var __publicField = (obj, key, value) => {
     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 = ({
@@ -9360,10 +9386,11 @@ var __publicField = (obj, key, value) => {
     text: text2,
     state = "default",
     size: size2,
+    type,
     dismissible,
     onClose,
     ...props
-  }) => /* @__PURE__ */ jsxRuntime.jsx(Wrapper$c, { $state: state, $size: size2, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Content$4, { children: [
+  }) => /* @__PURE__ */ jsxRuntime.jsx(Wrapper$c, { $state: state, $size: size2, $type: type, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Content$4, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(BadgeContent, { as: IconWrapper$3, icon, iconDir, size: size2, $state: state, children: text2 }),
     dismissible && /* @__PURE__ */ jsxRuntime.jsx(SvgContainer, { name: "cross", $state: state, as: SvgImage, onClick: onClose, "aria-label": "close" })
   ] }) });
@@ -34020,6 +34047,16 @@ var __publicField = (obj, key, value) => {
       loading && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "loading-animated", size: "sm" })
     ] });
   });
+  const useUpdateEffect = (effect, deps) => {
+    const isFirstMount = React.useRef(true);
+    React.useEffect(() => {
+      if (isFirstMount) {
+        isFirstMount.current = false;
+        return;
+      }
+      return effect();
+    }, deps);
+  };
   const SelectPopoverRoot = styledComponents.styled($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9).withConfig({
     componentId: "sc-oudbwg-0"
   })(["width:100%;"]);
@@ -38009,7 +38046,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
         onSelect(values[0]);
       }
     }, [selectedValues, onSelect]);
-    React.useEffect(() => {
+    useUpdateEffect(() => {
       setSelectedValues(valueProp ? [valueProp] : []);
     }, [valueProp]);
     const conditionalProps = {};
@@ -38039,7 +38076,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
         onOpenChangeProp(open22);
       }
     }, [onOpenChangeProp]);
-    React.useEffect(() => {
+    useUpdateEffect(() => {
       setSelectedValues(valueProp ?? []);
     }, [valueProp]);
     const onChange = React.useCallback((values, type) => {
@@ -42896,33 +42933,66 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       }
     },
     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)"
+          }
         }
       }
     },
@@ -44644,33 +44714,66 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       }
     },
     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)"
+          }
         }
       }
     },
@@ -46540,33 +46643,66 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           }
         }
       },
-      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)"
+          }
         }
       }
     },

package/dist/components/Badge/Badge.d.ts

@@ -4,10 +4,12 @@ import { ImageName } from '../Icon/types';
 
 export type BadgeState = "default" | "success" | "neutral" | "danger" | "disabled" | "warning" | "info";
 export type BadgeSize = "sm" | "md";
+export type BadgeType = "opaque" | "solid";
 export interface CommonBadgeProps extends HTMLAttributes<HTMLDivElement> {
     text: ReactNode;
     state?: BadgeState;
     size?: BadgeSize;
+    type?: BadgeType;
     icon?: ImageName;
     iconDir?: HorizontalDirection;
 }
@@ -20,4 +22,4 @@ export interface NonDismissibleBadge extends CommonBadgeProps {
     onClose?: never;
 }
 export type BadgeProps = NonDismissibleBadge | DismissibleBadge;
-export declare const Badge: ({ icon, iconDir, text, state, size, dismissible, onClose, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ icon, iconDir, text, state, size, type, dismissible, onClose, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/CardPrimary/CardPrimaryTopBadge.d.ts

@@ -1,4 +1,4 @@
 export declare const TopBadgeWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<any, never> & import('../Container/Container').ContainerProps<import('react').ElementType>, never>> & string & Omit<(<T extends import('react').ElementType = "div">(props: Omit<import('react').ComponentProps<T>, keyof T> & import('../Container/Container').ContainerProps<T>) => import('react').ReactNode), keyof import('react').Component<any, {}, any>>;
 export declare const CardPrimaryTopBadge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../Badge/Badge').DismissibleBadge | import('../Badge/Badge').NonDismissibleBadge, {
     $isSelected?: boolean;
-}>> & string & Omit<({ icon, iconDir, text, state, size, dismissible, onClose, ...props }: import('../Badge/Badge').BadgeProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+}>> & string & Omit<({ icon, iconDir, text, state, size, type, dismissible, onClose, ...props }: import('../Badge/Badge').BadgeProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;

package/dist/components/icons/Flags/SouthKorea.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+
+declare const SouthKorea: (props: React.SVGAttributes<SVGElement>) => React.ReactElement;
+export default SouthKorea;

package/dist/components/icons/Flags/UnitedArabEmirates.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+
+declare const UnitedArabEmirates: (props: React.SVGAttributes<SVGElement>) => React.ReactElement;
+export default UnitedArabEmirates;

package/dist/components/icons/Flags/index.d.ts

@@ -1,12 +1,13 @@
 import { SVGAttributes } from 'react';
 import { IconSize } from '../../Icon/types';
 
-export type FlagName = "au" | "br" | "ca" | "ch" | "de" | "eu" | "gb" | "in" | "ie" | "jp" | "nl" | "sg" | "sw" | "usa" | "uk" | "za";
+export type FlagName = "ae" | "au" | "br" | "ca" | "ch" | "de" | "eu" | "gb" | "in" | "ie" | "jp" | "nl" | "sg" | "kr" | "sw" | "usa" | "uk" | "za";
 export interface FlagProps extends Omit<SVGAttributes<SVGElement>, "size"> {
     name: FlagName;
     size?: IconSize;
 }
 export declare const FlagList: {
+    ae: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;
     au: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;
     br: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;
     ca: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;
@@ -20,6 +21,7 @@ export declare const FlagList: {
     nl: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;
     sg: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;
     za: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;
+    kr: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;
     sw: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;
     uk: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;
     usa: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useUpdateEffect';

package/dist/hooks/useUpdateEffect.d.ts

@@ -0,0 +1,3 @@
+import { useEffect } from 'react';
+
+export declare const useUpdateEffect: typeof useEffect;

package/dist/styles/types.d.ts

@@ -239,33 +239,66 @@ export interface Theme {
                     };
                 };
             };
-            "color": {
-                "background": {
-                    "default": string;
-                    "success": string;
-                    "neutral": string;
-                    "danger": string;
-                    "disabled": string;
-                    "info": string;
-                    "warning": string;
-                };
-                "text": {
-                    "default": string;
-                    "success": string;
-                    "neutral": string;
-                    "danger": string;
-                    "disabled": string;
-                    "info": string;
-                    "warning": string;
+            "opaque": {
+                "color": {
+                    "background": {
+                        "default": string;
+                        "success": string;
+                        "neutral": string;
+                        "danger": string;
+                        "disabled": string;
+                        "info": string;
+                        "warning": string;
+                    };
+                    "text": {
+                        "default": string;
+                        "success": string;
+                        "neutral": string;
+                        "danger": string;
+                        "disabled": string;
+                        "info": string;
+                        "warning": string;
+                    };
+                    "stroke": {
+                        "default": string;
+                        "success": string;
+                        "neutral": string;
+                        "danger": string;
+                        "disabled": string;
+                        "info": string;
+                        "warning": string;
+                    };
                 };
-                "stroke": {
-                    "default": string;
-                    "success": string;
-                    "neutral": string;
-                    "danger": string;
-                    "disabled": string;
-                    "info": string;
-                    "warning": string;
+            };
+            "solid": {
+                "color": {
+                    "background": {
+                        "default": string;
+                        "success": string;
+                        "neutral": string;
+                        "danger": string;
+                        "disabled": string;
+                        "info": string;
+                        "warning": string;
+                    };
+                    "text": {
+                        "default": string;
+                        "success": string;
+                        "neutral": string;
+                        "danger": string;
+                        "disabled": string;
+                        "info": string;
+                        "warning": string;
+                    };
+                    "stroke": {
+                        "default": string;
+                        "success": string;
+                        "neutral": string;
+                        "danger": string;
+                        "disabled": string;
+                        "info": string;
+                        "warning": string;
+                    };
                 };
             };
         };