maz-ui 3.43.3 → 3.44.0

package/components/chunks/{MazPhoneNumberInput-1tGT28Sa.mjs → MazPhoneNumberInput-DpWoNQfx.mjs}

@@ -1,28 +1,172 @@
-import '../assets/MazPhoneNumberInput.css';
-import { getCurrentInstance as je, computed as v, defineComponent as ae, defineAsyncComponent as j, ref as A, onMounted as ge, useSlots as We, openBlock as z, createElementBlock as M, normalizeClass as N, normalizeStyle as te, createElementVNode as W, createCommentVNode as h, renderSlot as R, createBlock as U, unref as P, resolveDynamicComponent as Se, withDirectives as Ae, mergeProps as ie, toHandlers as Qe, vModelDynamic as Ge, createTextVNode as ve, toDisplayString as X, withModifiers as oe, withCtx as Q, createVNode as Z, useCssVars as Je, onBeforeMount as Ze, nextTick as ne, Transition as Xe, Fragment as Ie, renderList as xe, inject as _e, mergeModels as ke, useModel as eo, provide as oo, watch as fe } from "vue";
-import { getCountries as Pe, getCountryCallingCode as se, isSupportedCountry as to, parsePhoneNumberFromString as lo, AsYouType as no, getExampleNumber as ao } from "libphonenumber-js";
-function ro(n, l) {
-  let o;
-  return function(...d) {
-    clearTimeout(o), o = setTimeout(() => {
-      n.apply(this, d);
-    }, l);
-  };
-}
-function be({
+import { getCurrentInstance as je, computed as m, defineComponent as ae, defineAsyncComponent as q, ref as B, onMounted as ge, useSlots as We, openBlock as V, createElementBlock as L, normalizeClass as N, normalizeStyle as te, createElementVNode as H, createCommentVNode as g, renderSlot as R, createBlock as D, unref as P, resolveDynamicComponent as Se, withDirectives as Pe, mergeProps as re, toHandlers as Qe, vModelDynamic as Ge, createTextVNode as ve, toDisplayString as X, withModifiers as oe, withCtx as j, createVNode as Z, useCssVars as Je, onBeforeMount as Ze, nextTick as ne, Transition as Xe, Fragment as Ie, renderList as xe, inject as _e, mergeModels as ke, useModel as eo, provide as oo, watch as fe } from "vue";
+import { getCountries as Ae, getCountryCallingCode as ue, isSupportedCountry as to, parsePhoneNumberFromString as lo, AsYouType as no, getExampleNumber as ao } from "libphonenumber-js";
+import '../assets/MazPhoneNumberInput.css';function be({
   componentName: n,
   providedId: l
 }) {
-  const o = je();
-  return v(() => l ?? `${n}-${o == null ? void 0 : o.uid}`);
+  const e = je();
+  return m(() => l ?? `${n}-${e == null ? void 0 : e.uid}`);
+}
+let pe = null;
+function ro(n, l) {
+  pe && clearTimeout(pe), pe = setTimeout(n, l);
 }
 const so = {
+  removeAccents: !0,
+  caseSensitive: !1,
+  replaceSpaces: !0,
+  removeSpecialCharacters: !1,
+  trim: !0,
+  normalizeSpaces: !0,
+  removeNumbers: !1,
+  customNormalizationForms: ["NFC", "NFKD"]
+};
+function ie(n, l) {
+  const e = { ...so, ...l }, t = {
+    À: "A",
+    Á: "A",
+    Â: "A",
+    Ã: "A",
+    Ä: "A",
+    Å: "A",
+    à: "a",
+    á: "a",
+    â: "a",
+    ã: "a",
+    ä: "a",
+    å: "a",
+    È: "E",
+    É: "E",
+    Ê: "E",
+    Ë: "E",
+    è: "e",
+    é: "e",
+    ê: "e",
+    ë: "e",
+    Î: "I",
+    Ï: "I",
+    í: "I",
+    î: "i",
+    ï: "i",
+    Ô: "O",
+    Õ: "O",
+    Ö: "O",
+    Ø: "O",
+    ô: "o",
+    õ: "o",
+    ö: "o",
+    ø: "o",
+    Ù: "U",
+    Ú: "U",
+    Û: "U",
+    Ü: "U",
+    ù: "u",
+    ú: "u",
+    û: "u",
+    ü: "u",
+    Ç: "C",
+    ç: "c",
+    ÿ: "y",
+    Ñ: "N",
+    ñ: "n",
+    ó: "o"
+  };
+  let d = n.toString();
+  if (e.trim && (d = d.trim()), e.normalizeSpaces && (d = d.replaceAll(/\s+/g, " ")), e.replaceSpaces && (d = d.replaceAll(" ", "-")), e.removeNumbers && (d = d.replaceAll(/\d/g, "")), e.removeAccents && (d = d.replaceAll(/[ÀÁÂÃÄÅÇÈÉÊËÎÏÑÔÕÖØÙÚÛÜàáâãäåçèéêëíîïñóôõöøùúûüÿ]/g, (f) => t[f] || f), d = d.replaceAll(/[\u0300-\u036F]/g, "")), e.caseSensitive === !1 && (d = d.toLowerCase()), e.removeSpecialCharacters && (d = d.replaceAll(/[^\dA-Z-]/gi, "")), e.trim && (d = d.trim()), e.customNormalizationForms)
+    for (const f of e.customNormalizationForms)
+      d = d.normalize(f);
+  return d;
+}
+function uo(n, l) {
+  const e = n.length, t = l.length, d = [];
+  for (let f = 0; f <= e; f++)
+    d[f] = [f];
+  for (let f = 0; f <= t; f++)
+    d[0][f] = f;
+  for (let f = 1; f <= e; f++)
+    for (let b = 1; b <= t; b++) {
+      const k = n[f - 1] === l[b - 1] ? 0 : 1;
+      d[f][b] = Math.min(
+        d[f - 1][b] + 1,
+        d[f][b - 1] + 1,
+        d[f - 1][b - 1] + k
+      );
+    }
+  return d[e][t];
+}
+function Fe(n, l) {
+  const e = uo(n, l), t = Math.max(n.length, l.length);
+  return 1 - e / t;
+}
+function io(n, l, e = 0.75) {
+  return Fe(n, l) >= e;
+}
+function me(n, l, e = 0.75) {
+  const t = m(
+    () => ie(typeof n == "string" ? n : n.value)
+  ), d = m(
+    () => ie(typeof l == "string" ? l : l.value)
+  ), f = m(() => typeof e == "number" ? e : e.value), b = m(() => Fe(t.value, d.value));
+  return {
+    isMatching: m(
+      () => io(t.value, d.value, f.value)
+    ),
+    score: b
+  };
+}
+function Ee(n, l, e) {
+  var b;
+  n.stopPropagation();
+  const t = typeof e.value == "function" ? e.value : e.value.handler, d = typeof e.value == "object" ? e.value.exclude : void 0;
+  let f = !1;
+  if (d && d.length > 0) {
+    for (const k of d)
+      if (!f && n.target instanceof HTMLElement) {
+        const K = (b = document.querySelector(k)) == null ? void 0 : b.getAttribute("id");
+        f = n.target.getAttribute("id") === K;
+      }
+  }
+  !l.contains(n.target) && !f && (t == null || t());
+}
+function Le() {
+  return document.ontouchstart === null ? "touchstart" : "click";
+}
+function co(n, l) {
+  const e = Le();
+  document.removeEventListener(e, (t) => Ee(t, n, l));
+}
+function fo(n, l) {
+  if (typeof l.value != "function" && typeof l.value == "object" && typeof l.value.handler != "function") {
+    console.error("[maz-ui](vClosable) v-closable directive requires a handler function");
+    return;
+  }
+  const e = Le();
+  document.addEventListener(e, (t) => Ee(t, n, l));
+}
+const po = {
+  mounted: fo,
+  unmounted: co
+}, se = (n, l) => {
+  const e = n.__vccOpts || n;
+  for (const [t, d] of l)
+    e[t] = d;
+  return e;
+};
+function mo(n, l) {
+  let e;
+  return function(...t) {
+    clearTimeout(e), e = setTimeout(() => {
+      n.apply(this, t);
+    }, l);
+  };
+}
+const yo = {
   key: 0,
   class: "m-input-wrapper-left"
-}, uo = { class: "m-input-wrapper-input" }, io = ["id", "type", "name", "inputmode", "placeholder", "aria-label", "disabled", "readonly", "required"], co = { key: 0 }, fo = {
+}, vo = { class: "m-input-wrapper-input" }, ho = ["id", "type", "name", "inputmode", "placeholder", "aria-label", "disabled", "readonly", "required"], go = { key: 0 }, bo = {
   key: 1,
   class: "m-input-wrapper-right"
-}, po = /* @__PURE__ */ ae({
+}, zo = /* @__PURE__ */ ae({
   inheritAttrs: !1,
   __name: "MazInput",
   props: {
@@ -60,75 +204,77 @@ const so = {
   },
   emits: ["update:model-value", "focus", "blur", "click", "change"],
   setup(n, { emit: l }) {
-    const o = j(() => import("./MazBtn-CFwe--oV.mjs")), d = j(() => import("./MazIcon-DL8XAldH.mjs")), c = j(() => import("./eye-slash-tjfxO0LK.mjs")), p = j(() => import("./eye-DqO_Jx56.mjs")), g = j(() => import("./check-7UA4j2f2.mjs")), t = n, I = l, F = A(!1), y = A(!1), V = A(), s = be({
+    const e = n, t = l, d = q(() => import("./MazBtn-zyRLUViT.mjs")), f = q(() => import("./MazIcon-B8A0hQAH.mjs")), b = q(() => import("./eye-slash-tjfxO0LK.mjs")), k = q(() => import("./eye-DqO_Jx56.mjs")), K = q(() => import("./check-7UA4j2f2.mjs")), A = B(!1), y = B(!1), S = B(), s = be({
       componentName: "MazInput",
-      providedId: t.id
+      providedId: e.id
     });
     ge(() => {
       var r;
-      t.autoFocus && ((r = V.value) == null || r.focus());
+      e.autoFocus && ((r = S.value) == null || r.focus());
     });
-    const m = v(() => t.type === "password"), C = v(() => F.value ? "text" : t.type), k = v(() => {
-      if (!t.noBorder) {
-        if (t.error)
+    const p = m(() => e.type === "password"), w = m(() => A.value ? "text" : e.type), I = m(() => {
+      if (!e.noBorder) {
+        if (e.error)
           return "maz-border-danger";
-        if (t.success)
+        if (e.success)
           return "maz-border-success";
-        if (t.warning)
+        if (e.warning)
           return "maz-border-warning";
-        if (y.value || t.borderActive) {
-          if (t.color === "black")
+        if (y.value || e.borderActive) {
+          if (e.color === "black")
             return "maz-border-black";
-          if (t.color === "danger")
+          if (e.color === "danger")
             return "maz-border-danger";
-          if (t.color === "info")
+          if (e.color === "info")
             return "maz-border-info";
-          if (t.color === "primary")
+          if (e.color === "primary")
             return "maz-border-primary";
-          if (t.color === "secondary")
+          if (e.color === "secondary")
             return "maz-border-secondary";
-          if (t.color === "success")
+          if (e.color === "success")
             return "maz-border-success";
-          if (t.color === "warning")
+          if (e.color === "warning")
             return "maz-border-warning";
-          if (t.color === "white")
+          if (e.color === "white")
             return "maz-border-white";
         }
         return "--default-border";
       }
-    }), Y = We(), b = v(() => {
-      const { required: r, placeholder: E } = t;
-      if (E)
-        return r ? `${E} *` : E;
-    }), $ = v(() => O.value !== void 0 && O.value !== ""), w = ro(
+    }), O = We(), W = m(() => {
+      const { required: r, placeholder: F } = e;
+      if (F)
+        return r ? `${F} *` : F;
+    }), Q = m(() => h.value !== void 0 && h.value !== ""), v = mo(
       (r) => {
-        I("update:model-value", r);
+        t("update:model-value", r);
       },
-      typeof t.debounce == "number" ? t.debounce : t.debounceDelay ?? 500
-    ), D = (r) => {
-      if (t.debounce)
-        return w(r);
-      I("update:model-value", r);
-    }, O = v({
-      get: () => t.modelValue,
-      set: (r) => D(r)
-    }), G = v(() => (!!t.label || !!t.hint) && (y.value || !!$.value || !!t.placeholder || ["date", "month", "week"].includes(t.type))), a = v(() => !!t.label || !!t.hint);
-    function B() {
-      return !!Y["right-icon"] || m.value || !!Y["valid-button"] || t.validButton || !!t.rightIcon;
+      typeof e.debounce == "number" ? e.debounce : e.debounceDelay ?? 500
+    );
+    function z(r) {
+      if (e.debounce)
+        return v(r);
+      t("update:model-value", r);
+    }
+    const h = m({
+      get: () => e.modelValue,
+      set: (r) => z(r)
+    }), G = m(() => (!!e.label || !!e.hint) && (y.value || !!Q.value || !!e.placeholder || ["date", "month", "week"].includes(e.type))), a = m(() => !!e.label || !!e.hint);
+    function $() {
+      return !!O["right-icon"] || p.value || !!O["valid-button"] || e.validButton || !!e.rightIcon;
     }
-    function L() {
-      return !!Y["left-icon"] || !!t.leftIcon;
+    function E() {
+      return !!O["left-icon"] || !!e.leftIcon;
     }
-    function T(r) {
-      I("focus", r), y.value = !0;
+    function M(r) {
+      t("focus", r), y.value = !0;
     }
-    function q(r) {
-      I("blur", r), y.value = !1;
+    function U(r) {
+      t("blur", r), y.value = !1;
     }
     function le(r) {
-      return I("change", r);
+      return t("change", r);
     }
-    return (r, E) => (z(), M(
+    return (r, F) => (V(), L(
       "div",
       {
         class: N(["m-input", [
@@ -142,68 +288,67 @@ const so = {
             "--has-state": r.error || r.warning || r.success,
             "--block": r.block
           },
-          t.class,
+          e.class,
           `--${r.color}`,
           `--${r.size}`
         ]]),
         style: te(r.style)
       },
       [
-        W(
+        H(
           "div",
           {
             class: N(["m-input-wrapper", [
               r.inputClasses,
-              k.value,
+              I.value,
               r.roundedSize ? `--rounded-${r.roundedSize}` : { "maz-rounded": !r.noRadius }
             ]])
           },
           [
-            L() ? (z(), M("div", so, [
-              h(`
+            E() ? (V(), L("div", yo, [
+              g(`
           @slot left-icon - The icon to display on the left of the input
         `),
               r.$slots["left-icon"] || r.leftIcon ? R(r.$slots, "left-icon", { key: 0 }, () => [
-                typeof r.leftIcon == "string" ? (z(), U(P(d), {
+                typeof r.leftIcon == "string" ? (V(), D(P(f), {
                   key: 0,
                   name: r.leftIcon,
                   class: "maz-text-xl maz-text-muted"
-                }, null, 8, ["name"])) : r.leftIcon ? (z(), U(Se(r.leftIcon), {
+                }, null, 8, ["name"])) : r.leftIcon ? (V(), D(Se(r.leftIcon), {
                   key: 1,
                   class: "maz-text-xl maz-text-muted"
-                })) : h("v-if", !0)
-              ], !0) : h("v-if", !0)
-            ])) : h("v-if", !0),
-            W("div", uo, [
-              Ae(W("input", ie({
+                })) : g("v-if", !0)
+              ], !0) : g("v-if", !0)
+            ])) : g("v-if", !0),
+            H("div", vo, [
+              Pe(H("input", re({
                 id: P(s),
                 ref_key: "input",
-                ref: V,
-                "onUpdate:modelValue": E[0] || (E[0] = (J) => O.value = J),
-                type: C.value,
+                ref: S,
+                "onUpdate:modelValue": F[0] || (F[0] = (J) => h.value = J),
+                type: w.value,
                 name: r.name
               }, r.$attrs, {
                 inputmode: r.inputmode,
-                placeholder: b.value,
+                placeholder: W.value,
                 "aria-label": r.label || r.placeholder,
                 disabled: r.disabled,
                 readonly: r.readonly,
                 required: r.required,
                 class: "m-input-input"
               }, Qe({
-                blur: q,
-                focus: T,
+                blur: U,
+                focus: M,
                 change: le
               }, !0), {
-                onClick: E[1] || (E[1] = (J) => r.$emit("click", J))
-              }), null, 16, io), [
-                [Ge, O.value]
+                onClick: F[1] || (F[1] = (J) => r.$emit("click", J))
+              }), null, 16, ho), [
+                [Ge, h.value]
               ]),
-              r.label || r.hint ? (z(), M(
+              r.label || r.hint ? (V(), L(
                 "span",
                 {
                   key: 0,
-                  ref: "label",
                   class: N(["m-input-label", [
                     {
                       "maz-text-danger-600": r.error,
@@ -218,50 +363,50 @@ const so = {
                     1
                     /* TEXT */
                   ),
-                  r.required ? (z(), M("sup", co, "*")) : h("v-if", !0)
+                  r.required ? (V(), L("sup", go, "*")) : g("v-if", !0)
                 ],
                 2
                 /* CLASS */
-              )) : h("v-if", !0)
+              )) : g("v-if", !0)
             ]),
-            B() ? (z(), M("div", fo, [
-              h(`
+            $() ? (V(), L("div", bo, [
+              g(`
           @slot right-icon - The icon to display on the right of the input
         `),
               r.$slots["right-icon"] || r.rightIcon ? R(r.$slots, "right-icon", { key: 0 }, () => [
-                typeof r.rightIcon == "string" ? (z(), U(P(d), {
+                typeof r.rightIcon == "string" ? (V(), D(P(f), {
                   key: 0,
                   name: r.rightIcon,
                   class: "maz-text-xl maz-text-muted"
-                }, null, 8, ["name"])) : r.rightIcon ? (z(), U(Se(r.rightIcon), {
+                }, null, 8, ["name"])) : r.rightIcon ? (V(), D(Se(r.rightIcon), {
                   key: 1,
                   class: "maz-text-xl maz-text-muted"
-                })) : h("v-if", !0)
-              ], !0) : h("v-if", !0),
-              m.value ? (z(), U(P(o), {
+                })) : g("v-if", !0)
+              ], !0) : g("v-if", !0),
+              p.value ? (V(), D(P(d), {
                 key: 1,
                 color: "transparent",
                 tabindex: "-1",
                 size: "mini",
-                onClick: E[2] || (E[2] = oe((J) => F.value = !F.value, ["stop"]))
+                onClick: F[2] || (F[2] = oe((J) => A.value = !A.value, ["stop"]))
               }, {
-                default: Q(() => [
-                  F.value ? (z(), U(P(c), {
+                default: j(() => [
+                  A.value ? (V(), D(P(b), {
                     key: 0,
                     class: "maz-text-xl maz-text-muted"
-                  })) : (z(), U(P(p), {
+                  })) : (V(), D(P(k), {
                     key: 1,
                     class: "maz-text-xl maz-text-muted"
                   }))
                 ]),
                 _: 1
                 /* STABLE */
-              })) : h("v-if", !0),
-              h(`
+              })) : g("v-if", !0),
+              g(`
           @slot valid-button - Replace the valid button by your own
         `),
               r.$slots["valid-button"] || r.validButton ? R(r.$slots, "valid-button", { key: 2 }, () => [
-                Z(P(o), {
+                Z(P(d), {
                   color: "transparent",
                   disabled: r.disabled,
                   tabindex: "-1",
@@ -270,14 +415,14 @@ const so = {
                   size: "mini",
                   type: "submit"
                 }, {
-                  default: Q(() => [
-                    Z(P(g), { class: "maz-text-2xl maz-text-normal" })
+                  default: j(() => [
+                    Z(P(K), { class: "maz-text-2xl maz-text-normal" })
                   ]),
                   _: 1
                   /* STABLE */
                 }, 8, ["disabled", "loading"])
-              ], !0) : h("v-if", !0)
-            ])) : h("v-if", !0)
+              ], !0) : g("v-if", !0)
+            ])) : g("v-if", !0)
           ],
           2
           /* CLASS */
@@ -287,152 +432,7 @@ const so = {
       /* CLASS, STYLE */
     ));
   }
-}), re = (n, l) => {
-  const o = n.__vccOpts || n;
-  for (const [d, c] of l)
-    o[d] = c;
-  return o;
-}, he = /* @__PURE__ */ re(po, [["__scopeId", "data-v-84073434"]]);
-let pe = null;
-function mo(n, l) {
-  pe && clearTimeout(pe), pe = setTimeout(n, l);
-}
-const yo = {
-  removeAccents: !0,
-  caseSensitive: !1,
-  replaceSpaces: !0,
-  removeSpecialCharacters: !1,
-  trim: !0,
-  normalizeSpaces: !0,
-  removeNumbers: !1,
-  customNormalizationForms: ["NFC", "NFKD"]
-};
-function ue(n, l) {
-  const o = { ...yo, ...l }, d = {
-    À: "A",
-    Á: "A",
-    Â: "A",
-    Ã: "A",
-    Ä: "A",
-    Å: "A",
-    à: "a",
-    á: "a",
-    â: "a",
-    ã: "a",
-    ä: "a",
-    å: "a",
-    È: "E",
-    É: "E",
-    Ê: "E",
-    Ë: "E",
-    è: "e",
-    é: "e",
-    ê: "e",
-    ë: "e",
-    Î: "I",
-    Ï: "I",
-    í: "I",
-    î: "i",
-    ï: "i",
-    Ô: "O",
-    Õ: "O",
-    Ö: "O",
-    Ø: "O",
-    ô: "o",
-    õ: "o",
-    ö: "o",
-    ø: "o",
-    Ù: "U",
-    Ú: "U",
-    Û: "U",
-    Ü: "U",
-    ù: "u",
-    ú: "u",
-    û: "u",
-    ü: "u",
-    Ç: "C",
-    ç: "c",
-    ÿ: "y",
-    Ñ: "N",
-    ñ: "n",
-    ó: "o"
-  };
-  let c = n.toString();
-  if (o.trim && (c = c.trim()), o.normalizeSpaces && (c = c.replaceAll(/\s+/g, " ")), o.replaceSpaces && (c = c.replaceAll(" ", "-")), o.removeNumbers && (c = c.replaceAll(/\d/g, "")), o.removeAccents && (c = c.replaceAll(/[ÀÁÂÃÄÅÇÈÉÊËÎÏÑÔÕÖØÙÚÛÜàáâãäåçèéêëíîïñóôõöøùúûüÿ]/g, (p) => d[p] || p), c = c.replaceAll(/[\u0300-\u036F]/g, "")), o.caseSensitive === !1 && (c = c.toLowerCase()), o.removeSpecialCharacters && (c = c.replaceAll(/[^\dA-Za-z-]/g, "")), o.trim && (c = c.trim()), o.customNormalizationForms)
-    for (const p of o.customNormalizationForms)
-      c = c.normalize(p);
-  return c;
-}
-function vo(n, l) {
-  const o = n.length, d = l.length, c = [];
-  for (let p = 0; p <= o; p++)
-    c[p] = [p];
-  for (let p = 0; p <= d; p++)
-    c[0][p] = p;
-  for (let p = 1; p <= o; p++)
-    for (let g = 1; g <= d; g++) {
-      const t = n[p - 1] === l[g - 1] ? 0 : 1;
-      c[p][g] = Math.min(
-        c[p - 1][g] + 1,
-        c[p][g - 1] + 1,
-        c[p - 1][g - 1] + t
-      );
-    }
-  return c[o][d];
-}
-function Fe(n, l) {
-  const o = vo(n, l), d = Math.max(n.length, l.length);
-  return 1 - o / d;
-}
-function ho(n, l, o = 0.75) {
-  return Fe(n, l) >= o;
-}
-function me(n, l, o = 0.75) {
-  const d = v(
-    () => ue(typeof n == "string" ? n : n.value)
-  ), c = v(
-    () => ue(typeof l == "string" ? l : l.value)
-  ), p = v(() => typeof o == "number" ? o : o.value), g = v(() => Fe(d.value, c.value));
-  return {
-    isMatching: v(
-      () => ho(d.value, c.value, p.value)
-    ),
-    score: g
-  };
-}
-const Ee = (n, l, o) => {
-  var g;
-  n.stopPropagation();
-  const d = typeof o.value == "function" ? o.value : o.value.handler, c = typeof o.value == "object" ? o.value.exclude : void 0;
-  let p = !1;
-  if (c && c.length > 0) {
-    for (const t of c)
-      if (!p && n.target instanceof HTMLElement) {
-        const I = (g = document.querySelector(t)) == null ? void 0 : g.getAttribute("id");
-        p = n.target.getAttribute("id") === I;
-      }
-  }
-  !l.contains(n.target) && !p && (d == null || d());
-};
-function Le() {
-  return document.ontouchstart === null ? "touchstart" : "click";
-}
-function go(n, l) {
-  const o = Le();
-  document.removeEventListener(o, (d) => Ee(d, n, l));
-}
-function bo(n, l) {
-  if (typeof l.value != "function" && typeof l.value == "object" && typeof l.value.handler != "function") {
-    console.error("[maz-ui](vClosable) v-closable directive requires a handler function");
-    return;
-  }
-  const o = Le();
-  document.addEventListener(o, (d) => Ee(d, n, l));
-}
-const zo = {
-  mounted: bo,
-  unmounted: go
-}, Co = ["aria-label"], Vo = { class: "m-select-list__no-results" }, wo = {
+}), he = /* @__PURE__ */ se(zo, [["__scopeId", "data-v-e9affc48"]]), Co = ["aria-label"], Vo = { class: "m-select-list__no-results" }, wo = {
   key: 2,
   class: "m-select-list__scroll-wrapper",
   tabindex: "-1"
@@ -464,256 +464,268 @@ const zo = {
     excludeSelectors: { default: void 0 }
   },
   emits: ["close", "open", "blur", "focus", "change", "update:model-value", "selected-option"],
-  setup(n, { expose: l, emit: o }) {
-    Je((e) => ({
-      "416802e0": C.value,
-      "21823f4f": s.value,
-      "6d76cd12": m.value
+  setup(n, { expose: l, emit: e }) {
+    Je((o) => ({
+      "10a6fdb0": w.value,
+      "3653166f": s.value,
+      "44a0b897": p.value
     }));
-    const d = j(() => import("./MazCheckbox-BmPd9Bqa.mjs")), c = j(() => import("./magnifying-glass-DZGg7953.mjs")), p = j(() => import("./chevron-down-CzMH-gFW.mjs")), g = j(() => import("./no-symbol-QAqP9IlR.mjs"));
+    const t = n, d = e, f = q(() => import("./MazCheckbox-D3PXkt75.mjs")), b = q(() => import("./magnifying-glass-DZGg7953.mjs")), k = q(() => import("./chevron-down-CzMH-gFW.mjs")), K = q(() => import("./no-symbol-QAqP9IlR.mjs"));
     l({
       /** Method to open the option list */
       openList: _,
       /** Method to close the option list */
       closeList: x
     });
-    const t = n, I = o, F = A(!1), y = A(), V = v(
+    const A = B(!1), y = B(), S = m(
       () => ["black", "transparent", "white"].includes(t.color)
-    ), s = v(
-      () => V.value ? "var(--maz-color-black)" : `var(--maz-color-${t.color}-800)`
-    ), m = v(
-      () => V.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-100)`
-    ), C = v(
-      () => V.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-200)`
-    ), k = v(() => F.value || t.open), Y = be({
+    ), s = m(
+      () => S.value ? "var(--maz-color-black)" : `var(--maz-color-${t.color}-800)`
+    ), p = m(
+      () => S.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-100)`
+    ), w = m(
+      () => S.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-200)`
+    ), I = m(() => A.value || t.open), O = be({
       componentName: "MazSelect",
       providedId: t.id
     });
-    function b(e) {
+    function W(o) {
       return {
-        [t.optionValueKey]: e,
-        [t.optionLabelKey]: e,
-        [t.optionInputValueKey]: e
+        [t.optionValueKey]: o,
+        [t.optionLabelKey]: o,
+        [t.optionInputValueKey]: o
       };
     }
-    function $(e) {
+    function Q(o) {
       return {
-        ...e,
-        [t.optionValueKey]: e[t.optionValueKey],
-        [t.optionLabelKey]: e[t.optionLabelKey],
-        [t.optionInputValueKey]: e[t.optionInputValueKey]
+        ...o,
+        [t.optionValueKey]: o[t.optionValueKey],
+        [t.optionLabelKey]: o[t.optionLabelKey],
+        [t.optionInputValueKey]: o[t.optionInputValueKey]
       };
     }
-    const w = v(() => {
+    const v = m(() => {
       var u;
-      const e = [];
+      const o = [];
       if (!((u = t.options) != null && u.length))
         return [];
-      for (const f of t.options)
-        typeof f == "string" || typeof f == "number" || typeof f == "boolean" ? e.push(b(f)) : typeof f == "object" && "options" in f && Array.isArray(f.options) ? e.push(
-          { label: f.label, isOptGroup: !0 },
-          ...f.options.map(
-            (i) => typeof i == "string" || typeof i == "number" || typeof i == "boolean" ? b(i) : $(i)
+      for (const c of t.options)
+        typeof c == "string" || typeof c == "number" || typeof c == "boolean" ? o.push(W(c)) : typeof c == "object" && "options" in c && Array.isArray(c.options) ? o.push(
+          { label: c.label, isOptGroup: !0 },
+          ...c.options.map(
+            (i) => typeof i == "string" || typeof i == "number" || typeof i == "boolean" ? W(i) : Q(i)
           )
-        ) : e.push($(f));
-      return e;
-    }), D = v(
+        ) : o.push(Q(c));
+      return o;
+    }), z = m(
       () => {
-        var e;
-        return ((e = w.value) == null ? void 0 : e.filter((u) => t.multiple ? Array.isArray(t.modelValue) ? t.modelValue.includes(u[t.optionValueKey]) && !L(u[t.optionValueKey]) : !1 : t.modelValue === u[t.optionValueKey] && !L(u[t.optionValueKey]))) ?? [];
+        var o;
+        return ((o = v.value) == null ? void 0 : o.filter((u) => t.multiple ? Array.isArray(t.modelValue) ? t.modelValue.includes(u[t.optionValueKey]) && !E(u[t.optionValueKey]) : !1 : t.modelValue === u[t.optionValueKey] && !E(u[t.optionValueKey]))) ?? [];
       }
     );
     Ze(() => {
-      var e;
-      (e = t.options) != null && e.length || console.warn("[maz-ui](MazSelect) you must provide options"), ce();
+      var o;
+      (o = t.options) != null && o.length || console.warn("[maz-ui](MazSelect) you must provide options"), ce();
     });
-    const O = A(), G = A(), a = A(), B = A(), L = (e) => e == null;
-    function T(e) {
-      var f;
-      return (((f = D.value) == null ? void 0 : f.some(
-        (i) => i[t.optionValueKey] === e[t.optionValueKey]
-      )) ?? !1) && !L(e[t.optionValueKey]);
+    const h = B(), G = B(), a = B(), $ = B();
+    function E(o) {
+      return o == null;
+    }
+    function M(o) {
+      var c;
+      return (((c = z.value) == null ? void 0 : c.some(
+        (i) => i[t.optionValueKey] === o[t.optionValueKey]
+      )) ?? !1) && !E(o[t.optionValueKey]);
     }
-    const q = v(() => {
+    const U = m(() => {
       var u;
       if (t.multiple && t.modelValue && Array.isArray(t.modelValue))
         return t.modelValue.map(
-          (f) => {
-            var i, S;
-            return (S = (i = w.value) == null ? void 0 : i.find((K) => K[t.optionValueKey] === f)) == null ? void 0 : S[t.optionInputValueKey];
+          (c) => {
+            var i, C;
+            return (C = (i = v.value) == null ? void 0 : i.find((T) => T[t.optionValueKey] === c)) == null ? void 0 : C[t.optionInputValueKey];
           }
         ).join(", ");
-      const e = (u = w.value) == null ? void 0 : u.find(
-        (f) => f[t.optionValueKey] === t.modelValue
+      const o = (u = v.value) == null ? void 0 : u.find(
+        (c) => c[t.optionValueKey] === t.modelValue
       );
-      return L(t.modelValue) || e == null ? void 0 : e[t.optionInputValueKey];
-    }), le = v(
+      return E(t.modelValue) || o == null ? void 0 : o[t.optionInputValueKey];
+    }), le = m(
       () => t.listPosition.includes("bottom") ? "maz-slide" : "maz-slideinvert"
-    ), r = A(""), E = A(""), J = (e, u) => u && e && ue(e).includes(ue(u));
-    function ze(e) {
+    ), r = B(""), F = B("");
+    function J(o, u) {
+      return u && o && ie(o).includes(ie(u));
+    }
+    function ze(o) {
       var u;
-      return e ? (u = w.value) == null ? void 0 : u.filter((f) => {
-        const i = f[t.optionLabelKey], S = f[t.optionValueKey], K = f[t.optionInputValueKey];
-        return J(i, e) || J(K, e) || J(S, e) || typeof i == "string" && me(i, e, 0.5).isMatching.value || typeof K == "string" && me(K, e, 0.5).isMatching.value || typeof S == "string" && me(S, e, 0.5).isMatching.value;
-      }) : w.value;
+      return o ? (u = v.value) == null ? void 0 : u.filter((c) => {
+        const i = c[t.optionLabelKey], C = c[t.optionValueKey], T = c[t.optionInputValueKey];
+        return J(i, o) || J(T, o) || J(C, o) || typeof i == "string" && me(i, o, 0.5).isMatching.value || typeof T == "string" && me(T, o, 0.5).isMatching.value || typeof C == "string" && me(C, o, 0.5).isMatching.value;
+      }) : v.value;
     }
-    const H = v(() => ze(r.value));
-    async function x(e) {
-      var f, i;
-      if (!k.value)
+    const Y = m(() => ze(r.value));
+    async function x(o) {
+      var c, i;
+      if (!I.value)
         return;
-      if (e && ("relatedTarget" in e && ((f = O.value) != null && f.contains(e.relatedTarget)) || e.type === "keydown"))
-        return e.preventDefault();
-      const u = e && "relatedTarget" in e && e.relatedTarget instanceof HTMLElement && e.relatedTarget.getAttribute("id");
+      if (o && ("relatedTarget" in o && ((c = h.value) != null && c.contains(o.relatedTarget)) || o.type === "keydown"))
+        return o.preventDefault();
+      const u = o && "relatedTarget" in o && o.relatedTarget instanceof HTMLElement && o.relatedTarget.getAttribute("id");
       if ((i = t.excludeSelectors) != null && i.includes(`#${u}`))
-        return e == null ? void 0 : e.preventDefault();
-      await ne(), F.value = !1, y.value = 0, I("close", e);
+        return o == null ? void 0 : o.preventDefault();
+      await ne(), A.value = !1, y.value = 0, d("close", o);
     }
-    async function _(e) {
-      t.disabled || k.value || (e == null || e.preventDefault(), F.value = !0, await de(), I("focus", e), I("open", F.value));
+    async function _(o) {
+      t.disabled || I.value || (o == null || o.preventDefault(), A.value = !0, await de(), d("focus", o), d("open", A.value));
     }
     function Ce() {
-      var e, u;
-      (u = ((e = G.value) == null ? void 0 : e.$el).querySelector("input")) == null || u.focus();
+      var o, u;
+      (u = ((o = G.value) == null ? void 0 : o.$el).querySelector("input")) == null || u.focus();
     }
-    function De(e) {
-      F.value ? x(e) : Ce();
+    function De(o) {
+      A.value ? x(o) : Ce();
     }
-    function Oe(e) {
-      var u, f;
-      r.value = e, (f = ((u = a.value) == null ? void 0 : u.$el).querySelector("input")) == null || f.focus();
+    function Oe(o) {
+      var u, c;
+      r.value = o, (c = ((u = a.value) == null ? void 0 : u.$el).querySelector("input")) == null || c.focus();
     }
-    function Ue(e) {
-      var f;
-      e === "Backspace" && E.value.length > 0 ? E.value = E.value.slice(0, -1) : E.value += e;
-      const u = ze(E.value);
-      u != null && u.length && (y.value = (f = H.value) == null ? void 0 : f.findIndex(
+    function Ue(o) {
+      var c;
+      o === "Backspace" && F.value.length > 0 ? F.value = F.value.slice(0, -1) : F.value += o;
+      const u = ze(F.value);
+      u != null && u.length && (y.value = (c = Y.value) == null ? void 0 : c.findIndex(
         (i) => i[t.optionValueKey] === u[0][t.optionValueKey]
-      ), typeof y.value == "number" && y.value >= 0 && de(y.value)), mo(() => {
-        E.value = "";
+      ), typeof y.value == "number" && y.value >= 0 && de(y.value)), ro(() => {
+        F.value = "";
       }, 1e3);
     }
-    const Ye = (e) => {
-      const u = e.key;
-      /^[\dA-Za-z\u0400-\u04FF]$/.test(u) ? (e.preventDefault(), _(e), t.search ? Oe(u) : Ue(u)) : Ve(e);
-    }, Ve = (e) => {
-      const u = e.code, f = ["ArrowUp", "ArrowDown"].includes(u), i = ["Enter", "Space"].includes(u), S = u === "Escape" && k.value;
-      f ? qe(e, y.value) : i ? He(e, y.value) : S && x(e);
-    }, qe = (e, u) => {
-      var S;
-      e.preventDefault();
-      const f = e.code;
-      k.value || _(e);
-      const i = (S = H.value) == null ? void 0 : S.length;
-      i && (typeof u == "number" ? u === i - 1 && f === "ArrowDown" ? y.value = 0 : u === 0 && f === "ArrowUp" ? y.value = i - 1 : y.value = f === "ArrowDown" ? u + 1 : u - 1 : y.value = f === "ArrowDown" ? 0 : i - 1, de(y.value));
-    }, He = (e, u) => {
-      var i, S, K;
-      if (e.preventDefault(), !k.value)
-        return _(e);
-      const f = u ? ((i = H.value) == null ? void 0 : i[u]) ?? ((S = H.value) == null ? void 0 : S[0]) : (K = H.value) == null ? void 0 : K[0];
-      L(f) || we(f);
-    };
-    async function de(e) {
-      var f, i;
-      await ne(), typeof e != "number" && ce();
-      const u = e ?? y.value;
-      typeof u == "number" && u >= 0 && ((i = (f = B.value) == null ? void 0 : f.querySelectorAll(".m-select-list-item")[u]) == null || i.scrollIntoView({
-        behavior: "auto",
-        block: "nearest",
-        inline: "start"
-      }));
+    function Ye(o) {
+      const u = o.key;
+      /^[\dA-Za-z\u0400-\u04FF]$/.test(u) ? (o.preventDefault(), _(o), t.search ? Oe(u) : Ue(u)) : Ve(o);
+    }
+    function Ve(o) {
+      const u = o.code, c = ["ArrowUp", "ArrowDown"].includes(u), i = ["Enter", "Space"].includes(u), C = u === "Escape" && I.value;
+      c ? qe(o, y.value) : i ? He(o, y.value) : C && x(o);
     }
-    function ce(e) {
-      var f;
-      const u = (f = H.value) == null ? void 0 : f.findIndex((i) => {
-        var S, K;
-        return t.multiple && Array.isArray(t.modelValue) ? e ? e[t.optionValueKey] === i[t.optionValueKey] : [...t.modelValue].reverse()[0] === i[t.optionValueKey] : ((K = (S = D.value) == null ? void 0 : S[0]) == null ? void 0 : K[t.optionValueKey]) === i[t.optionValueKey];
+    function qe(o, u) {
+      var C;
+      o.preventDefault();
+      const c = o.code;
+      I.value || _(o);
+      const i = (C = Y.value) == null ? void 0 : C.length;
+      i && (typeof u == "number" ? u === i - 1 && c === "ArrowDown" ? y.value = 0 : u === 0 && c === "ArrowUp" ? y.value = i - 1 : y.value = c === "ArrowDown" ? u + 1 : u - 1 : y.value = c === "ArrowDown" ? 0 : i - 1, de(y.value));
+    }
+    function He(o, u) {
+      var i, C, T;
+      if (o.preventDefault(), !I.value)
+        return _(o);
+      const c = u ? ((i = Y.value) == null ? void 0 : i[u]) ?? ((C = Y.value) == null ? void 0 : C[0]) : (T = Y.value) == null ? void 0 : T[0];
+      E(c) || we(c);
+    }
+    async function de(o) {
+      var c, i;
+      await ne(), typeof o != "number" && ce();
+      const u = o ?? y.value;
+      if (typeof u == "number" && u >= 0) {
+        const C = (c = $.value) == null ? void 0 : c.querySelectorAll(".m-select-list-item");
+        (i = C == null ? void 0 : C[u]) == null || i.scrollIntoView({
+          behavior: "auto",
+          block: "nearest",
+          inline: "start"
+        });
+      }
+    }
+    function ce(o) {
+      var c;
+      const u = (c = Y.value) == null ? void 0 : c.findIndex((i) => {
+        var C, T;
+        return t.multiple && Array.isArray(t.modelValue) ? o ? o[t.optionValueKey] === i[t.optionValueKey] : [...t.modelValue].reverse()[0] === i[t.optionValueKey] : ((T = (C = z.value) == null ? void 0 : C[0]) == null ? void 0 : T[t.optionValueKey]) === i[t.optionValueKey];
       });
       y.value = u && u >= 0 ? u : 0;
     }
-    function we(e, u = !0) {
-      var K;
+    function we(o, u = !0) {
+      var T;
       u && !t.multiple && ne(() => x()), r.value = "";
-      const f = (K = D.value) == null ? void 0 : K.some(
-        (ee) => ee[t.optionValueKey] === e[t.optionValueKey]
+      const c = (T = z.value) == null ? void 0 : T.some(
+        (ee) => ee[t.optionValueKey] === o[t.optionValueKey]
       );
-      let i = D.value;
-      f && t.multiple ? i = i == null ? void 0 : i.filter(
-        (ee) => ee[t.optionValueKey] !== e[t.optionValueKey]
-      ) : t.multiple ? i.push(e) : i = [e];
-      const S = i.map((ee) => ee[t.optionValueKey]);
-      I("update:model-value", t.multiple ? S : S[0]), I("selected-option", e), ce(e), Ce();
+      let i = z.value;
+      c && t.multiple ? i = i == null ? void 0 : i.filter(
+        (ee) => ee[t.optionValueKey] !== o[t.optionValueKey]
+      ) : t.multiple ? i.push(o) : i = [o];
+      const C = i.map((ee) => ee[t.optionValueKey]);
+      d("update:model-value", t.multiple ? C : C[0]), d("selected-option", o), ce(o), Ce();
     }
-    return (e, u) => {
-      var f;
-      return Ae((z(), M(
+    return (o, u) => {
+      var c;
+      return Pe((V(), L(
         "div",
         {
           ref_key: "mazSelectElement",
-          ref: O,
+          ref: h,
           class: N(["m-select", [
-            { "--is-open": k.value, "--disabled": e.disabled, "--block": e.block },
+            { "--is-open": I.value, "--disabled": o.disabled, "--block": o.block },
             t.class,
-            `--${e.size}`
+            `--${o.size}`
           ]]),
-          style: te(e.style)
+          style: te(o.style)
         },
         [
-          Z(he, ie({
-            id: P(Y),
+          Z(he, re({
+            id: P(O),
             ref_key: "mazInputComponent",
             ref: G,
             class: "m-select-input"
-          }, e.$attrs, {
-            required: e.required,
-            "border-active": F.value,
-            color: e.color,
-            "model-value": q.value,
+          }, o.$attrs, {
+            required: o.required,
+            "border-active": A.value,
+            color: o.color,
+            "model-value": U.value,
             autocomplete: "off",
-            size: e.size,
+            size: o.size,
             block: "",
-            disabled: e.disabled,
+            disabled: o.disabled,
             onFocus: oe(_, ["prevent", "stop"]),
             onBlur: oe(x, ["prevent", "stop"]),
             onClick: oe(_, ["prevent", "stop"]),
-            onChange: u[0] || (u[0] = (i) => I("change", i)),
+            onChange: u[0] || (u[0] = (i) => d("change", i)),
             onKeydown: Ye
           }), {
-            "right-icon": Q(() => [
-              W("button", {
+            "right-icon": j(() => [
+              H("button", {
                 tabindex: "-1",
                 type: "button",
                 class: "m-select-input__toggle-button maz-custom",
-                "aria-label": `${k.value ? "collapse" : "expand"} list of options`,
+                "aria-label": `${I.value ? "collapse" : "expand"} list of options`,
                 onClick: oe(De, ["stop"])
               }, [
-                Z(P(p), { class: "m-select-chevron maz-text-xl" })
+                Z(P(k), { class: "m-select-chevron maz-text-xl" })
               ], 8, Co)
             ]),
             _: 1
             /* STABLE */
           }, 16, ["id", "required", "border-active", "color", "model-value", "size", "disabled"]),
           Z(Xe, { name: le.value }, {
-            default: Q(() => [
-              k.value ? (z(), M(
+            default: j(() => [
+              I.value ? (V(), L(
                 "div",
                 {
                   key: 0,
                   ref_key: "optionsListElement",
-                  ref: B,
+                  ref: $,
                   class: N(["m-select-list", {
-                    "--top": e.listPosition.includes("top"),
-                    "--left": e.listPosition.includes("left"),
-                    "--right": e.listPosition.includes("right"),
-                    "--bottom": e.listPosition.includes("bottom")
+                    "--top": o.listPosition.includes("top"),
+                    "--left": o.listPosition.includes("left"),
+                    "--right": o.listPosition.includes("right"),
+                    "--bottom": o.listPosition.includes("bottom")
                   }]),
                   style: te({
-                    maxHeight: `${e.maxListHeight}px`,
-                    maxWidth: `${e.maxListWidth}px`
+                    maxHeight: `${o.maxListHeight}px`,
+                    maxWidth: `${o.maxListWidth}px`
                   })
                 },
                 [
-                  e.search ? (z(), U(he, {
+                  o.search ? (V(), D(he, {
                     key: 0,
                     ref_key: "searchInputComponent",
                     ref: a,
@@ -723,79 +735,79 @@ const zo = {
                       u[2] || (u[2] = (i) => y.value = 0)
                     ],
                     size: "sm",
-                    color: e.color,
-                    placeholder: e.searchPlaceholder,
+                    color: o.color,
+                    placeholder: o.searchPlaceholder,
                     name: "search",
                     autocomplete: "off",
                     tabindex: "-1",
                     class: "m-select-list__search-input maz-flex-none",
-                    "left-icon": P(c),
+                    "left-icon": P(b),
                     onKeydown: Ve
-                  }, null, 8, ["modelValue", "color", "placeholder", "left-icon"])) : h("v-if", !0),
-                  h(`
+                  }, null, 8, ["modelValue", "color", "placeholder", "left-icon"])) : g("v-if", !0),
+                  g(`
           @slot No results slot - Displayed when no results corresponding with search query
         `),
-                  !H.value || H.value.length <= 0 ? R(e.$slots, "no-results", { key: 1 }, () => [
-                    W("span", Vo, [
-                      Z(P(g), { class: "maz-h-6 maz-w-6 maz-text-normal" })
+                  !Y.value || Y.value.length <= 0 ? R(o.$slots, "no-results", { key: 1 }, () => [
+                    H("span", Vo, [
+                      Z(P(K), { class: "maz-h-6 maz-w-6 maz-text-normal" })
                     ])
-                  ], !0) : (z(), M("div", wo, [
-                    (z(!0), M(
+                  ], !0) : (V(), L("div", wo, [
+                    (V(!0), L(
                       Ie,
                       null,
-                      xe(H.value, (i, S) => (z(), M(
+                      xe(Y.value, (i, C) => (V(), L(
                         Ie,
-                        { key: S },
+                        { key: C },
                         [
-                          h(`
+                          g(`
               @slot Custom optgroup label
                 @binding {String} label - the label of the optgroup
             `),
-                          i.label && i.isOptGroup ? R(e.$slots, "optgroup", {
+                          i.label && i.isOptGroup ? R(o.$slots, "optgroup", {
                             key: 0,
                             label: i.label
                           }, () => [
-                            W(
+                            H(
                               "span",
                               So,
                               X(i.label),
                               1
                               /* TEXT */
                             )
-                          ], !0) : (z(), M("button", {
+                          ], !0) : (V(), L("button", {
                             key: 1,
                             tabindex: "-1",
                             type: "button",
                             class: N(["m-select-list-item maz-custom maz-flex-none", [
                               {
-                                "--is-keyboard-selected": y.value === S,
-                                "--is-selected": T(i),
-                                "--is-none-value": L(i[e.optionValueKey])
+                                "--is-keyboard-selected": y.value === C,
+                                "--is-selected": M(i),
+                                "--is-none-value": E(i[o.optionValueKey])
                               }
                             ]]),
-                            style: te(e.itemHeight ? { height: `${e.itemHeight}px` } : void 0),
-                            onClick: oe((K) => we(i), ["prevent", "stop"])
+                            style: te(o.itemHeight ? { height: `${o.itemHeight}px` } : void 0),
+                            onClick: oe((T) => we(i), ["prevent", "stop"])
                           }, [
-                            e.multiple ? (z(), U(P(d), {
+                            o.multiple ? (V(), D(P(f), {
                               key: 0,
                               tabindex: "-1",
-                              "model-value": T(i),
+                              "model-value": M(i),
                               size: "sm",
-                              color: e.color
-                            }, null, 8, ["model-value", "color"])) : h("v-if", !0),
-                            h(`
+                              color: o.color
+                            }, null, 8, ["model-value", "color"])) : g("v-if", !0),
+                            g(`
                 @slot Custom option
                   @binding {Object} option - the option object
                   @binding {Boolean} is-selected - if the option is selected
               `),
-                            R(e.$slots, "default", {
+                            R(o.$slots, "default", {
                               option: i,
-                              isSelected: T(i)
+                              isSelected: M(i)
                             }, () => [
-                              W(
+                              H(
                                 "span",
                                 null,
-                                X(i[e.optionLabelKey]),
+                                X(i[o.optionLabelKey]),
                                 1
                                 /* TEXT */
                               )
@@ -812,7 +824,7 @@ const zo = {
                 ],
                 6
                 /* CLASS, STYLE */
-              )) : h("v-if", !0)
+              )) : g("v-if", !0)
             ]),
             _: 3
             /* FORWARDED */
@@ -821,24 +833,30 @@ const zo = {
         6
         /* CLASS, STYLE */
       )), [
-        [P(zo), {
-          exclude: (f = e.excludeSelectors) != null && f.length ? e.excludeSelectors : [],
+        [P(po), {
+          exclude: (c = o.excludeSelectors) != null && c.length ? o.excludeSelectors : [],
           handler: x
         }]
       ]);
     };
   }
-}), $o = /* @__PURE__ */ re(ko, [["__scopeId", "data-v-05b98a1b"]]);
+}), $o = /* @__PURE__ */ se(ko, [["__scopeId", "data-v-fe0403c3"]]);
 function Me(n) {
   return !!n;
 }
 function $e(n) {
   return [...n].map((l) => {
-    const o = l.codePointAt(0);
-    return o ? o % 32 + 127461 : void 0;
+    const e = l.codePointAt(0);
+    return e ? e % 32 + 127461 : void 0;
   }).filter(Me).map((l) => String.fromCodePoint(l)).join("");
 }
-function Te() {
+function Te(n, l) {
+  const e = _e(n, l);
+  if (!e)
+    throw new TypeError(`[maz-ui](injectStrict) Could not resolve ${n}`);
+  return e;
+}
+function Ke() {
   if (typeof window > "u")
     return;
   const n = window.navigator.language;
@@ -851,30 +869,30 @@ function Te() {
   };
 }
 let ye, Be;
-function Bo(n, l, o) {
-  return o != null && o[l] ? o[l] : ((Be !== n || !ye) && (Be = n, ye = new Intl.DisplayNames([n], { type: "region" })), ye.of(l));
+function Bo(n, l, e) {
+  return e != null && e[l] ? e[l] : ((Be !== n || !ye) && (Be = n, ye = new Intl.DisplayNames([n], { type: "region" })), ye.of(l));
 }
-function Ao(n, l) {
-  var c;
-  const o = [], d = Pe();
-  n = n ?? ((c = Te()) == null ? void 0 : c.browserLocale) ?? "en-US";
-  for (const p of d) {
-    const g = Bo(n, p, l);
-    if (g)
+function Po(n, l) {
+  var d;
+  const e = [], t = Ae();
+  n = n ?? ((d = Ke()) == null ? void 0 : d.browserLocale) ?? "en-US";
+  for (const f of t) {
+    const b = Bo(n, f, l);
+    if (b)
       try {
-        const t = se(p);
-        o.push({
-          iso2: p,
-          dialCode: t,
-          name: g
+        const k = ue(f);
+        e.push({
+          iso2: f,
+          dialCode: k,
+          name: b
         });
-      } catch (t) {
-        console.error(`[MazPhoneNumberInput](getCountryCallingCode) ${t}`);
+      } catch (k) {
+        console.error(`[MazPhoneNumberInput](getCountryCallingCode) ${k}`);
       }
   }
-  return o;
+  return e;
 }
-async function Po() {
+async function Ao() {
   try {
     const n = await fetch("https://ipwho.is"), { country_code: l } = await n.json();
     return l;
@@ -888,20 +906,14 @@ function Fo(n) {
   const l = new RegExp(/[^\d ()+-]/g);
   return n.replaceAll(l, "").trim();
 }
-function Ke() {
+function Ne() {
   return {
     sanitizePhoneNumber: Fo,
-    fetchCountryCode: Po,
-    getBrowserLocale: Te,
-    getCountriesList: Ao
+    fetchCountryCode: Ao,
+    getBrowserLocale: Ke,
+    getCountriesList: Po
   };
 }
-function Ne(n, l) {
-  const o = _e(n, l);
-  if (!o)
-    throw new TypeError(`[maz-ui](injectStrict) Could not resolve ${n}`);
-  return o;
-}
 const Eo = ["id"], Lo = {
   key: 0,
   class: "maz-text-lg"
@@ -933,55 +945,55 @@ const Eo = ["id"], Lo = {
   },
   emits: ["update:model-value"],
   setup(n) {
-    const l = n, { phoneNumber: o } = Ne("data"), d = A(), { getCountriesList: c } = Ke(), p = v(() => c(l.countryLocale, l.customCountriesList)), g = v(
+    const l = n, { phoneNumber: e } = Te("data"), t = B(), { getCountriesList: d } = Ne(), f = m(() => d(l.countryLocale, l.customCountriesList)), b = m(
       () => {
         var s;
-        return (s = p.value) == null ? void 0 : s.filter((m) => {
-          var C;
-          return !((C = l.ignoredCountries) != null && C.includes(m.iso2));
+        return (s = f.value) == null ? void 0 : s.filter((p) => {
+          var w;
+          return !((w = l.ignoredCountries) != null && w.includes(p.iso2));
         });
       }
-    ), t = v(() => {
+    ), k = m(() => {
       const s = l.onlyCountries || l.preferredCountries;
       return s == null ? void 0 : s.map(
-        (m) => {
-          var C;
-          return (C = g.value) == null ? void 0 : C.find((k) => k.iso2.includes(m));
+        (p) => {
+          var w;
+          return (w = b.value) == null ? void 0 : w.find((I) => I.iso2.includes(p));
         }
       );
-    }), I = v(
+    }), K = m(
       () => {
         var s;
-        return (s = g.value) == null ? void 0 : s.filter((m) => {
-          var C;
-          return !((C = l.preferredCountries) != null && C.includes(m.iso2));
+        return (s = b.value) == null ? void 0 : s.filter((p) => {
+          var w;
+          return !((w = l.preferredCountries) != null && w.includes(p.iso2));
         });
       }
-    ), F = v(
-      () => l.preferredCountries ? [...t.value ?? [], ...I.value ?? []] : l.onlyCountries ? t.value : g.value
-    ), y = v(
+    ), A = m(
+      () => l.preferredCountries ? [...k.value ?? [], ...K.value ?? []] : l.onlyCountries ? k.value : b.value
+    ), y = m(
       () => {
         var s;
-        return (s = F.value) == null ? void 0 : s.map(
-          (m) => m ? {
-            ...m,
-            dialCode: `+${m.dialCode}`
+        return (s = A.value) == null ? void 0 : s.map(
+          (p) => p ? {
+            ...p,
+            dialCode: `+${p.dialCode}`
           } : void 0
         ).filter(Me);
       }
     );
-    async function V() {
-      var s, m;
-      (m = (s = d.value) == null ? void 0 : s.$el.querySelector("input")) == null || m.focus();
+    async function S() {
+      var s, p;
+      (p = (s = t.value) == null ? void 0 : s.$el.querySelector("input")) == null || p.focus();
     }
-    return (s, m) => (z(), M(
+    return (s, p) => (V(), L(
       "div",
       {
         class: N(["m-country-selector", [l.class, { "--no-flags": s.noFlags }]]),
         style: te(s.style)
       },
       [
-        s.modelValue && !s.noFlags ? (z(), M("button", {
+        s.modelValue && !s.noFlags ? (V(), L("button", {
           key: 0,
           id: `country-selector-flag-button-${s.id}`,
           class: N(["m-country-selector__country-flag maz-text-xl", {
@@ -989,9 +1001,9 @@ const Eo = ["id"], Lo = {
           }]),
           tabindex: "-1",
           type: "button",
-          onClick: V
+          onClick: S
         }, [
-          h(`
+          g(`
         @slot Country selector flag
           @binding {String} country-code - current selected country code - Ex: \`"FR"\`
       `),
@@ -1002,11 +1014,11 @@ const Eo = ["id"], Lo = {
               /* TEXT */
             )
           ], !0)
-        ], 10, Eo)) : h("v-if", !0),
-        Z($o, ie({
+        ], 10, Eo)) : g("v-if", !0),
+        Z($o, re({
           id: `country-selector-${s.id}`,
           ref_key: "CountrySelectorRef",
-          ref: d,
+          ref: t,
           "model-value": s.modelValue
         }, s.$attrs, {
           class: "m-country-selector__select",
@@ -1024,61 +1036,61 @@ const Eo = ["id"], Lo = {
           search: !s.noSearch,
           "search-placeholder": s.locales.countrySelector.searchPlaceholder,
           options: y.value,
-          hint: P(o) && !s.modelValue ? s.locales.countrySelector.error : void 0,
+          hint: P(e) && !s.modelValue ? s.locales.countrySelector.error : void 0,
           label: s.locales.countrySelector.placeholder,
           style: {
             width: s.width
           },
           "exclude-selectors": [`#country-selector-flag-button-${s.id}`, ...s.excludeSelectors ?? []],
-          "onUpdate:modelValue": m[0] || (m[0] = (C) => s.$emit("update:model-value", C))
+          "onUpdate:modelValue": p[0] || (p[0] = (w) => s.$emit("update:model-value", w))
         }), {
-          "no-results": Q(() => [
+          "no-results": j(() => [
             R(s.$slots, "no-results", {}, void 0, !0)
           ]),
-          default: Q(({ option: C, isSelected: k }) => [
-            W(
+          default: j(({ option: w, isSelected: I }) => [
+            H(
               "div",
               {
                 class: N(["m-country-selector__select__item maz-flex maz-items-center maz-gap-1 maz-truncate", {
-                  "m-country-selector__select__item--selected": k
+                  "m-country-selector__select__item--selected": I
                 }])
               },
               [
-                !s.noFlags && typeof C.iso2 == "string" ? (z(), M("span", Lo, [
-                  h(`
+                !s.noFlags && typeof w.iso2 == "string" ? (V(), L("span", Lo, [
+                  g(`
               @slot Country list flag
                 @binding {String} country-code - country code of option - Ex: \`"FR"\`
                 @binding {{ iso2: string; dialCode: string; name: string; }} option - country data
                 @binding {Boolean} is-selected - \`true\` if option is selected
             `),
                   R(s.$slots, "country-list-flag", {
-                    countryCode: C.iso2,
-                    option: C,
-                    isSelected: k
+                    countryCode: w.iso2,
+                    option: w,
+                    isSelected: I
                   }, () => [
                     ve(
-                      X(P($e)(C.iso2)),
+                      X(P($e)(w.iso2)),
                       1
                       /* TEXT */
                     )
                   ], !0)
-                ])) : h("v-if", !0),
-                s.showCodeOnList ? (z(), M(
+                ])) : g("v-if", !0),
+                s.showCodeOnList ? (V(), L(
                   "span",
                   {
                     key: 1,
-                    class: N(["maz-w-9 maz-flex-none", { "maz-text-muted": !k }])
+                    class: N(["maz-w-9 maz-flex-none", { "maz-text-muted": !I }])
                   },
-                  X(C.dialCode),
+                  X(w.dialCode),
                   3
                   /* TEXT, CLASS */
-                )) : h("v-if", !0),
-                W(
+                )) : g("v-if", !0),
+                H(
                   "span",
                   {
-                    class: N(["maz-flex-1 maz-truncate", { "maz-font-semibold": k }])
+                    class: N(["maz-flex-1 maz-truncate", { "maz-font-semibold": I }])
                   },
-                  X(C.name),
+                  X(w.name),
                   3
                   /* TEXT, CLASS */
                 )
@@ -1095,7 +1107,7 @@ const Eo = ["id"], Lo = {
       /* CLASS, STYLE */
     ));
   }
-}), To = /* @__PURE__ */ re(Mo, [["__scopeId", "data-v-b24f2449"]]);
+}), To = /* @__PURE__ */ se(Mo, [["__scopeId", "data-v-1e2814b9"]]);
 function Ko(n) {
   try {
     const l = to(n);
@@ -1114,47 +1126,47 @@ function No({
         isValid: !1,
         countryCode: l
       };
-    const o = lo(n, l);
+    const e = lo(n, l);
     return {
-      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,
-      nationalNumber: o == null ? void 0 : o.nationalNumber,
-      type: o == null ? void 0 : o.getType(),
-      formatInternational: o == null ? void 0 : o.formatInternational(),
-      formatNational: o == null ? void 0 : o.formatNational(),
-      uri: o == null ? void 0 : o.getURI(),
-      e164: o == null ? void 0 : o.format("E.164"),
-      rfc3966: o == null ? void 0 : o.format("RFC3966"),
+      countryCode: (e == null ? void 0 : e.country) ?? l,
+      isValid: (e == null ? void 0 : e.isValid()) ?? !1,
+      isPossible: e == null ? void 0 : e.isPossible(),
+      countryCallingCode: e == null ? void 0 : e.countryCallingCode,
+      nationalNumber: e == null ? void 0 : e.nationalNumber,
+      type: e == null ? void 0 : e.getType(),
+      formatInternational: e == null ? void 0 : e.formatInternational(),
+      formatNational: e == null ? void 0 : e.formatNational(),
+      uri: e == null ? void 0 : e.getURI(),
+      e164: e == null ? void 0 : e.format("E.164"),
+      rfc3966: e == null ? void 0 : e.format("RFC3966"),
       phoneNumber: n
     };
-  } catch (o) {
-    throw new Error(`[MazPhoneNumberInput](getResultsFromPhoneNumber) ${o}`);
+  } catch (e) {
+    throw new Error(`[MazPhoneNumberInput](getResultsFromPhoneNumber) ${e}`);
   }
 }
 function Ro(n, l) {
   try {
     return l ? new no(n).input(l) : "";
-  } catch (o) {
-    throw new Error(`[MazPhoneNumberInput](getAsYouTypeFormat) ${o}`);
+  } catch (e) {
+    throw new Error(`[MazPhoneNumberInput](getAsYouTypeFormat) ${e}`);
   }
 }
 async function Do() {
-  const { default: n } = await import("./examples.mobile.json-um0ibyv5.mjs");
+  const { default: n } = await import("./examples.mobile.json-JpNGylGv.mjs");
   return n;
 }
 function Oo(n, l) {
-  var o;
+  var e;
   try {
-    return n && l ? (o = ao(l, n)) == null ? void 0 : o.formatNational() : void 0;
-  } catch (d) {
-    console.error(`[maz-ui](MazPhoneNumberInput) ${d}`);
+    return n && l ? (e = ao(l, n)) == null ? void 0 : e.formatNational() : void 0;
+  } catch (t) {
+    console.error(`[maz-ui](MazPhoneNumberInput) ${t}`);
   }
 }
 function Re() {
-  function n(l, o) {
-    return se(l) === se(o);
+  function n(l, e) {
+    return ue(l) === ue(e);
   }
   return {
     getAsYouTypeFormat: Ro,
@@ -1163,8 +1175,8 @@ function Re() {
     getPhoneNumberExample: Oo,
     isSameCountryCallingCode: n,
     isCountryAvailable: Ko,
-    getCountries: Pe,
-    getCountryCallingCode: se
+    getCountries: Ae,
+    getCountryCallingCode: ue
   };
 }
 const Uo = /* @__PURE__ */ ae({
@@ -1175,6 +1187,7 @@ const Uo = /* @__PURE__ */ ae({
     size: {},
     locales: {},
     label: { default: void 0 },
+    placeholder: { default: void 0 },
     noExample: { type: Boolean },
     disabled: { type: Boolean },
     hasRadius: { type: Boolean },
@@ -1188,63 +1201,71 @@ const Uo = /* @__PURE__ */ ae({
   }),
   emits: /* @__PURE__ */ ke(["update:model-value"], ["update:modelValue"]),
   setup(n, { emit: l }) {
-    const o = n, d = l, c = eo(n, "modelValue"), { getPhoneNumberExamplesFile: p, getPhoneNumberExample: g } = Re(), { selectionRange: t, results: I, selectedCountry: F } = Ne("data"), y = A(), V = A(!1), s = v(() => {
-      var $;
-      if (o.label)
-        return o.label;
-      const b = o.locales.phoneInput.placeholder;
-      if (o.noExample || !y.value)
-        return b;
+    const e = n, t = l, d = eo(n, "modelValue"), { getPhoneNumberExamplesFile: f, getPhoneNumberExample: b } = Re(), { selectionRange: k, results: K, selectedCountry: A } = Te("data"), y = B(), S = B(!1);
+    function s(v, z) {
+      const h = b(v, z);
+      return h ? `${e.locales.phoneInput.example} ${h}` : void 0;
+    }
+    const p = m(() => {
+      var z;
+      if (e.label || e.placeholder)
+        return e.label || e.placeholder;
+      const v = e.locales.phoneInput.placeholder;
+      if (e.noExample || !y.value)
+        return v;
       {
-        const w = g(y.value, F.value);
-        return ($ = I.value) != null && $.isValid || !w ? b : `${o.locales.phoneInput.example} ${w}`;
+        const h = s(y.value, A.value);
+        return (z = K.value) != null && z.isValid || !h ? v : h;
       }
-    }), m = A();
-    async function C() {
+    }), w = m(() => e.placeholder ? {
+      placeholder: p.value
+    } : {
+      label: p.value
+    }), I = B();
+    async function O() {
       try {
         if (y.value)
           return;
-        y.value = await p();
-      } catch (b) {
-        console.error("[maz-ui](MazPhoneNumberInput) while loading phone number examples file", b);
+        y.value = await f();
+      } catch (v) {
+        console.error("[maz-ui](MazPhoneNumberInput) while loading phone number examples file", v);
       }
     }
-    async function k(b) {
-      m.value && b && Y(m.value, b), await ne(), d("update:model-value", b);
+    async function W(v) {
+      I.value && v && Q(I.value, v), await ne(), t("update:model-value", v);
     }
-    function Y(b, $) {
-      const w = b.$el.querySelector("input");
-      t.value.start = w == null ? void 0 : w.selectionStart, t.value.end = w == null ? void 0 : w.selectionEnd, t.value.cursorAtEnd = $ && typeof t.value.start == "number" && $.length > 0 ? t.value.start >= $.length : !0;
+    function Q(v, z) {
+      const h = v.$el.querySelector("input");
+      k.value.start = h == null ? void 0 : h.selectionStart, k.value.end = h == null ? void 0 : h.selectionEnd, k.value.cursorAtEnd = z && typeof k.value.start == "number" && z.length > 0 ? k.value.start >= z.length : !0;
     }
     return ge(() => {
-      o.noExample || C();
-    }), (b, $) => (z(), U(he, ie({
-      id: b.id,
+      e.noExample || O();
+    }), (v, z) => (V(), D(he, re({
+      id: v.id,
       ref_key: "PhoneInputRef",
-      ref: m,
-      "model-value": c.value
-    }, b.$attrs, {
-      label: s.value,
-      disabled: b.disabled,
-      color: b.color,
-      error: b.error,
-      size: b.size,
-      success: b.success,
+      ref: I,
+      "model-value": d.value
+    }, { ...v.$attrs, ...w.value }, {
+      disabled: v.disabled,
+      color: v.color,
+      error: v.error,
+      size: v.size,
+      success: v.success,
       type: "tel",
       inputmode: "tel",
       class: ["m-phone-input", [
         {
-          "--border-radius": b.hasRadius,
-          "--error": b.error || !P(I).isValid,
-          "--focused": V.value
+          "--border-radius": v.hasRadius,
+          "--error": v.error || !P(K).isValid,
+          "--focused": S.value
         }
       ]],
-      onFocus: $[0] || ($[0] = (w) => V.value = !0),
-      onBlur: $[1] || ($[1] = (w) => V.value = !1),
-      "onUpdate:modelValue": $[2] || ($[2] = (w) => k(w))
-    }), null, 16, ["id", "model-value", "label", "disabled", "color", "error", "size", "success", "class"]));
+      onFocus: z[0] || (z[0] = (h) => S.value = !0),
+      onBlur: z[1] || (z[1] = (h) => S.value = !1),
+      "onUpdate:modelValue": z[2] || (z[2] = (h) => W(h))
+    }), null, 16, ["id", "model-value", "disabled", "color", "error", "size", "success", "class"]));
   }
-}), Yo = /* @__PURE__ */ re(Uo, [["__scopeId", "data-v-5bc0c1a2"]]), qo = {
+}), Yo = /* @__PURE__ */ se(Uo, [["__scopeId", "data-v-f3c379ea"]]), qo = {
   countrySelector: {
     placeholder: "Country code",
     error: "Choose country",
@@ -1255,6 +1276,7 @@ const Uo = /* @__PURE__ */ ae({
     example: "Example:"
   }
 }, Ho = /* @__PURE__ */ ae({
+  name: "MazPhoneNumberInput",
   inheritAttrs: !1,
   __name: "MazPhoneNumberInput",
   props: {
@@ -1266,6 +1288,7 @@ const Uo = /* @__PURE__ */ ae({
     defaultCountryCode: { default: void 0 },
     id: { default: void 0 },
     placeholder: { default: void 0 },
+    label: { default: void 0 },
     preferredCountries: { default: void 0 },
     ignoredCountries: { default: void 0 },
     onlyCountries: { default: void 0 },
@@ -1297,149 +1320,149 @@ const Uo = /* @__PURE__ */ ae({
   },
   emits: ["update:model-value", "country-code", "update:country-code", "update", "data"],
   setup(n, { emit: l }) {
-    const o = l, d = n, { fetchCountryCode: c, sanitizePhoneNumber: p, getBrowserLocale: g } = Ke(), { isCountryAvailable: t, getPhoneNumberResults: I, getAsYouTypeFormat: F } = Re(), y = be({
+    const e = n, t = l, { fetchCountryCode: d, sanitizePhoneNumber: f, getBrowserLocale: b } = Ne(), { isCountryAvailable: k, getPhoneNumberResults: K, getAsYouTypeFormat: A } = Re(), y = be({
       componentName: "MazPhoneNumberInput",
-      providedId: d.id
-    }), V = A(""), s = A(), m = A({
+      providedId: e.id
+    }), S = B(""), s = B(), p = B({
       isValid: !1,
       countryCode: void 0
-    }), C = A({
+    }), w = B({
       start: 0,
       end: 0,
       cursorAtEnd: !0
     });
     oo("data", {
       selectedCountry: s,
-      phoneNumber: V,
-      results: m,
-      selectionRange: C
+      phoneNumber: S,
+      results: p,
+      selectionRange: w
     });
-    const k = v(() => ({
+    const I = m(() => ({
       ...qo,
-      ...d.translations
+      ...e.translations
     }));
     ge(async () => {
       var a;
-      if (D(d.countryCode ?? d.defaultCountryCode), d.fetchCountry && !s.value) {
-        const B = await c();
-        D(B);
+      if (z(e.countryCode ?? e.defaultCountryCode), e.fetchCountry && !s.value) {
+        const $ = await d();
+        z($);
       }
-      if (!d.defaultCountryCode && !d.noUseBrowserLocale && !s.value) {
-        const B = (a = g()) == null ? void 0 : a.locale;
-        D(B);
+      if (!e.defaultCountryCode && !e.noUseBrowserLocale && !s.value) {
+        const $ = (a = b()) == null ? void 0 : a.locale;
+        z($);
       }
     });
-    const Y = A();
-    function b() {
+    const O = B();
+    function W() {
       var a;
-      return (a = Y.value) == null ? void 0 : a.$el.querySelector("input");
+      return (a = O.value) == null ? void 0 : a.$el.querySelector("input");
     }
-    async function $() {
+    async function Q() {
       var a;
-      await ne(), (a = b()) == null || a.select();
+      await ne(), (a = W()) == null || a.select();
     }
-    function w(a) {
+    function v(a) {
       G({
         countryCode: a,
-        autoFormat: d.autoFormat,
-        noFormattingAsYouType: d.noFormattingAsYouType
-      }), $();
+        autoFormat: e.autoFormat,
+        noFormattingAsYouType: e.noFormattingAsYouType
+      }), Q();
     }
-    function D(a) {
+    function z(a) {
       if (a) {
-        if (!t(a)) {
+        if (!k(a)) {
           s.value = void 0;
           return;
         }
         s.value = a;
       }
     }
-    function O({
+    function h({
       newPhoneNumber: a,
-      autoFormat: B,
-      noFormattingAsYouType: L,
-      updateResults: T = !0
+      autoFormat: $,
+      noFormattingAsYouType: E,
+      updateResults: M = !0
     }) {
-      const q = p(a);
-      if (T && (m.value = I({
-        phoneNumber: q,
+      const U = f(a);
+      if (M && (p.value = K({
+        phoneNumber: U,
         countryCode: s.value
-      })), m.value.isValid && m.value.formatNational && B)
-        V.value = m.value.formatNational;
-      else if (C.value.cursorAtEnd && !L) {
-        const le = F(s.value, q);
-        V.value = le;
+      })), p.value.isValid && p.value.formatNational && $)
+        S.value = p.value.formatNational;
+      else if (w.value.cursorAtEnd && !E) {
+        const le = A(s.value, U);
+        S.value = le;
       } else
-        V.value = q;
-      m.value.countryCode && m.value.countryCode !== s.value && G({
-        countryCode: m.value.countryCode,
-        autoFormat: B,
-        noFormattingAsYouType: L,
+        S.value = U;
+      p.value.countryCode && p.value.countryCode !== s.value && G({
+        countryCode: p.value.countryCode,
+        autoFormat: $,
+        noFormattingAsYouType: E,
         updateResults: !1
       });
     }
     function G({
       countryCode: a,
-      autoFormat: B,
-      noFormattingAsYouType: L,
-      updateResults: T = !0
+      autoFormat: $,
+      noFormattingAsYouType: E,
+      updateResults: M = !0
     }) {
       if (!a) {
         s.value = void 0;
         return;
       }
-      a !== s.value && D(a), T && (m.value = I({
-        phoneNumber: V.value,
+      a !== s.value && z(a), M && (p.value = K({
+        phoneNumber: S.value,
         countryCode: a
-      })), O({
-        newPhoneNumber: V.value,
-        autoFormat: B,
-        noFormattingAsYouType: L,
+      })), h({
+        newPhoneNumber: S.value,
+        autoFormat: $,
+        noFormattingAsYouType: E,
         updateResults: !1
       });
     }
     return fe(
-      () => d.modelValue ?? d.defaultPhoneNumber,
-      (a, B) => {
-        a && a !== B && a !== V.value && O({
+      () => e.modelValue ?? e.defaultPhoneNumber,
+      (a, $) => {
+        a !== $ && a !== S.value && h({
           newPhoneNumber: a,
-          autoFormat: d.autoFormat,
-          noFormattingAsYouType: d.noFormattingAsYouType
+          autoFormat: e.autoFormat,
+          noFormattingAsYouType: e.noFormattingAsYouType
         });
       },
       {
         immediate: !0
       }
     ), fe(
-      () => d.countryCode ?? d.defaultCountryCode,
-      (a, B) => {
-        a && a !== B && a !== s.value && G({
+      () => e.countryCode ?? e.defaultCountryCode,
+      (a, $) => {
+        a && a !== $ && a !== s.value && G({
           countryCode: a,
-          autoFormat: d.autoFormat,
-          noFormattingAsYouType: d.noFormattingAsYouType
+          autoFormat: e.autoFormat,
+          noFormattingAsYouType: e.noFormattingAsYouType
         });
       },
       {
         immediate: !0
       }
     ), fe(
-      m,
+      p,
       (a) => {
-        o("update", a), o("data", a), a.e164 && a.isValid ? o("update:model-value", a.e164) : o("update:model-value", V.value), o("country-code", s.value), o("update:country-code", s.value);
+        t("update", a), t("data", a), a.e164 && a.isValid ? t("update:model-value", a.e164) : t("update:model-value", S.value), t("country-code", s.value), t("update:country-code", s.value);
       },
       {
         immediate: !0
       }
-    ), (a, B) => {
-      var L;
-      return z(), M(
+    ), (a, $) => {
+      var E;
+      return V(), L(
         "div",
         {
-          class: N(["m-phone-number-input", [d.class, { "--block": a.block }, a.orientation ? `--${a.orientation}` : void 0]]),
+          class: N(["m-phone-number-input", [e.class, { "--block": a.block }, a.orientation ? `--${a.orientation}` : void 0]]),
           style: te(a.style)
         },
         [
-          a.noCountrySelector ? h("v-if", !0) : (z(), U(To, {
+          a.noCountrySelector ? g("v-if", !0) : (V(), D(To, {
             key: 0,
             id: P(y),
             "model-value": s.value,
@@ -1453,78 +1476,80 @@ const Uo = /* @__PURE__ */ ae({
             "no-flags": a.noFlags,
             "no-search": a.noSearch,
             "exclude-selectors": a.excludeSelectors,
-            error: a.error || (a.noValidationError ? !1 : !!V.value && !s.value),
-            success: a.success || (a.noValidationSuccess ? !1 : (L = m.value) == null ? void 0 : L.isValid),
-            locales: k.value,
+            error: a.error || (a.noValidationError ? !1 : !!S.value && !s.value),
+            success: a.success || (a.noValidationSuccess ? !1 : (E = p.value) == null ? void 0 : E.isValid),
+            locales: I.value,
             disabled: a.disabled,
             "show-code-on-list": a.showCodeOnList,
             "only-countries": a.onlyCountries,
             "preferred-countries": a.preferredCountries,
             width: a.countrySelectorWidth,
-            "onUpdate:modelValue": w
+            "onUpdate:modelValue": v
           }, {
-            "no-results": Q(() => [
-              h(`
+            "no-results": j(() => [
+              g(`
           @slot Replace the "no results" icon in the country selector list
         `),
               R(a.$slots, "no-results", {}, void 0, !0)
             ]),
-            "selector-flag": Q(({ countryCode: T }) => [
-              h(`
+            "selector-flag": j(({ countryCode: M }) => [
+              g(`
           @slot Country selector flag
             @binding {String} country-code - current selected country code - Ex: \`"FR"\`
         `),
-              R(a.$slots, "selector-flag", { countryCode: T }, void 0, !0)
+              R(a.$slots, "selector-flag", { countryCode: M }, void 0, !0)
             ]),
-            "country-list-flag": Q(({ isSelected: T, option: q }) => [
-              h(`
+            "country-list-flag": j(({ isSelected: M, option: U }) => [
+              g(`
           @slot Country list flag
             @binding {String} country-code - country code of option - Ex: \`"FR"\`
             @binding {{ iso2: string; dialCode: string; name: string; }} option - country data
             @binding {Boolean} is-selected - \`true\` if option is selected
         `),
               R(a.$slots, "country-list-flag", {
-                countryCode: q.iso2,
-                option: q,
-                isSelected: T
+                countryCode: U.iso2,
+                option: U,
+                isSelected: M
               }, void 0, !0)
             ]),
             _: 3
             /* FORWARDED */
           }, 8, ["id", "model-value", "color", "size", "country-locale", "country-selector-display-name", "custom-countries-list", "ignored-countries", "list-position", "no-flags", "no-search", "exclude-selectors", "error", "success", "locales", "disabled", "show-code-on-list", "only-countries", "preferred-countries", "width"])),
-          Z(Yo, {
+          Z(Yo, re({
             id: P(y),
             ref_key: "PhoneInputRef",
-            ref: Y,
-            "model-value": V.value,
+            ref: O,
+            "model-value": S.value,
             color: a.color,
             size: a.size,
             "no-example": a.noExample,
             block: "",
-            disabled: a.disabled,
+            disabled: a.disabled
+          }, a.$attrs, {
             "has-radius": !a.noCountrySelector,
-            success: a.success || (a.noValidationSuccess ? !1 : m.value.isValid),
-            error: a.error || (a.noValidationError ? !1 : !!V.value && !m.value.isValid),
-            locales: k.value,
+            success: a.success || (a.noValidationSuccess ? !1 : p.value.isValid),
+            error: a.error || (a.noValidationError ? !1 : !!S.value && !p.value.isValid),
+            locales: I.value,
             "no-formatting-as-you-type": a.noFormattingAsYouType,
             "auto-format": a.autoFormat,
-            label: a.placeholder,
-            "onUpdate:modelValue": B[0] || (B[0] = (T) => O({
-              newPhoneNumber: T,
+            label: a.label,
+            placeholder: a.placeholder,
+            "onUpdate:modelValue": $[0] || ($[0] = (M) => h({
+              newPhoneNumber: M,
               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"])
+          }), null, 16, ["id", "model-value", "color", "size", "no-example", "disabled", "has-radius", "success", "error", "locales", "no-formatting-as-you-type", "auto-format", "label", "placeholder"])
         ],
         6
         /* CLASS, STYLE */
       );
     };
   }
-}), Qo = /* @__PURE__ */ re(Ho, [["__scopeId", "data-v-174cbd16"]]);
+}), Qo = /* @__PURE__ */ se(Ho, [["__scopeId", "data-v-4c988e15"]]);
 export {
   Qo as M,
-  re as _,
-  Ne as i,
+  se as _,
+  Te as i,
   be as u
 };