maz-ui 3.37.2 → 3.37.4

package/components/chunks/MazPhoneNumberInput-D8hP4ZzW.mjs

@@ -0,0 +1,1419 @@
+import '../assets/MazPhoneNumberInput.css';
+import { getCurrentInstance as xe, computed as m, defineComponent as re, defineAsyncComponent as U, ref as S, onMounted as we, useSlots as _e, openBlock as C, createElementBlock as A, normalizeClass as E, normalizeStyle as ee, createElementVNode as O, createCommentVNode as v, renderSlot as N, createBlock as T, unref as h, resolveDynamicComponent as Fe, withDirectives as eo, mergeProps as ce, toHandlers as oo, vModelDynamic as to, createTextVNode as ze, toDisplayString as Z, withModifiers as ne, withCtx as Y, createVNode as W, useCssVars as lo, onBeforeMount as no, nextTick as ae, Transition as ao, Fragment as Ae, renderList as ro, mergeModels as Le, useModel as so, watch as he } from "vue";
+import { getCountries as Ne, getCountryCallingCode as de, getExampleNumber as uo, isSupportedCountry as io, parsePhoneNumberFromString as co, AsYouType as po } from "libphonenumber-js";
+function fo(l, n) {
+  let t;
+  return function(...d) {
+    clearTimeout(t), t = setTimeout(() => {
+      l.apply(this, d);
+    }, n);
+  };
+}
+const ke = ({
+  componentName: l,
+  providedId: n
+}) => {
+  const t = xe();
+  return m(() => n ?? `${l}-${t == null ? void 0 : t.uid}`);
+}, mo = {
+  key: 0,
+  class: "m-input-wrapper-left"
+}, yo = { class: "m-input-wrapper-input" }, vo = ["id", "type", "name", "inputmode", "placeholder", "aria-label", "disabled", "readonly", "required"], ho = { key: 0 }, bo = {
+  key: 1,
+  class: "m-input-wrapper-right"
+}, go = /* @__PURE__ */ re({
+  inheritAttrs: !1,
+  __name: "MazInput",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    modelValue: { type: [String, Number, null, Boolean], default: void 0 },
+    placeholder: { default: void 0 },
+    label: { default: void 0 },
+    name: { default: void 0 },
+    color: { default: "primary" },
+    type: { default: "text" },
+    required: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    id: { default: void 0 },
+    error: { type: Boolean, default: !1 },
+    success: { type: Boolean, default: !1 },
+    warning: { type: Boolean, default: !1 },
+    hint: { default: void 0 },
+    inputClasses: { default: void 0 },
+    noBorder: { type: Boolean, default: !1 },
+    noRadius: { type: Boolean, default: !1 },
+    inputmode: { default: "text" },
+    size: { default: "md" },
+    debounce: { type: [Boolean, Number], default: !1 },
+    debounceDelay: { default: 500 },
+    validButton: { type: Boolean, default: !1 },
+    validButtonLoading: { type: Boolean, default: !1 },
+    autoFocus: { type: Boolean, default: !1 },
+    borderActive: { type: Boolean, default: !1 },
+    leftIcon: { default: void 0 },
+    rightIcon: { default: void 0 },
+    roundedSize: { default: void 0 },
+    block: { type: Boolean }
+  },
+  emits: ["update:model-value", "focus", "blur", "click", "change"],
+  setup(l, { emit: n }) {
+    const t = U(() => import("./MazBtn-CNyFbl9Y.mjs")), d = U(() => import("./MazIcon-Cxrv3_OK.mjs")), f = U(() => import("./eye-slash-tjfxO0LK.mjs")), p = U(() => import("./eye-DqO_Jx56.mjs")), b = U(() => import("./check-7UA4j2f2.mjs")), o = l, I = n, B = S(!1), y = S(!1), L = S(), i = ke({
+      componentName: "MazInput",
+      providedId: o.id
+    });
+    we(() => {
+      var r;
+      o.autoFocus && ((r = L.value) == null || r.focus());
+    });
+    const g = m(() => o.type === "password"), z = m(() => B.value ? "text" : o.type), w = m(() => {
+      if (!o.noBorder) {
+        if (o.error)
+          return "maz-border-danger";
+        if (o.success)
+          return "maz-border-success";
+        if (o.warning)
+          return "maz-border-warning";
+        if (y.value || o.borderActive) {
+          if (o.color === "black")
+            return "maz-border-black";
+          if (o.color === "danger")
+            return "maz-border-danger";
+          if (o.color === "info")
+            return "maz-border-info";
+          if (o.color === "primary")
+            return "maz-border-primary";
+          if (o.color === "secondary")
+            return "maz-border-secondary";
+          if (o.color === "success")
+            return "maz-border-success";
+          if (o.color === "warning")
+            return "maz-border-warning";
+          if (o.color === "white")
+            return "maz-border-white";
+        }
+        return "--default-border";
+      }
+    }), V = _e(), F = m(() => {
+      const { required: r, placeholder: P } = o;
+      if (P)
+        return r ? `${P} *` : P;
+    }), a = m(() => K.value !== void 0 && K.value !== ""), $ = fo(
+      (r) => {
+        K.value = r;
+      },
+      typeof o.debounce == "number" ? o.debounce : o.debounceDelay ?? 500
+    ), K = m({
+      get: () => o.modelValue,
+      set: (r) => {
+        if (o.debounce)
+          return $(r);
+        I("update:model-value", r);
+      }
+    }), Q = m(() => (!!o.label || !!o.hint) && (y.value || !!a.value || !!o.placeholder || ["date", "month", "week"].includes(o.type))), ue = m(() => !!o.label || !!o.hint);
+    function ie() {
+      return !!V["right-icon"] || g.value || !!V["valid-button"] || o.validButton || !!o.rightIcon;
+    }
+    function H() {
+      return !!V["left-icon"] || !!o.leftIcon;
+    }
+    function te(r) {
+      I("focus", r), y.value = !0;
+    }
+    function pe(r) {
+      I("blur", r), y.value = !1;
+    }
+    function fe(r) {
+      return I("change", r);
+    }
+    return (r, P) => (C(), A(
+      "div",
+      {
+        class: E(["m-input", [
+          {
+            "--is-focused": y.value || r.borderActive,
+            "--should-up": Q.value,
+            "--has-label": ue.value,
+            "--is-disabled": r.disabled,
+            "--is-readonly": r.readonly,
+            "--has-z-2": r.error || r.warning || r.success,
+            "--has-state": r.error || r.warning || r.success,
+            "--block": r.block
+          },
+          o.class,
+          `--${r.color}`,
+          `--${r.size}`
+        ]]),
+        style: ee(r.style)
+      },
+      [
+        O(
+          "div",
+          {
+            class: E(["m-input-wrapper", [
+              r.inputClasses,
+              w.value,
+              r.roundedSize ? `--rounded-${r.roundedSize}` : { "maz-rounded": !r.noRadius }
+            ]])
+          },
+          [
+            H() ? (C(), A("div", mo, [
+              v(`
+          @slot left-icon - The icon to display on the left of the input
+        `),
+              r.$slots["left-icon"] || r.leftIcon ? N(r.$slots, "left-icon", { key: 0 }, () => [
+                typeof r.leftIcon == "string" ? (C(), T(h(d), {
+                  key: 0,
+                  name: r.leftIcon,
+                  class: "maz-text-xl maz-text-muted"
+                }, null, 8, ["name"])) : r.leftIcon ? (C(), T(Fe(r.leftIcon), {
+                  key: 1,
+                  class: "maz-text-xl maz-text-muted"
+                })) : v("v-if", !0)
+              ], !0) : v("v-if", !0)
+            ])) : v("v-if", !0),
+            O("div", yo, [
+              eo(O("input", ce({
+                id: h(i),
+                ref_key: "input",
+                ref: L,
+                "onUpdate:modelValue": P[0] || (P[0] = (G) => K.value = G),
+                type: z.value,
+                name: r.name
+              }, r.$attrs, {
+                inputmode: r.inputmode,
+                placeholder: F.value,
+                "aria-label": r.label || r.placeholder,
+                disabled: r.disabled,
+                readonly: r.readonly,
+                required: r.required,
+                class: "m-input-input"
+              }, oo({
+                blur: pe,
+                focus: te,
+                change: fe
+              }, !0), {
+                onClick: P[1] || (P[1] = (G) => r.$emit("click", G))
+              }), null, 16, vo), [
+                [to, K.value]
+              ]),
+              r.label || r.hint ? (C(), A(
+                "span",
+                {
+                  key: 0,
+                  ref: "label",
+                  class: E(["m-input-label", [
+                    {
+                      "maz-text-danger-600": r.error,
+                      "maz-text-success-600": r.success,
+                      "maz-text-warning-600": r.warning
+                    }
+                  ]])
+                },
+                [
+                  ze(
+                    Z(r.hint || r.label) + " ",
+                    1
+                    /* TEXT */
+                  ),
+                  r.required ? (C(), A("sup", ho, "*")) : v("v-if", !0)
+                ],
+                2
+                /* CLASS */
+              )) : v("v-if", !0)
+            ]),
+            ie() ? (C(), A("div", bo, [
+              v(`
+          @slot right-icon - The icon to display on the right of the input
+        `),
+              r.$slots["right-icon"] || r.rightIcon ? N(r.$slots, "right-icon", { key: 0 }, () => [
+                typeof r.rightIcon == "string" ? (C(), T(h(d), {
+                  key: 0,
+                  name: r.rightIcon,
+                  class: "maz-text-xl maz-text-muted"
+                }, null, 8, ["name"])) : r.rightIcon ? (C(), T(Fe(r.rightIcon), {
+                  key: 1,
+                  class: "maz-text-xl maz-text-muted"
+                })) : v("v-if", !0)
+              ], !0) : v("v-if", !0),
+              g.value ? (C(), T(h(t), {
+                key: 1,
+                color: "transparent",
+                tabindex: "-1",
+                size: "mini",
+                onClick: P[2] || (P[2] = ne((G) => B.value = !B.value, ["stop"]))
+              }, {
+                default: Y(() => [
+                  B.value ? (C(), T(h(f), {
+                    key: 0,
+                    class: "maz-text-xl maz-text-muted"
+                  })) : (C(), T(h(p), {
+                    key: 1,
+                    class: "maz-text-xl maz-text-muted"
+                  }))
+                ]),
+                _: 1
+                /* STABLE */
+              })) : v("v-if", !0),
+              v(`
+          @slot valid-button - Replace the valid button by your own
+        `),
+              r.$slots["valid-button"] || r.validButton ? N(r.$slots, "valid-button", { key: 2 }, () => [
+                W(h(t), {
+                  color: "transparent",
+                  disabled: r.disabled,
+                  tabindex: "-1",
+                  loading: r.validButtonLoading,
+                  class: "m-input-valid-button",
+                  size: "mini",
+                  type: "submit"
+                }, {
+                  default: Y(() => [
+                    W(h(b), { class: "maz-text-2xl maz-text-normal" })
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["disabled", "loading"])
+              ], !0) : v("v-if", !0)
+            ])) : v("v-if", !0)
+          ],
+          2
+          /* CLASS */
+        )
+      ],
+      6
+      /* CLASS, STYLE */
+    ));
+  }
+}), se = (l, n) => {
+  const t = l.__vccOpts || l;
+  for (const [d, f] of n)
+    t[d] = f;
+  return t;
+}, Ve = /* @__PURE__ */ se(go, [["__scopeId", "data-v-78090be8"]]);
+let be = null;
+function Co(l, n) {
+  be && clearTimeout(be), be = setTimeout(l, n);
+}
+function zo(l, n) {
+  const t = l.length, d = n.length, f = [];
+  for (let p = 0; p <= t; p++)
+    f[p] = [p];
+  for (let p = 0; p <= d; p++)
+    f[0][p] = p;
+  for (let p = 1; p <= t; p++)
+    for (let b = 1; b <= d; b++) {
+      const o = l[p - 1] === n[b - 1] ? 0 : 1;
+      f[p][b] = Math.min(
+        f[p - 1][b] + 1,
+        f[p][b - 1] + 1,
+        f[p - 1][b - 1] + o
+      );
+    }
+  return f[t][d];
+}
+function Ke(l) {
+  return l.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").toLowerCase();
+}
+function Te(l, n) {
+  const t = zo(l, n), d = Math.max(l.length, n.length);
+  return 1 - t / d;
+}
+function Vo(l, n, t = 0.75) {
+  return Te(l, n) >= t;
+}
+function ge(l, n, t = 0.75) {
+  const d = m(
+    () => Ke(typeof l == "string" ? l : l.value)
+  ), f = m(
+    () => Ke(typeof n == "string" ? n : n.value)
+  ), p = m(() => typeof t == "number" ? t : t.value), b = m(() => Te(d.value, f.value));
+  return {
+    isMatching: m(
+      () => Vo(d.value, f.value, p.value)
+    ),
+    score: b
+  };
+}
+const wo = ["aria-label"], ko = { class: "m-select-list__no-results" }, So = {
+  key: 2,
+  class: "m-select-list__scroll-wrapper",
+  tabindex: "-1"
+}, Io = { class: "m-select-list-optgroup" }, Bo = ["onClick"], $o = /* @__PURE__ */ re({
+  inheritAttrs: !1,
+  __name: "MazSelect",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    id: { default: void 0 },
+    modelValue: { type: [String, Number, null, Boolean, Array], default: void 0 },
+    options: { default: void 0 },
+    optionValueKey: { default: "value" },
+    optionLabelKey: { default: "label" },
+    optionInputValueKey: { default: "label" },
+    listPosition: { default: "bottom left" },
+    itemHeight: { default: void 0 },
+    maxListHeight: { default: 240 },
+    maxListWidth: { default: void 0 },
+    size: { default: "md" },
+    color: { default: "primary" },
+    search: { type: Boolean },
+    searchPlaceholder: { default: "Search in options" },
+    open: { type: Boolean },
+    multiple: { type: Boolean },
+    required: { type: Boolean },
+    disabled: { type: Boolean },
+    block: { type: Boolean }
+  },
+  emits: ["close", "open", "blur", "focus", "change", "update:model-value", "selected-option"],
+  setup(l, { expose: n, emit: t }) {
+    lo((e) => ({
+      b5e9a382: z.value,
+      "98e2c384": i.value,
+      "4f69e826": g.value
+    }));
+    const d = U(() => import("./MazCheckbox-eSSrvpn9.mjs")), f = U(() => import("./magnifying-glass-DZGg7953.mjs")), p = U(() => import("./chevron-down-CzMH-gFW.mjs")), b = U(() => import("./no-symbol-QAqP9IlR.mjs"));
+    n({
+      openList: x,
+      closeList: le
+    });
+    const o = l, I = t, B = S(!1), y = S(), L = m(
+      () => ["black", "transparent", "white"].includes(o.color)
+    ), i = m(
+      () => L.value ? "var(--maz-color-black)" : `var(--maz-color-${o.color}-800)`
+    ), g = m(
+      () => L.value ? "var(--maz-color-muted)" : `var(--maz-color-${o.color}-100)`
+    ), z = m(
+      () => L.value ? "var(--maz-color-muted)" : `var(--maz-color-${o.color}-200)`
+    ), w = m(() => B.value || o.open), V = ke({
+      componentName: "MazSelect",
+      providedId: o.id
+    });
+    function F(e) {
+      return {
+        [o.optionValueKey]: e,
+        [o.optionLabelKey]: e,
+        [o.optionInputValueKey]: e
+      };
+    }
+    function a(e) {
+      return {
+        ...e,
+        [o.optionValueKey]: e[o.optionValueKey],
+        [o.optionLabelKey]: e[o.optionLabelKey],
+        [o.optionInputValueKey]: e[o.optionInputValueKey]
+      };
+    }
+    const $ = m(() => {
+      var s;
+      const e = [];
+      if (!((s = o.options) != null && s.length))
+        return [];
+      for (const u of o.options)
+        typeof u == "string" || typeof u == "number" || typeof u == "boolean" ? e.push(F(u)) : "options" in u && Array.isArray(u.options) ? e.push(
+          { label: u.label, isOptGroup: !0 },
+          ...u.options.map(
+            (c) => typeof c == "string" || typeof c == "number" || typeof c == "boolean" ? F(c) : a(c)
+          )
+        ) : e.push(a(u));
+      return e;
+    }), q = m(
+      () => {
+        var e;
+        return ((e = $.value) == null ? void 0 : e.filter((s) => o.multiple ? Array.isArray(o.modelValue) ? o.modelValue.includes(s[o.optionValueKey]) && !H(s[o.optionValueKey]) : !1 : o.modelValue === s[o.optionValueKey] && !H(s[o.optionValueKey]))) ?? [];
+      }
+    );
+    no(() => {
+      var e;
+      (e = o.options) != null && e.length || console.warn("[maz-ui](MazSelect) you must provide options"), ve();
+    });
+    const K = S(), Q = S(), ue = S(), ie = S(), H = (e) => e == null;
+    function te(e) {
+      var u;
+      return (((u = q.value) == null ? void 0 : u.some(
+        (c) => c[o.optionValueKey] === e[o.optionValueKey]
+      )) ?? !1) && !H(e[o.optionValueKey]);
+    }
+    const pe = m(() => {
+      var s;
+      if (o.multiple && o.modelValue && Array.isArray(o.modelValue))
+        return o.modelValue.map(
+          (u) => {
+            var c, k;
+            return (k = (c = $.value) == null ? void 0 : c.find((M) => M[o.optionValueKey] === u)) == null ? void 0 : k[o.optionInputValueKey];
+          }
+        ).join(", ");
+      const e = (s = $.value) == null ? void 0 : s.find(
+        (u) => u[o.optionValueKey] === o.modelValue
+      );
+      return H(o.modelValue) || e == null ? void 0 : e[o.optionInputValueKey];
+    }), fe = m(
+      () => o.listPosition.includes("bottom") ? "maz-slide" : "maz-slideinvert"
+    ), r = S(""), P = S("");
+    function G(e) {
+      return e.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[^\dA-Za-z\u0400-\u04FF]/g, "");
+    }
+    const me = (e, s) => s && e && G(e.toString().toLocaleLowerCase().trim()).includes(
+      G(s.toLocaleLowerCase().trim())
+    );
+    function Ie(e) {
+      var s;
+      return e ? (s = $.value) == null ? void 0 : s.filter((u) => {
+        const c = u[o.optionLabelKey], k = u[o.optionValueKey], M = u[o.optionInputValueKey];
+        return me(c, e) || me(M, e) || me(k, e) || typeof c == "string" && ge(c, e).isMatching.value || typeof M == "string" && ge(M, e).isMatching.value || typeof k == "string" && ge(k, e).isMatching.value;
+      }) : $.value;
+    }
+    const D = m(() => Ie(r.value));
+    async function le(e) {
+      var s;
+      if (w.value) {
+        if (e && ("relatedTarget" in e && ((s = K.value) != null && s.contains(e.relatedTarget)) || e.type === "keydown"))
+          return e.preventDefault();
+        await ae(), B.value = !1, y.value = 0, I("close", e);
+      }
+    }
+    async function x(e) {
+      o.disabled || w.value || (e == null || e.preventDefault(), B.value = !0, await ye(), I("focus", e), I("open", B.value));
+    }
+    function Be() {
+      var e, s;
+      (s = ((e = Q.value) == null ? void 0 : e.$el).querySelector("input")) == null || s.focus();
+    }
+    function je(e) {
+      B.value ? le(e) : Be();
+    }
+    function Qe(e) {
+      var s, u;
+      r.value = e, (u = ((s = ue.value) == null ? void 0 : s.$el).querySelector("input")) == null || u.focus();
+    }
+    function Ge(e) {
+      var u;
+      e === "Backspace" && P.value.length > 0 ? P.value = P.value.slice(0, -1) : P.value += e;
+      const s = Ie(P.value);
+      s != null && s.length && (y.value = (u = D.value) == null ? void 0 : u.findIndex(
+        (c) => c[o.optionValueKey] === s[0][o.optionValueKey]
+      ), typeof y.value == "number" && y.value >= 0 && ye(y.value)), Co(() => {
+        P.value = "";
+      }, 1e3);
+    }
+    const Je = (e) => {
+      const s = e.key;
+      /^[\dA-Za-z\u0400-\u04FF]$/.test(s) ? (e.preventDefault(), x(e), o.search ? Qe(s) : Ge(s)) : $e(e);
+    }, $e = (e) => {
+      const s = e.code, u = ["ArrowUp", "ArrowDown"].includes(s), c = ["Enter", "Space"].includes(s), k = s === "Escape" && w.value;
+      u ? Ze(e, y.value) : c ? Xe(e, y.value) : k && le();
+    }, Ze = (e, s) => {
+      var k;
+      e.preventDefault();
+      const u = e.code;
+      w.value || x(e);
+      const c = (k = D.value) == null ? void 0 : k.length;
+      c && (typeof s == "number" ? s === c - 1 && u === "ArrowDown" ? y.value = 0 : s === 0 && u === "ArrowUp" ? y.value = c - 1 : y.value = u === "ArrowDown" ? s + 1 : s - 1 : y.value = u === "ArrowDown" ? 0 : c - 1, ye(y.value));
+    }, Xe = (e, s) => {
+      var c, k, M;
+      if (e.preventDefault(), !w.value)
+        return x(e);
+      const u = s ? ((c = D.value) == null ? void 0 : c[s]) ?? ((k = D.value) == null ? void 0 : k[0]) : (M = D.value) == null ? void 0 : M[0];
+      H(u) || Pe(u);
+    };
+    async function ye(e) {
+      var u, c;
+      await ae(), typeof e != "number" && ve();
+      const s = e ?? y.value;
+      typeof s == "number" && s >= 0 && ((c = (u = ie.value) == null ? void 0 : u.querySelectorAll(".m-select-list-item")[s]) == null || c.scrollIntoView({
+        behavior: "auto",
+        block: "nearest",
+        inline: "start"
+      }));
+    }
+    function ve(e) {
+      var u;
+      const s = (u = D.value) == null ? void 0 : u.findIndex((c) => {
+        var k, M;
+        return o.multiple && Array.isArray(o.modelValue) ? e ? e[o.optionValueKey] === c[o.optionValueKey] : [...o.modelValue].reverse()[0] === c[o.optionValueKey] : ((M = (k = q.value) == null ? void 0 : k[0]) == null ? void 0 : M[o.optionValueKey]) === c[o.optionValueKey];
+      });
+      y.value = s && s >= 0 ? s : 0;
+    }
+    const Pe = (e, s = !0) => {
+      var M;
+      s && !o.multiple && ae(() => le()), r.value = "";
+      const u = (M = q.value) == null ? void 0 : M.some(
+        (_) => _[o.optionValueKey] === e[o.optionValueKey]
+      );
+      let c = q.value;
+      u && o.multiple ? c = c == null ? void 0 : c.filter(
+        (_) => _[o.optionValueKey] !== e[o.optionValueKey]
+      ) : o.multiple ? c.push(e) : c = [e];
+      const k = c.map((_) => _[o.optionValueKey]);
+      I("update:model-value", o.multiple ? k : k[0]), I("selected-option", e), ve(e), Be();
+    };
+    return (e, s) => (C(), A(
+      "div",
+      {
+        ref_key: "mazSelectElement",
+        ref: K,
+        class: E(["m-select", [
+          { "--is-open": w.value, "--disabled": e.disabled, "--block": e.block },
+          o.class,
+          `--${e.size}`
+        ]]),
+        style: ee(e.style),
+        onBlurCapture: le
+      },
+      [
+        W(Ve, ce({
+          id: h(V),
+          ref_key: "mazInputComponent",
+          ref: Q,
+          class: "m-select-input"
+        }, e.$attrs, {
+          required: e.required,
+          "border-active": B.value,
+          color: e.color,
+          "model-value": pe.value,
+          autocomplete: "off",
+          size: e.size,
+          block: "",
+          disabled: e.disabled,
+          onFocus: ne(x, ["prevent", "stop"]),
+          onClick: ne(x, ["prevent", "stop"]),
+          onChange: s[0] || (s[0] = (u) => I("change", u)),
+          onKeydown: Je
+        }), {
+          "right-icon": Y(() => [
+            O("button", {
+              tabindex: "-1",
+              type: "button",
+              class: "m-select-input__toggle-button maz-custom",
+              "aria-label": `${w.value ? "collapse" : "expand"} list of options`,
+              onClick: ne(je, ["stop"])
+            }, [
+              W(h(p), { class: "m-select-chevron maz-text-xl" })
+            ], 8, wo)
+          ]),
+          _: 1
+          /* STABLE */
+        }, 16, ["id", "required", "border-active", "color", "model-value", "size", "disabled"]),
+        W(ao, { name: fe.value }, {
+          default: Y(() => [
+            w.value ? (C(), A(
+              "div",
+              {
+                key: 0,
+                ref_key: "optionsListElement",
+                ref: ie,
+                class: E(["m-select-list", {
+                  "--top": e.listPosition.includes("top"),
+                  "--left": e.listPosition.includes("left"),
+                  "--right": e.listPosition.includes("right"),
+                  "--bottom": e.listPosition.includes("bottom")
+                }]),
+                style: ee({
+                  maxHeight: `${e.maxListHeight}px`,
+                  maxWidth: `${e.maxListWidth}px`
+                })
+              },
+              [
+                e.search ? (C(), T(Ve, {
+                  key: 0,
+                  ref_key: "searchInputComponent",
+                  ref: ue,
+                  modelValue: r.value,
+                  "onUpdate:modelValue": [
+                    s[1] || (s[1] = (u) => r.value = u),
+                    s[2] || (s[2] = (u) => y.value = 0)
+                  ],
+                  size: "sm",
+                  color: e.color,
+                  placeholder: e.searchPlaceholder,
+                  name: "search",
+                  autocomplete: "off",
+                  tabindex: "-1",
+                  class: "m-select-list__search-input maz-flex-none",
+                  "left-icon": h(f),
+                  onKeydown: $e
+                }, null, 8, ["modelValue", "color", "placeholder", "left-icon"])) : v("v-if", !0),
+                v(`
+          @slot No results slot - Displayed when no results corresponding with search query
+        `),
+                !D.value || D.value.length <= 0 ? N(e.$slots, "no-results", { key: 1 }, () => [
+                  O("span", ko, [
+                    W(h(b), { class: "maz-h-6 maz-w-6 maz-text-normal" })
+                  ])
+                ], !0) : (C(), A("div", So, [
+                  (C(!0), A(
+                    Ae,
+                    null,
+                    ro(D.value, (u, c) => (C(), A(
+                      Ae,
+                      { key: c },
+                      [
+                        v(`
+              @slot Custom optgroup label
+                @binding {String} label - the label of the optgroup
+            `),
+                        u.label && u.isOptGroup ? N(e.$slots, "optgroup", {
+                          key: 0,
+                          label: u.label
+                        }, () => [
+                          O(
+                            "span",
+                            Io,
+                            Z(u.label),
+                            1
+                            /* TEXT */
+                          )
+                        ], !0) : (C(), A("button", {
+                          key: 1,
+                          tabindex: "-1",
+                          type: "button",
+                          class: E(["m-select-list-item maz-custom maz-flex-none", [
+                            {
+                              "--is-keyboard-selected": y.value === c,
+                              "--is-selected": te(u),
+                              "--is-none-value": H(u[e.optionValueKey])
+                            }
+                          ]]),
+                          style: ee(e.itemHeight ? { height: `${e.itemHeight}px` } : void 0),
+                          onClick: ne((k) => Pe(u), ["prevent", "stop"])
+                        }, [
+                          e.multiple ? (C(), T(h(d), {
+                            key: 0,
+                            tabindex: "-1",
+                            "model-value": te(u),
+                            size: "sm",
+                            color: e.color
+                          }, null, 8, ["model-value", "color"])) : v("v-if", !0),
+                          v(`
+                @slot Custom option
+                  @binding {Object} option - the option object
+                  @binding {Boolean} is-selected - if the option is selected
+              `),
+                          N(e.$slots, "default", {
+                            option: u,
+                            isSelected: te(u)
+                          }, () => [
+                            O(
+                              "span",
+                              null,
+                              Z(u[e.optionLabelKey]),
+                              1
+                              /* TEXT */
+                            )
+                          ], !0)
+                        ], 14, Bo))
+                      ],
+                      64
+                      /* STABLE_FRAGMENT */
+                    ))),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ]))
+              ],
+              6
+              /* CLASS, STYLE */
+            )) : v("v-if", !0)
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["name"])
+      ],
+      38
+      /* CLASS, STYLE, NEED_HYDRATION */
+    ));
+  }
+}), Po = /* @__PURE__ */ se($o, [["__scopeId", "data-v-03e7398d"]]);
+function De(l) {
+  return !!l;
+}
+function Me(l) {
+  return [...l].map((n) => {
+    const t = n.codePointAt(0);
+    return t ? t % 32 + 127461 : void 0;
+  }).filter(De).map((n) => String.fromCodePoint(n)).join("");
+}
+const X = S();
+async function Fo() {
+  if (X.value)
+    return X.value;
+  const { default: l } = await import("./examples.mobile.json-zD8w3Qhl.mjs");
+  return X.value = l, X.value;
+}
+function Ao(l, n) {
+  return de(l) === de(n);
+}
+function Lo(l) {
+  var n;
+  try {
+    return X.value && l ? (n = uo(l, X.value)) == null ? void 0 : n.formatNational() : void 0;
+  } catch (t) {
+    console.error(`[maz-ui](MazPhoneNumberInput) ${t}`);
+  }
+}
+function Ko(l) {
+  try {
+    const n = io(l);
+    return n || (console.error(`[maz-ui](MazPhoneNumberInput) The code country "${l}" is not available`), !1);
+  } catch (n) {
+    return console.error(`[maz-ui](MazPhoneNumberInput) ${n}`), !1;
+  }
+}
+function Mo({
+  phoneNumber: l,
+  countryCode: n
+}) {
+  try {
+    if (!l)
+      return {
+        isValid: !1,
+        countryCode: n
+      };
+    const t = co(l, n);
+    return {
+      countryCode: (t == null ? void 0 : t.country) ?? n,
+      isValid: (t == null ? void 0 : t.isValid()) ?? !1,
+      isPossible: t == null ? void 0 : t.isPossible(),
+      countryCallingCode: t == null ? void 0 : t.countryCallingCode,
+      nationalNumber: t == null ? void 0 : t.nationalNumber,
+      type: t == null ? void 0 : t.getType(),
+      formatInternational: t == null ? void 0 : t.formatInternational(),
+      formatNational: t == null ? void 0 : t.formatNational(),
+      uri: t == null ? void 0 : t.getURI(),
+      e164: t == null ? void 0 : t.format("E.164"),
+      rfc3966: t == null ? void 0 : t.format("RFC3966"),
+      phoneNumber: l
+    };
+  } catch (t) {
+    throw new Error(`[MazPhoneNumberInput](getResultsFromPhoneNumber) ${t}`);
+  }
+}
+function Eo(l, n) {
+  try {
+    return n ? new po(l).input(n) : "";
+  } catch (t) {
+    throw new Error(`[MazPhoneNumberInput](getAsYouTypeFormat) ${t}`);
+  }
+}
+function Re() {
+  return {
+    examples: X,
+    getAsYouTypeFormat: Eo,
+    getPhoneNumberResults: Mo,
+    loadPhoneNumberExamplesFile: Fo,
+    getPhoneNumberExample: Lo,
+    isSameCountryCallingCode: Ao,
+    isCountryAvailable: Ko,
+    getCountries: Ne,
+    getCountryCallingCode: de
+  };
+}
+const { isCountryAvailable: No, getPhoneNumberResults: Ue, getAsYouTypeFormat: To } = Re(), oe = S(""), j = S(), J = S({
+  start: 0,
+  end: 0,
+  cursorAtEnd: !0
+}), R = S({
+  isValid: !1,
+  countryCode: void 0
+});
+async function Do() {
+  try {
+    const l = await fetch("https://ipwho.is"), { country_code: n } = await l.json();
+    return n;
+  } catch (l) {
+    throw new Error(`[MazPhoneNumberInput](fetchCountryCode) ${l}`);
+  }
+}
+function Oe(l) {
+  if (!l)
+    return "";
+  const n = new RegExp(/[^\d ()+-]/g);
+  return l.replaceAll(n, "").trim();
+}
+function Ro(l, n) {
+  const t = l == null ? void 0 : l.$el.querySelector("input");
+  J.value.start = t == null ? void 0 : t.selectionStart, J.value.end = t == null ? void 0 : t.selectionEnd, J.value.cursorAtEnd = n && typeof J.value.start == "number" && n.length > 0 ? J.value.start >= n.length : !0;
+}
+function Ye(l) {
+  if (l) {
+    if (!No(l)) {
+      j.value = void 0;
+      return;
+    }
+    j.value = l;
+  }
+}
+function qe({
+  newPhoneNumber: l,
+  autoFormat: n,
+  noFormattingAsYouType: t,
+  updateResults: d = !0
+}) {
+  const f = Oe(l);
+  if (d && (R.value = Ue({
+    phoneNumber: f,
+    countryCode: j.value
+  })), R.value.isValid && R.value.formatNational && n)
+    oe.value = R.value.formatNational;
+  else if (J.value.cursorAtEnd && !t) {
+    const p = To(j.value, f);
+    oe.value = p;
+  } else
+    oe.value = f;
+  R.value.countryCode && R.value.countryCode !== j.value && He({
+    countryCode: R.value.countryCode,
+    autoFormat: n,
+    noFormattingAsYouType: t,
+    updateResults: !1
+  });
+}
+function He({
+  countryCode: l,
+  autoFormat: n,
+  noFormattingAsYouType: t,
+  updateResults: d = !0
+}) {
+  if (!l) {
+    j.value = void 0;
+    return;
+  }
+  l !== j.value && Ye(l), d && (R.value = Ue({
+    phoneNumber: oe.value,
+    countryCode: l
+  })), qe({
+    newPhoneNumber: oe.value,
+    autoFormat: n,
+    noFormattingAsYouType: t,
+    updateResults: !1
+  });
+}
+function We() {
+  if (typeof window > "u")
+    return;
+  const l = window.navigator.language;
+  if (!l)
+    return;
+  let n = l.slice(3, 7).toUpperCase();
+  return n === "" && (n = l.slice(0, 2).toUpperCase()), n === "EN" && (n = "US"), n === "JA" && (n = "JP"), {
+    locale: n,
+    browserLocale: l
+  };
+}
+let Ce, Ee;
+function Uo(l, n, t) {
+  return t != null && t[n] ? t[n] : ((Ee !== l || !Ce) && (Ee = l, Ce = new Intl.DisplayNames([l], { type: "region" })), Ce.of(n));
+}
+function Oo(l, n) {
+  var f;
+  const t = [], d = Ne();
+  l = l ?? ((f = We()) == null ? void 0 : f.browserLocale) ?? "en-US";
+  for (const p of d) {
+    const b = Uo(l, p, n);
+    if (b)
+      try {
+        const o = de(p);
+        t.push({
+          iso2: p,
+          dialCode: o,
+          name: b
+        });
+      } catch (o) {
+        console.error(`[MazPhoneNumberInput](getCountryCallingCode) ${o}`);
+      }
+  }
+  return t;
+}
+function Se() {
+  return {
+    setSelectedCountry: Ye,
+    results: R,
+    sanitizePhoneNumber: Oe,
+    fetchCountryCode: Do,
+    selectedCountry: j,
+    phoneNumber: oe,
+    selectionRange: J,
+    saveCursorPosition: Ro,
+    onPhoneNumberChanged: qe,
+    onCountryChanged: He,
+    getBrowserLocale: We,
+    getCountriesList: Oo
+  };
+}
+const Yo = {
+  key: 0,
+  class: "maz-text-lg"
+}, qo = /* @__PURE__ */ re({
+  __name: "CountrySelector",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    modelValue: { default: void 0 },
+    id: {},
+    color: {},
+    size: {},
+    preferredCountries: { default: void 0 },
+    ignoredCountries: { default: void 0 },
+    onlyCountries: { default: void 0 },
+    customCountriesList: { default: void 0 },
+    locales: {},
+    listPosition: { default: "bottom left" },
+    noFlags: { type: Boolean },
+    noSearch: { type: Boolean },
+    disabled: { type: Boolean },
+    showCodeOnList: { type: Boolean },
+    countryLocale: { default: void 0 },
+    success: { type: Boolean },
+    error: { type: Boolean },
+    countrySelectorDisplayName: { type: Boolean },
+    width: { default: "9rem" }
+  },
+  emits: ["update:model-value"],
+  setup(l) {
+    const n = l, t = S(), { phoneNumber: d, getCountriesList: f } = Se(), p = m(() => f(n.countryLocale, n.customCountriesList)), b = m(() => {
+      var i;
+      return (i = p.value) == null ? void 0 : i.filter((g) => {
+        var z;
+        return !((z = n.ignoredCountries) != null && z.includes(g.iso2));
+      });
+    }), o = m(() => {
+      const i = n.onlyCountries || n.preferredCountries;
+      return i == null ? void 0 : i.map(
+        (g) => {
+          var z;
+          return (z = b.value) == null ? void 0 : z.find((w) => w.iso2.includes(g));
+        }
+      );
+    }), I = m(() => {
+      var i;
+      return (i = b.value) == null ? void 0 : i.filter((g) => {
+        var z;
+        return !((z = n.preferredCountries) != null && z.includes(g.iso2));
+      });
+    }), B = m(() => n.preferredCountries ? [...o.value ?? [], ...I.value ?? []] : n.onlyCountries ? o.value : b.value), y = m(() => {
+      var i;
+      return (i = B.value) == null ? void 0 : i.map((g) => g ? {
+        ...g,
+        dialCode: `+${g.dialCode}`
+      } : void 0).filter(De);
+    });
+    async function L() {
+      var i, g;
+      (g = (i = t.value) == null ? void 0 : i.$el.querySelector("input")) == null || g.focus();
+    }
+    return (i, g) => (C(), A(
+      "div",
+      {
+        class: E(["m-country-selector", [n.class, { "--no-flags": i.noFlags }]]),
+        style: ee(i.style)
+      },
+      [
+        i.modelValue && !i.noFlags ? (C(), A(
+          "button",
+          {
+            key: 0,
+            class: E(["m-country-selector__country-flag maz-text-xl", {
+              "--should-have-bottom-flag": i.locales.countrySelector.placeholder.length > 0
+            }]),
+            tabindex: "-1",
+            type: "button",
+            onClick: L
+          },
+          [
+            v(`
+        @slot Country selector flag
+          @binding {String} country-code - current selected country code - Ex: \`"FR"\`
+      `),
+            N(i.$slots, "selector-flag", { countryCode: i.modelValue }, () => [
+              ze(
+                Z(h(Me)(i.modelValue)),
+                1
+                /* TEXT */
+              )
+            ], !0)
+          ],
+          2
+          /* CLASS */
+        )) : v("v-if", !0),
+        W(Po, ce({
+          id: `country-selector-${i.id}`,
+          ref_key: "CountrySelectorRef",
+          ref: t,
+          "model-value": i.modelValue
+        }, i.$attrs, {
+          class: "m-country-selector__select",
+          "option-value-key": "iso2",
+          "option-label-key": "name",
+          "option-input-value-key": i.countrySelectorDisplayName ? "name" : "dialCode",
+          "max-list-width": 250,
+          disabled: i.disabled,
+          color: i.color,
+          size: i.size,
+          error: i.error,
+          "list-position": i.listPosition,
+          "item-height": 38,
+          success: i.success,
+          search: !i.noSearch,
+          "search-placeholder": i.locales.countrySelector.searchPlaceholder,
+          options: y.value,
+          hint: h(d) && !i.modelValue ? i.locales.countrySelector.error : void 0,
+          label: i.locales.countrySelector.placeholder,
+          style: {
+            width: i.width
+          },
+          "onUpdate:modelValue": g[0] || (g[0] = (z) => i.$emit("update:model-value", z))
+        }), {
+          "no-results": Y(() => [
+            N(i.$slots, "no-results", {}, void 0, !0)
+          ]),
+          default: Y(({ option: z, isSelected: w }) => [
+            O(
+              "div",
+              {
+                class: E(["m-country-selector__select__item maz-flex maz-items-center maz-gap-1 maz-truncate", {
+                  "m-country-selector__select__item--selected": w
+                }])
+              },
+              [
+                !i.noFlags && typeof z.iso2 == "string" ? (C(), A("span", Yo, [
+                  v(`
+              @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(i.$slots, "country-list-flag", {
+                    countryCode: z.iso2,
+                    option: z,
+                    isSelected: w
+                  }, () => [
+                    ze(
+                      Z(h(Me)(z.iso2)),
+                      1
+                      /* TEXT */
+                    )
+                  ], !0)
+                ])) : v("v-if", !0),
+                i.showCodeOnList ? (C(), A(
+                  "span",
+                  {
+                    key: 1,
+                    class: E(["maz-w-9 maz-flex-none", { "maz-text-muted": !w }])
+                  },
+                  Z(z.dialCode),
+                  3
+                  /* TEXT, CLASS */
+                )) : v("v-if", !0),
+                O(
+                  "span",
+                  {
+                    class: E(["maz-flex-1 maz-truncate", { "maz-font-semibold": w }])
+                  },
+                  Z(z.name),
+                  3
+                  /* TEXT, CLASS */
+                )
+              ],
+              2
+              /* CLASS */
+            )
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 16, ["id", "model-value", "option-input-value-key", "disabled", "color", "size", "error", "list-position", "success", "search", "search-placeholder", "options", "hint", "label", "style"])
+      ],
+      6
+      /* CLASS, STYLE */
+    ));
+  }
+}), Ho = /* @__PURE__ */ se(qo, [["__scopeId", "data-v-42f7ff97"]]), Wo = /* @__PURE__ */ re({
+  __name: "PhoneInput",
+  props: /* @__PURE__ */ Le({
+    id: {},
+    color: {},
+    size: {},
+    locales: {},
+    label: { default: void 0 },
+    noExample: { type: Boolean },
+    disabled: { type: Boolean },
+    hasRadius: { type: Boolean },
+    success: { type: Boolean },
+    error: { type: Boolean },
+    autoFormat: { type: Boolean },
+    noFormattingAsYouType: { type: Boolean }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Le(["update:model-value"], ["update:modelValue"]),
+  setup(l, { emit: n }) {
+    const t = l, d = n, f = so(l, "modelValue"), { loadPhoneNumberExamplesFile: p, getPhoneNumberExample: b, examples: o } = Re(), { selectedCountry: I, results: B, saveCursorPosition: y } = Se(), L = S(!1), i = m(() => {
+      var F;
+      if (t.label)
+        return t.label;
+      const V = t.locales.phoneInput.placeholder;
+      if (t.noExample || !o.value)
+        return V;
+      {
+        const a = b(I.value);
+        return (F = B.value) != null && F.isValid || !a ? V : `${t.locales.phoneInput.example} ${a}`;
+      }
+    }), g = S();
+    async function z() {
+      try {
+        return p();
+      } catch (V) {
+        console.error("[maz-ui](MazPhoneNumberInput) while loading phone number examples file", V);
+      }
+    }
+    async function w(V) {
+      g.value && V && y(g.value, V), await ae(), d("update:model-value", V);
+    }
+    return we(() => {
+      t.noExample || z();
+    }), (V, F) => (C(), T(Ve, ce({
+      id: `phone-number-${V.id}`,
+      ref_key: "PhoneInputRef",
+      ref: g,
+      "model-value": f.value
+    }, V.$attrs, {
+      label: i.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": V.hasRadius,
+        "--error": V.error || !h(B).isValid,
+        "--focused": L.value
+      }],
+      onFocus: F[0] || (F[0] = (a) => L.value = !0),
+      onBlur: F[1] || (F[1] = (a) => L.value = !1),
+      "onUpdate:modelValue": F[2] || (F[2] = (a) => w(a))
+    }), null, 16, ["id", "model-value", "label", "disabled", "color", "error", "size", "success", "class"]));
+  }
+}), jo = /* @__PURE__ */ se(Wo, [["__scopeId", "data-v-e2bf70df"]]), Qo = {
+  countrySelector: {
+    placeholder: "Country code",
+    error: "Choose country",
+    searchPlaceholder: "Search the country"
+  },
+  phoneInput: {
+    placeholder: "Phone number",
+    example: "Example:"
+  }
+}, Go = /* @__PURE__ */ re({
+  inheritAttrs: !1,
+  __name: "MazPhoneNumberInput",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    modelValue: { default: void 0 },
+    defaultPhoneNumber: { default: void 0 },
+    countryCode: { default: void 0 },
+    defaultCountryCode: { default: void 0 },
+    id: { default: void 0 },
+    placeholder: { default: void 0 },
+    preferredCountries: { default: void 0 },
+    ignoredCountries: { default: void 0 },
+    onlyCountries: { default: void 0 },
+    translations: { default: void 0 },
+    listPosition: { default: "bottom left" },
+    color: { default: "primary" },
+    size: { default: "md" },
+    noFlags: { type: Boolean },
+    disabled: { type: Boolean },
+    noExample: { type: Boolean },
+    noSearch: { type: Boolean },
+    noUseBrowserLocale: { type: Boolean },
+    fetchCountry: { type: Boolean },
+    noCountrySelector: { type: Boolean },
+    showCodeOnList: { type: Boolean },
+    customCountriesList: { default: void 0 },
+    autoFormat: { type: Boolean, default: !0 },
+    noFormattingAsYouType: { type: Boolean, default: !1 },
+    countryLocale: { default: void 0 },
+    noValidationError: { type: Boolean },
+    noValidationSuccess: { type: Boolean },
+    success: { type: Boolean },
+    error: { type: Boolean },
+    countrySelectorDisplayName: { type: Boolean },
+    countrySelectorWidth: { default: "9rem" },
+    block: { type: Boolean }
+  },
+  emits: ["update", "data", "country-code", "update:model-value", "update:country-code"],
+  setup(l, { emit: n }) {
+    const t = n, d = l, {
+      phoneNumber: f,
+      selectedCountry: p,
+      results: b,
+      fetchCountryCode: o,
+      setSelectedCountry: I,
+      onPhoneNumberChanged: B,
+      onCountryChanged: y,
+      getBrowserLocale: L
+    } = Se(), i = ke({
+      componentName: "MazPhoneNumberInput",
+      providedId: d.id
+    }), g = m(() => ({
+      ...Qo,
+      ...d.translations
+    }));
+    we(async () => {
+      var a;
+      if (I(d.countryCode ?? d.defaultCountryCode), d.fetchCountry && !p.value) {
+        const $ = await o();
+        I($);
+      }
+      if (!d.defaultCountryCode && !d.noUseBrowserLocale && !p.value) {
+        const $ = (a = L()) == null ? void 0 : a.locale;
+        I($);
+      }
+    });
+    const z = S();
+    function w() {
+      var a;
+      return (a = z.value) == null ? void 0 : a.$el.querySelector("input");
+    }
+    async function V() {
+      var a;
+      await ae(), (a = w()) == null || a.select();
+    }
+    function F(a) {
+      y({
+        countryCode: a,
+        autoFormat: d.autoFormat,
+        noFormattingAsYouType: d.noFormattingAsYouType
+      }), V();
+    }
+    return he(
+      () => d.modelValue ?? d.defaultPhoneNumber,
+      (a, $) => {
+        a && a !== $ && a !== f.value && B({
+          newPhoneNumber: a,
+          autoFormat: d.autoFormat,
+          noFormattingAsYouType: d.noFormattingAsYouType
+        });
+      },
+      {
+        immediate: !0
+      }
+    ), he(
+      () => d.countryCode ?? d.defaultCountryCode,
+      (a, $) => {
+        a && a !== $ && a !== p.value && y({
+          countryCode: a,
+          autoFormat: d.autoFormat,
+          noFormattingAsYouType: d.noFormattingAsYouType
+        });
+      },
+      {
+        immediate: !0
+      }
+    ), he(
+      b,
+      (a) => {
+        t("update", a), t("data", a), a.e164 && a.isValid ? t("update:model-value", a.e164) : t("update:model-value", f.value), t("country-code", p.value), t("update:country-code", p.value);
+      },
+      {
+        immediate: !0
+      }
+    ), (a, $) => {
+      var q;
+      return C(), A(
+        "div",
+        {
+          class: E(["m-phone-number-input", [d.class, { "--block": a.block }]]),
+          style: ee(a.style)
+        },
+        [
+          a.noCountrySelector ? v("v-if", !0) : (C(), T(Ho, {
+            key: 0,
+            id: h(i),
+            "model-value": h(p),
+            color: a.color,
+            size: a.size,
+            "country-locale": a.countryLocale,
+            "country-selector-display-name": a.countrySelectorDisplayName,
+            "custom-countries-list": a.customCountriesList,
+            "ignored-countries": a.ignoredCountries,
+            "list-position": a.listPosition,
+            "no-flags": a.noFlags,
+            "no-search": a.noSearch,
+            error: a.error || (a.noValidationError ? !1 : !!h(f) && !h(p)),
+            success: a.success || (a.noValidationSuccess ? !1 : (q = h(b)) == null ? void 0 : q.isValid),
+            locales: g.value,
+            disabled: a.disabled,
+            "show-code-on-list": a.showCodeOnList,
+            "only-countries": a.onlyCountries,
+            "preferred-countries": a.preferredCountries,
+            width: a.countrySelectorWidth,
+            "onUpdate:modelValue": F
+          }, {
+            "no-results": Y(() => [
+              v(`
+          @slot Replace the "no results" icon in the country selector list
+        `),
+              N(a.$slots, "no-results", {}, void 0, !0)
+            ]),
+            "selector-flag": Y(({ countryCode: K }) => [
+              v(`
+          @slot Country selector flag
+            @binding {String} country-code - current selected country code - Ex: \`"FR"\`
+        `),
+              N(a.$slots, "selector-flag", { countryCode: K }, void 0, !0)
+            ]),
+            "country-list-flag": Y(({ isSelected: K, option: Q }) => [
+              v(`
+          @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: Q.iso2,
+                option: Q,
+                isSelected: K
+              }, 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", "error", "success", "locales", "disabled", "show-code-on-list", "only-countries", "preferred-countries", "width"])),
+          W(jo, {
+            id: h(i),
+            ref_key: "PhoneInputRef",
+            ref: z,
+            "model-value": h(f),
+            color: a.color,
+            size: a.size,
+            "no-example": a.noExample,
+            block: "",
+            disabled: a.disabled,
+            "has-radius": !a.noCountrySelector,
+            success: a.success || (a.noValidationSuccess ? !1 : h(b).isValid),
+            error: a.error || (a.noValidationError ? !1 : !!h(f) && !h(b).isValid),
+            locales: g.value,
+            "no-formatting-as-you-type": a.noFormattingAsYouType,
+            "auto-format": a.autoFormat,
+            label: a.placeholder,
+            "onUpdate:modelValue": $[0] || ($[0] = (K) => h(B)({
+              newPhoneNumber: K,
+              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"])
+        ],
+        6
+        /* CLASS, STYLE */
+      );
+    };
+  }
+}), Xo = /* @__PURE__ */ se(Go, [["__scopeId", "data-v-c0af92cc"]]);
+export {
+  Xo as M,
+  se as _,
+  ke as u
+};