@snmt-react-ui/country-select 2.2.1 → 2.3.0

package/dist/CountrySelect.d.ts

@@ -1,8 +1,8 @@
 export interface CountrySelectProps {
     /**  Sets value for the city select  */
-    value?: string;
+    value?: string | null;
     /** Callback to handle change event  */
-    onChange: (value: string) => void;
+    onChange: (value: string | null) => void;
     /**  Sets city value if country select is used first  */
     selectedCity?: string;
     /** Custom width of a date picker */

package/dist/country-select.js

@@ -75,7 +75,7 @@ const de = ({
     }
   );
 };
-var m = /* @__PURE__ */ ((i) => (i.GREY_LIGHT_0 = "var(--grey-light-0)", i.GREY_LIGHT_1 = "var(--grey-light-1)", i.GREY_LIGHT_2 = "var(--grey-light-2)", i.GREY_LIGHT_3 = "var(--grey-light-3)", i.GREY_LIGHT_4 = "var(--grey-light-4)", i.GREY_DARK_1 = "var(--grey-dark-1)", i.GREY_DARK_2 = "var(--grey-dark-2)", i.GREY_DARK_3 = "var(--grey-dark-3)", i.GREY_DARK_4 = "var(--grey-dark-4)", i.GREY_DARK_5 = "var(--grey-dark-5)", i.BLUE_PRIMARY = "var(--blue-primary)", i.BLUE_HOVER = "var(--blue-hover)", i.BLUE_LIGHT_1 = "var(--blue-light-1)", i.BLUE_LIGHT_2 = "var(--blue-light-2)", i.BLUE_LIGHT_3 = "var(--blue-light-3)", i.BLUE_LIGHT_4 = "var(--blue-light-4)", i.BLUE_DARK_1 = "var(--blue-dark-1)", i.PURPLE_LIGHT = "var(--purple-light)", i.PURPLE_DARK = "var(--purple-dark)", i.NOTIFICATION_WARNING_LIGHT = "var(--notification-warning-light)", i.NOTIFICATION_WARNING_DARK = "var(--notification-warning-dark)", i.NOTIFICATION_SUCCESS_LIGHT = "var(--notification-success-light)", i.NOTIFICATION_SUCCESS_DARK = "var(--notification-success-dark)", i.NOTIFICATION_ERROR_LIGHT = "var(--notification-error-light)", i.NOTIFICATION_ERROR_DARK = "var(--notification-error-dark)", i.NOTIFICATION_ERROR_DARK_MODE = "var(--notification-error-dark-mode)", i))(m || {});
+var k = /* @__PURE__ */ ((i) => (i.GREY_LIGHT_0 = "var(--grey-light-0)", i.GREY_LIGHT_1 = "var(--grey-light-1)", i.GREY_LIGHT_2 = "var(--grey-light-2)", i.GREY_LIGHT_3 = "var(--grey-light-3)", i.GREY_LIGHT_4 = "var(--grey-light-4)", i.GREY_DARK_1 = "var(--grey-dark-1)", i.GREY_DARK_2 = "var(--grey-dark-2)", i.GREY_DARK_3 = "var(--grey-dark-3)", i.GREY_DARK_4 = "var(--grey-dark-4)", i.GREY_DARK_5 = "var(--grey-dark-5)", i.BLUE_PRIMARY = "var(--blue-primary)", i.BLUE_HOVER = "var(--blue-hover)", i.BLUE_LIGHT_1 = "var(--blue-light-1)", i.BLUE_LIGHT_2 = "var(--blue-light-2)", i.BLUE_LIGHT_3 = "var(--blue-light-3)", i.BLUE_LIGHT_4 = "var(--blue-light-4)", i.BLUE_DARK_1 = "var(--blue-dark-1)", i.PURPLE_LIGHT = "var(--purple-light)", i.PURPLE_DARK = "var(--purple-dark)", i.NOTIFICATION_WARNING_LIGHT = "var(--notification-warning-light)", i.NOTIFICATION_WARNING_DARK = "var(--notification-warning-dark)", i.NOTIFICATION_SUCCESS_LIGHT = "var(--notification-success-light)", i.NOTIFICATION_SUCCESS_DARK = "var(--notification-success-dark)", i.NOTIFICATION_ERROR_LIGHT = "var(--notification-error-light)", i.NOTIFICATION_ERROR_DARK = "var(--notification-error-dark)", i.NOTIFICATION_ERROR_DARK_MODE = "var(--notification-error-dark-mode)", i))(k || {});
 const G1 = e1({
   locale: "en",
   theme: "light"
@@ -1621,7 +1621,7 @@ const ge = ({
 ), tt = ({
   width: i = 24,
   height: e = 24,
-  color: t = m.GREY_DARK_5,
+  color: t = k.GREY_DARK_5,
   className: s,
   onClick: o
 }) => /* @__PURE__ */ u(
@@ -1660,7 +1660,7 @@ const ge = ({
 ), it = ({
   width: i = 20,
   height: e = 20,
-  color: t = m.GREY_DARK_1,
+  color: t = k.GREY_DARK_1,
   className: s,
   onClick: o
 }) => /* @__PURE__ */ u(
@@ -1693,7 +1693,7 @@ const ge = ({
 ), st = ({
   width: i = 81,
   height: e = 80,
-  color: t = m.GREY_DARK_5,
+  color: t = k.GREY_DARK_5,
   className: s,
   onClick: o
 }) => /* @__PURE__ */ u(
@@ -1741,7 +1741,7 @@ const ge = ({
   }
 ), ot = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 20,
   width: s = 20,
   onClick: o
@@ -1768,7 +1768,7 @@ const ge = ({
   }
 ), nt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 20,
   width: s = 20,
   onClick: o
@@ -1795,7 +1795,7 @@ const ge = ({
   }
 ), rt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 5,
   width: s = 10,
   onClick: o
@@ -1819,7 +1819,7 @@ const ge = ({
   }
 ), lt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 5,
   width: s = 10,
   onClick: o
@@ -1844,7 +1844,7 @@ const ge = ({
   }
 ), at = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -1883,7 +1883,7 @@ const ge = ({
   }
 ), ht = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -1922,7 +1922,7 @@ const ge = ({
   }
 ), ct = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -1949,7 +1949,7 @@ const ge = ({
   }
 ), dt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2008,7 +2008,7 @@ const ge = ({
   }
 ), gt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2045,7 +2045,7 @@ const ge = ({
   }
 ), ut = ({
   className: i,
-  color: e = m.GREY_DARK_3,
+  color: e = k.GREY_DARK_3,
   height: t = 14,
   width: s = 14,
   onClick: o
@@ -2082,7 +2082,7 @@ const ge = ({
   }
 ), Ct = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 18,
   onClick: s,
   width: o = 18
@@ -2109,7 +2109,7 @@ const ge = ({
   }
 ), pt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2161,7 +2161,7 @@ const ge = ({
   }
 ), ft = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2198,7 +2198,7 @@ const ge = ({
   }
 ), wt = ({
   className: i,
-  color: e = m.NOTIFICATION_WARNING_DARK,
+  color: e = k.NOTIFICATION_WARNING_DARK,
   height: t = 37,
   width: s = 36,
   onClick: o
@@ -2237,7 +2237,7 @@ const ge = ({
   }
 ), mt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2263,7 +2263,7 @@ const ge = ({
   }
 ), kt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2302,7 +2302,7 @@ const ge = ({
   }
 ), Lt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2341,7 +2341,7 @@ const ge = ({
   }
 ), vt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2410,7 +2410,7 @@ const ge = ({
   }
 ), Nt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2449,7 +2449,7 @@ const ge = ({
   }
 ), xt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2506,7 +2506,7 @@ const ge = ({
   }
 ), Rt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2545,7 +2545,7 @@ const ge = ({
   }
 ), Mt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2594,7 +2594,7 @@ const ge = ({
   }
 ), yt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2633,7 +2633,7 @@ const ge = ({
   }
 ), bt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2660,7 +2660,7 @@ const ge = ({
   }
 ), Et = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2698,7 +2698,7 @@ const ge = ({
   }
 ), _t = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2719,7 +2719,7 @@ const ge = ({
   }
 ), Ht = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2758,7 +2758,7 @@ const ge = ({
   }
 ), Vt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2797,7 +2797,7 @@ const ge = ({
   }
 ), It = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -2836,7 +2836,7 @@ const ge = ({
   }
 ), St = ({
   className: i,
-  color: e = m.GREY_DARK_2,
+  color: e = k.GREY_DARK_2,
   height: t = 16,
   width: s = 16,
   onClick: o
@@ -2862,7 +2862,7 @@ const ge = ({
   }
 ), Ot = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 20,
   width: s = 20,
   onClick: o
@@ -2891,7 +2891,7 @@ const ge = ({
   }
 ), At = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 20,
   width: s = 20,
   onClick: o
@@ -2920,7 +2920,7 @@ const ge = ({
   }
 ), Bt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 20,
   width: s = 20,
   onClick: o
@@ -2935,7 +2935,7 @@ const ge = ({
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ n("rect", { width: "20", height: "20", rx: "4", fill: m.GREY_LIGHT_2 }),
+      /* @__PURE__ */ n("rect", { width: "20", height: "20", rx: "4", fill: k.GREY_LIGHT_2 }),
       /* @__PURE__ */ n(
         "path",
         {
@@ -2949,7 +2949,7 @@ const ge = ({
   }
 ), Wt = ({
   className: i,
-  color: e = m.GREY_DARK_5,
+  color: e = k.GREY_DARK_5,
   height: t = 20,
   width: s = 20,
   onClick: o
@@ -2964,7 +2964,7 @@ const ge = ({
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ n("rect", { width: "20", height: "20", rx: "4", fill: m.GREY_LIGHT_2 }),
+      /* @__PURE__ */ n("rect", { width: "20", height: "20", rx: "4", fill: k.GREY_LIGHT_2 }),
       /* @__PURE__ */ n(
         "path",
         {
@@ -3077,7 +3077,7 @@ const ge = ({
   disabled: l = !1,
   onClick: c
 }) => {
-  const [r, d] = S(o), { theme: g } = t1(G1), a = l ? g && g === "dark" ? m.GREY_LIGHT_4 : m.GREY_DARK_1 : s, h = l ? void 0 : c;
+  const [r, d] = S(o), { theme: g } = t1(G1), a = l ? g && g === "dark" ? k.GREY_LIGHT_4 : k.GREY_DARK_1 : s, h = l ? void 0 : c;
   return A(() => {
     if (o) {
       h && !l && d(`${o} clickable`);
@@ -3367,7 +3367,7 @@ const ge = ({
     );
   }
 );
-var k = /* @__PURE__ */ ((i) => (i.GREY_LIGHT_0 = "var(--grey-light-0)", i.GREY_LIGHT_1 = "var(--grey-light-1)", i.GREY_LIGHT_2 = "var(--grey-light-2)", i.GREY_LIGHT_3 = "var(--grey-light-3)", i.GREY_LIGHT_4 = "var(--grey-light-4)", i.GREY_DARK_1 = "var(--grey-dark-1)", i.GREY_DARK_2 = "var(--grey-dark-2)", i.GREY_DARK_3 = "var(--grey-dark-3)", i.GREY_DARK_4 = "var(--grey-dark-4)", i.GREY_DARK_5 = "var(--grey-dark-5)", i.BLUE_PRIMARY = "var(--blue-primary)", i.BLUE_HOVER = "var(--blue-hover)", i.BLUE_LIGHT_1 = "var(--blue-light-1)", i.BLUE_LIGHT_2 = "var(--blue-light-2)", i.BLUE_LIGHT_3 = "var(--blue-light-3)", i.BLUE_LIGHT_4 = "var(--blue-light-4)", i.BLUE_DARK_1 = "var(--blue-dark-1)", i.PURPLE_LIGHT = "var(--purple-light)", i.PURPLE_DARK = "var(--purple-dark)", i.NOTIFICATION_WARNING_LIGHT = "var(--notification-warning-light)", i.NOTIFICATION_WARNING_DARK = "var(--notification-warning-dark)", i.NOTIFICATION_SUCCESS_LIGHT = "var(--notification-success-light)", i.NOTIFICATION_SUCCESS_DARK = "var(--notification-success-dark)", i.NOTIFICATION_ERROR_LIGHT = "var(--notification-error-light)", i.NOTIFICATION_ERROR_DARK = "var(--notification-error-dark)", i.NOTIFICATION_ERROR_DARK_MODE = "var(--notification-error-dark-mode)", i))(k || {});
+var L = /* @__PURE__ */ ((i) => (i.GREY_LIGHT_0 = "var(--grey-light-0)", i.GREY_LIGHT_1 = "var(--grey-light-1)", i.GREY_LIGHT_2 = "var(--grey-light-2)", i.GREY_LIGHT_3 = "var(--grey-light-3)", i.GREY_LIGHT_4 = "var(--grey-light-4)", i.GREY_DARK_1 = "var(--grey-dark-1)", i.GREY_DARK_2 = "var(--grey-dark-2)", i.GREY_DARK_3 = "var(--grey-dark-3)", i.GREY_DARK_4 = "var(--grey-dark-4)", i.GREY_DARK_5 = "var(--grey-dark-5)", i.BLUE_PRIMARY = "var(--blue-primary)", i.BLUE_HOVER = "var(--blue-hover)", i.BLUE_LIGHT_1 = "var(--blue-light-1)", i.BLUE_LIGHT_2 = "var(--blue-light-2)", i.BLUE_LIGHT_3 = "var(--blue-light-3)", i.BLUE_LIGHT_4 = "var(--blue-light-4)", i.BLUE_DARK_1 = "var(--blue-dark-1)", i.PURPLE_LIGHT = "var(--purple-light)", i.PURPLE_DARK = "var(--purple-dark)", i.NOTIFICATION_WARNING_LIGHT = "var(--notification-warning-light)", i.NOTIFICATION_WARNING_DARK = "var(--notification-warning-dark)", i.NOTIFICATION_SUCCESS_LIGHT = "var(--notification-success-light)", i.NOTIFICATION_SUCCESS_DARK = "var(--notification-success-dark)", i.NOTIFICATION_ERROR_LIGHT = "var(--notification-error-light)", i.NOTIFICATION_ERROR_DARK = "var(--notification-error-dark)", i.NOTIFICATION_ERROR_DARK_MODE = "var(--notification-error-dark-mode)", i))(L || {});
 const K1 = e1({
   locale: "en",
   theme: "light"
@@ -4913,7 +4913,7 @@ const Ft = ({
 ), O2 = ({
   width: i = 24,
   height: e = 24,
-  color: t = k.GREY_DARK_5,
+  color: t = L.GREY_DARK_5,
   className: s,
   onClick: o
 }) => /* @__PURE__ */ u(
@@ -4952,7 +4952,7 @@ const Ft = ({
 ), A2 = ({
   width: i = 20,
   height: e = 20,
-  color: t = k.GREY_DARK_1,
+  color: t = L.GREY_DARK_1,
   className: s,
   onClick: o
 }) => /* @__PURE__ */ u(
@@ -4985,7 +4985,7 @@ const Ft = ({
 ), B2 = ({
   width: i = 81,
   height: e = 80,
-  color: t = k.GREY_DARK_5,
+  color: t = L.GREY_DARK_5,
   className: s,
   onClick: o
 }) => /* @__PURE__ */ u(
@@ -5033,7 +5033,7 @@ const Ft = ({
   }
 ), W2 = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 20,
   width: s = 20,
   onClick: o
@@ -5060,7 +5060,7 @@ const Ft = ({
   }
 ), j2 = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 20,
   width: s = 20,
   onClick: o
@@ -5087,7 +5087,7 @@ const Ft = ({
   }
 ), Z2 = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 5,
   width: s = 10,
   onClick: o
@@ -5111,7 +5111,7 @@ const Ft = ({
   }
 ), D2 = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 5,
   width: s = 10,
   onClick: o
@@ -5136,7 +5136,7 @@ const Ft = ({
   }
 ), T2 = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5175,7 +5175,7 @@ const Ft = ({
   }
 ), G2 = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5214,7 +5214,7 @@ const Ft = ({
   }
 ), K2 = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5241,7 +5241,7 @@ const Ft = ({
   }
 ), P2 = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5300,7 +5300,7 @@ const Ft = ({
   }
 ), F2 = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5337,7 +5337,7 @@ const Ft = ({
   }
 ), $2 = ({
   className: i,
-  color: e = k.GREY_DARK_3,
+  color: e = L.GREY_DARK_3,
   height: t = 14,
   width: s = 14,
   onClick: o
@@ -5374,7 +5374,7 @@ const Ft = ({
   }
 ), Y2 = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 18,
   onClick: s,
   width: o = 18
@@ -5401,7 +5401,7 @@ const Ft = ({
   }
 ), U2 = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5453,7 +5453,7 @@ const Ft = ({
   }
 ), z2 = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5490,7 +5490,7 @@ const Ft = ({
   }
 ), J2 = ({
   className: i,
-  color: e = k.NOTIFICATION_WARNING_DARK,
+  color: e = L.NOTIFICATION_WARNING_DARK,
   height: t = 37,
   width: s = 36,
   onClick: o
@@ -5529,7 +5529,7 @@ const Ft = ({
   }
 ), Q2 = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5555,7 +5555,7 @@ const Ft = ({
   }
 ), q2 = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5594,7 +5594,7 @@ const Ft = ({
   }
 ), X2 = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5633,7 +5633,7 @@ const Ft = ({
   }
 ), ei = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5702,7 +5702,7 @@ const Ft = ({
   }
 ), ti = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5741,7 +5741,7 @@ const Ft = ({
   }
 ), ii = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5798,7 +5798,7 @@ const Ft = ({
   }
 ), si = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5837,7 +5837,7 @@ const Ft = ({
   }
 ), oi = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5886,7 +5886,7 @@ const Ft = ({
   }
 ), ni = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5925,7 +5925,7 @@ const Ft = ({
   }
 ), ri = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5952,7 +5952,7 @@ const Ft = ({
   }
 ), li = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -5990,7 +5990,7 @@ const Ft = ({
   }
 ), ai = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -6011,7 +6011,7 @@ const Ft = ({
   }
 ), hi = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -6050,7 +6050,7 @@ const Ft = ({
   }
 ), ci = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -6089,7 +6089,7 @@ const Ft = ({
   }
 ), di = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 24,
   width: s = 24,
   onClick: o
@@ -6128,7 +6128,7 @@ const Ft = ({
   }
 ), gi = ({
   className: i,
-  color: e = k.GREY_DARK_2,
+  color: e = L.GREY_DARK_2,
   height: t = 16,
   width: s = 16,
   onClick: o
@@ -6154,7 +6154,7 @@ const Ft = ({
   }
 ), ui = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 20,
   width: s = 20,
   onClick: o
@@ -6183,7 +6183,7 @@ const Ft = ({
   }
 ), Ci = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 20,
   width: s = 20,
   onClick: o
@@ -6212,7 +6212,7 @@ const Ft = ({
   }
 ), pi = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 20,
   width: s = 20,
   onClick: o
@@ -6227,7 +6227,7 @@ const Ft = ({
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ n("rect", { width: "20", height: "20", rx: "4", fill: k.GREY_LIGHT_2 }),
+      /* @__PURE__ */ n("rect", { width: "20", height: "20", rx: "4", fill: L.GREY_LIGHT_2 }),
       /* @__PURE__ */ n(
         "path",
         {
@@ -6241,7 +6241,7 @@ const Ft = ({
   }
 ), fi = ({
   className: i,
-  color: e = k.GREY_DARK_5,
+  color: e = L.GREY_DARK_5,
   height: t = 20,
   width: s = 20,
   onClick: o
@@ -6256,7 +6256,7 @@ const Ft = ({
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ n("rect", { width: "20", height: "20", rx: "4", fill: k.GREY_LIGHT_2 }),
+      /* @__PURE__ */ n("rect", { width: "20", height: "20", rx: "4", fill: L.GREY_LIGHT_2 }),
       /* @__PURE__ */ n(
         "path",
         {
@@ -6369,7 +6369,7 @@ const Ft = ({
   disabled: l = !1,
   onClick: c
 }) => {
-  const [r, d] = S(o), { theme: g } = t1(K1), a = l ? g && g === "dark" ? k.GREY_LIGHT_4 : k.GREY_DARK_1 : s, h = l ? void 0 : c;
+  const [r, d] = S(o), { theme: g } = t1(K1), a = l ? g && g === "dark" ? L.GREY_LIGHT_4 : L.GREY_DARK_1 : s, h = l ? void 0 : c;
   return A(() => {
     if (o) {
       h && !l && d(`${o} clickable`);
@@ -6783,11 +6783,11 @@ const F1 = ({ children: i, width: e, size: t = "small", onClose: s, closable: o
     id: w,
     extraOptions: v,
     dropdownRender: N,
-    optionRender: R,
-    isLoading: x,
-    readOnly: E
-  }, L) => {
-    const [y, b] = S(!1), [M, D] = S(!1), [i1, P] = S(!0), [V, s1] = S(i), o1 = N1(null);
+    optionRender: E,
+    isLoading: y,
+    readOnly: R
+  }, m) => {
+    const [x, b] = S(!1), [M, D] = S(!1), [i1, P] = S(!0), [V, s1] = S(i), o1 = N1(null);
     A(() => {
       s1(i);
     }, [i]);
@@ -6812,14 +6812,14 @@ const F1 = ({ children: i, width: e, size: t = "small", onClose: s, closable: o
       },
       [s, e]
     ), j = Z(() => {
-      if (!E) {
+      if (!R) {
         if (s) {
           H([]);
           return;
         }
         H("");
       }
-    }, [H, s, E]), B = Z(
+    }, [H, s, R]), B = Z(
       (f) => {
         const _ = V.filter((O) => O !== f);
         H(_), s1(_);
@@ -6854,13 +6854,13 @@ const F1 = ({ children: i, width: e, size: t = "small", onClose: s, closable: o
             values: f,
             onTagClose: B,
             maxWidth: ((_ = o1.current) == null ? void 0 : _.clientWidth) || 0,
-            disabled: r || E,
+            disabled: r || R,
             options: l,
             extraOptions: v
           }
         );
       },
-      [r, v, B, l, E]
+      [r, v, B, l, R]
     ), te = Z(
       ({ label: f, value: _, mode: O }) => O === "filter" ? J(_) : /* @__PURE__ */ n("div", { onMouseDown: q1, className: "tag-wrapper", children: /* @__PURE__ */ n(F1, { onClose: () => B(_), closable: !r, children: /* @__PURE__ */ n($1, { variant: "body4", children: typeof f == "object" ? f : p1(_) }) }) }),
       [r, p1, B, J]
@@ -6869,7 +6869,7 @@ const F1 = ({ children: i, width: e, size: t = "small", onClose: s, closable: o
       "div",
       {
         className: `snmt-select ${M ? "snmt-select-focused" : ""} 
-                ${s ? "" : "snmt-select-single"} ${E ? "snmt-select-read-only" : ""}`,
+                ${s ? "" : "snmt-select-single"} ${R ? "snmt-select-read-only" : ""}`,
         ref: o1,
         style: { width: c },
         children: [
@@ -6877,9 +6877,9 @@ const F1 = ({ children: i, width: e, size: t = "small", onClose: s, closable: o
             ne,
             {
               className: "snmt-select-blank",
-              popupClassName: E ? "dropdown-read-only" : "",
+              popupClassName: R ? "dropdown-read-only" : "",
               id: w,
-              ref: L,
+              ref: m,
               showSearch: !!o,
               filterOption: o && G,
               onDropdownVisibleChange: T,
@@ -6900,7 +6900,7 @@ const F1 = ({ children: i, width: e, size: t = "small", onClose: s, closable: o
               maxTagCount: "responsive",
               maxTagPlaceholder: ee,
               onPopupScroll: X1,
-              prefix: E && !i && /* @__PURE__ */ n(R1, { size: 15 }),
+              prefix: R && !i && /* @__PURE__ */ n(R1, { size: 15 }),
               suffixIcon: /* @__PURE__ */ n("div", { className: "wrapper-suffix-icon", children: s !== "filter" && /* @__PURE__ */ u(z, { children: [
                 s && V && !!V.length && /* @__PURE__ */ n("div", { onClick: j, children: /* @__PURE__ */ n(r1, { name: "cancel" }) }),
                 /* @__PURE__ */ n(
@@ -6908,14 +6908,14 @@ const F1 = ({ children: i, width: e, size: t = "small", onClose: s, closable: o
                   {
                     name: "selectArrowIcon",
                     color: r ? U.GREY_DARK_1 : U.GREY_DARK_5,
-                    className: y ? "select-arrow-rotated" : "select-arrow",
-                    onClick: () => b(!y)
+                    className: x ? "select-arrow-rotated" : "select-arrow",
+                    onClick: () => b(!x)
                   }
                 )
               ] }) }),
               removeIcon: /* @__PURE__ */ n(r1, { name: "errorSmall", color: U.GREY_DARK_2 }),
               options: l,
-              optionRender: (f) => R ? R(f.data) : /* @__PURE__ */ u(a1, { justifyContent: "space-between", alignItems: "center", flex: "1", children: [
+              optionRender: (f) => E ? E(f.data) : /* @__PURE__ */ u(a1, { justifyContent: "space-between", alignItems: "center", flex: "1", children: [
                 /* @__PURE__ */ u(a1, { alignItems: "center", gap: 12, children: [
                   s && /* @__PURE__ */ n(
                     de,
@@ -6938,7 +6938,7 @@ const F1 = ({ children: i, width: e, size: t = "small", onClose: s, closable: o
                   }
                 )
               ] }),
-              dropdownRender: x ? () => /* @__PURE__ */ n(
+              dropdownRender: y ? () => /* @__PURE__ */ n(
                 "div",
                 {
                   style: {
@@ -7302,15 +7302,15 @@ class g1 extends C1 {
     } = this.extractFromKey(e[e.length - 1], t), d = r[r.length - 1], g = t.lng || this.language, a = t.appendNamespaceToCIMode || this.options.appendNamespaceToCIMode;
     if (g && g.toLowerCase() === "cimode") {
       if (a) {
-        const L = t.nsSeparator || this.options.nsSeparator;
+        const m = t.nsSeparator || this.options.nsSeparator;
         return o ? {
-          res: `${d}${L}${c}`,
+          res: `${d}${m}${c}`,
           usedKey: c,
           exactUsedKey: c,
           usedLng: g,
           usedNS: d,
           usedParams: this.getUsedParamsDetails(t)
-        } : `${d}${L}${c}`;
+        } : `${d}${m}${c}`;
       }
       return o ? {
         res: c,
@@ -7323,39 +7323,39 @@ class g1 extends C1 {
     }
     const h = this.resolve(e, t);
     let C = h && h.res;
-    const p = h && h.usedKey || c, w = h && h.exactUsedKey || c, v = Object.prototype.toString.apply(C), N = ["[object Number]", "[object Function]", "[object RegExp]"], R = t.joinArrays !== void 0 ? t.joinArrays : this.options.joinArrays, x = !this.i18nFormat || this.i18nFormat.handleAsObject;
-    if (x && C && (typeof C != "string" && typeof C != "boolean" && typeof C != "number") && N.indexOf(v) < 0 && !(typeof R == "string" && Array.isArray(C))) {
+    const p = h && h.usedKey || c, w = h && h.exactUsedKey || c, v = Object.prototype.toString.apply(C), N = ["[object Number]", "[object Function]", "[object RegExp]"], E = t.joinArrays !== void 0 ? t.joinArrays : this.options.joinArrays, y = !this.i18nFormat || this.i18nFormat.handleAsObject;
+    if (y && C && (typeof C != "string" && typeof C != "boolean" && typeof C != "number") && N.indexOf(v) < 0 && !(typeof E == "string" && Array.isArray(C))) {
       if (!t.returnObjects && !this.options.returnObjects) {
         this.options.returnedObjectHandler || this.logger.warn("accessing an object - but returnObjects options is not enabled!");
-        const L = this.options.returnedObjectHandler ? this.options.returnedObjectHandler(p, C, {
+        const m = this.options.returnedObjectHandler ? this.options.returnedObjectHandler(p, C, {
           ...t,
           ns: r
         }) : `key '${c} (${this.language})' returned an object instead of string.`;
-        return o ? (h.res = L, h.usedParams = this.getUsedParamsDetails(t), h) : L;
+        return o ? (h.res = m, h.usedParams = this.getUsedParamsDetails(t), h) : m;
       }
       if (l) {
-        const L = Array.isArray(C), y = L ? [] : {}, b = L ? w : p;
+        const m = Array.isArray(C), x = m ? [] : {}, b = m ? w : p;
         for (const M in C)
           if (Object.prototype.hasOwnProperty.call(C, M)) {
             const D = `${b}${l}${M}`;
-            y[M] = this.translate(D, {
+            x[M] = this.translate(D, {
               ...t,
               joinArrays: !1,
               ns: r
-            }), y[M] === D && (y[M] = C[M]);
+            }), x[M] === D && (x[M] = C[M]);
           }
-        C = y;
+        C = x;
       }
-    } else if (x && typeof R == "string" && Array.isArray(C))
-      C = C.join(R), C && (C = this.extendTranslation(C, e, t, s));
+    } else if (y && typeof E == "string" && Array.isArray(C))
+      C = C.join(E), C && (C = this.extendTranslation(C, e, t, s));
     else {
-      let L = !1, y = !1;
+      let m = !1, x = !1;
       const b = t.count !== void 0 && typeof t.count != "string", M = g1.hasDefaultValue(t), D = b ? this.pluralResolver.getSuffix(g, t.count, t) : "", i1 = t.ordinal && b ? this.pluralResolver.getSuffix(g, t.count, {
         ordinal: !1
       }) : "", P = b && !t.ordinal && t.count === 0 && this.pluralResolver.shouldUseIntlApi(), V = P && t[`defaultValue${this.options.pluralSeparator}zero`] || t[`defaultValue${D}`] || t[`defaultValue${i1}`] || t.defaultValue;
-      !this.isValidLookup(C) && M && (L = !0, C = V), this.isValidLookup(C) || (y = !0, C = c);
-      const o1 = (t.missingKeyNoValueFallbackToKey || this.options.missingKeyNoValueFallbackToKey) && y ? void 0 : C, T = M && V !== C && this.options.updateMissing;
-      if (y || L || T) {
+      !this.isValidLookup(C) && M && (m = !0, C = V), this.isValidLookup(C) || (x = !0, C = c);
+      const o1 = (t.missingKeyNoValueFallbackToKey || this.options.missingKeyNoValueFallbackToKey) && x ? void 0 : C, T = M && V !== C && this.options.updateMissing;
+      if (x || m || T) {
         if (this.logger.log(T ? "updateKey" : "missingKey", g, d, c, T ? V : C), l) {
           const H = this.resolve(c, {
             ...t,
@@ -7380,7 +7380,7 @@ class g1 extends C1 {
           });
         }) : n1(G, c, V));
       }
-      C = this.extendTranslation(C, e, t, h, s), y && C === c && this.options.appendNamespaceToMissingKey && (C = `${d}:${c}`), (y || L) && this.options.parseMissingKeyHandler && (this.options.compatibilityAPI !== "v1" ? C = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? `${d}:${c}` : c, L ? C : void 0) : C = this.options.parseMissingKeyHandler(C));
+      C = this.extendTranslation(C, e, t, h, s), x && C === c && this.options.appendNamespaceToMissingKey && (C = `${d}:${c}`), (x || m) && this.options.parseMissingKeyHandler && (this.options.compatibilityAPI !== "v1" ? C = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? `${d}:${c}` : c, m ? C : void 0) : C = this.options.parseMissingKeyHandler(C));
     }
     return o ? (h.res = C, h.usedParams = this.getUsedParamsDetails(t), h) : C;
   }
@@ -7440,24 +7440,24 @@ class g1 extends C1 {
       this.options.fallbackNS && (h = h.concat(this.options.fallbackNS));
       const C = t.count !== void 0 && typeof t.count != "string", p = C && !t.ordinal && t.count === 0 && this.pluralResolver.shouldUseIntlApi(), w = t.context !== void 0 && (typeof t.context == "string" || typeof t.context == "number") && t.context !== "", v = t.lngs ? t.lngs : this.languageUtils.toResolveHierarchy(t.lng || this.language, t.fallbackLng);
       h.forEach((N) => {
-        this.isValidLookup(s) || (r = N, !H1[`${v[0]}-${N}`] && this.utils && this.utils.hasLoadedNamespace && !this.utils.hasLoadedNamespace(r) && (H1[`${v[0]}-${N}`] = !0, this.logger.warn(`key "${o}" for languages "${v.join(", ")}" won't get resolved as namespace "${r}" was not yet loaded`, "This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!")), v.forEach((R) => {
+        this.isValidLookup(s) || (r = N, !H1[`${v[0]}-${N}`] && this.utils && this.utils.hasLoadedNamespace && !this.utils.hasLoadedNamespace(r) && (H1[`${v[0]}-${N}`] = !0, this.logger.warn(`key "${o}" for languages "${v.join(", ")}" won't get resolved as namespace "${r}" was not yet loaded`, "This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!")), v.forEach((E) => {
           if (this.isValidLookup(s)) return;
-          c = R;
-          const x = [a];
+          c = E;
+          const y = [a];
           if (this.i18nFormat && this.i18nFormat.addLookupKeys)
-            this.i18nFormat.addLookupKeys(x, a, R, N, t);
+            this.i18nFormat.addLookupKeys(y, a, E, N, t);
           else {
-            let L;
-            C && (L = this.pluralResolver.getSuffix(R, t.count, t));
-            const y = `${this.options.pluralSeparator}zero`, b = `${this.options.pluralSeparator}ordinal${this.options.pluralSeparator}`;
-            if (C && (x.push(a + L), t.ordinal && L.indexOf(b) === 0 && x.push(a + L.replace(b, this.options.pluralSeparator)), p && x.push(a + y)), w) {
+            let m;
+            C && (m = this.pluralResolver.getSuffix(E, t.count, t));
+            const x = `${this.options.pluralSeparator}zero`, b = `${this.options.pluralSeparator}ordinal${this.options.pluralSeparator}`;
+            if (C && (y.push(a + m), t.ordinal && m.indexOf(b) === 0 && y.push(a + m.replace(b, this.options.pluralSeparator)), p && y.push(a + x)), w) {
               const M = `${a}${this.options.contextSeparator}${t.context}`;
-              x.push(M), C && (x.push(M + L), t.ordinal && L.indexOf(b) === 0 && x.push(M + L.replace(b, this.options.pluralSeparator)), p && x.push(M + y));
+              y.push(M), C && (y.push(M + m), t.ordinal && m.indexOf(b) === 0 && y.push(M + m.replace(b, this.options.pluralSeparator)), p && y.push(M + x));
             }
           }
-          let E;
-          for (; E = x.pop(); )
-            this.isValidLookup(s) || (l = E, s = this.getResource(R, N, E, t));
+          let R;
+          for (; R = y.pop(); )
+            this.isValidLookup(s) || (l = R, s = this.getResource(E, N, R, t));
         }));
       });
     }), {
@@ -7783,10 +7783,10 @@ class Fi {
       nestingSuffix: w,
       nestingSuffixEscaped: v,
       nestingOptionsSeparator: N,
-      maxReplaces: R,
-      alwaysFormat: x
+      maxReplaces: E,
+      alwaysFormat: y
     } = e.interpolation;
-    this.escape = t !== void 0 ? t : Oi, this.escapeValue = s !== void 0 ? s : !0, this.useRawValueToEscape = o !== void 0 ? o : !1, this.prefix = l ? $(l) : c || "{{", this.suffix = r ? $(r) : d || "}}", this.formatSeparator = g || ",", this.unescapePrefix = a ? "" : h || "-", this.unescapeSuffix = this.unescapePrefix ? "" : a || "", this.nestingPrefix = C ? $(C) : p || $("$t("), this.nestingSuffix = w ? $(w) : v || $(")"), this.nestingOptionsSeparator = N || ",", this.maxReplaces = R || 1e3, this.alwaysFormat = x !== void 0 ? x : !1, this.resetRegExp();
+    this.escape = t !== void 0 ? t : Oi, this.escapeValue = s !== void 0 ? s : !0, this.useRawValueToEscape = o !== void 0 ? o : !1, this.prefix = l ? $(l) : c || "{{", this.suffix = r ? $(r) : d || "}}", this.formatSeparator = g || ",", this.unescapePrefix = a ? "" : h || "-", this.unescapeSuffix = this.unescapePrefix ? "" : a || "", this.nestingPrefix = C ? $(C) : p || $("$t("), this.nestingSuffix = w ? $(w) : v || $(")"), this.nestingOptionsSeparator = N || ",", this.maxReplaces = E || 1e3, this.alwaysFormat = y !== void 0 ? y : !1, this.resetRegExp();
   }
   reset() {
     this.options && this.init(this.options);
@@ -7799,12 +7799,12 @@ class Fi {
     let l, c, r;
     const d = this.options && this.options.interpolation && this.options.interpolation.defaultVariables || {}, g = (p) => {
       if (p.indexOf(this.formatSeparator) < 0) {
-        const R = S1(t, d, p, this.options.keySeparator, this.options.ignoreJSONStructure);
-        return this.alwaysFormat ? this.format(R, void 0, s, {
+        const E = S1(t, d, p, this.options.keySeparator, this.options.ignoreJSONStructure);
+        return this.alwaysFormat ? this.format(E, void 0, s, {
           ...o,
           ...t,
           interpolationkey: p
-        }) : R;
+        }) : E;
       }
       const w = p.split(this.formatSeparator), v = w.shift().trim(), N = w.join(this.formatSeparator).trim();
       return this.format(S1(t, d, v, this.options.keySeparator, this.options.ignoreJSONStructure), N, s, {
@@ -8567,8 +8567,8 @@ const g5 = (i, e) => {
   } = t1(c5) || {}, l = t || s || a5();
   if (l && !l.reportNamespaces && (l.reportNamespaces = new d5()), !l) {
     L1("You will need to pass in an i18next instance by using initReactI18next");
-    const L = (b, M) => K(M) ? M : e5(M) && K(M.defaultValue) ? M.defaultValue : Array.isArray(b) ? b[b.length - 1] : b, y = [L, {}, !1];
-    return y.t = L, y.i18n = {}, y.ready = !1, y;
+    const m = (b, M) => K(M) ? M : e5(M) && K(M.defaultValue) ? M.defaultValue : Array.isArray(b) ? b[b.length - 1] : b, x = [m, {}, !1];
+    return x.t = m, x.i18n = {}, x.ready = !1, x;
   }
   l.options.react && l.options.react.wait !== void 0 && L1("It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.");
   const c = {
@@ -8581,33 +8581,33 @@ const g5 = (i, e) => {
   } = c;
   let g = i;
   g = K(g) ? [g] : g || ["translation"], l.reportNamespaces.addUsedNamespaces && l.reportNamespaces.addUsedNamespaces(g);
-  const a = (l.isInitialized || l.initializedStoreOnce) && g.every((L) => Xi(L, l, c)), h = u5(l, e.lng || null, c.nsMode === "fallback" ? g : g[0], d), C = () => h, p = () => Q1(l, e.lng || null, c.nsMode === "fallback" ? g : g[0], d), [w, v] = S(C);
+  const a = (l.isInitialized || l.initializedStoreOnce) && g.every((m) => Xi(m, l, c)), h = u5(l, e.lng || null, c.nsMode === "fallback" ? g : g[0], d), C = () => h, p = () => Q1(l, e.lng || null, c.nsMode === "fallback" ? g : g[0], d), [w, v] = S(C);
   let N = g.join();
   e.lng && (N = `${e.lng}${N}`);
-  const R = g5(N), x = N1(!0);
+  const E = g5(N), y = N1(!0);
   A(() => {
     const {
-      bindI18n: L,
-      bindI18nStore: y
+      bindI18n: m,
+      bindI18nStore: x
     } = c;
-    x.current = !0, !a && !r && (e.lng ? j1(l, e.lng, g, () => {
-      x.current && v(p);
+    y.current = !0, !a && !r && (e.lng ? j1(l, e.lng, g, () => {
+      y.current && v(p);
     }) : W1(l, g, () => {
-      x.current && v(p);
-    })), a && R && R !== N && x.current && v(p);
+      y.current && v(p);
+    })), a && E && E !== N && y.current && v(p);
     const b = () => {
-      x.current && v(p);
+      y.current && v(p);
     };
-    return L && l && l.on(L, b), y && l && l.store.on(y, b), () => {
-      x.current = !1, L && l && L.split(" ").forEach((M) => l.off(M, b)), y && l && y.split(" ").forEach((M) => l.store.off(M, b));
+    return m && l && l.on(m, b), x && l && l.store.on(x, b), () => {
+      y.current = !1, m && l && m.split(" ").forEach((M) => l.off(M, b)), x && l && x.split(" ").forEach((M) => l.store.off(M, b));
     };
   }, [l, N]), A(() => {
-    x.current && a && v(C);
+    y.current && a && v(C);
   }, [l, d, a]);
-  const E = [w, l, a];
-  if (E.t = w, E.i18n = l, E.ready = a, a || !a && !r) return E;
-  throw new Promise((L) => {
-    e.lng ? j1(l, e.lng, g, () => L()) : W1(l, g, () => L());
+  const R = [w, l, a];
+  if (R.t = w, R.i18n = l, R.ready = a, a || !a && !r) return R;
+  throw new Promise((m) => {
+    e.lng ? j1(l, e.lng, g, () => m()) : W1(l, g, () => m());
   });
 }, p5 = "Country", f5 = {
   placeholder: p5
@@ -8628,56 +8628,60 @@ I.use(h5).init({
 });
 const y5 = u1(
   ({ width: i, selectedCity: e, setSelectedCity: t, onChange: s, value: o, id: l, disabled: c }, r) => {
-    const [d, g] = S([]), [a, h] = S([]), { locale: C, axiosPeople: p } = t1(oe);
-    if (!p)
+    const [d, g] = S([]), [a, h] = S([]), [C, p] = S(!1), { locale: w, axiosPeople: v } = t1(oe);
+    if (!v)
       throw new Error(
         `CountrySelect requires "axiosPeople" to fetch counties. 
                 Please provide it via SNMTUiContext.`
       );
-    const { t: w } = C5("common", { lng: C }), v = Z(async () => {
+    const { t: N } = C5("common", { lng: w }), E = Z(async () => {
+      p(!0);
       try {
-        const R = await p.post("v1/countries/search");
+        const R = await v.post("v1/countries/search");
         h(R == null ? void 0 : R.data.data);
       } catch {
         g([]);
+      } finally {
+        p(!1);
       }
-    }, [p]);
+    }, [v]);
     A(() => {
-      v();
+      E();
     }, []), A(() => {
       if (e) {
-        const R = e.split("-")[1], x = a.filter(
-          (E) => E.name.includes(R)
+        const R = e.split("-")[1], m = a.filter(
+          (x) => x.name.includes(R)
         );
-        if (x.length) {
-          const E = x.map((L) => ({
-            label: L.name,
-            value: L.name
+        if (m.length) {
+          const x = m.map((b) => ({
+            label: b.name,
+            value: b.name
           }));
-          s(E[0].value);
+          s(x[0].value);
         }
       }
     }, [e, a, s]), A(() => {
-      const R = a.map((x) => ({
-        label: x.name,
-        value: x.name
+      const R = a.map((m) => ({
+        label: m.name,
+        value: m.name
       }));
       g(R);
     }, [a]);
-    const N = (R) => {
-      R === "None" ? (s(""), t && t("")) : (s(R), t && t(""));
+    const y = (R) => {
+      R === null ? (s(""), t && t("")) : (s(R), t && t(""));
     };
     return /* @__PURE__ */ n("div", { className: "snmt-country-select", children: /* @__PURE__ */ n(
       bi,
       {
         id: l,
         width: i,
-        placeholder: w("placeholder"),
+        placeholder: N("placeholder"),
         value: o,
         ref: r,
-        onChange: N,
-        options: [{ label: "None", value: "None" }, ...d],
-        disabled: c
+        onChange: y,
+        options: [{ label: "None", value: null }, ...d],
+        disabled: c,
+        isLoading: C
       }
     ) });
   }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@snmt-react-ui/country-select",
     "private": false,
-    "version": "2.2.1",
+    "version": "2.3.0",
     "type": "module",
     "main": "dist/country-select.js",
     "types": "dist/index.d.ts",
@@ -18,7 +18,7 @@
         "build": "tsc && vite build"
     },
     "dependencies": {
-        "@snmt-react-ui/city-select": "^2.2.1",
+        "@snmt-react-ui/city-select": "^2.3.0",
         "@snmt-react-ui/core": "^2.1.0",
         "@snmt-react-ui/flex": "^1.5.0",
         "i18next": "^23.11.5",
@@ -27,5 +27,5 @@
     "peerDependencies": {
         "antd": "^5.18.3"
     },
-    "gitHead": "7be922c2cfdfbbba8daf541f78bb957ac462cdc5"
+    "gitHead": "1c62f906731e5202b370cd64a425b97b796e3f47"
 }