maz-ui 3.47.1 → 3.47.2-beta.10

package/components/chunks/{MazPhoneNumberInput-C4TX1tGw.mjs → MazPhoneNumberInput-B5Up8CqL.mjs}

@@ -1,28 +1,28 @@
 import '../assets/MazPhoneNumberInput.css';var Ge = Object.defineProperty;
-var Je = (n, o, e) => o in n ? Ge(n, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[o] = e;
-var _ = (n, o, e) => Je(n, typeof o != "symbol" ? o + "" : o, e);
-import { useId as Ze, computed as h, inject as Xe, defineComponent as se, defineAsyncComponent as q, withDirectives as ze, openBlock as b, createElementBlock as L, normalizeClass as F, normalizeStyle as ee, Fragment as be, renderList as Be, createElementVNode as j, mergeProps as oe, createVNode as H, unref as k, createCommentVNode as z, renderSlot as N, ref as E, onMounted as Ie, useSlots as xe, createBlock as U, resolveDynamicComponent as Pe, toHandlers as _e, vModelDynamic as eo, createTextVNode as oo, toDisplayString as ue, withModifiers as ae, withCtx as G, useCssVars as to, onBeforeMount as lo, nextTick as ie, Transition as no, mergeModels as ke, useModel as ao, provide as so, watch as he } from "vue";
-import { getCountries as Oe, getCountryCallingCode as ce, isSupportedCountry as ro, parsePhoneNumberFromString as io, AsYouType as uo, getExampleNumber as co } from "libphonenumber-js";
+var Je = (a, o, e) => o in a ? Ge(a, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[o] = e;
+var _ = (a, o, e) => Je(a, typeof o != "symbol" ? o + "" : o, e);
+import { useId as Ze, computed as h, inject as Xe, defineComponent as ne, defineAsyncComponent as q, withDirectives as ze, openBlock as y, createElementBlock as P, normalizeClass as M, normalizeStyle as ee, Fragment as be, renderList as Be, createElementVNode as j, mergeProps as te, createVNode as H, unref as k, createCommentVNode as E, renderSlot as N, ref as L, onMounted as Ie, useSlots as xe, toDisplayString as oe, createBlock as U, resolveDynamicComponent as ke, toHandlers as _e, vModelDynamic as eo, createTextVNode as oo, withModifiers as se, withCtx as G, onBeforeMount as to, nextTick as ue, Transition as lo, mergeModels as Pe, useModel as ao, provide as so, watch as he } from "vue";
+import { getCountries as Oe, getCountryCallingCode as ce, isSupportedCountry as no, parsePhoneNumberFromString as ro, AsYouType as io, getExampleNumber as uo } from "libphonenumber-js";
 function Ae({
-  componentName: n,
+  componentName: a,
   providedId: o
 }) {
   const e = Ze();
-  return h(() => o ?? `${n}-${e}`);
+  return h(() => o ?? `${a}-${e}`);
 }
-function Ee(n, o = "20x15") {
-  return `https://flagcdn.com/${o}/${n.toLowerCase()}.png`;
+function Le(a, o = "20x15") {
+  return `https://flagcdn.com/${o}/${a.toLowerCase()}.png`;
 }
-function Me(n, o) {
-  const e = Xe(n, o);
+function Me(a, o) {
+  const e = Xe(a, o);
   if (!e)
-    throw new TypeError(`[maz-ui](injectStrict) Could not resolve ${n}`);
+    throw new TypeError(`[maz-ui](injectStrict) Could not resolve ${a.toString()}`);
   return e;
 }
-function po(n) {
-  return !!n;
+function co(a) {
+  return !!a;
 }
-const mo = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", fo = {
+const mo = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", po = {
   baseClass: "m-lazy-img",
   loadedClass: "m-lazy-loaded",
   loadingClass: "m-lazy-loading",
@@ -36,10 +36,10 @@ const mo = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAA
     threshold: 0.1
   }
 };
-class ho {
+class fo {
   constructor(o = {}) {
     _(this, "observers", []);
-    _(this, "defaultOptions", fo);
+    _(this, "defaultOptions", po);
     _(this, "options");
     _(this, "onImgLoadedCallback");
     _(this, "onImgErrorCallback");
@@ -149,18 +149,18 @@ class ho {
     t.src = e;
   }
   handleIntersectionObserver(o, e, t, r) {
-    var u, y;
+    var u, v;
     this.observers.push(r);
-    for (const m of t)
-      if (m.isIntersecting) {
-        if ((y = (u = this.options).onIntersecting) == null || y.call(u, m.target), this.options.observerOnce && r.unobserve(o), this.options.loadOnce && this.hasImgLoaded)
+    for (const p of t)
+      if (p.isIntersecting) {
+        if ((v = (u = this.options).onIntersecting) == null || v.call(u, p.target), this.options.observerOnce && r.unobserve(o), this.options.loadOnce && this.hasImgLoaded)
           return;
         this.loadImage(o, e);
       }
   }
   createObserver(o, e) {
-    const t = (y, m) => {
-      this.handleIntersectionObserver(o, e, y, m);
+    const t = (v, p) => {
+      this.handleIntersectionObserver(o, e, v, p);
     }, r = this.options.observerOptions;
     new IntersectionObserver(t, r).observe(o);
   }
@@ -190,21 +190,21 @@ class ho {
   }
 }
 let de;
-const yo = {
-  created(n, o) {
+const ho = {
+  created(a, o) {
     const e = typeof o.value == "object" ? o.value : {};
-    de = new ho(e), de.add(n, o);
+    de = new fo(e), de.add(a, o);
   },
-  updated(n, o) {
-    de.update(n, o);
+  updated(a, o) {
+    de.update(a, o);
   },
-  unmounted(n, o) {
-    de.remove(n, o);
+  unmounted(a, o) {
+    de.remove(a, o);
   }
-}, vo = ["data-lazy-srcset", "media"], go = ["alt"], bo = {
+}, vo = ["data-lazy-srcset", "media"], yo = ["alt"], go = {
   key: 0,
   class: "m-lazy-img-component-loader"
-}, Co = /* @__PURE__ */ se({
+}, bo = /* @__PURE__ */ ne({
   inheritAttrs: !1,
   __name: "MazLazyImg",
   props: {
@@ -224,36 +224,36 @@ const yo = {
     block: { type: Boolean }
   },
   emits: ["intersecting", "loading", "loaded", "error"],
-  setup(n) {
-    const o = n, e = q(() => import("./MazSpinner-CvT-9sC7.mjs")), t = h(() => o.image || o.src), r = h(() => {
+  setup(a) {
+    const o = a, e = q(() => import("./MazSpinner-NCtEpFMm.mjs")), t = h(() => o.image || o.src), r = h(() => {
       var u;
       return typeof t.value == "string" ? [{ srcset: t.value }] : (u = t.value) == null ? void 0 : u.sources;
     });
-    return (u, y) => ze((b(), L(
+    return (u, v) => ze((y(), P(
       "picture",
       {
-        class: F(["m-lazy-img-component", [{ "--use-loader": !u.noLoader, "--height-full": u.imageHeightFull, "--block": u.block }, o.class]]),
+        class: M(["m-lazy-img-component", [{ "--use-loader": !u.noLoader, "--height-full": u.imageHeightFull, "--block": u.block }, o.class]]),
         style: ee(u.style)
       },
       [
-        (b(!0), L(
+        (y(!0), P(
           be,
           null,
-          Be(r.value, ({ srcset: m, media: O }, $) => (b(), L("source", {
+          Be(r.value, ({ srcset: p, media: O }, $) => (y(), P("source", {
             key: $,
-            "data-lazy-srcset": m,
+            "data-lazy-srcset": p,
             media: O
           }, null, 8, vo))),
           128
           /* KEYED_FRAGMENT */
         )),
-        j("img", oe(u.$attrs, {
+        j("img", te(u.$attrs, {
           src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
           loading: "lazy",
           alt: u.alt,
           class: u.imgClass
-        }), null, 16, go),
-        u.noLoader ? z("v-if", !0) : (b(), L("div", bo, [
+        }), null, 16, yo),
+        u.noLoader ? E("v-if", !0) : (y(), P("div", go, [
           H(k(e), { size: "2em" })
         ])),
         N(u.$slots, "default", {}, void 0, !0)
@@ -261,25 +261,25 @@ const yo = {
       6
       /* CLASS, STYLE */
     )), [
-      [k(yo), {
+      [k(ho), {
         noPhoto: u.noPhoto,
         loadOnce: u.loadOnce,
         observerOptions: u.observerOptions,
         fallbackSrc: u.fallbackSrc,
         observerOnce: !u.noObserverOnce,
-        onIntersecting: (m) => u.$emit("intersecting", m),
-        onLoading: (m) => u.$emit("loading", m),
-        onLoaded: (m) => u.$emit("loaded", m),
-        onError: (m) => u.$emit("error", m)
+        onIntersecting: (p) => u.$emit("intersecting", p),
+        onLoading: (p) => u.$emit("loading", p),
+        onLoaded: (p) => u.$emit("loaded", p),
+        onError: (p) => u.$emit("error", p)
       }]
     ]);
   }
-}), re = (n, o) => {
-  const e = n.__vccOpts || n;
+}), re = (a, o) => {
+  const e = a.__vccOpts || a;
   for (const [t, r] of o)
     e[t] = r;
   return e;
-}, Le = /* @__PURE__ */ re(Co, [["__scopeId", "data-v-83e40430"]]), zo = {
+}, Ee = /* @__PURE__ */ re(bo, [["__scopeId", "data-v-83e40430"]]), Co = {
   removeAccents: !0,
   caseSensitive: !1,
   replaceSpaces: !0,
@@ -289,8 +289,8 @@ const yo = {
   removeNumbers: !1,
   customNormalizationForms: ["NFC", "NFKD"]
 };
-function pe(n, o) {
-  const e = { ...zo, ...o }, t = {
+function me(a, o) {
+  const e = { ...Co, ...o }, t = {
     À: "A",
     Á: "A",
     Â: "A",
@@ -339,101 +339,101 @@ function pe(n, o) {
     ñ: "n",
     ó: "o"
   };
-  let r = n.toString();
+  let r = a.toString();
   if (e.trim && (r = r.trim()), e.normalizeSpaces && (r = r.replaceAll(/\s+/g, " ")), e.replaceSpaces && (r = r.replaceAll(" ", "-")), e.removeNumbers && (r = r.replaceAll(/\d/g, "")), e.removeAccents && (r = r.replaceAll(/[ÀÁÂÃÄÅÇÈÉÊËÎÏÑÔÕÖØÙÚÛÜàáâãäåçèéêëíîïñóôõöøùúûüÿ]/g, (u) => t[u] || u), r = r.replaceAll(/[\u0300-\u036F]/g, "")), e.caseSensitive === !1 && (r = r.toLowerCase()), e.removeSpecialCharacters && (r = r.replaceAll(/[^\dA-Z-]/gi, "")), e.trim && (r = r.trim()), e.customNormalizationForms)
     for (const u of e.customNormalizationForms)
       r = r.normalize(u);
   return r;
 }
-function Io(n, o) {
-  const e = n.length, t = o.length, r = [];
+function zo(a, o) {
+  const e = a.length, t = o.length, r = [];
   for (let u = 0; u <= e; u++)
     r[u] = [u];
   for (let u = 0; u <= t; u++)
     r[0][u] = u;
   for (let u = 1; u <= e; u++)
-    for (let y = 1; y <= t; y++) {
-      const m = n[u - 1] === o[y - 1] ? 0 : 1;
-      r[u][y] = Math.min(
-        r[u - 1][y] + 1,
-        r[u][y - 1] + 1,
-        r[u - 1][y - 1] + m
+    for (let v = 1; v <= t; v++) {
+      const p = a[u - 1] === o[v - 1] ? 0 : 1;
+      r[u][v] = Math.min(
+        r[u - 1][v] + 1,
+        r[u][v - 1] + 1,
+        r[u - 1][v - 1] + p
       );
     }
   return r[e][t];
 }
-function Te(n, o) {
-  const e = Io(n, o), t = Math.max(n.length, o.length);
+function Te(a, o) {
+  const e = zo(a, o), t = Math.max(a.length, o.length);
   return 1 - e / t;
 }
-function Ao(n, o, e = 0.75) {
-  return Te(n, o) >= e;
+function Io(a, o, e = 0.75) {
+  return Te(a, o) >= e;
 }
-function ye(n, o, e = 0.75) {
+function ve(a, o, e = 0.75) {
   const t = h(
-    () => pe(typeof n == "string" ? n : n.value)
+    () => me(typeof a == "string" ? a : a.value)
   ), r = h(
-    () => pe(typeof o == "string" ? o : o.value)
-  ), u = h(() => typeof e == "number" ? e : e.value), y = h(() => Te(t.value, r.value));
+    () => me(typeof o == "string" ? o : o.value)
+  ), u = h(() => typeof e == "number" ? e : e.value), v = h(() => Te(t.value, r.value));
   return {
     isMatching: h(
-      () => Ao(t.value, r.value, u.value)
+      () => Io(t.value, r.value, u.value)
     ),
-    score: y
+    score: v
   };
 }
-function Fe(n, o, e) {
-  var y;
-  n.stopPropagation();
+function Fe(a, o, e) {
+  var v;
+  a.stopPropagation();
   const t = typeof e.value == "function" ? e.value : e.value.handler, r = typeof e.value == "object" ? e.value.exclude : void 0;
   let u = !1;
   if (r && r.length > 0) {
-    for (const m of r)
-      if (!u && n.target instanceof HTMLElement) {
-        const O = (y = document.querySelector(m)) == null ? void 0 : y.getAttribute("id");
-        u = n.target.getAttribute("id") === O;
+    for (const p of r)
+      if (!u && a.target instanceof HTMLElement) {
+        const O = (v = document.querySelector(p)) == null ? void 0 : v.getAttribute("id");
+        u = a.target.getAttribute("id") === O;
       }
   }
-  !o.contains(n.target) && !u && (t == null || t());
+  !o.contains(a.target) && !u && (t == null || t());
 }
 function Ne() {
   return document.ontouchstart === null ? "touchstart" : "click";
 }
-function wo(n, o) {
+function Ao(a, o) {
   const e = Ne();
-  document.removeEventListener(e, (t) => Fe(t, n, o));
+  document.removeEventListener(e, (t) => Fe(t, a, o));
 }
-function So(n, o) {
+function wo(a, o) {
   if (typeof o.value != "function" && typeof o.value == "object" && typeof o.value.handler != "function") {
     console.error("[maz-ui](vClosable) v-closable directive requires a handler function");
     return;
   }
   const e = Ne();
-  document.addEventListener(e, (t) => Fe(t, n, o));
+  document.addEventListener(e, (t) => Fe(t, a, o));
 }
-const Vo = {
-  mounted: So,
-  unmounted: wo
+const So = {
+  mounted: wo,
+  unmounted: Ao
 };
-let ve = null;
-function Po(n, o) {
-  ve && clearTimeout(ve), ve = setTimeout(n, o);
-}
-function ko(n, o) {
+function Vo(a, o) {
   let e;
   return function(...t) {
     clearTimeout(e), e = setTimeout(() => {
-      n.apply(this, t);
+      a.apply(this, t);
     }, o);
   };
 }
-const Eo = {
+let ye = null;
+function ko(a, o) {
+  ye && clearTimeout(ye), ye = setTimeout(a, o);
+}
+const Po = ["for"], Lo = {
   key: 0,
   class: "m-input-wrapper-left"
-}, Lo = { class: "m-input-wrapper-input" }, $o = ["id", "type", "name", "inputmode", "placeholder", "aria-label", "disabled", "readonly", "required"], Bo = { key: 0 }, Oo = {
+}, Eo = ["id", "type", "name", "inputmode", "placeholder", "aria-label", "disabled", "readonly", "required"], $o = { key: 0 }, Bo = {
   key: 1,
   class: "m-input-wrapper-right"
-}, Mo = /* @__PURE__ */ se({
+}, Oo = /* @__PURE__ */ ne({
   inheritAttrs: !1,
   __name: "MazInput",
   props: {
@@ -442,6 +442,8 @@ const Eo = {
     modelValue: { default: void 0 },
     placeholder: { default: void 0 },
     label: { default: void 0 },
+    topLabel: {},
+    assistiveText: {},
     name: { default: void 0 },
     color: { default: "primary" },
     type: { default: "text" },
@@ -470,16 +472,16 @@ const Eo = {
     block: { type: Boolean }
   },
   emits: ["update:model-value", "focus", "blur", "click", "change", "input"],
-  setup(n, { emit: o }) {
-    const e = n, t = o, r = q(() => import("./MazBtn-DlD5m7T4.mjs")), u = q(() => import("./MazIcon-D8V8ixhf.mjs")), y = q(() => import("./eye-slash-BoO00xzs.mjs")), m = q(() => import("./eye-f8zAUc30.mjs")), O = q(() => import("./check-C9Q_W85g.mjs")), $ = E(!1), v = E(!1), P = E(), i = Ae({
+  setup(a, { emit: o }) {
+    const e = a, t = o, r = q(() => import("./MazBtn-CB6xVwox.mjs")), u = q(() => import("./MazIcon-DFW4cVVf.mjs")), v = q(() => import("./eye-slash-BoO00xzs.mjs")), p = q(() => import("./eye-f8zAUc30.mjs")), O = q(() => import("./check-C9Q_W85g.mjs")), $ = L(!1), g = L(!1), V = L(), i = Ae({
       componentName: "MazInput",
       providedId: e.id
     });
     Ie(() => {
       var s;
-      e.autoFocus && ((s = P.value) == null || s.focus());
+      e.autoFocus && ((s = V.value) == null || s.focus());
     });
-    const f = h(() => e.type === "password"), I = h(() => $.value ? "text" : e.type), S = h(() => {
+    const f = h(() => e.type === "password"), z = h(() => $.value ? "text" : e.type), w = h(() => {
       if (!e.noBorder) {
         if (e.error)
           return "maz-border-danger";
@@ -487,7 +489,7 @@ const Eo = {
           return "maz-border-success";
         if (e.warning)
           return "maz-border-warning";
-        if (v.value || e.borderActive) {
+        if (g.value || e.borderActive) {
           if (e.color === "black")
             return "maz-border-black";
           if (e.color === "danger")
@@ -507,49 +509,49 @@ const Eo = {
         }
         return "--default-border";
       }
-    }), R = xe(), Y = h(() => {
-      const { required: s, placeholder: M } = e;
-      if (M)
-        return s ? `${M} *` : M;
-    }), J = h(() => C.value !== void 0 && C.value !== ""), g = ko(
+    }), D = xe(), Y = h(() => {
+      const { required: s, placeholder: T } = e;
+      if (T)
+        return s ? `${T} *` : T;
+    }), J = h(() => C.value !== void 0 && C.value !== ""), b = Vo(
       (s) => {
         t("update:model-value", s);
       },
       typeof e.debounce == "number" ? e.debounce : e.debounceDelay ?? 500
     );
-    function V(s) {
+    function S(s) {
       if (e.debounce)
-        return g(s);
+        return b(s);
       t("update:model-value", s);
     }
     const C = h({
       get: () => e.modelValue,
-      set: (s) => V(s)
-    }), W = h(() => (!!e.label || !!e.hint) && (v.value || !!J.value || !!e.placeholder || ["date", "month", "week"].includes(e.type))), Z = h(() => !!e.label || !!e.hint);
-    function a() {
-      return !!R["right-icon"] || f.value || !!R["valid-button"] || e.validButton || !!e.rightIcon;
+      set: (s) => S(s)
+    }), W = h(() => (!!e.label || !!e.hint) && (g.value || !!J.value || !!e.placeholder || ["date", "month", "week"].includes(e.type))), Z = h(() => !!e.label || !!e.hint);
+    function n() {
+      return !!D["right-icon"] || f.value || !!D["valid-button"] || e.validButton || !!e.rightIcon;
     }
-    function w() {
-      return !!R["left-icon"] || !!e.leftIcon;
+    function A() {
+      return !!D["left-icon"] || !!e.leftIcon;
     }
     function K(s) {
-      t("focus", s), v.value = !0;
+      t("focus", s), g.value = !0;
     }
-    function T(s) {
-      t("blur", s), v.value = !1;
+    function F(s) {
+      t("blur", s), g.value = !1;
     }
-    function te(s) {
+    function le(s) {
       return t("change", s);
     }
     function X(s) {
       return t("input", s);
     }
-    return (s, M) => (b(), L(
+    return (s, T) => (y(), P(
       "div",
       {
-        class: F(["m-input", [
+        class: M(["m-input", [
           {
-            "--is-focused": v.value || s.borderActive,
+            "--is-focused": g.value || s.borderActive,
             "--should-up": W.value,
             "--has-label": Z.value,
             "--is-disabled": s.disabled,
@@ -559,123 +561,127 @@ const Eo = {
             "--block": s.block
           },
           e.class,
-          `--${s.color}`,
-          `--${s.size}`
+          `--${s.color}`
         ]]),
         style: ee(s.style)
       },
       [
+        s.topLabel ? (y(), P("label", {
+          key: 0,
+          for: k(i),
+          class: "m-input-top-label"
+        }, oe(s.topLabel), 9, Po)) : E("v-if", !0),
         j(
           "div",
           {
-            class: F(["m-input-wrapper", [
+            class: M(["m-input-wrapper", [
               s.inputClasses,
-              S.value,
-              s.roundedSize ? `--rounded-${s.roundedSize}` : { "maz-rounded": !s.noRadius }
+              w.value,
+              s.roundedSize ? `--rounded-${s.roundedSize}` : { "maz-rounded": !s.noRadius },
+              { "--block": s.block }
             ]])
           },
           [
-            w() ? (b(), L("div", Eo, [
-              z(`
-          @slot left-icon - The icon to display on the left of the input
-        `),
+            A() ? (y(), P("div", Lo, [
               s.$slots["left-icon"] || s.leftIcon ? N(s.$slots, "left-icon", { key: 0 }, () => [
-                typeof s.leftIcon == "string" ? (b(), U(k(u), {
+                typeof s.leftIcon == "string" ? (y(), U(k(u), {
                   key: 0,
                   name: s.leftIcon,
                   class: "maz-text-xl maz-text-muted"
-                }, null, 8, ["name"])) : s.leftIcon ? (b(), U(Pe(s.leftIcon), {
+                }, null, 8, ["name"])) : s.leftIcon ? (y(), U(ke(s.leftIcon), {
                   key: 1,
                   class: "maz-text-xl maz-text-muted"
-                })) : z("v-if", !0)
-              ], !0) : z("v-if", !0)
-            ])) : z("v-if", !0),
-            j("div", Lo, [
-              ze(j("input", oe({
-                id: k(i),
-                ref_key: "input",
-                ref: P,
-                "onUpdate:modelValue": M[0] || (M[0] = (x) => C.value = x),
-                type: I.value,
-                name: s.name
-              }, s.$attrs, {
-                inputmode: s.inputmode,
-                placeholder: Y.value,
-                "aria-label": s.label || s.placeholder,
-                disabled: s.disabled,
-                readonly: s.readonly,
-                required: s.required,
-                class: "m-input-input"
-              }, _e({
-                blur: T,
-                focus: K,
-                change: te,
-                input: X
-              }, !0), {
-                onClick: M[1] || (M[1] = (x) => s.$emit("click", x))
-              }), null, 16, $o), [
-                [eo, C.value]
-              ]),
-              s.label || s.hint ? (b(), L(
-                "span",
-                {
-                  key: 0,
-                  class: F(["m-input-label", [
-                    {
-                      "maz-text-danger-600": s.error,
-                      "maz-text-success-600": s.success,
-                      "maz-text-warning-600": s.warning
-                    }
-                  ]])
-                },
-                [
-                  oo(
-                    ue(s.hint || s.label) + " ",
-                    1
-                    /* TEXT */
-                  ),
-                  s.required ? (b(), L("sup", Bo, "*")) : z("v-if", !0)
-                ],
-                2
-                /* CLASS */
-              )) : z("v-if", !0)
-            ]),
-            a() ? (b(), L("div", Oo, [
-              z(`
-          @slot right-icon - The icon to display on the right of the input
-        `),
+                })) : E("v-if", !0)
+              ], !0) : E("v-if", !0)
+            ])) : E("v-if", !0),
+            j(
+              "div",
+              {
+                class: M(["m-input-wrapper-input", [`--${s.size}`, { "--top-label": !!s.topLabel }]])
+              },
+              [
+                ze(j("input", te({
+                  id: k(i),
+                  ref_key: "input",
+                  ref: V,
+                  "onUpdate:modelValue": T[0] || (T[0] = (x) => C.value = x),
+                  type: z.value,
+                  name: s.name
+                }, s.$attrs, {
+                  inputmode: s.inputmode,
+                  placeholder: Y.value,
+                  "aria-label": s.label || s.placeholder,
+                  disabled: s.disabled,
+                  readonly: s.readonly,
+                  required: s.required,
+                  class: "m-input-input"
+                }, _e({
+                  blur: F,
+                  focus: K,
+                  change: le,
+                  input: X
+                }, !0), {
+                  onClick: T[1] || (T[1] = (x) => s.$emit("click", x))
+                }), null, 16, Eo), [
+                  [eo, C.value]
+                ]),
+                s.label || s.hint ? (y(), P(
+                  "span",
+                  {
+                    key: 0,
+                    class: M(["m-input-label", [
+                      {
+                        "maz-text-danger-600": s.error,
+                        "maz-text-success-600": s.success,
+                        "maz-text-warning-600": s.warning
+                      }
+                    ]])
+                  },
+                  [
+                    oo(
+                      oe(s.hint || s.label) + " ",
+                      1
+                      /* TEXT */
+                    ),
+                    s.required ? (y(), P("sup", $o, "*")) : E("v-if", !0)
+                  ],
+                  2
+                  /* CLASS */
+                )) : E("v-if", !0)
+              ],
+              2
+              /* CLASS */
+            ),
+            n() ? (y(), P("div", Bo, [
               s.$slots["right-icon"] || s.rightIcon ? N(s.$slots, "right-icon", { key: 0 }, () => [
-                typeof s.rightIcon == "string" ? (b(), U(k(u), {
+                typeof s.rightIcon == "string" ? (y(), U(k(u), {
                   key: 0,
                   name: s.rightIcon,
                   class: "maz-text-xl maz-text-muted"
-                }, null, 8, ["name"])) : s.rightIcon ? (b(), U(Pe(s.rightIcon), {
+                }, null, 8, ["name"])) : s.rightIcon ? (y(), U(ke(s.rightIcon), {
                   key: 1,
                   class: "maz-text-xl maz-text-muted"
-                })) : z("v-if", !0)
-              ], !0) : z("v-if", !0),
-              f.value ? (b(), U(k(r), {
+                })) : E("v-if", !0)
+              ], !0) : E("v-if", !0),
+              f.value ? (y(), U(k(r), {
                 key: 1,
                 color: "transparent",
                 tabindex: "-1",
                 size: "mini",
-                onClick: M[2] || (M[2] = ae((x) => $.value = !$.value, ["stop"]))
+                onClick: T[2] || (T[2] = se((x) => $.value = !$.value, ["stop"]))
               }, {
                 default: G(() => [
-                  $.value ? (b(), U(k(y), {
+                  $.value ? (y(), U(k(v), {
                     key: 0,
                     class: "maz-text-xl maz-text-muted"
-                  })) : (b(), U(k(m), {
+                  })) : (y(), U(k(p), {
                     key: 1,
                     class: "maz-text-xl maz-text-muted"
                   }))
                 ]),
                 _: 1
                 /* STABLE */
-              })) : z("v-if", !0),
-              z(`
-          @slot valid-button - Replace the valid button by your own
-        `),
+              })) : E("v-if", !0),
               s.$slots["valid-button"] || s.validButton ? N(s.$slots, "valid-button", { key: 2 }, () => [
                 H(k(r), {
                   color: "transparent",
@@ -692,22 +698,39 @@ const Eo = {
                   _: 1
                   /* STABLE */
                 }, 8, ["disabled", "loading"])
-              ], !0) : z("v-if", !0)
-            ])) : z("v-if", !0)
+              ], !0) : E("v-if", !0)
+            ])) : E("v-if", !0)
           ],
           2
           /* CLASS */
-        )
+        ),
+        s.assistiveText ? (y(), P(
+          "div",
+          {
+            key: 1,
+            class: M(["m-input-bottom-text", [
+              {
+                "maz-text-danger-600": s.error,
+                "maz-text-success-600": s.success,
+                "maz-text-warning-600": s.warning,
+                "maz-text-muted": !s.error && !s.success && !s.warning
+              }
+            ]])
+          },
+          oe(s.assistiveText),
+          3
+          /* TEXT, CLASS */
+        )) : E("v-if", !0)
       ],
       6
       /* CLASS, STYLE */
     ));
   }
-}), Ce = /* @__PURE__ */ re(Mo, [["__scopeId", "data-v-b3e1e126"]]), To = ["aria-label"], Fo = { class: "m-select-list__no-results" }, No = {
+}), Ce = /* @__PURE__ */ re(Oo, [["__scopeId", "data-v-2cfe0ca2"]]), Mo = ["aria-label"], To = { class: "m-select-list__no-results" }, Fo = {
   key: 2,
   class: "m-select-list__scroll-wrapper",
   tabindex: "-1"
-}, Ko = { class: "m-select-list-optgroup" }, Uo = ["onClick"], Ho = /* @__PURE__ */ se({
+}, No = { class: "m-select-list-optgroup" }, Ko = ["onClick"], Uo = /* @__PURE__ */ ne({
   inheritAttrs: !1,
   __name: "MazSelect",
   props: {
@@ -739,28 +762,23 @@ const Eo = {
     autocomplete: { default: "off" }
   },
   emits: ["close", "open", "blur", "focus", "change", "input", "update:model-value", "selected-option"],
-  setup(n, { expose: o, emit: e }) {
-    to((l) => ({
-      cb149e58: I.value,
-      "215ff493": i.value,
-      "64d6cfbb": f.value
-    }));
-    const t = n, r = e, u = q(() => import("./MazCheckbox-BKCo6EzO.mjs")), y = q(() => import("./magnifying-glass--nBiyXot.mjs")), m = q(() => import("./chevron-down-BkvtON3b.mjs")), O = q(() => import("./no-symbol-CIgKzsrB.mjs"));
+  setup(a, { expose: o, emit: e }) {
+    const t = a, r = e, u = q(() => import("./MazCheckbox-B-Sw22La.mjs")), v = q(() => import("./magnifying-glass--nBiyXot.mjs")), p = q(() => import("./chevron-down-BkvtON3b.mjs")), O = q(() => import("./no-symbol-CIgKzsrB.mjs"));
     o({
       /** Method to open the option list */
-      openList: ne,
+      openList: ie,
       /** Method to close the option list */
-      closeList: le
+      closeList: ae
     });
-    const $ = E(!1), v = E(), P = h(
+    const $ = L(!1), g = L(), V = h(
       () => ["black", "transparent", "white"].includes(t.color)
     ), i = h(
-      () => P.value ? "var(--maz-color-black)" : `var(--maz-color-${t.color}-800)`
+      () => V.value ? "var(--maz-color-black)" : `var(--maz-color-${t.color}-800)`
     ), f = h(
-      () => P.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-100)`
-    ), I = h(
-      () => P.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-200)`
-    ), S = h(() => $.value || t.open), R = Ae({
+      () => V.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-100)`
+    ), z = h(
+      () => V.value ? "var(--maz-color-muted)" : `var(--maz-color-${t.color}-200)`
+    ), w = h(() => $.value || t.open), D = Ae({
       componentName: "MazSelect",
       providedId: t.id
     });
@@ -779,135 +797,136 @@ const Eo = {
         [t.optionInputValueKey]: l[t.optionInputValueKey]
       };
     }
-    const g = h(() => {
+    const b = h(() => {
       var d;
       const l = [];
       if (!((d = t.options) != null && d.length))
         return [];
-      for (const p of t.options)
-        typeof p == "string" || typeof p == "number" || typeof p == "boolean" ? l.push(Y(p)) : typeof p == "object" && "options" in p && Array.isArray(p.options) ? l.push(
-          { label: p.label, isOptGroup: !0 },
-          ...p.options.map(
+      for (const m of t.options)
+        typeof m == "string" || typeof m == "number" || typeof m == "boolean" ? l.push(Y(m)) : typeof m == "object" && "options" in m && Array.isArray(m.options) ? l.push(
+          { label: m.label, isOptGroup: !0 },
+          ...m.options.map(
             (c) => typeof c == "string" || typeof c == "number" || typeof c == "boolean" ? Y(c) : J(c)
           )
-        ) : l.push(J(p));
+        ) : l.push(J(m));
       return l;
-    }), V = h(
+    }), S = h(
       () => {
         var l;
-        return ((l = g.value) == null ? void 0 : l.filter((d) => t.multiple ? Array.isArray(t.modelValue) ? t.modelValue.includes(d[t.optionValueKey]) && !w(d[t.optionValueKey]) : !1 : t.modelValue === d[t.optionValueKey] && !w(d[t.optionValueKey]))) ?? [];
+        return ((l = b.value) == null ? void 0 : l.filter((d) => t.multiple ? Array.isArray(t.modelValue) ? t.modelValue.includes(d[t.optionValueKey]) && !A(d[t.optionValueKey]) : !1 : t.modelValue === d[t.optionValueKey] && !A(d[t.optionValueKey]))) ?? [];
       }
     );
-    lo(() => {
+    to(() => {
       var l;
       (l = t.options) != null && l.length || console.warn("[maz-ui](MazSelect) you must provide options"), fe();
     });
-    const C = E(), W = E(), Z = E(), a = E();
-    function w(l) {
+    const C = L(), W = L(), Z = L(), n = L();
+    function A(l) {
       return l == null;
     }
     function K(l) {
-      var p;
-      return (((p = V.value) == null ? void 0 : p.some(
+      var m;
+      return (((m = S.value) == null ? void 0 : m.some(
         (c) => c[t.optionValueKey] === l[t.optionValueKey]
-      )) ?? !1) && !w(l[t.optionValueKey]);
+      )) ?? !1) && !A(l[t.optionValueKey]);
     }
-    const T = h(() => {
+    const F = h(() => {
       var d;
       if (t.multiple && t.modelValue && Array.isArray(t.modelValue))
         return t.modelValue.map(
-          (p) => {
-            var c, A;
-            return (A = (c = g.value) == null ? void 0 : c.find((B) => B[t.optionValueKey] === p)) == null ? void 0 : A[t.optionInputValueKey];
+          (m) => {
+            var c, I;
+            return (I = (c = b.value) == null ? void 0 : c.find((B) => B[t.optionValueKey] === m)) == null ? void 0 : I[t.optionInputValueKey];
           }
         ).join(", ");
-      const l = (d = g.value) == null ? void 0 : d.find(
-        (p) => p[t.optionValueKey] === t.modelValue
+      const l = (d = b.value) == null ? void 0 : d.find(
+        (m) => m[t.optionValueKey] === t.modelValue
       );
-      return w(t.modelValue) || l == null ? void 0 : l[t.optionInputValueKey];
-    }), te = h(
+      return A(t.modelValue) || l == null ? void 0 : l[t.optionInputValueKey];
+    }), le = h(
       () => t.listPosition.includes("bottom") ? "maz-slide" : "maz-slideinvert"
-    ), X = E(""), s = E("");
-    function M(l, d) {
-      return d && l && pe(l).includes(pe(d));
+    ), X = L(""), s = L("");
+    function T(l, d) {
+      return d && l && me(l).includes(me(d));
     }
     function x(l) {
       var d;
-      return l ? (d = g.value) == null ? void 0 : d.filter((p) => {
-        const c = p[t.optionLabelKey], A = p[t.optionValueKey], B = p[t.optionInputValueKey], D = t.searchThreshold;
-        return M(c, l) || M(B, l) || M(A, l) || typeof c == "string" && ye(c, l, D).isMatching.value || typeof B == "string" && ye(B, l, D).isMatching.value || typeof A == "string" && ye(A, l, D).isMatching.value;
-      }) : g.value;
+      return l ? (d = b.value) == null ? void 0 : d.filter((m) => {
+        const c = m[t.optionLabelKey], I = m[t.optionValueKey], B = m[t.optionInputValueKey], R = t.searchThreshold;
+        return T(c, l) || T(B, l) || T(I, l) || typeof c == "string" && ve(c, l, R).isMatching.value || typeof B == "string" && ve(B, l, R).isMatching.value || typeof I == "string" && ve(I, l, R).isMatching.value;
+      }) : b.value;
     }
     const Q = h(() => x(X.value));
-    async function le(l) {
-      var p, c;
-      if (!S.value)
+    async function ae(l) {
+      var m, c;
+      if (!w.value)
         return;
-      if (l && ("relatedTarget" in l && ((p = C.value) != null && p.contains(l.relatedTarget)) || l.type === "keydown"))
+      if (l && ("relatedTarget" in l && ((m = C.value) != null && m.contains(l.relatedTarget)) || l.type === "keydown"))
         return l.preventDefault();
       const d = l && "relatedTarget" in l && l.relatedTarget instanceof HTMLElement && l.relatedTarget.getAttribute("id");
       if ((c = t.excludeSelectors) != null && c.includes(`#${d}`))
         return l == null ? void 0 : l.preventDefault();
-      await ie(), $.value = !1, v.value = 0, r("close", l);
+      await ue(), $.value = !1, g.value = 0, r("close", l);
     }
-    async function ne(l) {
-      t.disabled || S.value || (l == null || l.preventDefault(), $.value = !0, await me(), r("focus", l), r("open", $.value));
+    async function ie(l) {
+      t.disabled || w.value || (l == null || l.preventDefault(), $.value = !0, await pe(), r("focus", l), r("open", $.value));
     }
     function we() {
       var l, d;
       (d = ((l = W.value) == null ? void 0 : l.$el).querySelector("input")) == null || d.focus();
     }
-    function Re() {
+    function De() {
       var l, d;
       (d = ((l = W.value) == null ? void 0 : l.$el).querySelector("input")) == null || d.dispatchEvent(new Event("input"));
     }
-    function De(l) {
-      $.value ? le(l) : we();
+    function Re(l) {
+      $.value ? ae(l) : we();
     }
     function qe(l) {
-      var d, p;
-      X.value = l, (p = ((d = Z.value) == null ? void 0 : d.$el).querySelector("input")) == null || p.focus();
+      var d, m;
+      X.value = l, (m = ((d = Z.value) == null ? void 0 : d.$el).querySelector("input")) == null || m.focus();
     }
     function je(l) {
-      var p;
+      var m;
       l === "Backspace" && s.value.length > 0 ? s.value = s.value.slice(0, -1) : s.value += l;
       const d = x(s.value);
-      d != null && d.length && (v.value = (p = Q.value) == null ? void 0 : p.findIndex(
+      d != null && d.length && (g.value = (m = Q.value) == null ? void 0 : m.findIndex(
         (c) => c[t.optionValueKey] === d[0][t.optionValueKey]
-      ), typeof v.value == "number" && v.value >= 0 && me(v.value)), Po(() => {
+      ), typeof g.value == "number" && g.value >= 0 && pe(g.value)), ko(() => {
         s.value = "";
       }, 1e3);
     }
     function Ye(l) {
       const d = l.key;
-      /^[\dA-Za-z\u0400-\u04FF]$/.test(d) ? (l.preventDefault(), ne(l), t.search ? qe(d) : je(d)) : Se(l);
+      /^[\dA-Za-z\u0400-\u04FF]$/.test(d) ? (l.preventDefault(), ie(l), t.search ? qe(d) : je(d)) : Se(l);
     }
     function Se(l, d = !0) {
-      const p = l.code, c = ["ArrowUp", "ArrowDown"].includes(p), A = (d ? ["Enter", "Space"] : ["Enter"]).includes(p), B = p === "Escape" && S.value;
-      c ? We(l, v.value) : A ? Qe(l, v.value) : B && le(l);
+      const m = l.code, c = ["ArrowUp", "ArrowDown"].includes(m), I = (d ? ["Enter", "Space"] : ["Enter"]).includes(m), B = m === "Escape" && w.value;
+      c ? We(l, g.value) : I ? Qe(l, g.value) : B && ae(l);
     }
     function We(l, d) {
-      var A;
+      var I;
       l.preventDefault();
-      const p = l.code;
-      S.value || ne(l);
-      const c = (A = Q.value) == null ? void 0 : A.length;
-      c && (typeof d == "number" ? d === c - 1 && p === "ArrowDown" ? v.value = 0 : d === 0 && p === "ArrowUp" ? v.value = c - 1 : v.value = p === "ArrowDown" ? d + 1 : d - 1 : v.value = p === "ArrowDown" ? 0 : c - 1, me(v.value));
+      const m = l.code;
+      w.value || ie(l);
+      const c = (I = Q.value) == null ? void 0 : I.length;
+      c && (typeof d == "number" ? d === c - 1 && m === "ArrowDown" ? g.value = 0 : d === 0 && m === "ArrowUp" ? g.value = c - 1 : g.value = m === "ArrowDown" ? d + 1 : d - 1 : g.value = m === "ArrowDown" ? 0 : c - 1, pe(g.value));
     }
     function Qe(l, d) {
-      var c, A, B;
-      if (l.preventDefault(), !S.value)
-        return ne(l);
-      const p = d ? ((c = Q.value) == null ? void 0 : c[d]) ?? ((A = Q.value) == null ? void 0 : A[0]) : (B = Q.value) == null ? void 0 : B[0];
-      w(p) || Ve(p);
+      var c, I, B;
+      if (!w.value)
+        return;
+      l.preventDefault();
+      const m = d ? ((c = Q.value) == null ? void 0 : c[d]) ?? ((I = Q.value) == null ? void 0 : I[0]) : (B = Q.value) == null ? void 0 : B[0];
+      A(m) || Ve(m);
     }
-    async function me(l) {
-      var p, c;
-      await ie(), typeof l != "number" && fe();
-      const d = l ?? v.value;
+    async function pe(l) {
+      var m, c;
+      await ue(), typeof l != "number" && fe();
+      const d = l ?? g.value;
       if (typeof d == "number" && d >= 0) {
-        const A = (p = a.value) == null ? void 0 : p.querySelectorAll(".m-select-list-item");
-        (c = A == null ? void 0 : A[d]) == null || c.scrollIntoView({
+        const I = (m = n.value) == null ? void 0 : m.querySelectorAll(".m-select-list-item");
+        (c = I == null ? void 0 : I[d]) == null || c.scrollIntoView({
           behavior: "auto",
           block: "nearest",
           inline: "start"
@@ -915,43 +934,43 @@ const Eo = {
       }
     }
     function fe(l) {
-      var p;
-      const d = (p = Q.value) == null ? void 0 : p.findIndex((c) => {
-        var A, B;
-        return t.multiple && Array.isArray(t.modelValue) ? l ? l[t.optionValueKey] === c[t.optionValueKey] : [...t.modelValue].reverse()[0] === c[t.optionValueKey] : ((B = (A = V.value) == null ? void 0 : A[0]) == null ? void 0 : B[t.optionValueKey]) === c[t.optionValueKey];
+      var m;
+      const d = (m = Q.value) == null ? void 0 : m.findIndex((c) => {
+        var I, B;
+        return t.multiple && Array.isArray(t.modelValue) ? l ? l[t.optionValueKey] === c[t.optionValueKey] : [...t.modelValue].reverse()[0] === c[t.optionValueKey] : ((B = (I = S.value) == null ? void 0 : I[0]) == null ? void 0 : B[t.optionValueKey]) === c[t.optionValueKey];
       });
-      v.value = d && d >= 0 ? d : 0;
+      g.value = d && d >= 0 ? d : 0;
     }
     function Ve(l, d = !0) {
       var B;
-      d && !t.multiple && ie(() => le()), X.value = "";
-      const p = (B = V.value) == null ? void 0 : B.some(
-        (D) => D[t.optionValueKey] === l[t.optionValueKey]
+      d && !t.multiple && ue(() => ae()), X.value = "";
+      const m = (B = S.value) == null ? void 0 : B.some(
+        (R) => R[t.optionValueKey] === l[t.optionValueKey]
       );
-      let c = V.value;
-      p && t.multiple ? c = c == null ? void 0 : c.filter(
-        (D) => D[t.optionValueKey] !== l[t.optionValueKey]
+      let c = S.value;
+      m && t.multiple ? c = c == null ? void 0 : c.filter(
+        (R) => R[t.optionValueKey] !== l[t.optionValueKey]
       ) : t.multiple ? c.push(l) : c = [l];
-      const A = c.map((D) => D[t.optionValueKey]);
-      r("update:model-value", t.multiple ? A : A[0]), r("selected-option", l), Re(), fe(l), we();
+      const I = c.map((R) => R[t.optionValueKey]);
+      r("update:model-value", t.multiple ? I : I[0]), r("selected-option", l), De(), fe(l), we();
     }
     return (l, d) => {
-      var p;
-      return ze((b(), L(
+      var m;
+      return ze((y(), P(
         "div",
         {
           ref_key: "mazSelectElement",
           ref: C,
-          class: F(["m-select", [
-            { "--is-open": S.value, "--disabled": l.disabled, "--block": l.block },
+          class: M(["m-select", [
+            { "--is-open": w.value, "--disabled": l.disabled, "--block": l.block },
             t.class,
             `--${l.size}`
           ]]),
-          style: ee(l.style)
+          style: ee([l.style, { "--keyboard-selected-bg-color": z.value, "--selected-bg-color": f.value, "--selected-text-color": i.value }])
         },
         [
-          H(Ce, oe({
-            id: k(R),
+          H(Ce, te({
+            id: k(D),
             ref_key: "mazInputComponent",
             ref: W,
             class: "m-select-input"
@@ -959,14 +978,14 @@ const Eo = {
             required: l.required,
             "border-active": $.value,
             color: l.color,
-            "model-value": T.value,
+            "model-value": F.value,
             size: l.size,
             block: "",
             autocomplete: l.autocomplete,
             disabled: l.disabled,
-            onFocus: ae(ne, ["prevent", "stop"]),
-            onBlur: ae(le, ["prevent", "stop"]),
-            onClick: ae(ne, ["prevent", "stop"]),
+            onFocus: se(ie, ["prevent", "stop"]),
+            onBlur: se(ae, ["prevent", "stop"]),
+            onClick: se(ie, ["prevent", "stop"]),
             onChange: d[0] || (d[0] = (c) => r("change", c)),
             onInput: d[1] || (d[1] = (c) => r("input", c)),
             onKeydown: Ye
@@ -976,24 +995,24 @@ const Eo = {
                 tabindex: "-1",
                 type: "button",
                 class: "m-select-input__toggle-button maz-custom",
-                "aria-label": `${S.value ? "collapse" : "expand"} list of options`,
-                onClick: ae(De, ["stop"])
+                "aria-label": `${w.value ? "collapse" : "expand"} list of options`,
+                onClick: se(Re, ["stop"])
               }, [
-                H(k(m), { class: "m-select-chevron maz-text-xl" })
-              ], 8, To)
+                H(k(p), { class: "m-select-chevron maz-text-xl" })
+              ], 8, Mo)
             ]),
             _: 1
             /* STABLE */
           }, 16, ["id", "required", "border-active", "color", "model-value", "size", "autocomplete", "disabled"]),
-          H(no, { name: te.value }, {
+          H(lo, { name: le.value }, {
             default: G(() => [
-              S.value ? (b(), L(
+              w.value ? (y(), P(
                 "div",
                 {
                   key: 0,
                   ref_key: "optionsListElement",
-                  ref: a,
-                  class: F(["m-select-list", {
+                  ref: n,
+                  class: M(["m-select-list", {
                     "--top": l.listPosition.includes("top"),
                     "--left": l.listPosition.includes("left"),
                     "--right": l.listPosition.includes("right"),
@@ -1007,14 +1026,14 @@ const Eo = {
                   })
                 },
                 [
-                  l.search ? (b(), U(Ce, {
+                  l.search ? (y(), U(Ce, {
                     key: 0,
                     ref_key: "searchInputComponent",
                     ref: Z,
                     modelValue: X.value,
                     "onUpdate:modelValue": [
                       d[2] || (d[2] = (c) => X.value = c),
-                      d[4] || (d[4] = (c) => v.value = 0)
+                      d[4] || (d[4] = (c) => g.value = 0)
                     ],
                     size: "sm",
                     color: l.color,
@@ -1024,65 +1043,53 @@ const Eo = {
                     autocomplete: "off",
                     tabindex: "-1",
                     class: "m-select-list__search-input maz-flex-none",
-                    "left-icon": k(y),
+                    "left-icon": k(v),
                     onKeydown: d[3] || (d[3] = (c) => Se(c, !1))
-                  }, null, 8, ["modelValue", "color", "placeholder", "left-icon"])) : z("v-if", !0),
-                  z(`
-          @slot No results slot - Displayed when no results corresponding with search query
-        `),
+                  }, null, 8, ["modelValue", "color", "placeholder", "left-icon"])) : E("v-if", !0),
                   !Q.value || Q.value.length <= 0 ? N(l.$slots, "no-results", { key: 1 }, () => [
-                    j("span", Fo, [
+                    j("span", To, [
                       H(k(O), { class: "maz-h-6 maz-w-6 maz-text-normal" })
                     ])
-                  ], !0) : (b(), L("div", No, [
-                    (b(!0), L(
+                  ], !0) : (y(), P("div", Fo, [
+                    (y(!0), P(
                       be,
                       null,
-                      Be(Q.value, (c, A) => (b(), L(
+                      Be(Q.value, (c, I) => (y(), P(
                         be,
-                        { key: A },
+                        { key: I },
                         [
-                          z(`
-              @slot Custom optgroup label
-                @binding {String} label - the label of the optgroup
-            `),
                           c.label && c.isOptGroup ? N(l.$slots, "optgroup", {
                             key: 0,
                             label: c.label
                           }, () => [
                             j(
                               "span",
-                              Ko,
-                              ue(c.label),
+                              No,
+                              oe(c.label),
                               1
                               /* TEXT */
                             )
-                          ], !0) : (b(), L("button", {
+                          ], !0) : (y(), P("button", {
                             key: 1,
                             tabindex: "-1",
                             type: "button",
-                            class: F(["m-select-list-item maz-custom maz-flex-none", [
+                            class: M(["m-select-list-item maz-custom maz-flex-none", [
                               {
-                                "--is-keyboard-selected": v.value === A,
+                                "--is-keyboard-selected": g.value === I,
                                 "--is-selected": K(c),
-                                "--is-none-value": w(c[l.optionValueKey])
+                                "--is-none-value": A(c[l.optionValueKey])
                               }
                             ]]),
                             style: ee(l.itemHeight ? { height: `${l.itemHeight}px` } : void 0),
-                            onClick: ae((B) => Ve(c), ["prevent", "stop"])
+                            onClick: se((B) => Ve(c), ["prevent", "stop"])
                           }, [
-                            l.multiple ? (b(), U(k(u), {
+                            l.multiple ? (y(), U(k(u), {
                               key: 0,
                               tabindex: "-1",
                               "model-value": K(c),
                               size: "sm",
                               color: l.color
-                            }, null, 8, ["model-value", "color"])) : z("v-if", !0),
-                            z(`
-                @slot Custom option
-                  @binding {Object} option - the option object
-                  @binding {Boolean} is-selected - if the option is selected
-              `),
+                            }, null, 8, ["model-value", "color"])) : E("v-if", !0),
                             N(l.$slots, "default", {
                               option: c,
                               isSelected: K(c)
@@ -1090,12 +1097,12 @@ const Eo = {
                               j(
                                 "span",
                                 null,
-                                ue(c[l.optionLabelKey]),
+                                oe(c[l.optionLabelKey]),
                                 1
                                 /* TEXT */
                               )
                             ], !0)
-                          ], 14, Uo))
+                          ], 14, Ko))
                         ],
                         64
                         /* STABLE_FRAGMENT */
@@ -1107,7 +1114,7 @@ const Eo = {
                 ],
                 6
                 /* CLASS, STYLE */
-              )) : z("v-if", !0)
+              )) : E("v-if", !0)
             ]),
             _: 3
             /* FORWARDED */
@@ -1116,76 +1123,76 @@ const Eo = {
         6
         /* CLASS, STYLE */
       )), [
-        [k(Vo), {
-          exclude: (p = l.excludeSelectors) != null && p.length ? l.excludeSelectors : [],
-          handler: le
+        [k(So), {
+          exclude: (m = l.excludeSelectors) != null && m.length ? l.excludeSelectors : [],
+          handler: ae
         }]
       ]);
     };
   }
-}), Ro = /* @__PURE__ */ re(Ho, [["__scopeId", "data-v-e35a36a6"]]);
+}), Ho = /* @__PURE__ */ re(Uo, [["__scopeId", "data-v-961aec79"]]);
 function Ke() {
   if (typeof window > "u")
     return;
-  const n = window.navigator.language;
-  if (!n)
+  const a = window.navigator.language;
+  if (!a)
     return;
-  let o = n.slice(3, 7).toUpperCase();
-  return o === "" && (o = n.slice(0, 2).toUpperCase()), o === "EN" && (o = "US"), o === "JA" && (o = "JP"), {
+  let o = a.slice(3, 7).toUpperCase();
+  return o === "" && (o = a.slice(0, 2).toUpperCase()), o === "EN" && (o = "US"), o === "JA" && (o = "JP"), {
     locale: o,
-    browserLocale: n
+    browserLocale: a
   };
 }
 let ge, $e;
-function Do(n, o, e) {
-  return e != null && e[o] ? e[o] : (($e !== n || !ge) && ($e = n, ge = new Intl.DisplayNames([n], { type: "region" })), ge.of(o));
+function Do(a, o, e) {
+  return e != null && e[o] ? e[o] : (($e !== a || !ge) && ($e = a, ge = new Intl.DisplayNames([a], { type: "region" })), ge.of(o));
 }
-function qo(n, o) {
+function Ro(a, o) {
   var r;
   const e = [], t = Oe();
-  n = n ?? ((r = Ke()) == null ? void 0 : r.browserLocale) ?? "en-US";
+  a = a ?? ((r = Ke()) == null ? void 0 : r.browserLocale) ?? "en-US";
   for (const u of t) {
-    const y = Do(n, u, o);
-    if (y)
+    const v = Do(a, u, o);
+    if (v)
       try {
-        const m = ce(u);
+        const p = ce(u);
         e.push({
           iso2: u,
-          dialCode: m,
-          name: y
+          dialCode: p,
+          name: v
         });
-      } catch (m) {
-        console.error(`[MazPhoneNumberInput](getCountryCallingCode) ${m}`);
+      } catch (p) {
+        console.error(`[MazPhoneNumberInput](getCountryCallingCode) ${p}`);
       }
   }
   return e;
 }
-async function jo() {
+async function qo() {
   try {
-    const n = await fetch("https://ipwho.is"), { country_code: o } = await n.json();
+    const a = await fetch("https://ipwho.is"), { country_code: o } = await a.json();
     return o;
-  } catch (n) {
-    throw new Error(`[MazPhoneNumberInput](fetchCountryCode) ${n}`);
+  } catch (a) {
+    throw new Error(`[MazPhoneNumberInput](fetchCountryCode) ${a}`);
   }
 }
-function Yo(n) {
-  if (!n)
+function jo(a) {
+  if (!a)
     return "";
   const o = new RegExp(/[^\d ()+-]/g);
-  return n.replaceAll(o, "").trim();
+  return a.replaceAll(o, "").trim();
 }
 function Ue() {
   return {
-    sanitizePhoneNumber: Yo,
-    fetchCountryCode: jo,
+    sanitizePhoneNumber: jo,
+    fetchCountryCode: qo,
     getBrowserLocale: Ke,
-    getCountriesList: qo
+    getCountriesList: Ro
   };
 }
-const Wo = ["id"], Qo = {
+const Yo = ["id"], Wo = {
   key: 0,
   class: "m-country-selector__select__item__flag-container"
-}, Go = /* @__PURE__ */ se({
+}, Qo = /* @__PURE__ */ ne({
   __name: "CountrySelector",
   props: {
     style: { default: void 0 },
@@ -1213,34 +1220,34 @@ const Wo = ["id"], Qo = {
     excludeSelectors: { default: void 0 }
   },
   emits: ["update:model-value"],
-  setup(n) {
-    const o = n, { phoneNumber: e } = Me("data"), t = E(), { getCountriesList: r } = Ue(), u = h(() => r(o.countryLocale, o.customCountriesList)), y = h(
+  setup(a) {
+    const o = a, { phoneNumber: e } = Me("data"), t = L(), { getCountriesList: r } = Ue(), u = h(() => r(o.countryLocale, o.customCountriesList)), v = h(
       () => {
         var i;
         return (i = u.value) == null ? void 0 : i.filter((f) => {
-          var I;
-          return !((I = o.ignoredCountries) != null && I.includes(f.iso2));
+          var z;
+          return !((z = o.ignoredCountries) != null && z.includes(f.iso2));
         });
       }
-    ), m = h(() => {
+    ), p = h(() => {
       const i = o.onlyCountries || o.preferredCountries;
       return i == null ? void 0 : i.map(
         (f) => {
-          var I;
-          return (I = y.value) == null ? void 0 : I.find((S) => S.iso2.includes(f));
+          var z;
+          return (z = v.value) == null ? void 0 : z.find((w) => w.iso2.includes(f));
         }
       );
     }), O = h(
       () => {
         var i;
-        return (i = y.value) == null ? void 0 : i.filter((f) => {
-          var I;
-          return !((I = o.preferredCountries) != null && I.includes(f.iso2));
+        return (i = v.value) == null ? void 0 : i.filter((f) => {
+          var z;
+          return !((z = o.preferredCountries) != null && z.includes(f.iso2));
         });
       }
     ), $ = h(
-      () => o.preferredCountries ? [...m.value ?? [], ...O.value ?? []] : o.onlyCountries ? m.value : y.value
-    ), v = h(
+      () => o.preferredCountries ? [...p.value ?? [], ...O.value ?? []] : o.onlyCountries ? p.value : v.value
+    ), g = h(
       () => {
         var i;
         return (i = $.value) == null ? void 0 : i.map(
@@ -1248,45 +1255,41 @@ const Wo = ["id"], Qo = {
             ...f,
             dialCode: `+${f.dialCode}`
           } : void 0
-        ).filter(po);
+        ).filter(co);
       }
     );
-    async function P() {
+    async function V() {
       var i, f;
       (f = (i = t.value) == null ? void 0 : i.$el.querySelector("input")) == null || f.focus();
     }
-    return (i, f) => (b(), L(
+    return (i, f) => (y(), P(
       "div",
       {
-        class: F(["m-country-selector", [o.class, { "--no-flags": i.noFlags }]]),
+        class: M(["m-country-selector", [o.class, { "--no-flags": i.noFlags }]]),
         style: ee(i.style)
       },
       [
-        i.modelValue && !i.noFlags ? (b(), L("button", {
+        i.modelValue && !i.noFlags ? (y(), P("button", {
           key: 0,
           id: `country-selector-flag-button-${i.id}`,
-          class: F(["m-country-selector__country-flag", {
+          class: M(["m-country-selector__country-flag", {
             "--should-have-bottom-flag": i.locales.countrySelector.placeholder.length > 0
           }]),
           tabindex: "-1",
           type: "button",
-          onClick: P
+          onClick: V
         }, [
-          z(`
-        @slot Country selector flag
-          @binding {String} country-code - current selected country code - Ex: \`"FR"\`
-      `),
           N(i.$slots, "selector-flag", { countryCode: i.modelValue }, () => [
-            H(Le, {
-              src: k(Ee)(i.modelValue, "h20"),
+            H(Ee, {
+              src: k(Le)(i.modelValue, "h20"),
               alt: i.modelValue,
               width: "20",
               height: "20",
               "img-class": "maz-w-5 maz-h-4 maz-rounded-sm"
             }, null, 8, ["src", "alt"])
           ], !0)
-        ], 10, Wo)) : z("v-if", !0),
-        H(Ro, oe({
+        ], 10, Yo)) : E("v-if", !0),
+        H(Ho, te({
           id: `country-selector-${i.id}`,
           ref_key: "CountrySelectorRef",
           ref: t,
@@ -1308,64 +1311,58 @@ const Wo = ["id"], Qo = {
           search: !i.noSearch,
           "search-placeholder": i.locales.countrySelector.searchPlaceholder,
           "search-threshold": i.searchThreshold,
-          options: v.value,
+          options: g.value,
           hint: k(e) && !i.modelValue ? i.locales.countrySelector.error : void 0,
           label: i.locales.countrySelector.placeholder,
           style: {
             width: i.width
           },
           "exclude-selectors": [`#country-selector-flag-button-${i.id}`, ...i.excludeSelectors ?? []],
-          "onUpdate:modelValue": f[0] || (f[0] = (I) => i.$emit("update:model-value", I))
+          "onUpdate:modelValue": f[0] || (f[0] = (z) => i.$emit("update:model-value", z))
         }), {
           "no-results": G(() => [
             N(i.$slots, "no-results", {}, void 0, !0)
           ]),
-          default: G(({ option: I, isSelected: S }) => [
+          default: G(({ option: z, isSelected: w }) => [
             j(
               "div",
               {
-                class: F(["m-country-selector__select__item", {
-                  "m-country-selector__select__item--selected": S
+                class: M(["m-country-selector__select__item", {
+                  "m-country-selector__select__item--selected": w
                 }])
               },
               [
-                !i.noFlags && typeof I.iso2 == "string" ? (b(), L("span", Qo, [
-                  z(`
-              @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
-            `),
+                !i.noFlags && typeof z.iso2 == "string" ? (y(), P("span", Wo, [
                   N(i.$slots, "country-list-flag", {
-                    countryCode: I.iso2,
-                    option: I,
-                    isSelected: S
+                    countryCode: z.iso2,
+                    option: z,
+                    isSelected: w
                   }, () => [
-                    H(Le, {
-                      src: k(Ee)(I.iso2, "h20"),
-                      alt: `${I.name} flag`,
+                    H(Ee, {
+                      src: k(Le)(z.iso2, "h20"),
+                      alt: `${z.name} flag`,
                       width: "20",
                       height: "20",
                       "img-class": "maz-rounded-full maz-w-5 maz-h-5"
                     }, null, 8, ["src", "alt"])
                   ], !0)
-                ])) : z("v-if", !0),
-                i.showCodeOnList ? (b(), L(
+                ])) : E("v-if", !0),
+                i.showCodeOnList ? (y(), P(
                   "span",
                   {
                     key: 1,
-                    class: F(["maz-w-9 maz-flex-none", { "maz-text-muted": !S }])
+                    class: M(["maz-w-9 maz-flex-none", { "maz-text-muted": !w }])
                   },
-                  ue(I.dialCode),
+                  oe(z.dialCode),
                   3
                   /* TEXT, CLASS */
-                )) : z("v-if", !0),
+                )) : E("v-if", !0),
                 j(
                   "span",
                   {
-                    class: F(["maz-flex-1 maz-truncate", { "maz-font-semibold": S }])
+                    class: M(["maz-flex-1 maz-truncate", { "maz-font-semibold": w }])
                   },
-                  ue(I.name),
+                  oe(z.name),
                   3
                   /* TEXT, CLASS */
                 )
@@ -1382,7 +1379,7 @@ const Wo = ["id"], Qo = {
       /* CLASS, STYLE */
     ));
   }
-}), Jo = /* @__PURE__ */ re(Go, [["__scopeId", "data-v-382b69af"]]), Zo = {
+}), Go = /* @__PURE__ */ re(Qo, [["__scopeId", "data-v-5995516e"]]), Jo = {
   countrySelector: {
     placeholder: "Country code",
     error: "Choose country",
@@ -1393,25 +1390,25 @@ const Wo = ["id"], Qo = {
     example: "Example:"
   }
 };
-function Xo(n) {
+function Zo(a) {
   try {
-    const o = ro(n);
-    return o || (console.error(`[maz-ui](MazPhoneNumberInput) The code country "${n}" is not available`), !1);
+    const o = no(a);
+    return o || (console.error(`[maz-ui](MazPhoneNumberInput) The code country "${a}" is not available`), !1);
   } catch (o) {
     return console.error(`[maz-ui](MazPhoneNumberInput) ${o}`), !1;
   }
 }
-function xo({
-  phoneNumber: n,
+function Xo({
+  phoneNumber: a,
   countryCode: o
 }) {
   try {
-    if (!n)
+    if (!a)
       return {
         isValid: !1,
         countryCode: o
       };
-    const e = io(n, o);
+    const e = ro(a, o);
     return {
       countryCode: (e == null ? void 0 : e.country) ?? o,
       isValid: (e == null ? void 0 : e.isValid()) ?? !1,
@@ -1424,49 +1421,49 @@ function xo({
       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
+      phoneNumber: a
     };
   } catch (e) {
     throw new Error(`[MazPhoneNumberInput](getResultsFromPhoneNumber) ${e}`);
   }
 }
-function _o(n, o) {
+function xo(a, o) {
   try {
-    return o ? new uo(n).input(o) : "";
+    return o ? new io(a).input(o) : "";
   } catch (e) {
     throw new Error(`[MazPhoneNumberInput](getAsYouTypeFormat) ${e}`);
   }
 }
-async function et() {
-  const { default: n } = await import("./examples.mobile.json-JpNGylGv.mjs");
-  return n;
+async function _o() {
+  const { default: a } = await import("./examples.mobile.json-JpNGylGv.mjs");
+  return a;
 }
-function ot(n, o) {
+function et(a, o) {
   var e;
   try {
-    return n && o ? (e = co(o, n)) == null ? void 0 : e.formatNational() : void 0;
+    return a && o ? (e = uo(o, a)) == null ? void 0 : e.formatNational() : void 0;
   } catch (t) {
     console.error(`[maz-ui](MazPhoneNumberInput) ${t}`);
   }
 }
 function He() {
-  function n(o, e) {
+  function a(o, e) {
     return ce(o) === ce(e);
   }
   return {
-    getAsYouTypeFormat: _o,
-    getPhoneNumberResults: xo,
-    getPhoneNumberExamplesFile: et,
-    getPhoneNumberExample: ot,
-    isSameCountryCallingCode: n,
-    isCountryAvailable: Xo,
+    getAsYouTypeFormat: xo,
+    getPhoneNumberResults: Xo,
+    getPhoneNumberExamplesFile: _o,
+    getPhoneNumberExample: et,
+    isSameCountryCallingCode: a,
+    isCountryAvailable: Zo,
     getCountries: Oe,
     getCountryCallingCode: ce
   };
 }
-const tt = /* @__PURE__ */ se({
+const ot = /* @__PURE__ */ ne({
   __name: "PhoneInput",
-  props: /* @__PURE__ */ ke({
+  props: /* @__PURE__ */ Pe({
     id: {},
     color: {},
     size: {},
@@ -1484,71 +1481,71 @@ const tt = /* @__PURE__ */ se({
     modelValue: {},
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ ke(["update:model-value"], ["update:modelValue"]),
-  setup(n, { emit: o }) {
-    const e = n, t = o, r = ao(n, "modelValue"), { getPhoneNumberExamplesFile: u, getPhoneNumberExample: y } = He(), { selectionRange: m, results: O, selectedCountry: $ } = Me("data"), v = E(), P = E(!1);
-    function i(g, V) {
-      const C = y(g, V);
+  emits: /* @__PURE__ */ Pe(["update:model-value"], ["update:modelValue"]),
+  setup(a, { emit: o }) {
+    const e = a, t = o, r = ao(a, "modelValue"), { getPhoneNumberExamplesFile: u, getPhoneNumberExample: v } = He(), { selectionRange: p, results: O, selectedCountry: $ } = Me("data"), g = L(), V = L(!1);
+    function i(b, S) {
+      const C = v(b, S);
       return C ? `${e.locales.phoneInput.example} ${C}` : void 0;
     }
     const f = h(() => {
-      var V;
+      var S;
       if (e.label || e.placeholder)
         return e.label || e.placeholder;
-      const g = e.locales.phoneInput.placeholder;
-      if (e.noExample || !v.value)
-        return g;
+      const b = e.locales.phoneInput.placeholder;
+      if (e.noExample || !g.value)
+        return b;
       {
-        const C = i(v.value, $.value);
-        return (V = O.value) != null && V.isValid || !C ? g : C;
+        const C = i(g.value, $.value);
+        return (S = O.value) != null && S.isValid || !C ? b : C;
       }
-    }), I = h(() => e.placeholder ? {
+    }), z = h(() => e.placeholder ? {
       placeholder: f.value
     } : {
       label: f.value
-    }), S = E();
-    async function R() {
+    }), w = L();
+    async function D() {
       try {
-        if (v.value)
+        if (g.value)
           return;
-        v.value = await u();
-      } catch (g) {
-        console.error("[maz-ui](MazPhoneNumberInput) while loading phone number examples file", g);
+        g.value = await u();
+      } catch (b) {
+        console.error("[maz-ui](MazPhoneNumberInput) while loading phone number examples file", b);
       }
     }
-    async function Y(g) {
-      S.value && g && J(S.value, g), await ie(), t("update:model-value", g);
+    async function Y(b) {
+      w.value && b && J(w.value, b), await ue(), t("update:model-value", b);
     }
-    function J(g, V) {
-      const C = g.$el.querySelector("input");
-      m.value.start = C == null ? void 0 : C.selectionStart, m.value.end = C == null ? void 0 : C.selectionEnd, m.value.cursorAtEnd = V && typeof m.value.start == "number" && V.length > 0 ? m.value.start >= V.length : !0;
+    function J(b, S) {
+      const C = b.$el.querySelector("input");
+      p.value.start = C == null ? void 0 : C.selectionStart, p.value.end = C == null ? void 0 : C.selectionEnd, p.value.cursorAtEnd = S && typeof p.value.start == "number" && S.length > 0 ? p.value.start >= S.length : !0;
     }
     return Ie(() => {
-      e.noExample || R();
-    }), (g, V) => (b(), U(Ce, oe({
-      id: g.id,
+      e.noExample || D();
+    }), (b, S) => (y(), U(Ce, te({
+      id: b.id,
       ref_key: "PhoneInputRef",
-      ref: S,
+      ref: w,
       "model-value": r.value
-    }, { ...g.$attrs, ...I.value }, {
-      disabled: g.disabled,
-      color: g.color,
-      error: g.error,
-      size: g.size,
-      success: g.success,
+    }, { ...b.$attrs, ...z.value }, {
+      disabled: b.disabled,
+      color: b.color,
+      error: b.error,
+      size: b.size,
+      success: b.success,
       class: ["m-phone-input", [
         {
-          "--border-radius": g.hasRadius,
-          "--error": g.error || !k(O).isValid,
-          "--focused": P.value
+          "--border-radius": b.hasRadius,
+          "--error": b.error || !k(O).isValid,
+          "--focused": V.value
         }
       ]],
-      onFocus: V[0] || (V[0] = (C) => P.value = !0),
-      onBlur: V[1] || (V[1] = (C) => P.value = !1),
-      "onUpdate:modelValue": V[2] || (V[2] = (C) => Y(C))
+      onFocus: S[0] || (S[0] = (C) => V.value = !0),
+      onBlur: S[1] || (S[1] = (C) => V.value = !1),
+      "onUpdate:modelValue": S[2] || (S[2] = (C) => Y(C))
     }), null, 16, ["id", "model-value", "disabled", "color", "error", "size", "success", "class"]));
   }
-}), lt = /* @__PURE__ */ re(tt, [["__scopeId", "data-v-ebe8f08f"]]), nt = /* @__PURE__ */ se({
+}), tt = /* @__PURE__ */ re(ot, [["__scopeId", "data-v-ebe8f08f"]]), lt = /* @__PURE__ */ ne({
   name: "MazPhoneNumberInput",
   inheritAttrs: !1,
   __name: "MazPhoneNumberInput",
@@ -1602,73 +1599,73 @@ const tt = /* @__PURE__ */ se({
     }) }
   },
   emits: ["update:model-value", "country-code", "update:country-code", "update", "data"],
-  setup(n, { emit: o }) {
-    const e = n, t = o, { fetchCountryCode: r, sanitizePhoneNumber: u, getBrowserLocale: y } = Ue(), { isCountryAvailable: m, getPhoneNumberResults: O, getAsYouTypeFormat: $ } = He(), v = Ae({
+  setup(a, { emit: o }) {
+    const e = a, t = o, { fetchCountryCode: r, sanitizePhoneNumber: u, getBrowserLocale: v } = Ue(), { isCountryAvailable: p, getPhoneNumberResults: O, getAsYouTypeFormat: $ } = He(), g = Ae({
       componentName: "MazPhoneNumberInput",
       providedId: e.id
-    }), P = E(""), i = E(), f = E({
+    }), V = L(""), i = L(), f = L({
       isValid: !1,
       countryCode: void 0
-    }), I = E(), S = E({
+    }), z = L(), w = L({
       start: 0,
       end: 0,
       cursorAtEnd: !0
     });
     so("data", {
       selectedCountry: i,
-      phoneNumber: P,
+      phoneNumber: V,
       results: f,
-      selectionRange: S
+      selectionRange: w
     });
-    const R = h(() => ({
-      ...Zo,
+    const D = h(() => ({
+      ...Jo,
       ...e.translations
     }));
     Ie(async () => {
-      var a;
+      var n;
       if (C(e.countryCode ?? e.defaultCountryCode), e.fetchCountry && !i.value) {
-        const w = await r();
-        C(w);
+        const A = await r();
+        C(A);
       }
       if (!e.defaultCountryCode && !e.noUseBrowserLocale && !i.value) {
-        const w = (a = y()) == null ? void 0 : a.locale;
-        C(w);
+        const A = (n = v()) == null ? void 0 : n.locale;
+        C(A);
       }
     });
-    const Y = E();
+    const Y = L();
     function J() {
-      var a;
-      return (a = Y.value) == null ? void 0 : a.$el.querySelector("input");
+      var n;
+      return (n = Y.value) == null ? void 0 : n.$el.querySelector("input");
     }
-    async function g() {
-      var a;
-      await ie(), (a = J()) == null || a.select();
+    async function b() {
+      var n;
+      await ue(), (n = J()) == null || n.select();
     }
-    function V(a) {
+    function S(n) {
       Z({
-        countryCode: a
-      }), g();
+        countryCode: n
+      }), b();
     }
-    function C(a) {
-      if (a) {
-        if (!m(a)) {
+    function C(n) {
+      if (n) {
+        if (!p(n)) {
           i.value = void 0;
           return;
         }
-        i.value = a;
+        i.value = n;
       }
     }
     function W({
-      newPhoneNumber: a,
-      updateResults: w = !0
+      newPhoneNumber: n,
+      updateResults: A = !0
     }) {
-      const K = u(a);
-      if (w && (f.value = O({
+      const K = u(n);
+      if (A && (f.value = O({
         phoneNumber: K,
         countryCode: i.value
-      })), S.value.cursorAtEnd && !e.noFormattingAsYouType && e.autoFormat) {
-        const T = f.value.isValid ? f.value.formatNational : K;
-        I.value = $(i.value, T), P.value = I.value;
+      })), w.value.cursorAtEnd && !e.noFormattingAsYouType && e.autoFormat) {
+        const F = f.value.isValid ? f.value.formatNational : K;
+        z.value = $(i.value, F), V.value = z.value;
       }
       f.value.countryCode && f.value.countryCode !== i.value && Z({
         countryCode: f.value.countryCode,
@@ -1676,26 +1673,26 @@ const tt = /* @__PURE__ */ se({
       });
     }
     function Z({
-      countryCode: a,
-      updateResults: w = !0
+      countryCode: n,
+      updateResults: A = !0
     }) {
-      if (!a) {
+      if (!n) {
         i.value = void 0;
         return;
       }
-      a !== i.value && C(a), w && (f.value = O({
-        phoneNumber: P.value,
-        countryCode: a
+      n !== i.value && C(n), A && (f.value = O({
+        phoneNumber: V.value,
+        countryCode: n
       })), W({
-        newPhoneNumber: P.value,
+        newPhoneNumber: V.value,
         updateResults: !1
       });
     }
     return he(
       () => e.modelValue ?? e.defaultPhoneNumber,
-      (a, w) => {
-        a !== w && a !== P.value && W({
-          newPhoneNumber: a
+      (n, A) => {
+        n !== A && n !== V.value && W({
+          newPhoneNumber: n
         });
       },
       {
@@ -1703,9 +1700,9 @@ const tt = /* @__PURE__ */ se({
       }
     ), he(
       () => e.countryCode ?? e.defaultCountryCode,
-      (a, w) => {
-        a && a !== w && a !== i.value && Z({
-          countryCode: a
+      (n, A) => {
+        n && n !== A && n !== i.value && Z({
+          countryCode: n
         });
       },
       {
@@ -1713,98 +1710,85 @@ const tt = /* @__PURE__ */ se({
       }
     ), he(
       f,
-      (a) => {
-        t("update", a), t("data", a), a.e164 && a.isValid ? t("update:model-value", a.e164) : t("update:model-value", P.value), t("country-code", i.value), t("update:country-code", i.value);
+      (n) => {
+        t("update", n), t("data", n), n.e164 && n.isValid ? t("update:model-value", n.e164) : t("update:model-value", V.value), t("country-code", i.value), t("update:country-code", i.value);
       },
       {
         immediate: !0
       }
-    ), (a, w) => {
+    ), (n, A) => {
       var K;
-      return b(), L(
+      return y(), P(
         "div",
         {
-          class: F(["m-phone-number-input", [e.class, { "--block": a.block }, a.orientation ? `--${a.orientation}` : void 0]]),
-          style: ee(a.style)
+          class: M(["m-phone-number-input", [e.class, { "--block": n.block }, n.orientation ? `--${n.orientation}` : void 0]]),
+          style: ee(n.style)
         },
         [
-          a.noCountrySelector ? z("v-if", !0) : (b(), U(Jo, oe({
+          n.noCountrySelector ? E("v-if", !0) : (y(), U(Go, te({
             key: 0,
-            id: k(v)
-          }, a.countrySelectAttributes, {
+            id: k(g)
+          }, n.countrySelectAttributes, {
             "model-value": i.value,
-            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,
-            "exclude-selectors": a.excludeSelectors,
-            error: a.error || (a.noValidationError ? !1 : !!P.value && !i.value),
-            success: a.success || (a.noValidationSuccess ? !1 : (K = f.value) == null ? void 0 : K.isValid),
-            locales: R.value,
-            disabled: a.disabled,
-            "search-threshold": a.searchThreshold,
-            "show-code-on-list": a.showCodeOnList,
-            "only-countries": a.onlyCountries,
-            "preferred-countries": a.preferredCountries,
-            width: a.countrySelectorWidth,
-            "onUpdate:modelValue": V
+            color: n.color,
+            size: n.size,
+            "country-locale": n.countryLocale,
+            "country-selector-display-name": n.countrySelectorDisplayName,
+            "custom-countries-list": n.customCountriesList,
+            "ignored-countries": n.ignoredCountries,
+            "list-position": n.listPosition,
+            "no-flags": n.noFlags,
+            "no-search": n.noSearch,
+            "exclude-selectors": n.excludeSelectors,
+            error: n.error || (n.noValidationError ? !1 : !!V.value && !i.value),
+            success: n.success || (n.noValidationSuccess ? !1 : (K = f.value) == null ? void 0 : K.isValid),
+            locales: D.value,
+            disabled: n.disabled,
+            "search-threshold": n.searchThreshold,
+            "show-code-on-list": n.showCodeOnList,
+            "only-countries": n.onlyCountries,
+            "preferred-countries": n.preferredCountries,
+            width: n.countrySelectorWidth,
+            "onUpdate:modelValue": S
           }), {
             "no-results": G(() => [
-              z(`
-          @slot Replace the "no results" icon in the country selector list
-        `),
-              N(a.$slots, "no-results", {}, void 0, !0)
+              N(n.$slots, "no-results", {}, void 0, !0)
             ]),
-            "selector-flag": G(({ countryCode: T }) => [
-              z(`
-          @slot Country selector flag
-            @binding {String} country-code - current selected country code - Ex: \`"FR"\`
-        `),
-              N(a.$slots, "selector-flag", { countryCode: T }, void 0, !0)
+            "selector-flag": G(({ countryCode: F }) => [
+              N(n.$slots, "selector-flag", { countryCode: F }, void 0, !0)
             ]),
-            "country-list-flag": G(({ isSelected: T, option: te }) => [
-              z(`
-          @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
-        `),
-              N(a.$slots, "country-list-flag", {
-                countryCode: te.iso2,
-                option: te,
-                isSelected: T
+            "country-list-flag": G(({ isSelected: F, option: le }) => [
+              N(n.$slots, "country-list-flag", {
+                countryCode: le.iso2,
+                option: le,
+                isSelected: F
               }, void 0, !0)
             ]),
             _: 3
             /* FORWARDED */
           }, 16, ["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", "search-threshold", "show-code-on-list", "only-countries", "preferred-countries", "width"])),
-          H(lt, oe({
-            id: k(v),
+          H(tt, te({
+            id: k(g),
             ref_key: "PhoneInputRef",
             ref: Y,
-            modelValue: P.value,
-            "onUpdate:modelValue": w[0] || (w[0] = (T) => P.value = T)
-          }, { ...a.$attrs, ...a.phoneInputAttributes }, {
-            color: a.color,
-            size: a.size,
-            "no-example": a.noExample,
+            modelValue: V.value,
+            "onUpdate:modelValue": A[0] || (A[0] = (F) => V.value = F)
+          }, { ...n.$attrs, ...n.phoneInputAttributes }, {
+            color: n.color,
+            size: n.size,
+            "no-example": n.noExample,
             block: "",
-            disabled: a.disabled,
-            "has-radius": !a.noCountrySelector,
-            success: a.success || (a.noValidationSuccess ? !1 : f.value.isValid),
-            error: a.error || (a.noValidationError ? !1 : !!P.value && !f.value.isValid),
-            locales: R.value,
-            "no-formatting-as-you-type": a.noFormattingAsYouType,
-            "auto-format": a.autoFormat,
-            label: a.label,
-            placeholder: a.placeholder,
-            "onUpdate:modelValue": w[1] || (w[1] = (T) => W({
-              newPhoneNumber: T
+            disabled: n.disabled,
+            "has-radius": !n.noCountrySelector,
+            success: n.success || (n.noValidationSuccess ? !1 : f.value.isValid),
+            error: n.error || (n.noValidationError ? !1 : !!V.value && !f.value.isValid),
+            locales: D.value,
+            "no-formatting-as-you-type": n.noFormattingAsYouType,
+            "auto-format": n.autoFormat,
+            label: n.label,
+            placeholder: n.placeholder,
+            "onUpdate:modelValue": A[1] || (A[1] = (F) => W({
+              newPhoneNumber: F
             }))
           }), null, 16, ["id", "modelValue", "color", "size", "no-example", "disabled", "has-radius", "success", "error", "locales", "no-formatting-as-you-type", "auto-format", "label", "placeholder"])
         ],
@@ -1813,9 +1797,9 @@ const tt = /* @__PURE__ */ se({
       );
     };
   }
-}), it = /* @__PURE__ */ re(nt, [["__scopeId", "data-v-420d6d4a"]]);
+}), rt = /* @__PURE__ */ re(lt, [["__scopeId", "data-v-420d6d4a"]]);
 export {
-  it as M,
+  rt as M,
   re as _,
   Me as i,
   Ae as u