maz-ui 3.31.0 → 3.31.2

package/components/chunks/{MazPhoneNumberInput-BiFGrTa7.mjs → MazPhoneNumberInput-TdklZIjq.mjs}

@@ -1,5 +1,5 @@
 import "../assets/MazPhoneNumberInput.css";
-import { computed as d, defineComponent as Ie, defineAsyncComponent as R, ref as h, getCurrentInstance as ke, onMounted as Le, useSlots as Ee, openBlock as y, createElementBlock as w, normalizeClass as F, normalizeStyle as oe, createElementVNode as O, createCommentVNode as m, renderSlot as Z, createBlock as U, unref as C, resolveDynamicComponent as Be, withDirectives as Ne, mergeProps as Se, toHandlers as Te, vModelDynamic as Me, createTextVNode as ze, toDisplayString as ee, withModifiers as re, withCtx as ue, createVNode as H, useCssVars as De, onBeforeMount as Ue, Transition as Re, Fragment as qe, renderList as He, nextTick as X, reactive as Oe, watch as me } from "vue";
+import { computed as d, defineComponent as Ie, defineAsyncComponent as R, ref as h, getCurrentInstance as ke, onMounted as Le, useSlots as Ee, openBlock as y, createElementBlock as k, normalizeClass as F, normalizeStyle as oe, createElementVNode as q, createCommentVNode as m, renderSlot as Z, createBlock as T, unref as C, resolveDynamicComponent as Be, withDirectives as Ne, mergeProps as Se, toHandlers as Te, vModelDynamic as Me, createTextVNode as ze, toDisplayString as ee, withModifiers as re, withCtx as ue, createVNode as J, useCssVars as De, onBeforeMount as Ue, Transition as Re, Fragment as He, renderList as qe, nextTick as X, reactive as Oe, watch as me } from "vue";
 import { isSupportedCountry as We, getCountryCallingCode as Ce, getExampleNumber as Ye, getCountries as je, parsePhoneNumberFromString as Qe, AsYouType as Ge } from "libphonenumber-js";
 function Ke(r) {
   return !!r;
@@ -56,17 +56,17 @@ function lo(r, u) {
   const a = [], B = je();
   r = r ?? Fe().browserLocale ?? "en-US";
   for (const S of B) {
-    const q = Xe(r, S, u);
-    if (q)
+    const H = Xe(r, S, u);
+    if (H)
       try {
-        const T = Ce(S);
+        const M = Ce(S);
         a.push({
           iso2: S,
-          dialCode: T,
-          name: q
+          dialCode: M,
+          name: H
         });
-      } catch (T) {
-        console.error(`[MazPhoneNumberInput](getCountryCallingCode) ${T}`);
+      } catch (M) {
+        console.error(`[MazPhoneNumberInput](getCountryCallingCode) ${M}`);
       }
   }
   return a;
@@ -194,7 +194,7 @@ const co = {
   },
   emits: ["focus", "blur", "update:model-value", "click", "change"],
   setup(r, { emit: u }) {
-    const a = R(() => import("./MazBtn-bL_VYiL1.mjs")), B = R(() => import("./MazIcon-C329_2BT.mjs")), S = R(() => import("./eye-slash-rdPLIzFI.mjs")), q = R(() => import("./eye-3jm1b22X.mjs")), T = R(() => import("./check-_5Up9njX.mjs")), t = r, I = u, P = h(!1), c = h(!1), i = h(), te = ke(), le = Pe({
+    const a = R(() => import("./MazBtn-M7Pnxit5.mjs")), B = R(() => import("./MazIcon-C329_2BT.mjs")), S = R(() => import("./eye-slash-rdPLIzFI.mjs")), H = R(() => import("./eye-3jm1b22X.mjs")), M = R(() => import("./check-_5Up9njX.mjs")), t = r, w = u, P = h(!1), c = h(!1), i = h(), te = ke(), le = Pe({
       componentName: "MazInput",
       instance: te,
       providedId: t.id
@@ -203,7 +203,7 @@ const co = {
       var l;
       t.autoFocus && ((l = i.value) == null || l.focus());
     });
-    const W = d(() => t.type === "password"), A = d(() => P.value ? "text" : t.type), k = d(() => {
+    const O = d(() => t.type === "password"), A = d(() => P.value ? "text" : t.type), I = d(() => {
       if (!t.noBorder) {
         if (t.error)
           return "maz-border-danger";
@@ -235,27 +235,27 @@ const co = {
       const { required: l, placeholder: g } = t;
       if (g)
         return l ? `${g} *` : g;
-    }), x = d(() => t.modelValue !== void 0 && t.modelValue !== ""), M = d({
+    }), x = d(() => t.modelValue !== void 0 && t.modelValue !== ""), D = d({
       get: () => t.modelValue,
       set: (l) => N(l)
-    }), Y = d(() => (!!t.label || !!t.hint) && (c.value || !!x.value || !!t.placeholder || ["date", "month", "week"].includes(t.type))), _ = d(() => !!t.label || !!t.hint), D = () => !!$["right-icon"] || W.value || !!$["valid-button"] || t.validButton || !!t.rightIcon, j = () => !!$["left-icon"] || !!t.leftIcon, E = (l) => {
-      I("focus", l), c.value = !0;
+    }), W = d(() => (!!t.label || !!t.hint) && (c.value || !!x.value || !!t.placeholder || ["date", "month", "week"].includes(t.type))), _ = d(() => !!t.label || !!t.hint), U = () => !!$["right-icon"] || O.value || !!$["valid-button"] || t.validButton || !!t.rightIcon, Y = () => !!$["left-icon"] || !!t.leftIcon, E = (l) => {
+      w("focus", l), c.value = !0;
     }, ne = (l) => {
-      I("blur", l), c.value = !1;
-    }, K = (l) => I("change", l), p = io((l) => {
-      I("update:model-value", l);
+      w("blur", l), c.value = !1;
+    }, K = (l) => w("change", l), p = io((l) => {
+      w("update:model-value", l);
     }, t.debounceDelay), N = (l) => {
       if (t.debounce)
         return p(l);
-      I("update:model-value", l);
+      w("update:model-value", l);
     };
-    return (l, g) => (y(), w(
+    return (l, g) => (y(), k(
       "div",
       {
         class: F(["m-input", [
           {
             "--is-focused": c.value || l.borderActive,
-            "--should-up": Y.value,
+            "--should-up": W.value,
             "--has-label": _.value,
             "--is-disabled": l.disabled,
             "--is-readonly": l.readonly,
@@ -269,33 +269,33 @@ const co = {
         style: oe(l.style)
       },
       [
-        O(
+        q(
           "div",
           {
-            class: F(["m-input-wrapper", [l.inputClasses, k.value, { "maz-rounded": !l.noRadius }]])
+            class: F(["m-input-wrapper", [l.inputClasses, I.value, { "maz-rounded": !l.noRadius }]])
           },
           [
-            j() ? (y(), w("div", co, [
+            Y() ? (y(), k("div", co, [
               m(`
           @slot left-icon - The icon to display on the left of the input
         `),
               l.$slots["left-icon"] || l.leftIcon ? Z(l.$slots, "left-icon", { key: 0 }, () => [
-                typeof l.leftIcon == "string" ? (y(), U(C(B), {
+                typeof l.leftIcon == "string" ? (y(), T(C(B), {
                   key: 0,
                   name: l.leftIcon,
                   class: "maz-text-xl maz-text-muted"
-                }, null, 8, ["name"])) : l.leftIcon ? (y(), U(Be(l.leftIcon), {
+                }, null, 8, ["name"])) : l.leftIcon ? (y(), T(Be(l.leftIcon), {
                   key: 1,
                   class: "maz-text-xl maz-text-muted"
                 })) : m("v-if", !0)
               ], !0) : m("v-if", !0)
             ])) : m("v-if", !0),
-            O("div", po, [
-              Ne(O("input", Se({
+            q("div", po, [
+              Ne(q("input", Se({
                 id: C(le),
                 ref_key: "input",
                 ref: i,
-                "onUpdate:modelValue": g[0] || (g[0] = (v) => M.value = v),
+                "onUpdate:modelValue": g[0] || (g[0] = (v) => D.value = v),
                 type: A.value,
                 name: l.name
               }, l.$attrs, {
@@ -313,9 +313,9 @@ const co = {
               }, !0), {
                 onClick: g[1] || (g[1] = (v) => l.$emit("click", v))
               }), null, 16, fo), [
-                [Me, M.value]
+                [Me, D.value]
               ]),
-              l.label || l.hint ? (y(), w(
+              l.label || l.hint ? (y(), k(
                 "span",
                 {
                   key: 0,
@@ -334,27 +334,27 @@ const co = {
                     1
                     /* TEXT */
                   ),
-                  l.required ? (y(), w("sup", mo, "*")) : m("v-if", !0)
+                  l.required ? (y(), k("sup", mo, "*")) : m("v-if", !0)
                 ],
                 2
                 /* CLASS */
               )) : m("v-if", !0)
             ]),
-            D() ? (y(), w("div", yo, [
+            U() ? (y(), k("div", yo, [
               m(`
           @slot right-icon - The icon to display on the right of the input
         `),
               l.$slots["right-icon"] || l.rightIcon ? Z(l.$slots, "right-icon", { key: 0 }, () => [
-                typeof l.rightIcon == "string" ? (y(), U(C(B), {
+                typeof l.rightIcon == "string" ? (y(), T(C(B), {
                   key: 0,
                   name: l.rightIcon,
                   class: "maz-text-xl maz-text-muted"
-                }, null, 8, ["name"])) : l.rightIcon ? (y(), U(Be(l.rightIcon), {
+                }, null, 8, ["name"])) : l.rightIcon ? (y(), T(Be(l.rightIcon), {
                   key: 1,
                   class: "maz-text-xl maz-text-muted"
                 })) : m("v-if", !0)
               ], !0) : m("v-if", !0),
-              W.value ? (y(), U(C(a), {
+              O.value ? (y(), T(C(a), {
                 key: 1,
                 color: "transparent",
                 tabindex: "-1",
@@ -362,10 +362,10 @@ const co = {
                 onClick: g[2] || (g[2] = re((v) => P.value = !P.value, ["stop"]))
               }, {
                 default: ue(() => [
-                  P.value ? (y(), U(C(S), {
+                  P.value ? (y(), T(C(S), {
                     key: 0,
                     class: "maz-text-xl maz-text-muted"
-                  })) : (y(), U(C(q), {
+                  })) : (y(), T(C(H), {
                     key: 1,
                     class: "maz-text-xl maz-text-muted"
                   }))
@@ -377,7 +377,7 @@ const co = {
           @slot valid-button - Replace the valid button by your own
         `),
               l.$slots["valid-button"] || l.validButton ? Z(l.$slots, "valid-button", { key: 2 }, () => [
-                H(C(a), {
+                J(C(a), {
                   color: "transparent",
                   disabled: l.disabled,
                   tabindex: "-1",
@@ -387,7 +387,7 @@ const co = {
                   type: "submit"
                 }, {
                   default: ue(() => [
-                    H(C(T), { class: "maz-text-2xl maz-text-normal" })
+                    J(C(M), { class: "maz-text-2xl maz-text-normal" })
                   ]),
                   _: 1
                   /* STABLE */
@@ -415,15 +415,11 @@ let ge = null;
 function ho(r, u) {
   ge && clearTimeout(ge), ge = setTimeout(r, u);
 }
-const bo = {
-  key: 0,
-  tabindex: "-1",
-  class: "m-select-list__search-wrapper"
-}, go = { class: "m-select-list__no-results" }, zo = {
+const bo = { class: "m-select-list__no-results" }, go = {
   key: 2,
   class: "m-select-list__scroll-wrapper",
   tabindex: "-1"
-}, Co = ["onClick"], Vo = /* @__PURE__ */ Ie({
+}, zo = ["onClick"], Co = /* @__PURE__ */ Ie({
   inheritAttrs: !1,
   __name: "MazSelect",
   props: {
@@ -436,7 +432,7 @@ const bo = {
     optionLabelKey: { default: "label" },
     optionInputValueKey: { default: "label" },
     listPosition: { default: "bottom left" },
-    itemHeight: { default: 42 },
+    itemHeight: { default: void 0 },
     maxListHeight: { default: 240 },
     maxListWidth: { default: void 0 },
     size: { default: "md" },
@@ -451,21 +447,21 @@ const bo = {
   emits: ["close", "open", "blur", "focus", "change", "update:model-value", "selected-option"],
   setup(r, { emit: u }) {
     De((e) => ({
-      c5a22ee8: W.value,
-      "166b564b": te.value,
-      "123f3f73": le.value
+      "5e7d1dfe": O.value,
+      b3b9ed86: te.value,
+      "55cb06e5": le.value
     }));
-    const a = R(() => import("./MazCheckbox-eI5DclIt.mjs")), B = R(() => import("./magnifying-glass-ebhrla2J.mjs")), S = R(() => import("./chevron-down-bC0s_0yH.mjs")), q = R(() => import("./no-symbol-JnXtUaU-.mjs")), T = ke(), t = r, I = u, P = h(!1), c = h(), i = d(
+    const a = R(() => import("./MazCheckbox-4gr5TnSK.mjs")), B = R(() => import("./magnifying-glass-ebhrla2J.mjs")), S = R(() => import("./chevron-down-bC0s_0yH.mjs")), H = R(() => import("./no-symbol-JnXtUaU-.mjs")), M = ke(), t = r, w = u, P = h(!1), c = h(), i = d(
       () => ["black", "transparent", "white"].includes(t.color)
     ), te = d(
       () => i.value ? "var(--maz-color-black)" : `var(--maz-color-${t.color}-800)`
     ), le = d(
       () => i.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-100)`
-    ), W = d(
+    ), O = d(
       () => i.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-200)`
-    ), A = d(() => P.value || t.open), k = Pe({
+    ), A = d(() => P.value || t.open), I = Pe({
       componentName: "MazSelect",
-      instance: T,
+      instance: M,
       providedId: t.id
     }), $ = d(
       () => {
@@ -475,6 +471,7 @@ const bo = {
           [t.optionLabelKey]: o,
           [t.optionInputValueKey]: o
         } : {
+          ...o,
           [t.optionValueKey]: o[t.optionValueKey],
           [t.optionLabelKey]: o[t.optionLabelKey],
           [t.optionInputValueKey]: o[t.optionInputValueKey]
@@ -483,19 +480,19 @@ const bo = {
     ), L = d(
       () => {
         var e;
-        return ((e = $.value) == null ? void 0 : e.filter((o) => t.multiple ? Array.isArray(t.modelValue) ? t.modelValue.includes(o[t.optionValueKey]) && !D(o[t.optionValueKey]) : !1 : t.modelValue === o[t.optionValueKey] && !D(o[t.optionValueKey]))) ?? [];
+        return ((e = $.value) == null ? void 0 : e.filter((o) => t.multiple ? Array.isArray(t.modelValue) ? t.modelValue.includes(o[t.optionValueKey]) && !U(o[t.optionValueKey]) : !1 : t.modelValue === o[t.optionValueKey] && !U(o[t.optionValueKey]))) ?? [];
       }
     );
     Ue(() => {
       var e;
       (e = t.options) != null && e.length || console.warn("[maz-ui](MazSelect) you must provide options"), ae();
     });
-    const x = h(), M = h(), Y = h(), _ = h(), D = (e) => e == null;
-    function j(e) {
+    const x = h(), D = h(), W = h(), _ = h(), U = (e) => e == null;
+    function Y(e) {
       var n;
       return (((n = L.value) == null ? void 0 : n.some(
         (s) => s[t.optionValueKey] === e[t.optionValueKey]
-      )) ?? !1) && !D(e[t.optionValueKey]);
+      )) ?? !1) && !U(e[t.optionValueKey]);
     }
     const E = d(() => {
       var e, o;
@@ -527,20 +524,20 @@ const bo = {
       var o;
       if (e && ("relatedTarget" in e && ((o = x.value) != null && o.contains(e.relatedTarget)) || e.type === "keydown"))
         return e.preventDefault();
-      await X(), P.value = !1, c.value = 0, I("close", e);
-    }, Q = async (e) => {
-      t.disabled || A.value || (e == null || e.preventDefault(), P.value = !0, await J(), I("focus", e), I("open", P.value));
+      await X(), P.value = !1, c.value = 0, w("close", e);
+    }, j = async (e) => {
+      t.disabled || A.value || (e == null || e.preventDefault(), P.value = !0, await G(), w("focus", e), w("open", P.value));
     };
     function se() {
       var e, o;
-      (o = ((e = M.value) == null ? void 0 : e.$el).querySelector("input")) == null || o.focus();
+      (o = ((e = D.value) == null ? void 0 : e.$el).querySelector("input")) == null || o.focus();
     }
     function ye(e) {
       P.value ? z(e) : se();
     }
     function ie(e) {
       var o, n;
-      K.value = e, (n = ((o = Y.value) == null ? void 0 : o.$el).querySelector("input")) == null || n.focus();
+      K.value = e, (n = ((o = W.value) == null ? void 0 : o.$el).querySelector("input")) == null || n.focus();
     }
     function de(e) {
       var n;
@@ -548,31 +545,31 @@ const bo = {
       const o = g(p.value);
       o != null && o.length && (c.value = (n = v.value) == null ? void 0 : n.findIndex(
         (s) => s[t.optionValueKey] === o[0][t.optionValueKey]
-      ), typeof c.value == "number" && c.value >= 0 && J(c.value)), ho(() => {
+      ), typeof c.value == "number" && c.value >= 0 && G(c.value)), ho(() => {
         p.value = "";
       }, 1e3);
     }
     const ve = (e) => {
       const o = e.key;
-      /^[\dA-Za-z\u0400-\u04FF]$/.test(o) ? (e.preventDefault(), Q(e), t.search ? ie(o) : de(o)) : G(e);
-    }, G = (e) => {
+      /^[\dA-Za-z\u0400-\u04FF]$/.test(o) ? (e.preventDefault(), j(e), t.search ? ie(o) : de(o)) : Q(e);
+    }, Q = (e) => {
       const o = e.code, n = ["ArrowUp", "ArrowDown"].includes(o), s = ["Enter", "Space"].includes(o), f = o === "Escape" && A.value;
       n ? ce(e, c.value) : s ? he(e, c.value) : f && z();
     }, ce = (e, o) => {
       var f;
       e.preventDefault();
       const n = e.code;
-      A.value || Q(e);
+      A.value || j(e);
       const s = (f = v.value) == null ? void 0 : f.length;
-      s && (typeof o == "number" ? o === s - 1 && n === "ArrowDown" ? c.value = 0 : o === 0 && n === "ArrowUp" ? c.value = s - 1 : c.value = n === "ArrowDown" ? o + 1 : o - 1 : c.value = n === "ArrowDown" ? 0 : s - 1, J(c.value));
+      s && (typeof o == "number" ? o === s - 1 && n === "ArrowDown" ? c.value = 0 : o === 0 && n === "ArrowUp" ? c.value = s - 1 : c.value = n === "ArrowDown" ? o + 1 : o - 1 : c.value = n === "ArrowDown" ? 0 : s - 1, G(c.value));
     }, he = (e, o) => {
       var s, f, V;
       if (e.preventDefault(), !A.value)
-        return Q(e);
+        return j(e);
       const n = o ? ((s = v.value) == null ? void 0 : s[o]) ?? ((f = v.value) == null ? void 0 : f[0]) : (V = v.value) == null ? void 0 : V[0];
-      D(n) || pe(n);
+      U(n) || pe(n);
     };
-    async function J(e) {
+    async function G(e) {
       var n, s;
       await X(), typeof e != "number" && ae();
       const o = e ?? c.value;
@@ -601,22 +598,22 @@ const bo = {
         (b) => b[t.optionValueKey] !== e[t.optionValueKey]
       ) : t.multiple ? s.push(e) : s = [e];
       const f = s.map((b) => b[t.optionValueKey]);
-      I("update:model-value", t.multiple ? f : f[0]), I("selected-option", e), ae(e), se();
+      w("update:model-value", t.multiple ? f : f[0]), w("selected-option", e), ae(e), se();
     };
-    return (e, o) => (y(), w(
+    return (e, o) => (y(), k(
       "div",
       {
         ref_key: "mazSelectElement",
         ref: x,
-        class: F(["m-select", [{ "--is-open": A.value, "--disabled": e.disabled }, t.class]]),
+        class: F(["m-select", [{ "--is-open": A.value, "--disabled": e.disabled }, t.class, `--${e.size}`]]),
         style: oe(e.style),
         onBlurCapture: z
       },
       [
-        H(we, Se({
-          id: C(k),
+        J(we, Se({
+          id: C(I),
           ref_key: "mazInputComponent",
-          ref: M,
+          ref: D,
           class: "m-select-input"
         }, e.$attrs, {
           required: e.required,
@@ -626,27 +623,27 @@ const bo = {
           autocomplete: "off",
           size: e.size,
           disabled: e.disabled,
-          onFocus: re(Q, ["prevent", "stop"]),
-          onClick: re(Q, ["prevent", "stop"]),
-          onChange: o[0] || (o[0] = (n) => I("change", n)),
+          onFocus: re(j, ["prevent", "stop"]),
+          onClick: re(j, ["prevent", "stop"]),
+          onChange: o[0] || (o[0] = (n) => w("change", n)),
           onKeydown: ve
         }), {
           "right-icon": ue(() => [
-            O("button", {
+            q("button", {
               tabindex: "-1",
               type: "button",
               class: "m-select-input__toggle-button maz-custom",
               onClick: re(ye, ["stop"])
             }, [
-              H(C(S), { class: "m-select-chevron maz-text-xl" })
+              J(C(S), { class: "m-select-chevron maz-text-xl" })
             ])
           ]),
           _: 1
           /* STABLE */
         }, 16, ["id", "required", "border-active", "color", "model-value", "size", "disabled"]),
-        H(Re, { name: ne.value }, {
+        J(Re, { name: ne.value }, {
           default: ue(() => [
-            A.value ? (y(), w(
+            A.value ? (y(), k(
               "div",
               {
                 key: 0,
@@ -664,55 +661,54 @@ const bo = {
                 })
               },
               [
-                e.search ? (y(), w("div", bo, [
-                  H(we, {
-                    ref_key: "searchInputComponent",
-                    ref: Y,
-                    modelValue: K.value,
-                    "onUpdate:modelValue": [
-                      o[1] || (o[1] = (n) => K.value = n),
-                      o[2] || (o[2] = (n) => c.value = 0)
-                    ],
-                    size: "sm",
-                    color: e.color,
-                    placeholder: e.searchPlaceholder,
-                    name: "search",
-                    autocomplete: "off",
-                    tabindex: "-1",
-                    class: "m-select-list__search-input",
-                    "left-icon": C(B),
-                    onKeydown: G
-                  }, null, 8, ["modelValue", "color", "placeholder", "left-icon"])
-                ])) : m("v-if", !0),
+                e.search ? (y(), T(we, {
+                  key: 0,
+                  ref_key: "searchInputComponent",
+                  ref: W,
+                  modelValue: K.value,
+                  "onUpdate:modelValue": [
+                    o[1] || (o[1] = (n) => K.value = n),
+                    o[2] || (o[2] = (n) => c.value = 0)
+                  ],
+                  size: "sm",
+                  color: e.color,
+                  placeholder: e.searchPlaceholder,
+                  name: "search",
+                  autocomplete: "off",
+                  tabindex: "-1",
+                  class: "m-select-list__search-input maz-flex-none",
+                  "left-icon": C(B),
+                  onKeydown: Q
+                }, null, 8, ["modelValue", "color", "placeholder", "left-icon"])) : m("v-if", !0),
                 m(`
           @slot No results slot - Displayed when no results corresponding with search query
         `),
                 !v.value || v.value.length <= 0 ? Z(e.$slots, "no-results", { key: 1 }, () => [
-                  O("span", go, [
-                    H(C(q), { class: "maz-h-6 maz-w-6 maz-text-normal" })
+                  q("span", bo, [
+                    J(C(H), { class: "maz-h-6 maz-w-6 maz-text-normal" })
                   ])
-                ], !0) : (y(), w("div", zo, [
-                  (y(!0), w(
-                    qe,
+                ], !0) : (y(), k("div", go, [
+                  (y(!0), k(
+                    He,
                     null,
-                    He(v.value, (n, s) => (y(), w("button", {
+                    qe(v.value, (n, s) => (y(), k("button", {
                       key: s,
                       tabindex: "-1",
                       type: "button",
-                      class: F(["m-select-list-item maz-custom", [
+                      class: F(["m-select-list-item maz-custom maz-flex-none", [
                         {
                           "--is-keyboard-selected": c.value === s,
-                          "--is-selected": j(n),
-                          "--is-none-value": D(n[e.optionValueKey])
+                          "--is-selected": Y(n),
+                          "--is-none-value": U(n[e.optionValueKey])
                         }
                       ]]),
-                      style: oe({ minHeight: `${e.itemHeight}px` }),
+                      style: oe(e.itemHeight ? { minHeight: `${e.itemHeight}px` } : void 0),
                       onClick: re((f) => pe(n), ["prevent", "stop"])
                     }, [
-                      e.multiple ? (y(), U(C(a), {
+                      e.multiple ? (y(), T(C(a), {
                         key: 0,
                         tabindex: "-1",
-                        "model-value": j(n),
+                        "model-value": Y(n),
                         size: "sm",
                         color: e.color
                       }, null, 8, ["model-value", "color"])) : m("v-if", !0),
@@ -723,9 +719,9 @@ const bo = {
             `),
                       Z(e.$slots, "default", {
                         option: n,
-                        isSelected: j(n)
+                        isSelected: Y(n)
                       }, () => [
-                        O(
+                        q(
                           "span",
                           null,
                           ee(n[e.optionLabelKey]),
@@ -733,7 +729,7 @@ const bo = {
                           /* TEXT */
                         )
                       ], !0)
-                    ], 14, Co))),
+                    ], 14, zo))),
                     128
                     /* KEYED_FRAGMENT */
                   ))
@@ -751,10 +747,10 @@ const bo = {
       /* CLASS, STYLE, NEED_HYDRATION */
     ));
   }
-}), wo = /* @__PURE__ */ $e(Vo, [["__scopeId", "data-v-824c551b"]]), Io = ["id"], ko = {
+}), Vo = /* @__PURE__ */ $e(Co, [["__scopeId", "data-v-8272b643"]]), wo = ["id"], Io = {
   key: 0,
   class: "maz-text-lg"
-}, So = /* @__PURE__ */ Ie({
+}, ko = /* @__PURE__ */ Ie({
   inheritAttrs: !1,
   __name: "MazPhoneNumberInput",
   props: {
@@ -797,42 +793,42 @@ const bo = {
       fetchCountryCode: a,
       browserLocale: B,
       getResultsFromPhoneNumber: S,
-      getAsYouTypeFormat: q,
-      getCountriesList: T,
+      getAsYouTypeFormat: H,
+      getCountriesList: M,
       getPhoneNumberExample: t,
-      sanitizePhoneNumber: I,
+      sanitizePhoneNumber: w,
       loadPhoneNumberExamplesFile: P
     } = so(), c = u, i = r, te = ke(), le = Pe({
       componentName: "MazPhoneNumberInput",
       instance: te,
       providedId: i.id
-    }), W = h(), A = h(), k = Oe({
+    }), O = h(), A = h(), I = Oe({
       start: 0,
       end: 0,
       cursorAtEnd: !0
-    }), $ = h(!1), L = h(!1), x = d(() => T(i.countryLocale, i.customCountriesList)), M = d(() => {
+    }), $ = h(!1), L = h(!1), x = d(() => M(i.countryLocale, i.customCountriesList)), D = d(() => {
       var e;
       return (e = x.value) == null ? void 0 : e.filter((o) => {
         var n;
         return !((n = i.ignoredCountries) != null && n.includes(o.iso2));
       });
-    }), Y = d(() => {
+    }), W = d(() => {
       const e = i.onlyCountries || i.preferredCountries;
       return e == null ? void 0 : e.map(
         (o) => {
           var n;
-          return (n = M.value) == null ? void 0 : n.find((s) => s.iso2.includes(o));
+          return (n = D.value) == null ? void 0 : n.find((s) => s.iso2.includes(o));
         }
       );
     }), _ = d(() => {
       var e;
-      return (e = M.value) == null ? void 0 : e.filter((o) => {
+      return (e = D.value) == null ? void 0 : e.filter((o) => {
         var n;
         return !((n = i.preferredCountries) != null && n.includes(o.iso2));
       });
-    }), D = d(() => i.preferredCountries ? [...Y.value ?? [], ..._.value ?? []] : i.onlyCountries ? Y.value : M.value), j = d(() => {
+    }), U = d(() => i.preferredCountries ? [...W.value ?? [], ..._.value ?? []] : i.onlyCountries ? W.value : D.value), Y = d(() => {
       var e;
-      return (e = D.value) == null ? void 0 : e.map((o) => o ? {
+      return (e = U.value) == null ? void 0 : e.map((o) => o ? {
         ...o,
         dialCode: `+${o.dialCode}`
       } : void 0).filter(Ke);
@@ -872,9 +868,9 @@ const bo = {
         countryCode: p.value
       })
     );
-    async function Q() {
+    async function j() {
       const e = await a();
-      e && G(e);
+      e && Q(e);
     }
     async function se() {
       try {
@@ -884,7 +880,7 @@ const bo = {
       }
     }
     Le(async () => {
-      await ce(N.value), await X(), i.fetchCountry && !p.value && await Q(), !i.defaultCountryCode && !i.noUseBrowserLocale && !p.value && ye(), await se();
+      await ce(N.value), await X(), i.fetchCountry && !p.value && await j(), !i.defaultCountryCode && !i.noUseBrowserLocale && !p.value && ye(), await se();
     }), me(
       () => z.value,
       (e) => {
@@ -900,9 +896,9 @@ const bo = {
       () => v.value,
       async (e, o) => {
         if (!i.noFormattingAsYouType && e && e !== o) {
-          const n = J();
-          if (n && !z.value.isValid && typeof k.start == "number" && !k.cursorAtEnd) {
-            const s = k.start, f = k.end;
+          const n = G();
+          if (n && !z.value.isValid && typeof I.start == "number" && !I.cursorAtEnd) {
+            const s = I.start, f = I.end;
             setTimeout(() => {
               n.setSelectionRange(s, f ?? s);
             }, 0);
@@ -912,7 +908,7 @@ const bo = {
     );
     function ye() {
       const { locale: e } = B();
-      e && G(e);
+      e && Q(e);
     }
     function ie(e, o) {
       z.value = S({
@@ -921,9 +917,9 @@ const bo = {
       });
     }
     async function de(e) {
-      const o = J();
-      k.start = o == null ? void 0 : o.selectionStart, k.end = o == null ? void 0 : o.selectionEnd, k.cursorAtEnd = k.start ? k.start >= e.length : !0;
-      const n = I(e);
+      const o = G();
+      I.start = o == null ? void 0 : o.selectionStart, I.end = o == null ? void 0 : o.selectionEnd, I.cursorAtEnd = I.start ? I.start >= e.length : !0;
+      const n = w(e);
       l.value = n;
       const s = S({
         phoneNumber: n,
@@ -932,9 +928,9 @@ const bo = {
       N.value = s.e164;
     }
     function ve(e) {
-      G(e, !0), ie(v.value, e);
+      Q(e, !0), ie(v.value, e);
     }
-    function G(e, o = !1) {
+    function Q(e, o = !1) {
       try {
         no(e) && (K.value = e, o && pe());
       } catch (n) {
@@ -942,17 +938,17 @@ const bo = {
       }
     }
     async function ce(e) {
-      ie(e, p.value), await X(), i.noFormattingAsYouType ? l.value = v.value : e ? g.value = k.cursorAtEnd || z.value.isValid ? l.value = q(
+      ie(e, p.value), await X(), i.noFormattingAsYouType ? l.value = v.value : e ? g.value = I.cursorAtEnd || z.value.isValid ? l.value = H(
         z.value.countryCode ?? p.value,
         z.value.formatNational ?? l.value
       ) : l.value : g.value = void 0, await X(), he(z.value);
     }
     function he(e) {
-      e.countryCode && p.value !== e.countryCode && G(e.countryCode);
+      e.countryCode && p.value !== e.countryCode && Q(e.countryCode);
     }
-    function J() {
+    function G() {
       var e;
-      return (e = W.value) == null ? void 0 : e.$el.querySelector("input");
+      return (e = O.value) == null ? void 0 : e.$el.querySelector("input");
     }
     function ae() {
       var e, o;
@@ -960,11 +956,11 @@ const bo = {
     }
     async function pe() {
       var e;
-      await X(), (e = J()) == null || e.focus();
+      await X(), (e = G()) == null || e.focus();
     }
     return (e, o) => {
       var n, s, f, V;
-      return y(), w("div", {
+      return y(), k("div", {
         id: C(le),
         class: F(["m-phone-number-input", [
           i.class,
@@ -974,7 +970,7 @@ const bo = {
         ]]),
         style: oe(e.style)
       }, [
-        p.value && !e.noFlags && !e.noCountrySelector ? (y(), w(
+        p.value && !e.noFlags && !e.noCountrySelector ? (y(), k(
           "button",
           {
             key: 0,
@@ -1001,7 +997,7 @@ const bo = {
           2
           /* CLASS */
         )) : m("v-if", !0),
-        e.noCountrySelector ? m("v-if", !0) : (y(), U(wo, {
+        e.noCountrySelector ? m("v-if", !0) : (y(), T(Vo, {
           key: 1,
           ref_key: "CountrySelector",
           ref: A,
@@ -1018,7 +1014,7 @@ const bo = {
           "list-position": e.listPosition,
           search: !e.noSearch,
           "search-placeholder": E.value.countrySelector.searchPlaceholder,
-          options: j.value,
+          options: Y.value,
           error: e.error || (e.noValidationError ? !1 : !!v.value && !p.value),
           hint: v.value && !p.value ? E.value.countrySelector.error : void 0,
           success: e.success || (e.noValidationSuccess ? !1 : (n = z.value) == null ? void 0 : n.isValid),
@@ -1029,7 +1025,7 @@ const bo = {
           onFocus: o[1] || (o[1] = (b) => L.value = !1)
         }, {
           default: ue(({ option: b, isSelected: fe }) => [
-            O(
+            q(
               "div",
               {
                 class: F(["m-phone-number-input__select__item maz-flex maz-items-center maz-gap-1 maz-truncate", {
@@ -1037,7 +1033,7 @@ const bo = {
                 }])
               },
               [
-                !e.noFlags && typeof b.iso2 == "string" ? (y(), w("span", ko, [
+                !e.noFlags && typeof b.iso2 == "string" ? (y(), k("span", Io, [
                   m(`
               @slot Country list flag
                 @binding {String} country-code - country code of option - Ex: \`"FR"\`
@@ -1056,7 +1052,7 @@ const bo = {
                     )
                   ], !0)
                 ])) : m("v-if", !0),
-                e.showCodeOnList ? (y(), w(
+                e.showCodeOnList ? (y(), k(
                   "span",
                   {
                     key: 1,
@@ -1066,7 +1062,7 @@ const bo = {
                   3
                   /* TEXT, CLASS */
                 )) : m("v-if", !0),
-                O(
+                q(
                   "span",
                   {
                     class: F(["maz-flex-1 maz-truncate", { "maz-font-semibold": fe }])
@@ -1083,10 +1079,10 @@ const bo = {
           _: 3
           /* FORWARDED */
         }, 8, ["modelValue", "option-input-value-key", "disabled", "color", "size", "list-position", "search", "search-placeholder", "options", "error", "hint", "success", "label", "style"])),
-        H(we, Se({
+        J(we, Se({
           id: e.id,
           ref_key: "PhoneNumberInput",
-          ref: W,
+          ref: O,
           "model-value": v.value,
           label: ne.value,
           disabled: e.disabled,
@@ -1108,12 +1104,12 @@ const bo = {
           onBlur: o[3] || (o[3] = (b) => L.value = !1),
           "onUpdate:modelValue": o[4] || (o[4] = (b) => de(b))
         }), null, 16, ["id", "model-value", "label", "disabled", "color", "error", "size", "success", "class"])
-      ], 14, Io);
+      ], 14, wo);
     };
   }
-}), Ao = /* @__PURE__ */ $e(So, [["__scopeId", "data-v-cd414873"]]);
+}), Bo = /* @__PURE__ */ $e(ko, [["__scopeId", "data-v-cd414873"]]);
 export {
-  Ao as M,
+  Bo as M,
   $e as _,
   Pe as u
 };