maz-ui 3.37.0 → 3.37.2

package/components/chunks/{MazPhoneNumberInput-CVz5eTvG.mjs → MazPhoneNumberInput-CsX6Kqob.mjs}

@@ -1,27 +1,27 @@
 import '../assets/MazPhoneNumberInput.css';
-import { getCurrentInstance as to, computed as v, defineComponent as re, defineAsyncComponent as U, ref as S, onMounted as Ve, useSlots as no, openBlock as C, createElementBlock as $, normalizeClass as E, normalizeStyle as _, createElementVNode as R, createCommentVNode as V, renderSlot as H, createBlock as K, unref as b, resolveDynamicComponent as Pe, withDirectives as Ne, mergeProps as pe, toHandlers as lo, vModelDynamic as ao, createTextVNode as Ce, toDisplayString as G, withModifiers as x, withCtx as ae, createVNode as q, nextTick as ee, useCssVars as ro, onBeforeMount as so, Transition as uo, Fragment as Fe, renderList as io, reactive as co, mergeModels as Ae, useModel as po, resolveComponent as fo, watch as he } from "vue";
-import { getCountries as Te, getCountryCallingCode as de, getExampleNumber as mo, isSupportedCountry as yo, parsePhoneNumberFromString as vo, AsYouType as ho } from "libphonenumber-js";
-function bo(t, n) {
+import { getCurrentInstance as to, computed as v, defineComponent as re, defineAsyncComponent as U, ref as I, onMounted as we, useSlots as lo, openBlock as C, createElementBlock as P, normalizeClass as E, normalizeStyle as _, createElementVNode as R, createCommentVNode as V, renderSlot as H, createBlock as K, unref as b, resolveDynamicComponent as Fe, withDirectives as Ne, mergeProps as pe, toHandlers as no, vModelDynamic as ao, createTextVNode as Ce, toDisplayString as G, withModifiers as x, withCtx as ae, createVNode as q, nextTick as ee, useCssVars as ro, onBeforeMount as so, Transition as uo, Fragment as Ae, renderList as io, reactive as co, mergeModels as Le, useModel as po, watch as he } from "vue";
+import { getCountries as Te, getCountryCallingCode as de, getExampleNumber as fo, isSupportedCountry as mo, parsePhoneNumberFromString as yo, AsYouType as vo } from "libphonenumber-js";
+function ho(t, l) {
   let o;
   return function(...c) {
     clearTimeout(o), o = setTimeout(() => {
       t.apply(this, c);
-    }, n);
+    }, l);
   };
 }
