@snmt-react-ui/country-select 2.3.18 → 2.4.0

package/dist/CountrySelect.d.ts

@@ -12,6 +12,12 @@ export interface CountrySelectProps {
     /** ID of the element */
     id?: string;
     disabled?: boolean;
+    /** Make the selection mandatory */
+    required?: boolean;
+    /** Show the clear button */
+    clearable?: boolean;
+    /** Error for displaying */
+    error?: string | React.ReactNode;
 }
 export type Country = {
     id: string;

package/dist/country-select.js

@@ -2,23 +2,23 @@ var de = Object.defineProperty;
 var ge = (i, e, t) => e in i ? de(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
 var H1 = (i, e, t) => ge(i, typeof e != "symbol" ? e + "" : e, t);
 import "./index.css";
-import { jsx as n, Fragment as Y, jsxs as C } from "react/jsx-runtime";
+import { jsx as n, Fragment as $, jsxs as C } from "react/jsx-runtime";
 import { SNMTUiContext as Ce } from "@snmt-react-ui/core";
 import { Select as ue, Flex as pe, Avatar as we, Checkbox as fe, Typography as J1, Tag as me, Popover as ke } from "antd";
-import { createContext as e1, forwardRef as m1, useState as S, useRef as a1, useEffect as A, useCallback as W, useContext as z } from "react";
+import { createContext as e1, forwardRef as m1, useState as S, useRef as a1, useEffect as A, useCallback as j, useContext as J } from "react";
 var Le = Object.defineProperty, ve = (i, e, t) => e in i ? Le(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, Ne = (i, e, t) => ve(i, e + "", t), xe = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function Me() {
   if (console && console.warn) {
     for (var i = arguments.length, e = new Array(i), t = 0; t < i; t++)
       e[t] = arguments[t];
-    $(e[0]) && (e[0] = `react-i18next:: ${e[0]}`), console.warn(...e);
+    U(e[0]) && (e[0] = `react-i18next:: ${e[0]}`), console.warn(...e);
   }
 }
 const I1 = {};
 function M1() {
   for (var i = arguments.length, e = new Array(i), t = 0; t < i; t++)
     e[t] = arguments[t];
-  $(e[0]) && I1[e[0]] || ($(e[0]) && (I1[e[0]] = /* @__PURE__ */ new Date()), Me(...e));
+  U(e[0]) && I1[e[0]] || (U(e[0]) && (I1[e[0]] = /* @__PURE__ */ new Date()), Me(...e));
 }
 const q1 = (i, e) => () => {
   if (i.isInitialized)
@@ -34,7 +34,7 @@ const q1 = (i, e) => () => {
 }, O1 = (i, e, t) => {
   i.loadNamespaces(e, q1(i, t));
 }, S1 = (i, e, t, s) => {
-  $(t) && (t = [t]), t.forEach((o) => {
+  U(t) && (t = [t]), t.forEach((o) => {
     i.options.ns.indexOf(o) < 0 && i.options.ns.push(o);
   }), i.loadLanguages(e, q1(i, s));
 }, Re = function(i, e) {
@@ -54,7 +54,7 @@ const q1 = (i, e) => () => {
       if (t.bindI18n && t.bindI18n.indexOf("languageChanging") > -1 && s.services.backendConnector.backend && s.isLanguageChangingTo && !o(s.isLanguageChangingTo, i)) return !1;
     }
   }) : Re(i, e, t);
-}, $ = (i) => typeof i == "string", be = (i) => typeof i == "object" && i !== null, _e = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34|nbsp|#160|copy|#169|reg|#174|hellip|#8230|#x2F|#47);/g, Ee = {
+}, U = (i) => typeof i == "string", be = (i) => typeof i == "object" && i !== null, _e = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34|nbsp|#160|copy|#169|reg|#174|hellip|#8230|#x2F|#47);/g, Ee = {
   "&amp;": "&",
   "&#38;": "&",
   "&lt;": "<",
@@ -104,18 +104,18 @@ const We = (i, e) => {
   return A(() => {
     t.current = i;
   }, [i, e]), t.current;
-}, Q1 = (i, e, t, s) => i.getFixedT(e, t, s), je = (i, e, t, s) => W(Q1(i, e, t, s), [i, e, t, s]), De = function(i) {
+}, Q1 = (i, e, t, s) => i.getFixedT(e, t, s), je = (i, e, t, s) => j(Q1(i, e, t, s), [i, e, t, s]), De = function(i) {
   let e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
   const {
     i18n: t
   } = e, {
     i18n: s,
     defaultNS: o
-  } = z(Be) || {}, l = t || s || Ae();
+  } = J(Be) || {}, l = t || s || Ae();
   if (l && !l.reportNamespaces && (l.reportNamespaces = new Ze()), !l) {
     M1("You will need to pass in an i18next instance by using initReactI18next");
-    const w = (b, R) => $(R) ? R : be(R) && $(R.defaultValue) ? R.defaultValue : Array.isArray(b) ? b[b.length - 1] : b, N = [w, {}, !1];
-    return N.t = w, N.i18n = {}, N.ready = !1, N;
+    const w = (N, x) => U(x) ? x : be(x) && U(x.defaultValue) ? x.defaultValue : Array.isArray(N) ? N[N.length - 1] : N, R = [w, {}, !1];
+    return R.t = w, R.i18n = {}, R.ready = !1, R;
   }
   l.options.react && l.options.react.wait !== void 0 && M1("It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.");
   const c = {
@@ -127,32 +127,32 @@ const We = (i, e) => {
     keyPrefix: d
   } = c;
   let g = i;
-  g = $(g) ? [g] : g || ["translation"], l.reportNamespaces.addUsedNamespaces && l.reportNamespaces.addUsedNamespaces(g);
-  const a = (l.isInitialized || l.initializedStoreOnce) && g.every((w) => ye(w, l, c)), h = je(l, e.lng || null, c.nsMode === "fallback" ? g : g[0], d), u = () => h, p = () => Q1(l, e.lng || null, c.nsMode === "fallback" ? g : g[0], d), [L, M] = S(u);
+  g = U(g) ? [g] : g || ["translation"], l.reportNamespaces.addUsedNamespaces && l.reportNamespaces.addUsedNamespaces(g);
+  const a = (l.isInitialized || l.initializedStoreOnce) && g.every((w) => ye(w, l, c)), h = je(l, e.lng || null, c.nsMode === "fallback" ? g : g[0], d), u = () => h, p = () => Q1(l, e.lng || null, c.nsMode === "fallback" ? g : g[0], d), [L, y] = S(u);
   let f = g.join();
   e.lng && (f = `${e.lng}${f}`);
-  const E = We(f), y = a1(!0);
+  const _ = We(f), b = a1(!0);
   A(() => {
     const {
       bindI18n: w,
-      bindI18nStore: N
+      bindI18nStore: R
     } = c;
-    y.current = !0, !a && !r && (e.lng ? S1(l, e.lng, g, () => {
-      y.current && M(p);
+    b.current = !0, !a && !r && (e.lng ? S1(l, e.lng, g, () => {
+      b.current && y(p);
     }) : O1(l, g, () => {
-      y.current && M(p);
-    })), a && E && E !== f && y.current && M(p);
-    const b = () => {
-      y.current && M(p);
+      b.current && y(p);
+    })), a && _ && _ !== f && b.current && y(p);
+    const N = () => {
+      b.current && y(p);
     };
-    return w && l && l.on(w, b), N && l && l.store.on(N, b), () => {
-      y.current = !1, w && l && w.split(" ").forEach((R) => l.off(R, b)), N && l && N.split(" ").forEach((R) => l.store.off(R, b));
+    return w && l && l.on(w, N), R && l && l.store.on(R, N), () => {
+      b.current = !1, w && l && w.split(" ").forEach((x) => l.off(x, N)), R && l && R.split(" ").forEach((x) => l.store.off(x, N));
     };
   }, [l, f]), A(() => {
-    y.current && a && M(u);
+    b.current && a && y(u);
   }, [l, d, a]);
-  const _ = [L, l, a];
-  if (_.t = L, _.i18n = l, _.ready = a, a || !a && !r) return _;
+  const E = [L, l, a];
+  if (E.t = L, E.i18n = l, E.ready = a, a || !a && !r) return E;
   throw new Promise((w) => {
     e.lng ? S1(l, e.lng, g, () => w()) : O1(l, g, () => w());
   });
@@ -192,7 +192,7 @@ const We = (i, e) => {
     }
   );
 };
-var G = /* @__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))(G || {});
+var P = /* @__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))(P || {});
 const _1 = e1({
   locale: "en",
   theme: "light"
@@ -210,7 +210,7 @@ const Ge = ({
   A(() => {
     r(i), g(e);
   }, [i, e]);
-  const { theme: a } = z(_1);
+  const { theme: a } = J(_1);
   return /* @__PURE__ */ n(
     fe,
     {
@@ -3476,14 +3476,14 @@ const Ke = ({
   disabled: l = !1,
   onClick: c
 }) => {
-  const [r, d] = S(o), { theme: g } = z(X1), 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 } = J(X1), a = l ? g && g === "dark" ? m.GREY_LIGHT_4 : m.GREY_DARK_1 : s, h = l ? void 0 : c;
   return A(() => {
     if (o) {
       h && !l && d(`${o} clickable`);
       return;
     }
     h && !l && d("clickable");
-  }, [h, o, l]), /* @__PURE__ */ n(Y, { children: (() => {
+  }, [h, o, l]), /* @__PURE__ */ n($, { children: (() => {
     switch (i) {
       case "nextIcon":
         return A2({ width: e, height: t, color: a, className: r, onClick: h });
@@ -3738,7 +3738,7 @@ const Ke = ({
       case "docs":
         return Mt({ width: e, height: t, color: a, className: r, onClick: h });
       default:
-        return /* @__PURE__ */ n(Y, { children: "No Icon provided" });
+        return /* @__PURE__ */ n($, { children: "No Icon provided" });
     }
   })() });
 }, { Title: Rt, Text: yt } = J1, bt = {
@@ -7031,14 +7031,14 @@ const Et = ({
   disabled: l = !1,
   onClick: c
 }) => {
-  const [r, d] = S(o), { theme: g } = z(ee), 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 } = J(ee), 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`);
       return;
     }
     h && !l && d("clickable");
-  }, [h, o, l]), /* @__PURE__ */ n(Y, { children: (() => {
+  }, [h, o, l]), /* @__PURE__ */ n($, { children: (() => {
     switch (i) {
       case "nextIcon":
         return v5({ width: e, height: t, color: a, className: r, onClick: h });
@@ -7293,7 +7293,7 @@ const Et = ({
       case "docs":
         return c3({ width: e, height: t, color: a, className: r, onClick: h });
       default:
-        return /* @__PURE__ */ n(Y, { children: "No Icon provided" });
+        return /* @__PURE__ */ n($, { children: "No Icon provided" });
     }
   })() });
 };
@@ -7424,7 +7424,7 @@ const k3 = ({
   options: l,
   extraOptions: c
 }) => {
-  const { locale: r } = z(_1), { t: d } = De("common", { lng: r }), [g, a] = S(!1);
+  const { locale: r } = J(_1), { t: d } = De("common", { lng: r }), [g, a] = S(!1);
   if (A(() => {
     i.length || a(!1);
   }, [i]), !i.length)
@@ -7484,39 +7484,39 @@ const k3 = ({
     onDropdownVisibleChange: u,
     onScrollToEnd: p,
     onPopupScroll: L,
-    id: M,
+    id: y,
     extraOptions: f,
-    dropdownRender: E,
-    optionRender: y,
-    isLoading: _,
+    dropdownRender: _,
+    optionRender: b,
+    isLoading: E,
     readOnly: w,
-    error: N
-  }, b) => {
-    const [R, F] = S(!1), [J, t1] = S(!1), [K, h1] = S(!0), [H, D] = S(i), P = a1(null);
+    error: R
+  }, N) => {
+    const [x, Z] = S(!1), [T, t1] = S(!1), [F, h1] = S(!0), [H, G] = S(i), Y = a1(null);
     A(() => {
-      D(i);
+      G(i);
     }, [i]);
-    const q = (x) => {
-      F(x), u && u(x);
-    }, c1 = (x, V) => {
-      var Z;
-      return !!((Z = V == null ? void 0 : V.label) != null && Z.toString().toLowerCase().includes(x.toLowerCase()));
+    const q = (M) => {
+      Z(M), u && u(M);
+    }, c1 = (M, V) => {
+      var W;
+      return !!((W = V == null ? void 0 : V.label) != null && W.toString().toLowerCase().includes(M.toLowerCase()));
     }, O = () => {
       t1(!0);
-    }, T = () => {
+    }, K = () => {
       t1(!1);
-    }, B = W(
-      (x) => {
-        if (D(x), s) {
-          const Z = x;
-          e == null || e(Z);
+    }, B = j(
+      (M) => {
+        if (G(M), s) {
+          const W = M;
+          e == null || e(W);
           return;
         }
-        const V = x;
+        const V = M;
         e == null || e(V);
       },
       [s, e]
-    ), d1 = W(() => {
+    ), d1 = j(() => {
       if (!w) {
         if (s) {
           B([]);
@@ -7524,41 +7524,41 @@ const k3 = ({
         }
         B("");
       }
-    }, [B, s, w]), g1 = W(
-      (x) => {
-        const V = H.filter((Z) => Z !== x);
-        B(V), D(V);
+    }, [B, s, w]), g1 = j(
+      (M) => {
+        const V = H.filter((W) => W !== M);
+        B(V), G(V);
       },
       [B, H]
-    ), E1 = W(
-      (x) => (H == null ? void 0 : H.indexOf(x)) === 0 ? (
+    ), E1 = j(
+      (M) => (H == null ? void 0 : H.indexOf(M)) === 0 ? (
         // if the search input is empty
         // then display the placeholder, else do not display it
-        /* @__PURE__ */ n("span", { className: "custom-placeholder", children: K ? t : "" })
-      ) : /* @__PURE__ */ n(Y, {}),
-      [K, H, t]
-    ), le = (x) => {
-      x.preventDefault(), x.stopPropagation();
-    }, ae = async (x) => {
-      const { target: V } = x;
-      V.scrollTop + V.offsetHeight >= V.scrollHeight - a && (p == null || p(!0)), L && await L(x);
-    }, L1 = W(
-      (x) => {
-        var V, Z;
-        return ((V = l.find((v1) => v1.value === x)) == null ? void 0 : V.label) || ((Z = f == null ? void 0 : f.find(
-          (v1) => v1.value === x
-        )) == null ? void 0 : Z.label) || x;
+        /* @__PURE__ */ n("span", { className: "custom-placeholder", children: F ? t : "" })
+      ) : /* @__PURE__ */ n($, {}),
+      [F, H, t]
+    ), le = (M) => {
+      M.preventDefault(), M.stopPropagation();
+    }, ae = async (M) => {
+      const { target: V } = M;
+      V.scrollTop + V.offsetHeight >= V.scrollHeight - a && (p == null || p(!0)), L && await L(M);
+    }, L1 = j(
+      (M) => {
+        var V, W;
+        return ((V = l.find((v1) => v1.value === M)) == null ? void 0 : V.label) || ((W = f == null ? void 0 : f.find(
+          (v1) => v1.value === M
+        )) == null ? void 0 : W.label) || M;
       },
       [f, l]
-    ), he = W(
-      (x) => {
+    ), he = j(
+      (M) => {
         var V;
         return /* @__PURE__ */ n(
           k3,
           {
-            values: x,
+            values: M,
             onTagClose: g1,
-            maxWidth: ((V = P.current) == null ? void 0 : V.clientWidth) || 0,
+            maxWidth: ((V = Y.current) == null ? void 0 : V.clientWidth) || 0,
             disabled: r,
             closable: !w,
             options: l,
@@ -7567,16 +7567,16 @@ const k3 = ({
         );
       },
       [r, f, g1, l, w]
-    ), ce = W(
-      ({ label: x, value: V, mode: Z }) => Z === "filter" ? E1(V) : /* @__PURE__ */ n("div", { onMouseDown: le, className: "tag-wrapper", children: /* @__PURE__ */ n(te, { onClose: () => g1(V), disabled: r, children: typeof x == "object" ? x : L1(V) }) }),
+    ), ce = j(
+      ({ label: M, value: V, mode: W }) => W === "filter" ? E1(V) : /* @__PURE__ */ n("div", { onMouseDown: le, className: "tag-wrapper", children: /* @__PURE__ */ n(te, { onClose: () => g1(V), disabled: r, children: typeof M == "object" ? M : L1(V) }) }),
       [r, L1, g1, E1]
     ), V1 = Array.isArray(H) && H.length > 0 || !!H && typeof H == "string" && H.trim() !== "";
     return /* @__PURE__ */ C(
       "div",
       {
-        className: `snmt-select-1-15-6 ${J ? "snmt-select-focused" : ""} 
+        className: `snmt-select-1-15-6 ${T ? "snmt-select-focused" : ""} 
                     ${s ? "" : "snmt-select-single"} ${w ? "snmt-select-read-only" : ""}`,
-        ref: P,
+        ref: Y,
         style: { width: c },
         children: [
           /* @__PURE__ */ n(
@@ -7584,96 +7584,96 @@ const k3 = ({
             {
               className: "snmt-select-blank",
               popupClassName: w ? "dropdown-read-only" : "",
-              id: M,
-              ref: b,
+              id: y,
+              ref: N,
               showSearch: !!o,
               filterOption: o && c1,
               onDropdownVisibleChange: q,
               disabled: r,
               value: H || void 0,
-              labelRender: (x) => L1(x.value),
+              labelRender: (M) => L1(M.value),
               mode: s === "filter" ? "multiple" : s,
               onChange: B,
               onFocus: O,
-              onBlur: T,
-              onSearch: (x) => {
-                h1(!x), h && h(x);
+              onBlur: K,
+              onSearch: (M) => {
+                h1(!M), h && h(M);
               },
               onSelect: () => h1(!0),
               onDeselect: () => h1(!0),
-              tagRender: (x) => ce({ ...x, mode: s }),
+              tagRender: (M) => ce({ ...M, mode: s }),
               maxTagCount: "responsive",
               maxTagPlaceholder: he,
               onPopupScroll: ae,
-              prefix: _ && /* @__PURE__ */ n(A1, { size: 15 }),
-              suffixIcon: /* @__PURE__ */ n("div", { className: "wrapper-suffix-icon", children: s !== "filter" && /* @__PURE__ */ C(Y, { children: [
+              prefix: E && /* @__PURE__ */ n(A1, { size: 15 }),
+              suffixIcon: /* @__PURE__ */ n("div", { className: "wrapper-suffix-icon", children: s !== "filter" && /* @__PURE__ */ C($, { children: [
                 H && !!H.length && (s || g) && /* @__PURE__ */ n("div", { onClick: d1, children: /* @__PURE__ */ n(
                   i1,
                   {
                     name: "cancel",
-                    color: r ? G.GREY_DARK_1 : G.GREY_DARK_5
+                    color: r ? P.GREY_DARK_1 : P.GREY_DARK_5
                   }
                 ) }),
                 /* @__PURE__ */ n(
                   i1,
                   {
                     name: "selectArrowIcon",
-                    color: r ? G.GREY_DARK_1 : G.GREY_DARK_5,
-                    className: R ? "select-arrow-rotated" : "select-arrow",
-                    onClick: () => F(!R)
+                    color: r ? P.GREY_DARK_1 : P.GREY_DARK_5,
+                    className: x ? "select-arrow-rotated" : "select-arrow",
+                    onClick: () => Z(!x)
                   }
                 )
               ] }) }),
-              removeIcon: /* @__PURE__ */ n(i1, { name: "errorSmall", color: G.GREY_DARK_2 }),
+              removeIcon: /* @__PURE__ */ n(i1, { name: "errorSmall", color: P.GREY_DARK_2 }),
               options: l,
-              optionRender: (x) => y ? y(x.data) : /* @__PURE__ */ C(o1, { justifyContent: "space-between", alignItems: "center", flex: "1", children: [
+              optionRender: (M) => b ? b(M.data) : /* @__PURE__ */ C(o1, { justifyContent: "space-between", alignItems: "center", flex: "1", children: [
                 /* @__PURE__ */ C(o1, { alignItems: "center", gap: 12, children: [
                   s && /* @__PURE__ */ n(
                     Ge,
                     {
-                      checked: !!(H != null && H.includes(x.value))
+                      checked: !!(H != null && H.includes(M.value))
                     }
                   ),
                   /* @__PURE__ */ C(o1, { alignItems: "center", gap: 8, children: [
-                    x.data.image && /* @__PURE__ */ n(Te, { src: x.data.image, size: 20 }),
-                    /* @__PURE__ */ n("span", { children: x.label })
+                    M.data.image && /* @__PURE__ */ n(Te, { src: M.data.image, size: 20 }),
+                    /* @__PURE__ */ n("span", { children: M.label })
                   ] })
                 ] }),
-                !s && H === x.value && /* @__PURE__ */ n(
+                !s && H === M.value && /* @__PURE__ */ n(
                   i1,
                   {
                     name: "ok",
-                    color: G.BLUE_PRIMARY,
+                    color: P.BLUE_PRIMARY,
                     width: 16,
                     height: 16
                   }
                 )
               ] }),
-              dropdownRender: (x) => /* @__PURE__ */ C("div", { className: "dropdown-container", children: [
-                /* @__PURE__ */ n("div", { className: "dropdown-menu", children: E ? E(x) : x }),
-                _ && /* @__PURE__ */ n("div", { className: "loading-overlay", children: /* @__PURE__ */ n(A1, { size: 28 }) })
+              dropdownRender: (M) => /* @__PURE__ */ C("div", { className: "dropdown-container", children: [
+                /* @__PURE__ */ n("div", { className: "dropdown-menu", children: _ ? _(M) : M }),
+                E && /* @__PURE__ */ n("div", { className: "loading-overlay", children: /* @__PURE__ */ n(A1, { size: 28 }) })
               ] })
             }
           ),
-          t && /* @__PURE__ */ C(Y, { children: [
+          t && /* @__PURE__ */ C($, { children: [
             /* @__PURE__ */ n(
               "label",
               {
-                className: `${J || V1 ? "label-floating" : ""} ${r ? "label-disabled" : ""} ${J ? "label-focused" : ""} ${_ ? "label-loading" : ""} ${N ? "label-error" : ""}`,
+                className: `${T || V1 ? "label-floating" : ""} ${r ? "label-disabled" : ""} ${T ? "label-focused" : ""} ${E ? "label-loading" : ""} ${R ? "label-error" : ""}`,
                 children: d ? `${t}*` : t
               }
             ),
             /* @__PURE__ */ n(
               "fieldset",
               {
-                className: `${J ? "fieldset-focused" : ""} ${r ? "fieldset-disabled" : ""} ${V1 ? "fieldset-filled" : ""} ${N ? "fieldset-error" : ""}`,
+                className: `${T ? "fieldset-focused" : ""} ${r ? "fieldset-disabled" : ""} ${V1 ? "fieldset-filled" : ""} ${R ? "fieldset-error" : ""}`,
                 children: /* @__PURE__ */ n("legend", { children: /* @__PURE__ */ n("span", { children: d ? `${t}*` : t }) })
               }
             )
           ] }),
-          N && /* @__PURE__ */ C(o1, { justifyContent: "flex-start", gap: 6, children: [
-            /* @__PURE__ */ n(i1, { name: "attention", color: G.NOTIFICATION_ERROR_DARK }),
-            typeof N == "string" ? /* @__PURE__ */ n(w3, { color: G.NOTIFICATION_ERROR_DARK, variant: "body4", children: N }) : N
+          R && /* @__PURE__ */ C(o1, { justifyContent: "flex-start", gap: 6, children: [
+            /* @__PURE__ */ n(i1, { name: "attention", color: P.NOTIFICATION_ERROR_DARK }),
+            typeof R == "string" ? /* @__PURE__ */ n(w3, { color: P.NOTIFICATION_ERROR_DARK, variant: "body4", children: R }) : R
           ] })
         ]
       }
@@ -7844,7 +7844,7 @@ class w1 {
     return e = e || this.options, e.prefix = e.prefix || this.prefix, new w1(this.logger, e);
   }
 }
-var j = new w1();
+var D = new w1();
 class k1 {
   constructor() {
     this.observers = {};
@@ -7969,7 +7969,7 @@ const T1 = {};
 class f1 extends k1 {
   constructor(e) {
     let t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    super(), v3(["resourceStore", "languageUtils", "pluralResolver", "interpolator", "backendConnector", "i18nFormat", "utils"], e, this), this.options = t, this.options.keySeparator === void 0 && (this.options.keySeparator = "."), this.logger = j.create("translator");
+    super(), v3(["resourceStore", "languageUtils", "pluralResolver", "interpolator", "backendConnector", "i18nFormat", "utils"], e, this), this.options = t, this.options.keySeparator === void 0 && (this.options.keySeparator = "."), this.logger = D.create("translator");
   }
   changeLanguage(e) {
     e && (this.language = e);
@@ -8036,8 +8036,8 @@ class f1 extends k1 {
     }
     const h = this.resolve(e, t);
     let u = h && h.res;
-    const p = h && h.usedKey || c, L = h && h.exactUsedKey || c, M = Object.prototype.toString.apply(u), f = ["[object Number]", "[object Function]", "[object RegExp]"], E = t.joinArrays !== void 0 ? t.joinArrays : this.options.joinArrays, y = !this.i18nFormat || this.i18nFormat.handleAsObject, _ = !v(u) && typeof u != "boolean" && typeof u != "number";
-    if (y && u && _ && f.indexOf(M) < 0 && !(v(E) && Array.isArray(u))) {
+    const p = h && h.usedKey || c, L = h && h.exactUsedKey || c, y = Object.prototype.toString.apply(u), f = ["[object Number]", "[object Function]", "[object RegExp]"], _ = t.joinArrays !== void 0 ? t.joinArrays : this.options.joinArrays, b = !this.i18nFormat || this.i18nFormat.handleAsObject, E = !v(u) && typeof u != "boolean" && typeof u != "number";
+    if (b && u && E && f.indexOf(y) < 0 && !(v(_) && Array.isArray(u))) {
       if (!t.returnObjects && !this.options.returnObjects) {
         this.options.returnedObjectHandler || this.logger.warn("accessing an object - but returnObjects options is not enabled!");
         const w = this.options.returnedObjectHandler ? this.options.returnedObjectHandler(p, u, {
@@ -8047,53 +8047,53 @@ class f1 extends k1 {
         return o ? (h.res = w, h.usedParams = this.getUsedParamsDetails(t), h) : w;
       }
       if (l) {
-        const w = Array.isArray(u), N = w ? [] : {}, b = w ? L : p;
-        for (const R in u)
-          if (Object.prototype.hasOwnProperty.call(u, R)) {
-            const F = `${b}${l}${R}`;
-            N[R] = this.translate(F, {
+        const w = Array.isArray(u), R = w ? [] : {}, N = w ? L : p;
+        for (const x in u)
+          if (Object.prototype.hasOwnProperty.call(u, x)) {
+            const Z = `${N}${l}${x}`;
+            R[x] = this.translate(Z, {
               ...t,
               joinArrays: !1,
               ns: r
-            }), N[R] === F && (N[R] = u[R]);
+            }), R[x] === Z && (R[x] = u[x]);
           }
-        u = N;
+        u = R;
       }
-    } else if (y && v(E) && Array.isArray(u))
-      u = u.join(E), u && (u = this.extendTranslation(u, e, t, s));
+    } else if (b && v(_) && Array.isArray(u))
+      u = u.join(_), u && (u = this.extendTranslation(u, e, t, s));
     else {
-      let w = !1, N = !1;
-      const b = t.count !== void 0 && !v(t.count), R = f1.hasDefaultValue(t), F = b ? this.pluralResolver.getSuffix(g, t.count, t) : "", J = t.ordinal && b ? this.pluralResolver.getSuffix(g, t.count, {
+      let w = !1, R = !1;
+      const N = t.count !== void 0 && !v(t.count), x = f1.hasDefaultValue(t), Z = N ? this.pluralResolver.getSuffix(g, t.count, t) : "", T = t.ordinal && N ? this.pluralResolver.getSuffix(g, t.count, {
         ordinal: !1
-      }) : "", t1 = b && !t.ordinal && t.count === 0 && this.pluralResolver.shouldUseIntlApi(), K = t1 && t[`defaultValue${this.options.pluralSeparator}zero`] || t[`defaultValue${F}`] || t[`defaultValue${J}`] || t.defaultValue;
-      !this.isValidLookup(u) && R && (w = !0, u = K), this.isValidLookup(u) || (N = !0, u = c);
-      const H = (t.missingKeyNoValueFallbackToKey || this.options.missingKeyNoValueFallbackToKey) && N ? void 0 : u, D = R && K !== u && this.options.updateMissing;
-      if (N || w || D) {
-        if (this.logger.log(D ? "updateKey" : "missingKey", g, d, c, D ? K : u), l) {
+      }) : "", t1 = N && !t.ordinal && t.count === 0 && this.pluralResolver.shouldUseIntlApi(), F = t1 && t[`defaultValue${this.options.pluralSeparator}zero`] || t[`defaultValue${Z}`] || t[`defaultValue${T}`] || t.defaultValue;
+      !this.isValidLookup(u) && x && (w = !0, u = F), this.isValidLookup(u) || (R = !0, u = c);
+      const H = (t.missingKeyNoValueFallbackToKey || this.options.missingKeyNoValueFallbackToKey) && R ? void 0 : u, G = x && F !== u && this.options.updateMissing;
+      if (R || w || G) {
+        if (this.logger.log(G ? "updateKey" : "missingKey", g, d, c, G ? F : u), l) {
           const O = this.resolve(c, {
             ...t,
             keySeparator: !1
           });
           O && O.res && this.logger.warn("Seems the loaded translations were in flat JSON format instead of nested. Either set keySeparator: false on init or make sure your translations are published in nested format.");
         }
-        let P = [];
+        let Y = [];
         const q = this.languageUtils.getFallbackCodes(this.options.fallbackLng, t.lng || this.language);
         if (this.options.saveMissingTo === "fallback" && q && q[0])
           for (let O = 0; O < q.length; O++)
-            P.push(q[O]);
-        else this.options.saveMissingTo === "all" ? P = this.languageUtils.toResolveHierarchy(t.lng || this.language) : P.push(t.lng || this.language);
-        const c1 = (O, T, B) => {
-          const d1 = R && B !== u ? B : H;
-          this.options.missingKeyHandler ? this.options.missingKeyHandler(O, d, T, d1, D, t) : this.backendConnector && this.backendConnector.saveMissing && this.backendConnector.saveMissing(O, d, T, d1, D, t), this.emit("missingKey", O, d, T, u);
+            Y.push(q[O]);
+        else this.options.saveMissingTo === "all" ? Y = this.languageUtils.toResolveHierarchy(t.lng || this.language) : Y.push(t.lng || this.language);
+        const c1 = (O, K, B) => {
+          const d1 = x && B !== u ? B : H;
+          this.options.missingKeyHandler ? this.options.missingKeyHandler(O, d, K, d1, G, t) : this.backendConnector && this.backendConnector.saveMissing && this.backendConnector.saveMissing(O, d, K, d1, G, t), this.emit("missingKey", O, d, K, u);
         };
-        this.options.saveMissing && (this.options.saveMissingPlurals && b ? P.forEach((O) => {
-          const T = this.pluralResolver.getSuffixes(O, t);
-          t1 && t[`defaultValue${this.options.pluralSeparator}zero`] && T.indexOf(`${this.options.pluralSeparator}zero`) < 0 && T.push(`${this.options.pluralSeparator}zero`), T.forEach((B) => {
-            c1([O], c + B, t[`defaultValue${B}`] || K);
+        this.options.saveMissing && (this.options.saveMissingPlurals && N ? Y.forEach((O) => {
+          const K = this.pluralResolver.getSuffixes(O, t);
+          t1 && t[`defaultValue${this.options.pluralSeparator}zero`] && K.indexOf(`${this.options.pluralSeparator}zero`) < 0 && K.push(`${this.options.pluralSeparator}zero`), K.forEach((B) => {
+            c1([O], c + B, t[`defaultValue${B}`] || F);
           });
-        }) : c1(P, c, K));
+        }) : c1(Y, c, F));
       }
-      u = this.extendTranslation(u, e, t, h, s), N && u === c && this.options.appendNamespaceToMissingKey && (u = `${d}:${c}`), (N || w) && this.options.parseMissingKeyHandler && (this.options.compatibilityAPI !== "v1" ? u = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? `${d}:${c}` : c, w ? u : void 0) : u = this.options.parseMissingKeyHandler(u));
+      u = this.extendTranslation(u, e, t, h, s), R && u === c && this.options.appendNamespaceToMissingKey && (u = `${d}:${c}`), (R || w) && this.options.parseMissingKeyHandler && (this.options.compatibilityAPI !== "v1" ? u = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? `${d}:${c}` : c, w ? u : void 0) : u = this.options.parseMissingKeyHandler(u));
     }
     return o ? (h.res = u, h.usedParams = this.getUsedParamsDetails(t), h) : u;
   }
@@ -8151,26 +8151,26 @@ class f1 extends k1 {
       o = a;
       let h = g.namespaces;
       this.options.fallbackNS && (h = h.concat(this.options.fallbackNS));
-      const u = t.count !== void 0 && !v(t.count), p = u && !t.ordinal && t.count === 0 && this.pluralResolver.shouldUseIntlApi(), L = t.context !== void 0 && (v(t.context) || typeof t.context == "number") && t.context !== "", M = t.lngs ? t.lngs : this.languageUtils.toResolveHierarchy(t.lng || this.language, t.fallbackLng);
+      const u = t.count !== void 0 && !v(t.count), p = u && !t.ordinal && t.count === 0 && this.pluralResolver.shouldUseIntlApi(), L = t.context !== void 0 && (v(t.context) || typeof t.context == "number") && t.context !== "", y = t.lngs ? t.lngs : this.languageUtils.toResolveHierarchy(t.lng || this.language, t.fallbackLng);
       h.forEach((f) => {
-        this.isValidLookup(s) || (r = f, !T1[`${M[0]}-${f}`] && this.utils && this.utils.hasLoadedNamespace && !this.utils.hasLoadedNamespace(r) && (T1[`${M[0]}-${f}`] = !0, this.logger.warn(`key "${o}" for languages "${M.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!!!")), M.forEach((E) => {
+        this.isValidLookup(s) || (r = f, !T1[`${y[0]}-${f}`] && this.utils && this.utils.hasLoadedNamespace && !this.utils.hasLoadedNamespace(r) && (T1[`${y[0]}-${f}`] = !0, this.logger.warn(`key "${o}" for languages "${y.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!!!")), y.forEach((_) => {
           if (this.isValidLookup(s)) return;
-          c = E;
-          const y = [a];
+          c = _;
+          const b = [a];
           if (this.i18nFormat && this.i18nFormat.addLookupKeys)
-            this.i18nFormat.addLookupKeys(y, a, E, f, t);
+            this.i18nFormat.addLookupKeys(b, a, _, f, t);
           else {
             let w;
-            u && (w = this.pluralResolver.getSuffix(E, t.count, t));
-            const N = `${this.options.pluralSeparator}zero`, b = `${this.options.pluralSeparator}ordinal${this.options.pluralSeparator}`;
-            if (u && (y.push(a + w), t.ordinal && w.indexOf(b) === 0 && y.push(a + w.replace(b, this.options.pluralSeparator)), p && y.push(a + N)), L) {
-              const R = `${a}${this.options.contextSeparator}${t.context}`;
-              y.push(R), u && (y.push(R + w), t.ordinal && w.indexOf(b) === 0 && y.push(R + w.replace(b, this.options.pluralSeparator)), p && y.push(R + N));
+            u && (w = this.pluralResolver.getSuffix(_, t.count, t));
+            const R = `${this.options.pluralSeparator}zero`, N = `${this.options.pluralSeparator}ordinal${this.options.pluralSeparator}`;
+            if (u && (b.push(a + w), t.ordinal && w.indexOf(N) === 0 && b.push(a + w.replace(N, this.options.pluralSeparator)), p && b.push(a + R)), L) {
+              const x = `${a}${this.options.contextSeparator}${t.context}`;
+              b.push(x), u && (b.push(x + w), t.ordinal && w.indexOf(N) === 0 && b.push(x + w.replace(N, this.options.pluralSeparator)), p && b.push(x + R));
             }
           }
-          let _;
-          for (; _ = y.pop(); )
-            this.isValidLookup(s) || (l = _, s = this.getResource(E, f, _, t));
+          let E;
+          for (; E = b.pop(); )
+            this.isValidLookup(s) || (l = E, s = this.getResource(_, f, E, t));
         }));
       });
     }), {
@@ -8215,7 +8215,7 @@ class f1 extends k1 {
 const N1 = (i) => i.charAt(0).toUpperCase() + i.slice(1);
 class G1 {
   constructor(e) {
-    this.options = e, this.supportedLngs = this.options.supportedLngs || !1, this.logger = j.create("languageUtils");
+    this.options = e, this.supportedLngs = this.options.supportedLngs || !1, this.logger = D.create("languageUtils");
   }
   getScriptPartFromCode(e) {
     if (e = p1(e), !e || e.indexOf("-") < 0) return null;
@@ -8415,7 +8415,7 @@ const S3 = ["v1", "v2", "v3"], A3 = ["v4"], K1 = {
 class Z3 {
   constructor(e) {
     let t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    this.languageUtils = e, this.options = t, this.logger = j.create("pluralResolver"), (!this.options.compatibilityJSON || A3.includes(this.options.compatibilityJSON)) && (typeof Intl > "u" || !Intl.PluralRules) && (this.options.compatibilityJSON = "v3", this.logger.error("Your environment seems not to be Intl API compatible, use an Intl.PluralRules polyfill. Will fallback to the compatibilityJSON v3 format handling.")), this.rules = B3(), this.pluralRulesCache = {};
+    this.languageUtils = e, this.options = t, this.logger = D.create("pluralResolver"), (!this.options.compatibilityJSON || A3.includes(this.options.compatibilityJSON)) && (typeof Intl > "u" || !Intl.PluralRules) && (this.options.compatibilityJSON = "v3", this.logger.error("Your environment seems not to be Intl API compatible, use an Intl.PluralRules polyfill. Will fallback to the compatibilityJSON v3 format handling.")), this.rules = B3(), this.pluralRulesCache = {};
   }
   addRule(e, t) {
     this.rules[e] = t;
@@ -8483,7 +8483,7 @@ const P1 = function(i, e, t) {
 class W3 {
   constructor() {
     let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    this.logger = j.create("interpolator"), this.options = e, this.format = e.interpolation && e.interpolation.format || ((t) => t), this.init(e);
+    this.logger = D.create("interpolator"), this.options = e, this.format = e.interpolation && e.interpolation.format || ((t) => t), this.init(e);
   }
   init() {
     let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -8504,12 +8504,12 @@ class W3 {
       nestingPrefix: u,
       nestingPrefixEscaped: p,
       nestingSuffix: L,
-      nestingSuffixEscaped: M,
+      nestingSuffixEscaped: y,
       nestingOptionsSeparator: f,
-      maxReplaces: E,
-      alwaysFormat: y
+      maxReplaces: _,
+      alwaysFormat: b
     } = e.interpolation;
-    this.escape = t !== void 0 ? t : y3, this.escapeValue = s !== void 0 ? s : !0, this.useRawValueToEscape = o !== void 0 ? o : !1, this.prefix = l ? Q(l) : c || "{{", this.suffix = r ? Q(r) : d || "}}", this.formatSeparator = g || ",", this.unescapePrefix = a ? "" : h || "-", this.unescapeSuffix = this.unescapePrefix ? "" : a || "", this.nestingPrefix = u ? Q(u) : p || Q("$t("), this.nestingSuffix = L ? Q(L) : M || Q(")"), this.nestingOptionsSeparator = f || ",", this.maxReplaces = E || 1e3, this.alwaysFormat = y !== void 0 ? y : !1, this.resetRegExp();
+    this.escape = t !== void 0 ? t : y3, this.escapeValue = s !== void 0 ? s : !0, this.useRawValueToEscape = o !== void 0 ? o : !1, this.prefix = l ? Q(l) : c || "{{", this.suffix = r ? Q(r) : d || "}}", this.formatSeparator = g || ",", this.unescapePrefix = a ? "" : h || "-", this.unescapeSuffix = this.unescapePrefix ? "" : a || "", this.nestingPrefix = u ? Q(u) : p || Q("$t("), this.nestingSuffix = L ? Q(L) : y || Q(")"), this.nestingOptionsSeparator = f || ",", this.maxReplaces = _ || 1e3, this.alwaysFormat = b !== void 0 ? b : !1, this.resetRegExp();
   }
   reset() {
     this.options && this.init(this.options);
@@ -8522,18 +8522,18 @@ class W3 {
     let l, c, r;
     const d = this.options && this.options.interpolation && this.options.interpolation.defaultVariables || {}, g = (p) => {
       if (p.indexOf(this.formatSeparator) < 0) {
-        const E = P1(t, d, p, this.options.keySeparator, this.options.ignoreJSONStructure);
-        return this.alwaysFormat ? this.format(E, void 0, s, {
+        const _ = P1(t, d, p, this.options.keySeparator, this.options.ignoreJSONStructure);
+        return this.alwaysFormat ? this.format(_, void 0, s, {
           ...o,
           ...t,
           interpolationkey: p
-        }) : E;
+        }) : _;
       }
-      const L = p.split(this.formatSeparator), M = L.shift().trim(), f = L.join(this.formatSeparator).trim();
-      return this.format(P1(t, d, M, this.options.keySeparator, this.options.ignoreJSONStructure), f, s, {
+      const L = p.split(this.formatSeparator), y = L.shift().trim(), f = L.join(this.formatSeparator).trim();
+      return this.format(P1(t, d, y, this.options.keySeparator, this.options.ignoreJSONStructure), f, s, {
         ...o,
         ...t,
-        interpolationkey: M
+        interpolationkey: y
       });
     };
     this.resetRegExp();
@@ -8559,8 +8559,8 @@ class W3 {
           } else
             this.logger.warn(`missed to pass in variable ${L} for interpolating ${e}`), c = "";
         else !v(c) && !this.useRawValueToEscape && (c = B1(c));
-        const M = p.safeValue(c);
-        if (e = e.replace(l[0], M), h ? (p.regex.lastIndex += c.length, p.regex.lastIndex -= l[0].length) : p.regex.lastIndex = 0, r++, r >= this.maxReplaces)
+        const y = p.safeValue(c);
+        if (e = e.replace(l[0], y), h ? (p.regex.lastIndex += c.length, p.regex.lastIndex -= l[0].length) : p.regex.lastIndex = 0, r++, r >= this.maxReplaces)
           break;
       }
     }), e;
@@ -8580,8 +8580,8 @@ class W3 {
           ...g,
           ...c
         });
-      } catch (M) {
-        return this.logger.warn(`failed parsing options string in nesting for key ${d}`, M), `${d}${a}${u}`;
+      } catch (y) {
+        return this.logger.warn(`failed parsing options string in nesting for key ${d}`, y), `${d}${a}${u}`;
       }
       return c.defaultValue && c.defaultValue.indexOf(this.prefix) > -1 && delete c.defaultValue, d;
     };
@@ -8638,7 +8638,7 @@ const j3 = (i) => {
 class D3 {
   constructor() {
     let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    this.logger = j.create("formatter"), this.options = e, this.formats = {
+    this.logger = D.create("formatter"), this.options = e, this.formats = {
       number: X((t, s) => {
         const o = new Intl.NumberFormat(t, {
           ...s
@@ -8721,7 +8721,7 @@ const T3 = (i, e) => {
 class G3 extends k1 {
   constructor(e, t, s) {
     let o = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {};
-    super(), this.backend = e, this.store = t, this.services = s, this.languageUtils = s.languageUtils, this.options = o, this.logger = j.create("backendConnector"), this.waitingReads = [], this.maxParallelReads = o.maxParallelReads || 10, this.readingCalls = 0, this.maxRetries = o.maxRetries >= 0 ? o.maxRetries : 5, this.retryTimeout = o.retryTimeout >= 1 ? o.retryTimeout : 350, this.state = {}, this.queue = [], this.backend && this.backend.init && this.backend.init(s, o.backend, o);
+    super(), this.backend = e, this.store = t, this.services = s, this.languageUtils = s.languageUtils, this.options = o, this.logger = D.create("backendConnector"), this.waitingReads = [], this.maxParallelReads = o.maxParallelReads || 10, this.readingCalls = 0, this.maxRetries = o.maxRetries >= 0 ? o.maxRetries : 5, this.retryTimeout = o.retryTimeout >= 1 ? o.retryTimeout : 350, this.state = {}, this.queue = [], this.backend && this.backend.init && this.backend.init(s, o.backend, o);
   }
   queueLoad(e, t, s, o) {
     const l = {}, c = {}, r = {}, d = {};
@@ -8918,7 +8918,7 @@ const F1 = () => ({
 class l1 extends k1 {
   constructor() {
     let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, t = arguments.length > 1 ? arguments[1] : void 0;
-    if (super(), this.options = Y1(e), this.services = {}, this.logger = j, this.modules = {
+    if (super(), this.options = Y1(e), this.services = {}, this.logger = D, this.modules = {
       external: []
     }, K3(this), t && !this.isInitialized && !e.isClone) {
       if (!this.options.initImmediate)
@@ -8943,26 +8943,26 @@ class l1 extends k1 {
     }), t.keySeparator !== void 0 && (this.options.userDefinedKeySeparator = t.keySeparator), t.nsSeparator !== void 0 && (this.options.userDefinedNsSeparator = t.nsSeparator);
     const l = (a) => a ? typeof a == "function" ? new a() : a : null;
     if (!this.options.isClone) {
-      this.modules.logger ? j.init(l(this.modules.logger), this.options) : j.init(null, this.options);
+      this.modules.logger ? D.init(l(this.modules.logger), this.options) : D.init(null, this.options);
       let a;
       this.modules.formatter ? a = this.modules.formatter : typeof Intl < "u" && (a = D3);
       const h = new G1(this.options);
       this.store = new D1(this.options.resources, this.options);
       const u = this.services;
-      u.logger = j, u.resourceStore = this.store, u.languageUtils = h, u.pluralResolver = new Z3(h, {
+      u.logger = D, u.resourceStore = this.store, u.languageUtils = h, u.pluralResolver = new Z3(h, {
         prepend: this.options.pluralSeparator,
         compatibilityJSON: this.options.compatibilityJSON,
         simplifyPluralSuffix: this.options.simplifyPluralSuffix
       }), a && (!this.options.interpolation.format || this.options.interpolation.format === o.interpolation.format) && (u.formatter = l(a), u.formatter.init(u, this.options), this.options.interpolation.format = u.formatter.format.bind(u.formatter)), u.interpolator = new W3(this.options), u.utils = {
         hasLoadedNamespace: this.hasLoadedNamespace.bind(this)
       }, u.backendConnector = new G3(l(this.modules.backend), u.resourceStore, u, this.options), u.backendConnector.on("*", function(p) {
-        for (var L = arguments.length, M = new Array(L > 1 ? L - 1 : 0), f = 1; f < L; f++)
-          M[f - 1] = arguments[f];
-        e.emit(p, ...M);
+        for (var L = arguments.length, y = new Array(L > 1 ? L - 1 : 0), f = 1; f < L; f++)
+          y[f - 1] = arguments[f];
+        e.emit(p, ...y);
       }), this.modules.languageDetector && (u.languageDetector = l(this.modules.languageDetector), u.languageDetector.init && u.languageDetector.init(u, this.options.detection, this.options)), this.modules.i18nFormat && (u.i18nFormat = l(this.modules.i18nFormat), u.i18nFormat.init && u.i18nFormat.init(this)), this.translator = new f1(this.services, this.options), this.translator.on("*", function(p) {
-        for (var L = arguments.length, M = new Array(L > 1 ? L - 1 : 0), f = 1; f < L; f++)
-          M[f - 1] = arguments[f];
-        e.emit(p, ...M);
+        for (var L = arguments.length, y = new Array(L > 1 ? L - 1 : 0), f = 1; f < L; f++)
+          y[f - 1] = arguments[f];
+        e.emit(p, ...y);
       }), this.modules.external.forEach((p) => {
         p.init && p.init(this);
       });
@@ -9173,14 +9173,14 @@ function P3() {
   if (console && console.warn) {
     for (var i = arguments.length, e = new Array(i), t = 0; t < i; t++)
       e[t] = arguments[t];
-    U(e[0]) && (e[0] = `react-i18next:: ${e[0]}`), console.warn(...e);
+    z(e[0]) && (e[0] = `react-i18next:: ${e[0]}`), console.warn(...e);
   }
 }
 const $1 = {};
 function y1() {
   for (var i = arguments.length, e = new Array(i), t = 0; t < i; t++)
     e[t] = arguments[t];
-  U(e[0]) && $1[e[0]] || (U(e[0]) && ($1[e[0]] = /* @__PURE__ */ new Date()), P3(...e));
+  z(e[0]) && $1[e[0]] || (z(e[0]) && ($1[e[0]] = /* @__PURE__ */ new Date()), P3(...e));
 }
 const oe = (i, e) => () => {
   if (i.isInitialized)
@@ -9196,7 +9196,7 @@ const oe = (i, e) => () => {
 }, U1 = (i, e, t) => {
   i.loadNamespaces(e, oe(i, t));
 }, z1 = (i, e, t, s) => {
-  U(t) && (t = [t]), t.forEach((o) => {
+  z(t) && (t = [t]), t.forEach((o) => {
     i.options.ns.indexOf(o) < 0 && i.options.ns.push(o);
   }), i.loadLanguages(e, oe(i, s));
 }, F3 = function(i, e) {
@@ -9216,7 +9216,7 @@ const oe = (i, e) => () => {
       if (t.bindI18n && t.bindI18n.indexOf("languageChanging") > -1 && o.services.backendConnector.backend && o.isLanguageChangingTo && !l(o.isLanguageChangingTo, i)) return !1;
     }
   }) : F3(i, e, t);
-}, U = (i) => typeof i == "string", $3 = (i) => typeof i == "object" && i !== null, U3 = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34|nbsp|#160|copy|#169|reg|#174|hellip|#8230|#x2F|#47);/g, z3 = {
+}, z = (i) => typeof i == "string", $3 = (i) => typeof i == "object" && i !== null, U3 = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34|nbsp|#160|copy|#169|reg|#174|hellip|#8230|#x2F|#47);/g, z3 = {
   "&amp;": "&",
   "&#38;": "&",
   "&lt;": "<",
@@ -9280,18 +9280,18 @@ const n0 = (i, e) => {
   return A(() => {
     t.current = i;
   }, [i, e]), t.current;
-}, re = (i, e, t, s) => i.getFixedT(e, t, s), r0 = (i, e, t, s) => W(re(i, e, t, s), [i, e, t, s]), l0 = function(i) {
+}, re = (i, e, t, s) => i.getFixedT(e, t, s), r0 = (i, e, t, s) => j(re(i, e, t, s), [i, e, t, s]), l0 = function(i) {
   let e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
   const {
     i18n: t
   } = e, {
     i18n: s,
     defaultNS: o
-  } = z(s0) || {}, l = t || s || t0();
+  } = J(s0) || {}, l = t || s || t0();
   if (l && !l.reportNamespaces && (l.reportNamespaces = new o0()), !l) {
     y1("You will need to pass in an i18next instance by using initReactI18next");
-    const w = (b, R) => U(R) ? R : $3(R) && U(R.defaultValue) ? R.defaultValue : Array.isArray(b) ? b[b.length - 1] : b, N = [w, {}, !1];
-    return N.t = w, N.i18n = {}, N.ready = !1, N;
+    const w = (N, x) => z(x) ? x : $3(x) && z(x.defaultValue) ? x.defaultValue : Array.isArray(N) ? N[N.length - 1] : N, R = [w, {}, !1];
+    return R.t = w, R.i18n = {}, R.ready = !1, R;
   }
   l.options.react && l.options.react.wait !== void 0 && y1("It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.");
   const c = {
@@ -9303,32 +9303,32 @@ const n0 = (i, e) => {
     keyPrefix: d
   } = c;
   let g = i;
-  g = U(g) ? [g] : g || ["translation"], l.reportNamespaces.addUsedNamespaces && l.reportNamespaces.addUsedNamespaces(g);
-  const a = (l.isInitialized || l.initializedStoreOnce) && g.every((w) => Y3(w, l, c)), h = r0(l, e.lng || null, c.nsMode === "fallback" ? g : g[0], d), u = () => h, p = () => re(l, e.lng || null, c.nsMode === "fallback" ? g : g[0], d), [L, M] = S(u);
+  g = z(g) ? [g] : g || ["translation"], l.reportNamespaces.addUsedNamespaces && l.reportNamespaces.addUsedNamespaces(g);
+  const a = (l.isInitialized || l.initializedStoreOnce) && g.every((w) => Y3(w, l, c)), h = r0(l, e.lng || null, c.nsMode === "fallback" ? g : g[0], d), u = () => h, p = () => re(l, e.lng || null, c.nsMode === "fallback" ? g : g[0], d), [L, y] = S(u);
   let f = g.join();
   e.lng && (f = `${e.lng}${f}`);
-  const E = n0(f), y = a1(!0);
+  const _ = n0(f), b = a1(!0);
   A(() => {
     const {
       bindI18n: w,
-      bindI18nStore: N
+      bindI18nStore: R
     } = c;
-    y.current = !0, !a && !r && (e.lng ? z1(l, e.lng, g, () => {
-      y.current && M(p);
+    b.current = !0, !a && !r && (e.lng ? z1(l, e.lng, g, () => {
+      b.current && y(p);
     }) : U1(l, g, () => {
-      y.current && M(p);
-    })), a && E && E !== f && y.current && M(p);
-    const b = () => {
-      y.current && M(p);
+      b.current && y(p);
+    })), a && _ && _ !== f && b.current && y(p);
+    const N = () => {
+      b.current && y(p);
     };
-    return w && l && l.on(w, b), N && l && l.store.on(N, b), () => {
-      y.current = !1, w && l && w.split(" ").forEach((R) => l.off(R, b)), N && l && N.split(" ").forEach((R) => l.store.off(R, b));
+    return w && l && l.on(w, N), R && l && l.store.on(R, N), () => {
+      b.current = !1, w && l && w.split(" ").forEach((x) => l.off(x, N)), R && l && R.split(" ").forEach((x) => l.store.off(x, N));
     };
   }, [l, f]), A(() => {
-    y.current && a && M(u);
+    b.current && a && y(u);
   }, [l, d, a]);
-  const _ = [L, l, a];
-  if (_.t = L, _.i18n = l, _.ready = a, a || !a && !r) return _;
+  const E = [L, l, a];
+  if (E.t = L, E.i18n = l, E.ready = a, a || !a && !r) return E;
   throw new Promise((w) => {
     e.lng ? z1(l, e.lng, g, () => w()) : U1(l, g, () => w());
   });
@@ -9350,61 +9350,75 @@ I.use(i0).init({
   }
 });
 const k0 = m1(
-  ({ width: i, selectedCity: e, setSelectedCity: t, onChange: s, value: o, id: l, disabled: c }, r) => {
-    const [d, g] = S([]), [a, h] = S([]), [u, p] = S(!1), { locale: L, axiosPeople: M } = z(Ce);
-    if (!M)
+  ({
+    width: i,
+    selectedCity: e,
+    setSelectedCity: t,
+    onChange: s,
+    value: o,
+    id: l,
+    disabled: c,
+    required: r,
+    clearable: d,
+    error: g
+  }, a) => {
+    const [h, u] = S([]), [p, L] = S([]), [y, f] = S(!1), { locale: _, axiosPeople: b } = J(Ce);
+    if (!b)
       throw new Error(
         `CountrySelect requires "axiosPeople" to fetch counties. 
                 Please provide it via SNMTUiContext.`
       );
-    const { t: f } = l0("common", { lng: L }), E = W(async () => {
-      p(!0);
+    const { t: E } = l0("common", { lng: _ }), w = j(async () => {
+      f(!0);
       try {
-        const _ = await M.post("v1/countries/search");
-        h(_ == null ? void 0 : _.data.data);
+        const N = await b.post("v1/countries/search");
+        L(N == null ? void 0 : N.data.data);
       } catch {
-        g([]);
+        u([]);
       } finally {
-        p(!1);
+        f(!1);
       }
-    }, [M]);
+    }, [b]);
     A(() => {
-      E();
+      w();
     }, []), A(() => {
       if (e) {
-        const _ = e.split("-")[1], w = a.filter(
-          (N) => N.name.includes(_)
+        const N = e.split("-")[1], x = p.filter(
+          (Z) => Z.name.includes(N)
         );
-        if (w.length) {
-          const N = w.map((b) => ({
-            label: b.name,
-            value: b.name
+        if (x.length) {
+          const Z = x.map((T) => ({
+            label: T.name,
+            value: T.name
           }));
-          s(N[0].value);
+          s(Z[0].value);
         }
       }
-    }, [e, a, s]), A(() => {
-      const _ = a.map((w) => ({
-        label: w.name,
-        value: w.name
+    }, [e, p, s]), A(() => {
+      const N = p.map((x) => ({
+        label: x.name,
+        value: x.name
       }));
-      g(_);
-    }, [a]);
-    const y = (_) => {
-      _ === null ? (s(""), t && t("")) : (s(_), t && t(""));
+      u(N);
+    }, [p]);
+    const R = (N) => {
+      N === null ? (s(""), t && t("")) : (s(N), t && t(""));
     };
     return /* @__PURE__ */ n("div", { className: "snmt-country-select", children: /* @__PURE__ */ n(
       L3,
       {
         id: l,
         width: i,
-        placeholder: f("placeholder"),
+        placeholder: E("placeholder"),
         value: o,
-        ref: r,
-        onChange: y,
-        options: [{ label: "None", value: null }, ...d],
+        ref: a,
+        onChange: R,
+        options: h,
         disabled: c,
-        isLoading: u
+        isLoading: y,
+        required: r,
+        clearable: d,
+        error: g
       }
     ) });
   }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@snmt-react-ui/country-select",
     "private": false,
-    "version": "2.3.18",
+    "version": "2.4.0",
     "type": "module",
     "main": "dist/country-select.js",
     "types": "dist/index.d.ts",
@@ -27,5 +27,5 @@
     "peerDependencies": {
         "antd": "^5.18.3"
     },
-    "gitHead": "ce3b5d9c1d396223ed981ce68efeb50c2886765a"
+    "gitHead": "05a73d41d2638afaa088f004044aac5f099a6adc"
 }