-const we = ({
+const ke = ({
   componentName: t,
-  providedId: n
+  providedId: l
 }) => {
   const o = to();
-  return v(() => n ?? `${t}-${o == null ? void 0 : o.uid}`);
-}, go = {
+  return v(() => l ?? `${t}-${o == null ? void 0 : o.uid}`);
+}, bo = {
   key: 0,
   class: "m-input-wrapper-left"
-}, zo = { class: "m-input-wrapper-input" }, Co = ["id", "type", "name", "inputmode", "placeholder", "aria-label", "disabled", "readonly", "required"], Vo = { key: 0 }, wo = {
+}, go = { class: "m-input-wrapper-input" }, zo = ["id", "type", "name", "inputmode", "placeholder", "aria-label", "disabled", "readonly", "required"], Co = { key: 0 }, Vo = {
   key: 1,
   class: "m-input-wrapper-right"
-}, Io = /* @__PURE__ */ re({
+}, wo = /* @__PURE__ */ re({
   inheritAttrs: !1,
   __name: "MazInput",
   props: {
@@ -54,19 +54,20 @@ const we = ({
     borderActive: { type: Boolean, default: !1 },
     leftIcon: { default: void 0 },
     rightIcon: { default: void 0 },
-    roundedSize: { default: void 0 }
+    roundedSize: { default: void 0 },
+    block: { type: Boolean }
   },
   emits: ["update:model-value", "focus", "blur", "click", "change"],
-  setup(t, { emit: n }) {
-    const o = U(() => import("./MazBtn-OUDBhJKd.mjs")), c = U(() => import("./MazIcon-Cxrv3_OK.mjs")), m = U(() => import("./eye-slash-tjfxO0LK.mjs")), f = U(() => import("./eye-DqO_Jx56.mjs")), l = U(() => import("./check-7UA4j2f2.mjs")), i = t, I = n, h = S(!1), B = S(!1), M = S(), d = we({
+  setup(t, { emit: l }) {
+    const o = U(() => import("./MazBtn-D-Axz-X0.mjs")), c = U(() => import("./MazIcon-Cxrv3_OK.mjs")), m = U(() => import("./eye-slash-tjfxO0LK.mjs")), f = U(() => import("./eye-DqO_Jx56.mjs")), n = U(() => import("./check-7UA4j2f2.mjs")), i = t, k = l, h = I(!1), B = I(!1), M = I(), d = ke({
       componentName: "MazInput",
       providedId: i.id
     });
-    Ve(() => {
-      var a;
-      i.autoFocus && ((a = M.value) == null || a.focus());
+    we(() => {
+      var r;
+      i.autoFocus && ((r = M.value) == null || r.focus());
     });
-    const g = v(() => i.type === "password"), y = v(() => h.value ? "text" : i.type), P = v(() => {
+    const g = v(() => i.type === "password"), y = v(() => h.value ? "text" : i.type), F = v(() => {
       if (!i.noBorder) {
         if (i.error)
           return "maz-border-danger";
@@ -94,143 +95,144 @@ const we = ({
         }
         return "--default-border";
       }
-    }), z = no(), F = v(() => {
-      const { required: a, placeholder: L } = i;
+    }), z = lo(), $ = v(() => {
+      const { required: r, placeholder: L } = i;
       if (L)
-        return a ? `${L} *` : L;
-    }), r = v(() => N.value !== void 0 && N.value !== ""), k = bo(
-      (a) => {
-        N.value = a;
+        return r ? `${L} *` : L;
+    }), a = v(() => N.value !== void 0 && N.value !== ""), S = ho(
+      (r) => {
+        N.value = r;
       },
       typeof i.debounce == "number" ? i.debounce : i.debounceDelay ?? 500
     ), N = v({
       get: () => i.modelValue,
-      set: (a) => {
+      set: (r) => {
         if (i.debounce)
-          return k(a);
-        I("update:model-value", a);
+          return S(r);
+        k("update:model-value", r);
       }
-    }), ue = v(() => (!!i.label || !!i.hint) && (B.value || !!r.value || !!i.placeholder || ["date", "month", "week"].includes(i.type))), ie = v(() => !!i.label || !!i.hint);
+    }), ue = v(() => (!!i.label || !!i.hint) && (B.value || !!a.value || !!i.placeholder || ["date", "month", "week"].includes(i.type))), ie = v(() => !!i.label || !!i.hint);
     function O() {
       return !!z["right-icon"] || g.value || !!z["valid-button"] || i.validButton || !!i.rightIcon;
     }
     function te() {
       return !!z["left-icon"] || !!i.leftIcon;
     }
-    function fe(a) {
-      I("focus", a), B.value = !0;
+    function fe(r) {
+      k("focus", r), B.value = !0;
     }
-    function me(a) {
-      I("blur", a), B.value = !1;
+    function me(r) {
+      k("blur", r), B.value = !1;
     }
-    function j(a) {
-      return I("change", a);
+    function j(r) {
+      return k("change", r);
     }
-    return (a, L) => (C(), $(
+    return (r, L) => (C(), P(
       "div",
       {
         class: E(["m-input", [
           {
-            "--is-focused": B.value || a.borderActive,
+            "--is-focused": B.value || r.borderActive,
             "--should-up": ue.value,
             "--has-label": ie.value,
-            "--is-disabled": a.disabled,
-            "--is-readonly": a.readonly,
-            "--has-z-2": a.error || a.warning || a.success,
-            "--has-state": a.error || a.warning || a.success
+            "--is-disabled": r.disabled,
+            "--is-readonly": r.readonly,
+            "--has-z-2": r.error || r.warning || r.success,
+            "--has-state": r.error || r.warning || r.success,
+            "--block": r.block
           },
           i.class,
-          `--${a.color}`,
-          `--${a.size}`
+          `--${r.color}`,
+          `--${r.size}`
         ]]),
-        style: _(a.style)
+        style: _(r.style)
       },
       [
         R(
           "div",
           {
             class: E(["m-input-wrapper", [
-              a.inputClasses,
-              P.value,
-              a.roundedSize ? `--rounded-${a.roundedSize}` : { "maz-rounded": !a.noRadius }
+              r.inputClasses,
+              F.value,
+              r.roundedSize ? `--rounded-${r.roundedSize}` : { "maz-rounded": !r.noRadius }
             ]])
           },
           [
-            te() ? (C(), $("div", go, [
+            te() ? (C(), P("div", bo, [
               V(`
           @slot left-icon - The icon to display on the left of the input
         `),
-              a.$slots["left-icon"] || a.leftIcon ? H(a.$slots, "left-icon", { key: 0 }, () => [
-                typeof a.leftIcon == "string" ? (C(), K(b(c), {
+              r.$slots["left-icon"] || r.leftIcon ? H(r.$slots, "left-icon", { key: 0 }, () => [
+                typeof r.leftIcon == "string" ? (C(), K(b(c), {
                   key: 0,
-                  name: a.leftIcon,
+                  name: r.leftIcon,
                   class: "maz-text-xl maz-text-muted"
-                }, null, 8, ["name"])) : a.leftIcon ? (C(), K(Pe(a.leftIcon), {
+                }, null, 8, ["name"])) : r.leftIcon ? (C(), K(Fe(r.leftIcon), {
                   key: 1,
                   class: "maz-text-xl maz-text-muted"
                 })) : V("v-if", !0)
               ], !0) : V("v-if", !0)
             ])) : V("v-if", !0),
-            R("div", zo, [
+            R("div", go, [
               Ne(R("input", pe({
                 id: b(d),
                 ref_key: "input",
                 ref: M,
                 "onUpdate:modelValue": L[0] || (L[0] = (Y) => N.value = Y),
                 type: y.value,
-                name: a.name
-              }, a.$attrs, {
-                inputmode: a.inputmode,
-                placeholder: F.value,
-                "aria-label": a.label || a.placeholder,
-                disabled: a.disabled,
-                readonly: a.readonly,
-                required: a.required,
+                name: r.name
+              }, r.$attrs, {
+                inputmode: r.inputmode,
+                placeholder: $.value,
+                "aria-label": r.label || r.placeholder,
+                disabled: r.disabled,
+                readonly: r.readonly,
+                required: r.required,
                 class: "m-input-input"
-              }, lo({
+              }, no({
                 blur: me,
                 focus: fe,
                 change: j
               }, !0), {
-                onClick: L[1] || (L[1] = (Y) => a.$emit("click", Y))
-              }), null, 16, Co), [
+                onClick: L[1] || (L[1] = (Y) => r.$emit("click", Y))
+              }), null, 16, zo), [
                 [ao, N.value]
               ]),
-              a.label || a.hint ? (C(), $(
+              r.label || r.hint ? (C(), P(
                 "span",
                 {
                   key: 0,
                   ref: "label",
                   class: E(["m-input-label", [
                     {
-                      "maz-text-danger-600": a.error,
-                      "maz-text-success-600": a.success,
-                      "maz-text-warning-600": a.warning
+                      "maz-text-danger-600": r.error,
+                      "maz-text-success-600": r.success,
+                      "maz-text-warning-600": r.warning
                     }
                   ]])
                 },
                 [
                   Ce(
-                    G(a.hint || a.label) + " ",
+                    G(r.hint || r.label) + " ",
                     1
                     /* TEXT */
                   ),
-                  a.required ? (C(), $("sup", Vo, "*")) : V("v-if", !0)
+                  r.required ? (C(), P("sup", Co, "*")) : V("v-if", !0)
                 ],
                 2
                 /* CLASS */
               )) : V("v-if", !0)
             ]),
-            O() ? (C(), $("div", wo, [
+            O() ? (C(), P("div", Vo, [
               V(`
           @slot right-icon - The icon to display on the right of the input
         `),
-              a.$slots["right-icon"] || a.rightIcon ? H(a.$slots, "right-icon", { key: 0 }, () => [
-                typeof a.rightIcon == "string" ? (C(), K(b(c), {
+              r.$slots["right-icon"] || r.rightIcon ? H(r.$slots, "right-icon", { key: 0 }, () => [
+                typeof r.rightIcon == "string" ? (C(), K(b(c), {
                   key: 0,
-                  name: a.rightIcon,
+                  name: r.rightIcon,
                   class: "maz-text-xl maz-text-muted"
-                }, null, 8, ["name"])) : a.rightIcon ? (C(), K(Pe(a.rightIcon), {
+                }, null, 8, ["name"])) : r.rightIcon ? (C(), K(Fe(r.rightIcon), {
                   key: 1,
                   class: "maz-text-xl maz-text-muted"
                 })) : V("v-if", !0)
@@ -257,18 +259,18 @@ const we = ({
               V(`
           @slot valid-button - Replace the valid button by your own
         `),
-              a.$slots["valid-button"] || a.validButton ? H(a.$slots, "valid-button", { key: 2 }, () => [
+              r.$slots["valid-button"] || r.validButton ? H(r.$slots, "valid-button", { key: 2 }, () => [
                 q(b(o), {
                   color: "transparent",
-                  disabled: a.disabled,
+                  disabled: r.disabled,
                   tabindex: "-1",
-                  loading: a.validButtonLoading,
+                  loading: r.validButtonLoading,
                   class: "m-input-valid-button",
                   size: "mini",
                   type: "submit"
                 }, {
                   default: ae(() => [
-                    q(b(l), { class: "maz-text-2xl maz-text-normal" })
+                    q(b(n), { class: "maz-text-2xl maz-text-normal" })
                   ]),
                   _: 1
                   /* STABLE */
@@ -284,26 +286,26 @@ const we = ({
       /* CLASS, STYLE */
     ));
   }
-}), se = (t, n) => {
+}), se = (t, l) => {
   const o = t.__vccOpts || t;
-  for (const [c, m] of n)
+  for (const [c, m] of l)
     o[c] = m;
   return o;
-}, Le = /* @__PURE__ */ se(Io, [["__scopeId", "data-v-f1c52a34"]]);
+}, Ve = /* @__PURE__ */ se(wo, [["__scopeId", "data-v-78090be8"]]);
 let be = null;
-function ko(t, n) {
-  be && clearTimeout(be), be = setTimeout(t, n);
+function ko(t, l) {
+  be && clearTimeout(be), be = setTimeout(t, l);
 }
 const ce = "__maz-click-outside__", De = () => document.ontouchstart === null ? "touchstart" : "click";
-async function Ue(t, n) {
+async function Ue(t, l) {
   try {
     Re(t);
-    const o = n.instance, c = n.value, m = typeof c == "function";
+    const o = l.instance, c = l.value, m = typeof c == "function";
     if (!m)
       throw new Error("[maz-ui](vClickOutside) the callback should be a function");
-    await ee(), t[ce] = (l) => {
-      if ((!t || l.target && !t.contains(l.target)) && c && m)
-        return c.call(o, l);
+    await ee(), t[ce] = (n) => {
+      if ((!t || n.target && !t.contains(n.target)) && c && m)
+        return c.call(o, n);
     };
     const f = De();
     document.addEventListener(f, t[ce], { passive: !0 });
@@ -313,39 +315,39 @@ async function Ue(t, n) {
 }
 function Re(t) {
   try {
-    const n = De();
-    document.removeEventListener(n, t[ce], !1), delete t[ce];
-  } catch (n) {
-    console.error("[maz-ui](vClickOutside)", n);
+    const l = De();
+    document.removeEventListener(l, t[ce], !1), delete t[ce];
+  } catch (l) {
+    console.error("[maz-ui](vClickOutside)", l);
   }
 }
-function So(t, n) {
+function Io(t, l) {
   try {
-    if (n.value === n.oldValue)
+    if (l.value === l.oldValue)
       return;
-    Ue(t, n);
+    Ue(t, l);
   } catch (o) {
     console.error("[maz-ui](vClickOutside)", o);
   }
 }
-const Bo = {
+const So = {
   mounted: Ue,
-  updated: So,
+  updated: Io,
   unmounted: Re
 };
-function $o(t, n) {
-  const o = t.length, c = n.length, m = [];
+function Bo(t, l) {
+  const o = t.length, c = l.length, m = [];
   for (let f = 0; f <= o; f++)
     m[f] = [f];
   for (let f = 0; f <= c; f++)
     m[0][f] = f;
   for (let f = 1; f <= o; f++)
-    for (let l = 1; l <= c; l++) {
-      const i = t[f - 1] === n[l - 1] ? 0 : 1;
-      m[f][l] = Math.min(
-        m[f - 1][l] + 1,
-        m[f][l - 1] + 1,
-        m[f - 1][l - 1] + i
+    for (let n = 1; n <= c; n++) {
+      const i = t[f - 1] === l[n - 1] ? 0 : 1;
+      m[f][n] = Math.min(
+        m[f - 1][n] + 1,
+        m[f][n - 1] + 1,
+        m[f - 1][n - 1] + i
       );
     }
   return m[o][c];
@@ -353,31 +355,31 @@ function $o(t, n) {
 function Me(t) {
   return t.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").toLowerCase();
 }
-function Oe(t, n) {
-  const o = $o(t, n), c = Math.max(t.length, n.length);
+function Oe(t, l) {
+  const o = Bo(t, l), c = Math.max(t.length, l.length);
   return 1 - o / c;
 }
-function Po(t, n, o = 0.75) {
-  return Oe(t, n) >= o;
+function $o(t, l, o = 0.75) {
+  return Oe(t, l) >= o;
 }
-function ge(t, n, o = 0.75) {
+function ge(t, l, o = 0.75) {
   const c = v(
     () => Me(typeof t == "string" ? t : t.value)
   ), m = v(
-    () => Me(typeof n == "string" ? n : n.value)
-  ), f = v(() => typeof o == "number" ? o : o.value), l = v(() => Oe(c.value, m.value));
+    () => Me(typeof l == "string" ? l : l.value)
+  ), f = v(() => typeof o == "number" ? o : o.value), n = v(() => Oe(c.value, m.value));
   return {
     isMatching: v(
-      () => Po(c.value, m.value, f.value)
+      () => $o(c.value, m.value, f.value)
     ),
-    score: l
+    score: n
   };
 }
-const Fo = ["aria-label"], Ao = { class: "m-select-list__no-results" }, Lo = {
+const Po = ["aria-label"], Fo = { class: "m-select-list__no-results" }, Ao = {
   key: 2,
   class: "m-select-list__scroll-wrapper",
   tabindex: "-1"
-}, Mo = { class: "m-select-list-optgroup" }, Eo = ["onClick"], Ko = /* @__PURE__ */ re({
+}, Lo = { class: "m-select-list-optgroup" }, Mo = ["onClick"], Eo = /* @__PURE__ */ re({
   inheritAttrs: !1,
   __name: "MazSelect",
   props: {
@@ -400,119 +402,120 @@ const Fo = ["aria-label"], Ao = { class: "m-select-list__no-results" }, Lo = {
     open: { type: Boolean },
     multiple: { type: Boolean },
     required: { type: Boolean },
-    disabled: { type: Boolean }
+    disabled: { type: Boolean },
+    block: { type: Boolean }
   },
   emits: ["close", "open", "blur", "focus", "change", "update:model-value", "selected-option"],
-  setup(t, { emit: n }) {
+  setup(t, { emit: l }) {
     ro((e) => ({
-      "6bda47a8": g.value,
-      b7398b32: M.value,
-      "1dd97a8f": d.value
+      "2223ba14": g.value,
+      "619dedd3": M.value,
+      "72c218fb": d.value
     }));
-    const o = U(() => import("./MazCheckbox-COTppi08.mjs")), c = U(() => import("./magnifying-glass-DZGg7953.mjs")), m = U(() => import("./chevron-down-CzMH-gFW.mjs")), f = U(() => import("./no-symbol-QAqP9IlR.mjs")), l = t, i = n, I = S(!1), h = S(), B = v(
-      () => ["black", "transparent", "white"].includes(l.color)
+    const o = U(() => import("./MazCheckbox-CXVe5vda.mjs")), c = U(() => import("./magnifying-glass-DZGg7953.mjs")), m = U(() => import("./chevron-down-CzMH-gFW.mjs")), f = U(() => import("./no-symbol-QAqP9IlR.mjs")), n = t, i = l, k = I(!1), h = I(), B = v(
+      () => ["black", "transparent", "white"].includes(n.color)
     ), M = v(
-      () => B.value ? "var(--maz-color-black)" : `var(--maz-color-${l.color}-800)`
+      () => B.value ? "var(--maz-color-black)" : `var(--maz-color-${n.color}-800)`
     ), d = v(
-      () => B.value ? "var(--maz-color-muted)" : `var(--maz-color-${l.color}-100)`
+      () => B.value ? "var(--maz-color-muted)" : `var(--maz-color-${n.color}-100)`
     ), g = v(
-      () => B.value ? "var(--maz-color-muted)" : `var(--maz-color-${l.color}-200)`
-    ), y = v(() => I.value || l.open), P = we({
+      () => B.value ? "var(--maz-color-muted)" : `var(--maz-color-${n.color}-200)`
+    ), y = v(() => k.value || n.open), F = ke({
       componentName: "MazSelect",
-      providedId: l.id
+      providedId: n.id
     });
     function z(e) {
       return {
-        [l.optionValueKey]: e,
-        [l.optionLabelKey]: e,
-        [l.optionInputValueKey]: e
+        [n.optionValueKey]: e,
+        [n.optionLabelKey]: e,
+        [n.optionInputValueKey]: e
       };
     }
-    function F(e) {
+    function $(e) {
       return {
         ...e,
-        [l.optionValueKey]: e[l.optionValueKey],
-        [l.optionLabelKey]: e[l.optionLabelKey],
-        [l.optionInputValueKey]: e[l.optionInputValueKey]
+        [n.optionValueKey]: e[n.optionValueKey],
+        [n.optionLabelKey]: e[n.optionLabelKey],
+        [n.optionInputValueKey]: e[n.optionInputValueKey]
       };
     }
-    const r = v(() => {
+    const a = v(() => {
       var s;
       const e = [];
-      if (!((s = l.options) != null && s.length))
+      if (!((s = n.options) != null && s.length))
         return [];
-      for (const u of l.options)
+      for (const u of n.options)
         typeof u == "string" || typeof u == "number" || typeof u == "boolean" ? e.push(z(u)) : "options" in u && Array.isArray(u.options) ? e.push(
           { label: u.label, isOptGroup: !0 },
           ...u.options.map(
-            (p) => typeof p == "string" || typeof p == "number" || typeof p == "boolean" ? z(p) : F(p)
+            (p) => typeof p == "string" || typeof p == "number" || typeof p == "boolean" ? z(p) : $(p)
           )
-        ) : e.push(F(u));
+        ) : e.push($(u));
       return e;
-    }), k = v(
+    }), S = v(
       () => {
         var e;
-        return ((e = r.value) == null ? void 0 : e.filter((s) => l.multiple ? Array.isArray(l.modelValue) ? l.modelValue.includes(s[l.optionValueKey]) && !O(s[l.optionValueKey]) : !1 : l.modelValue === s[l.optionValueKey] && !O(s[l.optionValueKey]))) ?? [];
+        return ((e = a.value) == null ? void 0 : e.filter((s) => n.multiple ? Array.isArray(n.modelValue) ? n.modelValue.includes(s[n.optionValueKey]) && !O(s[n.optionValueKey]) : !1 : n.modelValue === s[n.optionValueKey] && !O(s[n.optionValueKey]))) ?? [];
       }
     );
     so(() => {
       var e;
-      (e = l.options) != null && e.length || console.warn("[maz-ui](MazSelect) you must provide options"), ve();
+      (e = n.options) != null && e.length || console.warn("[maz-ui](MazSelect) you must provide options"), ve();
     });
-    const Z = S(), N = S(), ue = S(), ie = S(), O = (e) => e == null;
+    const Z = I(), N = I(), ue = I(), ie = I(), O = (e) => e == null;
     function te(e) {
       var u;
-      return (((u = k.value) == null ? void 0 : u.some(
-        (p) => p[l.optionValueKey] === e[l.optionValueKey]
-      )) ?? !1) && !O(e[l.optionValueKey]);
+      return (((u = S.value) == null ? void 0 : u.some(
+        (p) => p[n.optionValueKey] === e[n.optionValueKey]
+      )) ?? !1) && !O(e[n.optionValueKey]);
     }
     const fe = v(() => {
       var s;
-      if (l.multiple && l.modelValue && Array.isArray(l.modelValue))
-        return l.modelValue.map(
+      if (n.multiple && n.modelValue && Array.isArray(n.modelValue))
+        return n.modelValue.map(
           (u) => {
             var p, w;
-            return (w = (p = r.value) == null ? void 0 : p.find((A) => A[l.optionValueKey] === u)) == null ? void 0 : w[l.optionInputValueKey];
+            return (w = (p = a.value) == null ? void 0 : p.find((A) => A[n.optionValueKey] === u)) == null ? void 0 : w[n.optionInputValueKey];
           }
         ).join(", ");
-      const e = (s = r.value) == null ? void 0 : s.find(
-        (u) => u[l.optionValueKey] === l.modelValue
+      const e = (s = a.value) == null ? void 0 : s.find(
+        (u) => u[n.optionValueKey] === n.modelValue
       );
-      return O(l.modelValue) || e == null ? void 0 : e[l.optionInputValueKey];
+      return O(n.modelValue) || e == null ? void 0 : e[n.optionInputValueKey];
     }), me = v(
-      () => l.listPosition.includes("bottom") ? "maz-slide" : "maz-slideinvert"
-    ), j = S(""), a = S("");
+      () => n.listPosition.includes("bottom") ? "maz-slide" : "maz-slideinvert"
+    ), j = I(""), r = I("");
     function L(e) {
       return e.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[^\dA-Za-z\u0400-\u04FF]/g, "");
     }
     const Y = (e, s) => s && e && L(e.toString().toLocaleLowerCase().trim()).includes(
       L(s.toLocaleLowerCase().trim())
     );
-    function ke(e) {
+    function Se(e) {
       var s;
-      return e ? (s = r.value) == null ? void 0 : s.filter((u) => {
-        const p = u[l.optionLabelKey], w = u[l.optionValueKey], A = u[l.optionInputValueKey];
+      return e ? (s = a.value) == null ? void 0 : s.filter((u) => {
+        const p = u[n.optionLabelKey], w = u[n.optionValueKey], A = u[n.optionInputValueKey];
         return Y(p, e) || Y(A, e) || Y(w, e) || typeof p == "string" && ge(p, e).isMatching.value || typeof A == "string" && ge(A, e).isMatching.value || typeof w == "string" && ge(w, e).isMatching.value;
-      }) : r.value;
+      }) : a.value;
     }
-    const T = v(() => ke(j.value));
-    async function ne(e) {
+    const T = v(() => Se(j.value));
+    async function le(e) {
       var s;
       if (y.value) {
         if (e && ("relatedTarget" in e && ((s = Z.value) != null && s.contains(e.relatedTarget)) || e.type === "keydown"))
           return e.preventDefault();
-        await ee(), I.value = !1, h.value = 0, i("close", e);
+        await ee(), k.value = !1, h.value = 0, i("close", e);
       }
     }
-    async function le(e) {
-      l.disabled || y.value || (e == null || e.preventDefault(), I.value = !0, await ye(), i("focus", e), i("open", I.value));
+    async function ne(e) {
+      n.disabled || y.value || (e == null || e.preventDefault(), k.value = !0, await ye(), i("focus", e), i("open", k.value));
     }
-    function Se() {
+    function Be() {
       var e, s;
       (s = ((e = N.value) == null ? void 0 : e.$el).querySelector("input")) == null || s.focus();
     }
     function Ze(e) {
-      I.value ? ne(e) : Se();
+      k.value ? le(e) : Be();
     }
     function Xe(e) {
       var s, u;
@@ -520,33 +523,33 @@ const Fo = ["aria-label"], Ao = { class: "m-select-list__no-results" }, Lo = {
     }
     function xe(e) {
       var u;
-      e === "Backspace" && a.value.length > 0 ? a.value = a.value.slice(0, -1) : a.value += e;
-      const s = ke(a.value);
+      e === "Backspace" && r.value.length > 0 ? r.value = r.value.slice(0, -1) : r.value += e;
+      const s = Se(r.value);
       s != null && s.length && (h.value = (u = T.value) == null ? void 0 : u.findIndex(
-        (p) => p[l.optionValueKey] === s[0][l.optionValueKey]
+        (p) => p[n.optionValueKey] === s[0][n.optionValueKey]
       ), typeof h.value == "number" && h.value >= 0 && ye(h.value)), ko(() => {
-        a.value = "";
+        r.value = "";
       }, 1e3);
     }
     const _e = (e) => {
       const s = e.key;
-      /^[\dA-Za-z\u0400-\u04FF]$/.test(s) ? (e.preventDefault(), le(e), l.search ? Xe(s) : xe(s)) : Be(e);
-    }, Be = (e) => {
+      /^[\dA-Za-z\u0400-\u04FF]$/.test(s) ? (e.preventDefault(), ne(e), n.search ? Xe(s) : xe(s)) : $e(e);
+    }, $e = (e) => {
       const s = e.code, u = ["ArrowUp", "ArrowDown"].includes(s), p = ["Enter", "Space"].includes(s), w = s === "Escape" && y.value;
-      u ? eo(e, h.value) : p ? oo(e, h.value) : w && ne();
+      u ? eo(e, h.value) : p ? oo(e, h.value) : w && le();
     }, eo = (e, s) => {
       var w;
       e.preventDefault();
       const u = e.code;
-      y.value || le(e);
+      y.value || ne(e);
       const p = (w = T.value) == null ? void 0 : w.length;
       p && (typeof s == "number" ? s === p - 1 && u === "ArrowDown" ? h.value = 0 : s === 0 && u === "ArrowUp" ? h.value = p - 1 : h.value = u === "ArrowDown" ? s + 1 : s - 1 : h.value = u === "ArrowDown" ? 0 : p - 1, ye(h.value));
     }, oo = (e, s) => {
       var p, w, A;
       if (e.preventDefault(), !y.value)
-        return le(e);
+        return ne(e);
       const u = s ? ((p = T.value) == null ? void 0 : p[s]) ?? ((w = T.value) == null ? void 0 : w[0]) : (A = T.value) == null ? void 0 : A[0];
-      O(u) || $e(u);
+      O(u) || Pe(u);
     };
     async function ye(e) {
       var u, p;
@@ -562,48 +565,53 @@ const Fo = ["aria-label"], Ao = { class: "m-select-list__no-results" }, Lo = {
       var u;
       const s = (u = T.value) == null ? void 0 : u.findIndex((p) => {
         var w, A;
-        return l.multiple && Array.isArray(l.modelValue) ? e ? e[l.optionValueKey] === p[l.optionValueKey] : [...l.modelValue].reverse()[0] === p[l.optionValueKey] : ((A = (w = k.value) == null ? void 0 : w[0]) == null ? void 0 : A[l.optionValueKey]) === p[l.optionValueKey];
+        return n.multiple && Array.isArray(n.modelValue) ? e ? e[n.optionValueKey] === p[n.optionValueKey] : [...n.modelValue].reverse()[0] === p[n.optionValueKey] : ((A = (w = S.value) == null ? void 0 : w[0]) == null ? void 0 : A[n.optionValueKey]) === p[n.optionValueKey];
       });
       h.value = s && s >= 0 ? s : 0;
     }
-    const $e = (e, s = !0) => {
+    const Pe = (e, s = !0) => {
       var A;
-      s && !l.multiple && ee(() => ne()), j.value = "";
-      const u = (A = k.value) == null ? void 0 : A.some(
-        (X) => X[l.optionValueKey] === e[l.optionValueKey]
+      s && !n.multiple && ee(() => le()), j.value = "";
+      const u = (A = S.value) == null ? void 0 : A.some(
+        (X) => X[n.optionValueKey] === e[n.optionValueKey]
       );
-      let p = k.value;
-      u && l.multiple ? p = p == null ? void 0 : p.filter(
-        (X) => X[l.optionValueKey] !== e[l.optionValueKey]
-      ) : l.multiple ? p.push(e) : p = [e];
-      const w = p.map((X) => X[l.optionValueKey]);
-      i("update:model-value", l.multiple ? w : w[0]), i("selected-option", e), ve(e), Se();
+      let p = S.value;
+      u && n.multiple ? p = p == null ? void 0 : p.filter(
+        (X) => X[n.optionValueKey] !== e[n.optionValueKey]
+      ) : n.multiple ? p.push(e) : p = [e];
+      const w = p.map((X) => X[n.optionValueKey]);
+      i("update:model-value", n.multiple ? w : w[0]), i("selected-option", e), ve(e), Be();
     };
-    return (e, s) => Ne((C(), $(
+    return (e, s) => Ne((C(), P(
       "div",
       {
         ref_key: "mazSelectElement",
         ref: Z,
-        class: E(["m-select", [{ "--is-open": y.value, "--disabled": e.disabled }, l.class, `--${e.size}`]]),
+        class: E(["m-select", [
+          { "--is-open": y.value, "--disabled": e.disabled, "--block": e.block },
+          n.class,
+          `--${e.size}`
+        ]]),
         style: _(e.style)
       },
       [
-        q(Le, pe({
-          id: b(P),
+        q(Ve, pe({
+          id: b(F),
           ref_key: "mazInputComponent",
           ref: N,
           class: "m-select-input"
         }, e.$attrs, {
           required: e.required,
-          "border-active": I.value,
+          "border-active": k.value,
           color: e.color,
           "model-value": fe.value,
           autocomplete: "off",
           size: e.size,
+          block: "",
           disabled: e.disabled,
-          onFocus: x(le, ["prevent", "stop"]),
-          onClick: x(le, ["prevent", "stop"]),
-          onBlur: x(ne, ["prevent", "stop"]),
+          onFocus: x(ne, ["prevent", "stop"]),
+          onClick: x(ne, ["prevent", "stop"]),
+          onBlur: x(le, ["prevent", "stop"]),
           onChange: s[0] || (s[0] = (u) => i("change", u)),
           onKeydown: _e
         }), {
@@ -616,14 +624,14 @@ const Fo = ["aria-label"], Ao = { class: "m-select-list__no-results" }, Lo = {
               onClick: x(Ze, ["stop"])
             }, [
               q(b(m), { class: "m-select-chevron maz-text-xl" })
-            ], 8, Fo)
+            ], 8, Po)
           ]),
           _: 1
           /* STABLE */
         }, 16, ["id", "required", "border-active", "color", "model-value", "size", "disabled"]),
         q(uo, { name: me.value }, {
           default: ae(() => [
-            y.value ? (C(), $(
+            y.value ? (C(), P(
               "div",
               {
                 key: 0,
@@ -641,7 +649,7 @@ const Fo = ["aria-label"], Ao = { class: "m-select-list__no-results" }, Lo = {
                 })
               },
               [
-                e.search ? (C(), K(Le, {
+                e.search ? (C(), K(Ve, {
                   key: 0,
                   ref_key: "searchInputComponent",
                   ref: ue,
@@ -658,21 +666,21 @@ const Fo = ["aria-label"], Ao = { class: "m-select-list__no-results" }, Lo = {
                   tabindex: "-1",
                   class: "m-select-list__search-input maz-flex-none",
                   "left-icon": b(c),
-                  onKeydown: Be
+                  onKeydown: $e
                 }, null, 8, ["modelValue", "color", "placeholder", "left-icon"])) : V("v-if", !0),
                 V(`
           @slot No results slot - Displayed when no results corresponding with search query
         `),
                 !T.value || T.value.length <= 0 ? H(e.$slots, "no-results", { key: 1 }, () => [
-                  R("span", Ao, [
+                  R("span", Fo, [
                     q(b(f), { class: "maz-h-6 maz-w-6 maz-text-normal" })
                   ])
-                ], !0) : (C(), $("div", Lo, [
-                  (C(!0), $(
-                    Fe,
+                ], !0) : (C(), P("div", Ao, [
+                  (C(!0), P(
+                    Ae,
                     null,
-                    io(T.value, (u, p) => (C(), $(
-                      Fe,
+                    io(T.value, (u, p) => (C(), P(
+                      Ae,
                       { key: p },
                       [
                         V(`
@@ -685,12 +693,12 @@ const Fo = ["aria-label"], Ao = { class: "m-select-list__no-results" }, Lo = {
                         }, () => [
                           R(
                             "span",
-                            Mo,
+                            Lo,
                             G(u.label),
                             1
                             /* TEXT */
                           )
-                        ], !0) : (C(), $("button", {
+                        ], !0) : (C(), P("button", {
                           key: 1,
                           tabindex: "-1",
                           type: "button",
@@ -702,7 +710,7 @@ const Fo = ["aria-label"], Ao = { class: "m-select-list__no-results" }, Lo = {
                             }
                           ]]),
                           style: _(e.itemHeight ? { height: `${e.itemHeight}px` } : void 0),
-                          onClick: x((w) => $e(u), ["prevent", "stop"])
+                          onClick: x((w) => Pe(u), ["prevent", "stop"])
                         }, [
                           e.multiple ? (C(), K(b(o), {
                             key: 0,
@@ -728,7 +736,7 @@ const Fo = ["aria-label"], Ao = { class: "m-select-list__no-results" }, Lo = {
                               /* TEXT */
                             )
                           ], !0)
-                        ], 14, Eo))
+                        ], 14, Mo))
                       ],
                       64
                       /* STABLE_FRAGMENT */
@@ -749,58 +757,58 @@ const Fo = ["aria-label"], Ao = { class: "m-select-list__no-results" }, Lo = {
       6
       /* CLASS, STYLE */
     )), [
-      [b(Bo), ne]
+      [b(So), le]
     ]);
   }
-}), No = /* @__PURE__ */ se(Ko, [["__scopeId", "data-v-b3157cda"]]);
+}), Ko = /* @__PURE__ */ se(Eo, [["__scopeId", "data-v-7825a2da"]]);
 function Ye(t) {
   return !!t;
 }
 function Ee(t) {
-  return [...t].map((n) => {
-    const o = n.codePointAt(0);
+  return [...t].map((l) => {
+    const o = l.codePointAt(0);
     return o ? o % 32 + 127461 : void 0;
-  }).filter(Ye).map((n) => String.fromCodePoint(n)).join("");
+  }).filter(Ye).map((l) => String.fromCodePoint(l)).join("");
 }
-const J = S();
-async function To() {
+const J = I();
+async function No() {
   if (J.value)
     return J.value;
   const { default: t } = await import("./examples.mobile.json-zD8w3Qhl.mjs");
   return J.value = t, J.value;
 }
-function Do(t, n) {
-  return de(t) === de(n);
+function To(t, l) {
+  return de(t) === de(l);
 }
-function Uo(t) {
-  var n;
+function Do(t) {
+  var l;
   try {
-    return J.value && t ? (n = mo(t, J.value)) == null ? void 0 : n.formatNational() : void 0;
+    return J.value && t ? (l = fo(t, J.value)) == null ? void 0 : l.formatNational() : void 0;
   } catch (o) {
     console.error(`[maz-ui](MazPhoneNumberInput) ${o}`);
   }
 }
-function Ro(t) {
+function Uo(t) {
   try {
-    const n = yo(t);
-    return n || (console.error(`[maz-ui](MazPhoneNumberInput) The code country "${t}" is not available`), !1);
-  } catch (n) {
-    return console.error(`[maz-ui](MazPhoneNumberInput) ${n}`), !1;
+    const l = mo(t);
+    return l || (console.error(`[maz-ui](MazPhoneNumberInput) The code country "${t}" is not available`), !1);
+  } catch (l) {
+    return console.error(`[maz-ui](MazPhoneNumberInput) ${l}`), !1;
   }
 }
-function Oo({
+function Ro({
   phoneNumber: t,
-  countryCode: n
+  countryCode: l
 }) {
   try {
     if (!t)
       return {
         isValid: !1,
-        countryCode: n
+        countryCode: l
       };
-    const o = vo(t, n);
+    const o = yo(t, l);
     return {
-      countryCode: (o == null ? void 0 : o.country) ?? n,
+      countryCode: (o == null ? void 0 : o.country) ?? l,
       isValid: (o == null ? void 0 : o.isValid()) ?? !1,
       isPossible: o == null ? void 0 : o.isPossible(),
       countryCallingCode: o == null ? void 0 : o.countryCallingCode,
@@ -817,9 +825,9 @@ function Oo({
     throw new Error(`[MazPhoneNumberInput](getResultsFromPhoneNumber) ${o}`);
   }
 }
-function Yo(t, n) {
+function Oo(t, l) {
   try {
-    return n ? new ho(t).input(n) : "";
+    return l ? new vo(t).input(l) : "";
   } catch (o) {
     throw new Error(`[MazPhoneNumberInput](getAsYouTypeFormat) ${o}`);
   }
@@ -827,28 +835,28 @@ function Yo(t, n) {
 function qe() {
   return {
     examples: J,
-    getAsYouTypeFormat: Yo,
-    getPhoneNumberResults: Oo,
-    loadPhoneNumberExamplesFile: To,
-    getPhoneNumberExample: Uo,
-    isSameCountryCallingCode: Do,
-    isCountryAvailable: Ro,
+    getAsYouTypeFormat: Oo,
+    getPhoneNumberResults: Ro,
+    loadPhoneNumberExamplesFile: No,
+    getPhoneNumberExample: Do,
+    isSameCountryCallingCode: To,
+    isCountryAvailable: Uo,
     getCountries: Te,
     getCountryCallingCode: de
   };
 }
-const { isCountryAvailable: qo, getPhoneNumberResults: He, getAsYouTypeFormat: Ho } = qe(), oe = S(""), W = S(), Q = co({
+const { isCountryAvailable: Yo, getPhoneNumberResults: He, getAsYouTypeFormat: qo } = qe(), oe = I(""), W = I(), Q = co({
   start: 0,
   end: 0,
   cursorAtEnd: !0
-}), D = S({
+}), D = I({
   isValid: !1,
   countryCode: void 0
 });
-async function Wo() {
+async function Ho() {
   try {
-    const t = await fetch("https://ipwho.is"), { country_code: n } = await t.json();
-    return n;
+    const t = await fetch("https://ipwho.is"), { country_code: l } = await t.json();
+    return l;
   } catch (t) {
     throw new Error(`[MazPhoneNumberInput](fetchCountryCode) ${t}`);
   }
@@ -856,16 +864,16 @@ async function Wo() {
 function We(t) {
   if (!t)
     return "";
-  const n = new RegExp(/[^\d ()+-]/g);
-  return t.replaceAll(n, "").trim();
+  const l = new RegExp(/[^\d ()+-]/g);
+  return t.replaceAll(l, "").trim();
 }
-function jo(t, n) {
+function Wo(t, l) {
   const o = t == null ? void 0 : t.$el.querySelector("input");
-  Q.start = o == null ? void 0 : o.selectionStart, Q.end = o == null ? void 0 : o.selectionEnd, Q.cursorAtEnd = n && typeof Q.start == "number" && n.length > 0 ? Q.start >= n.length : !0;
+  Q.start = o == null ? void 0 : o.selectionStart, Q.end = o == null ? void 0 : o.selectionEnd, Q.cursorAtEnd = l && typeof Q.start == "number" && l.length > 0 ? Q.start >= l.length : !0;
 }
 function je(t) {
   if (t) {
-    if (!qo(t)) {
+    if (!Yo(t)) {
       W.value = void 0;
       return;
     }
@@ -874,7 +882,7 @@ function je(t) {
 }
 function Qe({
   newPhoneNumber: t,
-  autoFormat: n,
+  autoFormat: l,
   noFormattingAsYouType: o,
   updateResults: c = !0
 }) {
@@ -882,23 +890,23 @@ function Qe({
   if (c && (D.value = He({
     phoneNumber: m,
     countryCode: W.value
-  })), D.value.isValid && D.value.formatNational && n)
+  })), D.value.isValid && D.value.formatNational && l)
     oe.value = D.value.formatNational;
   else if (Q.cursorAtEnd && !o) {
-    const f = Ho(W.value, m);
+    const f = qo(W.value, m);
     oe.value = f;
   } else
     oe.value = m;
   D.value.countryCode && D.value.countryCode !== W.value && Ge({
     countryCode: D.value.countryCode,
-    autoFormat: n,
+    autoFormat: l,
     noFormattingAsYouType: o,
     updateResults: !1
   });
 }
 function Ge({
   countryCode: t,
-  autoFormat: n,
+  autoFormat: l,
   noFormattingAsYouType: o,
   updateResults: c = !0
 }) {
@@ -911,7 +919,7 @@ function Ge({
     countryCode: t
   })), Qe({
     newPhoneNumber: oe.value,
-    autoFormat: n,
+    autoFormat: l,
     noFormattingAsYouType: o,
     updateResults: !1
   });
@@ -922,29 +930,29 @@ function Je() {
   const t = window.navigator.language;
   if (!t)
     return;
-  let n = t.slice(3, 7).toUpperCase();
-  return n === "" && (n = t.slice(0, 2).toUpperCase()), n === "EN" && (n = "US"), n === "JA" && (n = "JP"), {
-    locale: n,
+  let l = t.slice(3, 7).toUpperCase();
+  return l === "" && (l = t.slice(0, 2).toUpperCase()), l === "EN" && (l = "US"), l === "JA" && (l = "JP"), {
+    locale: l,
     browserLocale: t
   };
 }
 let ze, Ke;
-function Qo(t, n, o) {
-  return o != null && o[n] ? o[n] : ((Ke !== t || !ze) && (Ke = t, ze = new Intl.DisplayNames([t], { type: "region" })), ze.of(n));
+function jo(t, l, o) {
+  return o != null && o[l] ? o[l] : ((Ke !== t || !ze) && (Ke = t, ze = new Intl.DisplayNames([t], { type: "region" })), ze.of(l));
 }
-function Go(t, n) {
+function Qo(t, l) {
   var m;
   const o = [], c = Te();
   t = t ?? ((m = Je()) == null ? void 0 : m.browserLocale) ?? "en-US";
   for (const f of c) {
-    const l = Qo(t, f, n);
-    if (l)
+    const n = jo(t, f, l);
+    if (n)
       try {
         const i = de(f);
         o.push({
           iso2: f,
           dialCode: i,
-          name: l
+          name: n
         });
       } catch (i) {
         console.error(`[MazPhoneNumberInput](getCountryCallingCode) ${i}`);
@@ -957,21 +965,21 @@ function Ie() {
     setSelectedCountry: je,
     results: D,
     sanitizePhoneNumber: We,
-    fetchCountryCode: Wo,
+    fetchCountryCode: Ho,
     selectedCountry: W,
     phoneNumber: oe,
     selectionRange: Q,
-    saveCursorPosition: jo,
+    saveCursorPosition: Wo,
     onPhoneNumberChanged: Qe,
     onCountryChanged: Ge,
     getBrowserLocale: Je,
-    getCountriesList: Go
+    getCountriesList: Qo
   };
 }
-const Jo = {
+const Go = {
   key: 0,
   class: "maz-text-lg"
-}, Zo = /* @__PURE__ */ re({
+}, Jo = /* @__PURE__ */ re({
   __name: "CountrySelector",
   props: {
     style: { default: void 0 },
@@ -998,27 +1006,27 @@ const Jo = {
   },
   emits: ["update:model-value"],
   setup(t) {
-    const n = t, o = S(), { phoneNumber: c, getCountriesList: m } = Ie(), f = v(() => m(n.countryLocale, n.customCountriesList)), l = v(() => {
+    const l = t, o = I(), { phoneNumber: c, getCountriesList: m } = Ie(), f = v(() => m(l.countryLocale, l.customCountriesList)), n = v(() => {
       var d;
       return (d = f.value) == null ? void 0 : d.filter((g) => {
         var y;
-        return !((y = n.ignoredCountries) != null && y.includes(g.iso2));
+        return !((y = l.ignoredCountries) != null && y.includes(g.iso2));
       });
     }), i = v(() => {
-      const d = n.onlyCountries || n.preferredCountries;
+      const d = l.onlyCountries || l.preferredCountries;
       return d == null ? void 0 : d.map(
         (g) => {
           var y;
-          return (y = l.value) == null ? void 0 : y.find((P) => P.iso2.includes(g));
+          return (y = n.value) == null ? void 0 : y.find((F) => F.iso2.includes(g));
         }
       );
-    }), I = v(() => {
+    }), k = v(() => {
       var d;
-      return (d = l.value) == null ? void 0 : d.filter((g) => {
+      return (d = n.value) == null ? void 0 : d.filter((g) => {
         var y;
-        return !((y = n.preferredCountries) != null && y.includes(g.iso2));
+        return !((y = l.preferredCountries) != null && y.includes(g.iso2));
       });
-    }), h = v(() => n.preferredCountries ? [...i.value ?? [], ...I.value ?? []] : n.onlyCountries ? i.value : l.value), B = v(() => {
+    }), h = v(() => l.preferredCountries ? [...i.value ?? [], ...k.value ?? []] : l.onlyCountries ? i.value : n.value), B = v(() => {
       var d;
       return (d = h.value) == null ? void 0 : d.map((g) => g ? {
         ...g,
@@ -1029,14 +1037,14 @@ const Jo = {
       var d, g;
       (g = (d = o.value) == null ? void 0 : d.$el.querySelector("input")) == null || g.focus();
     }
-    return (d, g) => (C(), $(
+    return (d, g) => (C(), P(
       "div",
       {
-        class: E(["m-country-selector", [n.class, { "--no-flags": d.noFlags }]]),
+        class: E(["m-country-selector", [l.class, { "--no-flags": d.noFlags }]]),
         style: _(d.style)
       },
       [
-        d.modelValue && !d.noFlags ? (C(), $(
+        d.modelValue && !d.noFlags ? (C(), P(
           "button",
           {
             key: 0,
@@ -1063,7 +1071,7 @@ const Jo = {
           2
           /* CLASS */
         )) : V("v-if", !0),
-        q(No, pe({
+        q(Ko, pe({
           id: `country-selector-${d.id}`,
           ref_key: "CountrySelectorRef",
           ref: o,
@@ -1091,16 +1099,16 @@ const Jo = {
           },
           "onUpdate:modelValue": g[0] || (g[0] = (y) => d.$emit("update:model-value", y))
         }), {
-          default: ae(({ option: y, isSelected: P }) => [
+          default: ae(({ option: y, isSelected: F }) => [
             R(
               "div",
               {
                 class: E(["m-country-selector__select__item maz-flex maz-items-center maz-gap-1 maz-truncate", {
-                  "m-country-selector__select__item--selected": P
+                  "m-country-selector__select__item--selected": F
                 }])
               },
               [
-                !d.noFlags && typeof y.iso2 == "string" ? (C(), $("span", Jo, [
+                !d.noFlags && typeof y.iso2 == "string" ? (C(), P("span", Go, [
                   V(`
               @slot Country list flag
                 @binding {String} country-code - country code of option - Ex: \`"FR"\`
@@ -1110,7 +1118,7 @@ const Jo = {
                   H(d.$slots, "country-list-flag", {
                     countryCode: y.iso2,
                     option: y,
-                    isSelected: P
+                    isSelected: F
                   }, () => [
                     Ce(
                       G(b(Ee)(y.iso2)),
@@ -1119,11 +1127,11 @@ const Jo = {
                     )
                   ], !0)
                 ])) : V("v-if", !0),
-                d.showCodeOnList ? (C(), $(
+                d.showCodeOnList ? (C(), P(
                   "span",
                   {
                     key: 1,
-                    class: E(["maz-w-9 maz-flex-none", { "maz-text-muted": !P }])
+                    class: E(["maz-w-9 maz-flex-none", { "maz-text-muted": !F }])
                   },
                   G(y.dialCode),
                   3
@@ -1132,7 +1140,7 @@ const Jo = {
                 R(
                   "span",
                   {
-                    class: E(["maz-flex-1 maz-truncate", { "maz-font-semibold": P }])
+                    class: E(["maz-flex-1 maz-truncate", { "maz-font-semibold": F }])
                   },
                   G(y.name),
                   3
@@ -1151,9 +1159,9 @@ const Jo = {
       /* CLASS, STYLE */
     ));
   }
-}), Xo = /* @__PURE__ */ se(Zo, [["__scopeId", "data-v-e21defba"]]), xo = /* @__PURE__ */ re({
+}), Zo = /* @__PURE__ */ se(Jo, [["__scopeId", "data-v-e21defba"]]), Xo = /* @__PURE__ */ re({
   __name: "PhoneInput",
-  props: /* @__PURE__ */ Ae({
+  props: /* @__PURE__ */ Le({
     id: {},
     color: {},
     size: {},
@@ -1170,20 +1178,20 @@ const Jo = {
     modelValue: {},
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ Ae(["update:model-value"], ["update:modelValue"]),
-  setup(t, { emit: n }) {
-    const o = t, c = n, m = po(t, "modelValue"), { loadPhoneNumberExamplesFile: f, getPhoneNumberExample: l, examples: i } = qe(), { selectedCountry: I, results: h, saveCursorPosition: B } = Ie(), M = S(!1), d = v(() => {
-      var F;
+  emits: /* @__PURE__ */ Le(["update:model-value"], ["update:modelValue"]),
+  setup(t, { emit: l }) {
+    const o = t, c = l, m = po(t, "modelValue"), { loadPhoneNumberExamplesFile: f, getPhoneNumberExample: n, examples: i } = qe(), { selectedCountry: k, results: h, saveCursorPosition: B } = Ie(), M = I(!1), d = v(() => {
+      var $;
       if (o.label)
         return o.label;
       const z = o.locales.phoneInput.placeholder;
       if (o.noExample || !i.value)
         return z;
       {
-        const r = l(I.value);
-        return (F = h.value) != null && F.isValid || !r ? z : `${o.locales.phoneInput.example} ${r}`;
+        const a = n(k.value);
+        return ($ = h.value) != null && $.isValid || !a ? z : `${o.locales.phoneInput.example} ${a}`;
       }
-    }), g = S();
+    }), g = I();
     async function y() {
       try {
         return f();
@@ -1191,39 +1199,36 @@ const Jo = {
         console.error("[maz-ui](MazPhoneNumberInput) while loading phone number examples file", z);
       }
     }
-    async function P(z) {
+    async function F(z) {
       g.value && z && B(g.value, z), await ee(), c("update:model-value", z);
     }
-    return Ve(() => {
+    return we(() => {
       o.noExample || y();
-    }), (z, F) => {
-      const r = fo("MazInput");
-      return C(), K(r, pe({
-        id: `phone-number-${z.id}`,
-        ref_key: "PhoneInputRef",
-        ref: g,
-        "model-value": m.value
-      }, z.$attrs, {
-        label: d.value,
-        disabled: z.disabled,
-        color: z.color,
-        error: z.error,
-        size: z.size,
-        success: z.success,
-        type: "tel",
-        inputmode: "tel",
-        class: ["m-phone-input", {
-          "--border-radius": z.hasRadius,
-          "--error": z.error || !b(h).isValid,
-          "--focused": M.value
-        }],
-        onFocus: F[0] || (F[0] = (k) => M.value = !0),
-        onBlur: F[1] || (F[1] = (k) => M.value = !1),
-        "onUpdate:modelValue": P
-      }), null, 16, ["id", "model-value", "label", "disabled", "color", "error", "size", "success", "class"]);
-    };
+    }), (z, $) => (C(), K(Ve, pe({
+      id: `phone-number-${z.id}`,
+      ref_key: "PhoneInputRef",
+      ref: g,
+      "model-value": m.value
+    }, z.$attrs, {
+      label: d.value,
+      disabled: z.disabled,
+      color: z.color,
+      error: z.error,
+      size: z.size,
+      success: z.success,
+      type: "tel",
+      inputmode: "tel",
+      class: ["m-phone-input", {
+        "--border-radius": z.hasRadius,
+        "--error": z.error || !b(h).isValid,
+        "--focused": M.value
+      }],
+      onFocus: $[0] || ($[0] = (a) => M.value = !0),
+      onBlur: $[1] || ($[1] = (a) => M.value = !1),
+      "onUpdate:modelValue": $[2] || ($[2] = (a) => F(a))
+    }), null, 16, ["id", "model-value", "label", "disabled", "color", "error", "size", "success", "class"]));
   }
-}), _o = /* @__PURE__ */ se(xo, [["__scopeId", "data-v-6ce648ce"]]), et = {
+}), xo = /* @__PURE__ */ se(Xo, [["__scopeId", "data-v-e2bf70df"]]), _o = {
   countrySelector: {
     placeholder: "Country code",
     error: "Choose country",
@@ -1233,7 +1238,7 @@ const Jo = {
     placeholder: "Phone number",
     example: "Example:"
   }
-}, ot = /* @__PURE__ */ re({
+}, et = /* @__PURE__ */ re({
   inheritAttrs: !1,
   __name: "MazPhoneNumberInput",
   props: {
@@ -1269,58 +1274,59 @@ const Jo = {
     success: { type: Boolean },
     error: { type: Boolean },
     countrySelectorDisplayName: { type: Boolean },
-    countrySelectorWidth: { default: "9rem" }
+    countrySelectorWidth: { default: "9rem" },
+    block: { type: Boolean }
   },
   emits: ["update", "data", "country-code", "update:model-value", "update:country-code"],
-  setup(t, { emit: n }) {
-    const o = n, c = t, {
+  setup(t, { emit: l }) {
+    const o = l, c = t, {
       phoneNumber: m,
       selectedCountry: f,
-      results: l,
+      results: n,
       fetchCountryCode: i,
-      setSelectedCountry: I,
+      setSelectedCountry: k,
       onPhoneNumberChanged: h,
       onCountryChanged: B,
       getBrowserLocale: M
-    } = Ie(), d = we({
+    } = Ie(), d = ke({
       componentName: "MazPhoneNumberInput",
       providedId: c.id
     }), g = v(() => ({
-      ...et,
+      ..._o,
       ...c.translations
     }));
-    Ve(async () => {
-      var r;
-      if (I(c.countryCode ?? c.defaultCountryCode), c.fetchCountry && !f.value) {
-        const k = await i();
-        I(k);
+    we(async () => {
+      var a;
+      if (k(c.countryCode ?? c.defaultCountryCode), c.fetchCountry && !f.value) {
+        const S = await i();
+        k(S);
       }
       if (!c.defaultCountryCode && !c.noUseBrowserLocale && !f.value) {
-        const k = (r = M()) == null ? void 0 : r.locale;
-        I(k);
+        const S = (a = M()) == null ? void 0 : a.locale;
+        k(S);
       }
     });
-    const y = S();
-    function P() {
-      var r;
-      return (r = y.value) == null ? void 0 : r.$el.querySelector("input");
+    const y = I();
+    function F() {
+      var a;
+      return (a = y.value) == null ? void 0 : a.$el.querySelector("input");
     }
     async function z() {
-      var r;
-      await ee(), (r = P()) == null || r.select();
+      var a;
+      await ee(), (a = F()) == null || a.select();
     }
-    function F(r) {
+    function $(a) {
       B({
-        countryCode: r,
+        countryCode: a,
         autoFormat: c.autoFormat,
         noFormattingAsYouType: c.noFormattingAsYouType
       }), z();
     }
     return he(
       () => c.modelValue ?? c.defaultPhoneNumber,
-      (r, k) => {
-        r && r !== k && r !== m.value && h({
-          newPhoneNumber: r,
+      (a, S) => {
+        a && a !== S && a !== m.value && h({
+          newPhoneNumber: a,
           autoFormat: c.autoFormat,
           noFormattingAsYouType: c.noFormattingAsYouType
         });
@@ -1330,9 +1336,9 @@ const Jo = {
       }
     ), he(
       () => c.countryCode ?? c.defaultCountryCode,
-      (r, k) => {
-        r && r !== k && r !== f.value && B({
-          countryCode: r,
+      (a, S) => {
+        a && a !== S && a !== f.value && B({
+          countryCode: a,
           autoFormat: c.autoFormat,
           noFormattingAsYouType: c.noFormattingAsYouType
         });
@@ -1341,65 +1347,66 @@ const Jo = {
         immediate: !0
       }
     ), he(
-      l,
-      (r) => {
-        o("update", r), o("data", r), r.e164 && r.isValid ? o("update:model-value", r.e164) : o("update:model-value", m.value), o("country-code", f.value), o("update:country-code", f.value);
+      n,
+      (a) => {
+        o("update", a), o("data", a), a.e164 && a.isValid ? o("update:model-value", a.e164) : o("update:model-value", m.value), o("country-code", f.value), o("update:country-code", f.value);
       },
       {
         immediate: !0
       }
-    ), (r, k) => {
+    ), (a, S) => {
       var Z;
-      return C(), $(
+      return C(), P(
         "div",
         {
-          class: E(["m-phone-number-input", [c.class]]),
-          style: _(r.style)
+          class: E(["m-phone-number-input", [c.class, { "--block": a.block }]]),
+          style: _(a.style)
         },
         [
-          r.noCountrySelector ? V("v-if", !0) : (C(), K(Xo, {
+          a.noCountrySelector ? V("v-if", !0) : (C(), K(Zo, {
             key: 0,
             id: b(d),
             "model-value": b(f),
-            color: r.color,
-            size: r.size,
-            "country-locale": r.countryLocale,
-            "country-selector-display-name": r.countrySelectorDisplayName,
-            "custom-countries-list": r.customCountriesList,
-            "ignored-countries": r.ignoredCountries,
-            "list-position": r.listPosition,
-            "no-flags": r.noFlags,
-            "no-search": r.noSearch,
-            error: r.error || (r.noValidationError ? !1 : !!b(m) && !b(f)),
-            success: r.success || (r.noValidationSuccess ? !1 : (Z = b(l)) == null ? void 0 : Z.isValid),
+            color: a.color,
+            size: a.size,
+            "country-locale": a.countryLocale,
+            "country-selector-display-name": a.countrySelectorDisplayName,
+            "custom-countries-list": a.customCountriesList,
+            "ignored-countries": a.ignoredCountries,
+            "list-position": a.listPosition,
+            "no-flags": a.noFlags,
+            "no-search": a.noSearch,
+            error: a.error || (a.noValidationError ? !1 : !!b(m) && !b(f)),
+            success: a.success || (a.noValidationSuccess ? !1 : (Z = b(n)) == null ? void 0 : Z.isValid),
             locales: g.value,
-            disabled: r.disabled,
-            "show-code-on-list": r.showCodeOnList,
-            "only-countries": r.onlyCountries,
-            "preferred-countries": r.preferredCountries,
-            width: r.countrySelectorWidth,
-            "onUpdate:modelValue": F
+            disabled: a.disabled,
+            "show-code-on-list": a.showCodeOnList,
+            "only-countries": a.onlyCountries,
+            "preferred-countries": a.preferredCountries,
+            width: a.countrySelectorWidth,
+            "onUpdate:modelValue": $
           }, null, 8, ["id", "model-value", "color", "size", "country-locale", "country-selector-display-name", "custom-countries-list", "ignored-countries", "list-position", "no-flags", "no-search", "error", "success", "locales", "disabled", "show-code-on-list", "only-countries", "preferred-countries", "width"])),
-          q(_o, {
+          q(xo, {
             id: b(d),
             ref_key: "PhoneInputRef",
             ref: y,
             "model-value": b(m),
-            color: r.color,
-            size: r.size,
-            "no-example": r.noExample,
-            disabled: r.disabled,
-            "has-radius": !r.noCountrySelector,
-            success: r.success || (r.noValidationSuccess ? !1 : b(l).isValid),
-            error: r.error || (r.noValidationError ? !1 : !!b(m) && !b(l).isValid),
+            color: a.color,
+            size: a.size,
+            "no-example": a.noExample,
+            block: "",
+            disabled: a.disabled,
+            "has-radius": !a.noCountrySelector,
+            success: a.success || (a.noValidationSuccess ? !1 : b(n).isValid),
+            error: a.error || (a.noValidationError ? !1 : !!b(m) && !b(n).isValid),
             locales: g.value,
-            "no-formatting-as-you-type": r.noFormattingAsYouType,
-            "auto-format": r.autoFormat,
-            label: r.placeholder,
-            "onUpdate:modelValue": k[0] || (k[0] = (N) => b(h)({
+            "no-formatting-as-you-type": a.noFormattingAsYouType,
+            "auto-format": a.autoFormat,
+            label: a.placeholder,
+            "onUpdate:modelValue": S[0] || (S[0] = (N) => b(h)({
               newPhoneNumber: N,
-              autoFormat: r.autoFormat,
-              noFormattingAsYouType: r.noFormattingAsYouType
+              autoFormat: a.autoFormat,
+              noFormattingAsYouType: a.noFormattingAsYouType
             }))
           }, null, 8, ["id", "model-value", "color", "size", "no-example", "disabled", "has-radius", "success", "error", "locales", "no-formatting-as-you-type", "auto-format", "label"])
         ],
@@ -1408,9 +1415,9 @@ const Jo = {
       );
     };
   }
-}), lt = /* @__PURE__ */ se(ot, [["__scopeId", "data-v-bf4f204d"]]);
+}), lt = /* @__PURE__ */ se(et, [["__scopeId", "data-v-5481a936"]]);
 export {
   lt as M,
   se as _,
-  we as u
+  ke as u
 };