@alfadocs/ui-kit 1.53.0 → 1.54.0

package/dist/_chunks/{phone-input-opMMHkyh.js → phone-input-BzeUr49H.js}

@@ -1,19 +1,19 @@
 import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { forwardRef as De, useContext as Ae, useMemo as b, useState as B, useRef as H, useEffect as ce, useCallback as ue } from "react";
-import { u as $e } from "./registry-DvAUVLHh.js";
-import { u as Be } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
-import * as L from "@radix-ui/react-popover";
-import { R as He, _ as N } from "./index-4xgbg-sn.js";
-import { c as ee } from "./index-D2ZczOXr.js";
-import { useTranslation as Le } from "react-i18next";
-import { getCountries as Ke, parsePhoneNumberFromString as K, AsYouType as M, getCountryCallingCode as Me } from "libphonenumber-js/min";
-import { u as _e, F as qe } from "./form-field-context-B3APVHKx.js";
-import { c as Ge } from "./compose-refs-C0k0tdqF.js";
-import { n as J } from "./normalize-diacritics-BNGbFNlJ.js";
-import { b as Oe } from "./menu-row-BAr8bx1I.js";
-import { a as Q } from "./flag-DVBE6DnB.js";
-import { C as Ue } from "./chevron-down-DWE7GSq9.js";
-const We = {
+import { forwardRef as Je, useContext as Qe, useMemo as v, useState as q, useRef as b, useEffect as de, useCallback as G } from "react";
+import { u as Xe } from "./registry-DvAUVLHh.js";
+import { u as et } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import * as U from "@radix-ui/react-popover";
+import { R as tt, _ as I } from "./index-4xgbg-sn.js";
+import { c as pe } from "./index-D2ZczOXr.js";
+import { useTranslation as nt } from "react-i18next";
+import { getCountries as st, parsePhoneNumberFromString as P, AsYouType as O, getCountryCallingCode as ot } from "libphonenumber-js/min";
+import { u as rt, F as at, a as it } from "./form-field-context-DtiROUJV.js";
+import { c as dt } from "./compose-refs-C0k0tdqF.js";
+import { n as le } from "./normalize-diacritics-BNGbFNlJ.js";
+import { b as lt } from "./menu-row-BAr8bx1I.js";
+import { a as ue } from "./flag-DVBE6DnB.js";
+import { C as ut } from "./chevron-down-DWE7GSq9.js";
+const ct = {
   id: "phone-input",
   // A phone number is a single form value, not free-form rich text — `set_value`
   // (not `edit_inline`, which is reserved for in-place rich/cell editing).
@@ -86,16 +86,18 @@ const We = {
       description: "Sourced from the id prop."
     }
   }
-}, Ye = ee(
+}, pt = pe(
   [
     "ds:group ds:relative ds:inline-flex ds:items-stretch ds:w-full",
     "ds:rounded-[var(--radius-sm)] ds:border ds:border-border ds:bg-input",
     "ds:shadow-[var(--shadow-input)]",
     "ds:text-foreground",
     "ds:transition-[colors,box-shadow] ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
-    "ds:focus-within:outline-[length:var(--focus-ring-width)] ds:focus-within:outline-solid",
-    "ds:focus-within:outline-ring ds:focus-within:outline-offset-[length:var(--focus-ring-offset)]",
-    "ds:forced-colors:focus-within:outline-[CanvasText]",
+    /* The ring is for the number field only. The country button draws its
+       own, and `focus-within` here would draw a second one around it. */
+    "ds:has-[input:focus]:outline-[length:var(--focus-ring-width)] ds:has-[input:focus]:outline-solid",
+    "ds:has-[input:focus]:outline-ring ds:has-[input:focus]:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:has-[input:focus]:outline-[CanvasText]",
     "ds:has-[:disabled]:cursor-not-allowed ds:has-[:disabled]:opacity-50"
   ].join(" "),
   {
@@ -107,7 +109,7 @@ const We = {
       },
       tone: {
         default: "",
-        error: "ds:border-destructive ds:focus-within:outline-destructive"
+        error: "ds:border-destructive ds:has-[input:focus]:outline-destructive"
       }
     },
     defaultVariants: {
@@ -115,7 +117,7 @@ const We = {
       tone: "default"
     }
   }
-), pe = ee(
+), we = pe(
   [
     "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]",
     "ds:bg-transparent ds:text-foreground",
@@ -139,7 +141,7 @@ const We = {
     },
     defaultVariants: { size: "md" }
   }
-), Ze = ee(
+), ft = pe(
   [
     "ds:flex-1 ds:min-w-0 ds:bg-transparent ds:text-foreground ds:placeholder:text-muted-foreground",
     "ds:border-0 ds:outline-none",
@@ -156,7 +158,7 @@ const We = {
     },
     defaultVariants: { size: "md" }
   }
-), Je = [
+), mt = [
   "ds:z-[var(--z-popover)] ds:overflow-hidden ds:w-72",
   "ds:rounded-[var(--radius-md)] ds:border ds:border-border ds:bg-background ds:text-foreground",
   "ds:shadow-[var(--shadow-lg)]",
@@ -166,49 +168,49 @@ const We = {
   "ds:data-[side=bottom]:slide-in-from-top-2",
   "ds:data-[side=top]:slide-in-from-bottom-2",
   "ds:motion-reduce:animate-none"
-].join(" "), Qe = [
+].join(" "), ht = [
   "ds:w-full ds:bg-transparent ds:text-foreground ds:placeholder:text-muted-foreground",
   "ds:border-0 ds:border-b ds:border-b-border ds:outline-none",
   "ds:ps-3 ds:pe-3 ds:py-2 ds:text-[var(--font-size-sm)]",
   "ds:focus:outline-none"
-].join(" "), Xe = "ds:max-h-72 ds:overflow-y-auto ds:p-[var(--spacing-xs)]", et = [
+].join(" "), gt = "ds:max-h-72 ds:overflow-y-auto ds:p-[var(--spacing-xs)]", vt = [
   "ds:relative ds:flex ds:cursor-pointer ds:items-center ds:gap-[var(--spacing-sm)]",
   "ds:rounded-[var(--radius-sm)] ds:ps-3 ds:pe-3 ds:py-2 ds:text-[var(--font-size-sm)]",
   "ds:text-foreground ds:outline-none ds:select-none",
-  Oe.selected
-].join(" "), fe = [
+  lt.selected
+].join(" "), ze = [
   "ds:ps-3 ds:pe-3 ds:py-1.5",
   "type-eyebrow ds:text-muted-foreground"
-].join(" "), tt = "ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", nt = {
+].join(" "), bt = "ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", yt = {
   sm: "ds:size-3.5",
   md: "ds:size-4",
   lg: "ds:size-5"
-}, X = {
+}, ce = {
   sm: "sm",
   md: "md",
   lg: "lg"
 };
-function st(s, a) {
-  let l = 0;
+function Ct(s, a) {
+  let c = 0;
   for (let o = 0; o < a && o < s.length; o++)
-    s[o] >= "0" && s[o] <= "9" && l++;
-  return l;
+    s[o] >= "0" && s[o] <= "9" && c++;
+  return c;
 }
-function ot(s, a) {
+function xt(s, a) {
   if (a === 0) return 0;
-  let l = 0;
+  let c = 0;
   for (let o = 0; o < s.length; o++)
-    if (s[o] >= "0" && s[o] <= "9" && (l++, l === a))
+    if (s[o] >= "0" && s[o] <= "9" && (c++, c === a))
       return o + 1;
   return s.length;
 }
-function me(s, a, l, o, f) {
-  const i = f && f.length ? new Set(f) : null, d = (v) => a.has(v) && (!i || i.has(v));
+function Re(s, a, c, o, f) {
+  const i = f && f.length ? new Set(f) : null, d = (C) => a.has(C) && (!i || i.has(C));
   if (s && d(s)) return s;
-  if (l) {
-    const v = typeof navigator < "u" ? navigator.language : void 0;
-    if (v) {
-      const y = v.match(/-([A-Za-z]{2})/);
+  if (c) {
+    const C = typeof navigator < "u" ? navigator.language : void 0;
+    if (C) {
+      const y = C.match(/-([A-Za-z]{2})/);
       if (y) {
         const S = y[1].toUpperCase();
         if (d(S)) return S;
@@ -223,110 +225,113 @@ function me(s, a, l, o, f) {
   }
   return i ? f[0] : "IT";
 }
-function rt(s, a) {
-  let l;
+function Nt(s, a) {
+  let c;
   try {
-    l = new Intl.DisplayNames([s], { type: "region" });
+    c = new Intl.DisplayNames([s], { type: "region" });
   } catch {
-    l = new Intl.DisplayNames(["en"], { type: "region" });
+    c = new Intl.DisplayNames(["en"], { type: "region" });
   }
   const o = a.map((i) => ({
     code: i,
-    name: l.of(i) ?? i,
-    dialCode: Me(i)
+    name: c.of(i) ?? i,
+    dialCode: ot(i)
   })), f = new Intl.Collator(s);
   return o.sort((i, d) => f.compare(i.name, d.name));
 }
-const at = De(
+const It = Je(
   function({
     value: a,
-    defaultValue: l,
+    defaultValue: c,
     defaultCountry: o,
     detectBrowserCountry: f = !1,
     onChange: i,
     size: d = "md",
-    tone: v = "default",
+    tone: C = "default",
     disabled: y,
     readOnly: S,
-    placeholder: he,
+    placeholder: Se,
     popularCountries: V,
-    allowedCountries: F,
-    className: ge,
-    id: _,
-    name: be,
-    required: ye,
-    "aria-label": ve
-  }, Ce) {
-    const { t: w, i18n: R } = Le("ui"), I = _e(), k = Ae(qe) !== null, h = b(
-      () => new Set(Ke()),
+    allowedCountries: T,
+    className: Ee,
+    id: L,
+    name: W,
+    nameFormat: ke = "national",
+    required: Fe,
+    onBlur: Y,
+    "aria-label": Pe
+  }, Ve) {
+    var Ne;
+    const { t: w, i18n: E } = nt("ui"), z = rt(), k = Qe(at) !== null, h = v(
+      () => new Set(st()),
       []
-    ), u = b(() => {
-      if (!F || F.length === 0) return null;
-      const e = /* @__PURE__ */ new Set(), t = F.filter((n) => !h.has(n) || e.has(n) ? !1 : (e.add(n), !0));
+    ), p = v(() => {
+      if (!T || T.length === 0) return null;
+      const e = /* @__PURE__ */ new Set(), t = T.filter((n) => !h.has(n) || e.has(n) ? !1 : (e.add(n), !0));
       return t.length > 0 ? t : null;
-    }, [F, h]), xe = u !== null && u.length === 1, q = b(() => {
-      const e = me(
+    }, [T, h]), Te = p !== null && p.length === 1, Z = v(() => {
+      const e = Re(
         o,
         h,
         f,
-        R.language,
-        u
-      ), t = a ?? l;
+        E.language,
+        p
+      ), t = a ?? c;
       if (t) {
-        const n = K(t);
-        return n != null && n.country ? !u || u.includes(n.country) ? {
+        const n = P(t);
+        return n != null && n.country ? !p || p.includes(n.country) ? {
           country: n.country,
           display: n.formatNational(),
           pinned: !0
         } : {
           country: e,
-          display: new M(e).input(
+          display: new O(e).input(
             n.nationalNumber
           ),
           pinned: !0
         } : { country: e, display: t, pinned: !1 };
       }
       return { country: e, display: "", pinned: !1 };
-    }, []), [c, E] = B(q.country), [te, g] = B(
-      q.display
-    ), [G, O] = B(!1), [Ne, ne] = B(""), se = a !== void 0, U = H(""), j = H(null), T = H(q.pinned), D = H(null), we = Ge(Ce, D);
-    ce(() => {
-      if (T.current) return;
-      const e = me(
+    }, []), [l, j] = q(Z.country), [J, g] = q(
+      Z.display
+    ), [Q, X] = q(!1), [Le, fe] = q(""), me = a !== void 0, ee = b(""), D = b(null), A = b(Z.pinned), B = b(null), je = dt(Ve, B), he = b(null), ge = b(null);
+    de(() => {
+      if (A.current) return;
+      const e = Re(
         o,
         h,
         f,
-        R.language,
-        u
+        E.language,
+        p
       );
-      E((t) => t === e ? t : e);
+      j((t) => t === e ? t : e);
     }, [
-      R.language,
+      E.language,
       o,
       h,
       f,
-      u
-    ]), ce(() => {
-      if (!se) return;
+      p
+    ]), de(() => {
+      if (!me) return;
       const e = a ?? "";
-      if (e === U.current) return;
+      if (e === ee.current) return;
       if (e === "") {
         g("");
         return;
       }
-      const t = K(e);
-      t != null && t.country && (!u || u.includes(t.country)) ? (T.current = !0, E(t.country), g(t.formatNational())) : g(t ? t.formatNational() : e);
-    }, [a, se, u]), Be(() => {
-      if (j.current == null) return;
-      const e = j.current;
-      j.current = null;
-      const t = D.current;
+      const t = P(e);
+      t != null && t.country && (!p || p.includes(t.country)) ? (A.current = !0, j(t.country), g(t.formatNational())) : g(t ? t.formatNational() : e);
+    }, [a, me, p]), et(() => {
+      if (D.current == null) return;
+      const e = D.current;
+      D.current = null;
+      const t = B.current;
       t && document.activeElement === t && t.setSelectionRange(e, e);
     });
-    const C = ue(
+    const x = G(
       (e, t) => {
-        const n = K(e, t), p = (n == null ? void 0 : n.number) ?? "";
-        U.current = p, i == null || i(p, {
+        const n = P(e, t), u = (n == null ? void 0 : n.number) ?? "";
+        ee.current = u, i == null || i(u, {
           country: t,
           isValid: (n == null ? void 0 : n.isValid()) ?? !1,
           isPossible: (n == null ? void 0 : n.isPossible()) ?? !1,
@@ -334,88 +339,119 @@ const at = De(
         });
       },
       [i]
-    ), Ie = _ ?? (k ? I.id : void 0), oe = (k ? I.disabled : !1) || !!y, ze = (k ? I.required : !1) || !!ye, re = k ? I.invalid : !1, Se = re ? "error" : v, Re = k && I.describedBy ? I.describedBy : void 0, ke = he ?? w("inputs.phone.placeholder", "Phone number"), Pe = (e) => {
+    ), De = it(z, L), Ae = L ?? (k ? De : void 0), te = (k ? z.disabled : !1) || !!y, Be = (k ? z.required : !1) || !!Fe, ve = k ? z.invalid : !1, $e = ve ? "error" : C, He = k && z.describedBy ? z.describedBy : void 0, Ke = Se ?? w("inputs.phone.placeholder", "Phone number"), $ = b(Y);
+    $.current = Y;
+    const ne = b(!1), H = b(!1), K = G(
+      (e) => {
+        var t, n;
+        return e instanceof Node && !!((t = he.current) != null && t.contains(e) || (n = ge.current) != null && n.contains(e));
+      },
+      []
+    ), se = G(() => {
+      var e;
+      ne.current && (ne.current = !1, (e = $.current) == null || e.call($));
+    }, []), Me = () => {
+      ne.current = !0;
+    }, _e = (e) => {
+      const t = e.relatedTarget;
+      K(t) || t === null && H.current || se();
+    }, be = Y !== void 0;
+    de(() => {
+      if (!be) return;
+      let e;
+      const t = (u) => {
+        H.current = K(u.target), !H.current && (e = window.setTimeout(() => {
+          K(document.activeElement) || se();
+        }, 0));
+      }, n = () => {
+        H.current = !1;
+      };
+      return document.addEventListener("pointerdown", t, !0), document.addEventListener("pointerup", n, !0), document.addEventListener("pointercancel", n, !0), () => {
+        window.clearTimeout(e), document.removeEventListener("pointerdown", t, !0), document.removeEventListener("pointerup", n, !0), document.removeEventListener("pointercancel", n, !0);
+      };
+    }, [be, K, se]);
+    const oe = ke === "e164" && W !== void 0, qe = oe ? ((Ne = P(J, l)) == null ? void 0 : Ne.number) ?? "" : "", Ge = (e) => {
       if (S) return;
-      const t = e.target, n = t.value, p = t.selectionStart ?? n.length, z = st(n, p), Z = new M(c).input(n);
-      j.current = ot(Z, z), g(Z), C(Z, c);
-    }, ae = U, Ve = b(
+      const t = e.target, n = t.value, u = t.selectionStart ?? n.length, R = Ct(n, u), ie = new O(l).input(n);
+      D.current = xt(ie, R), g(ie), x(ie, l);
+    }, ye = ee, Ue = v(
       () => ({
-        getValue: () => ae.current,
+        getValue: () => ye.current,
         setValue: (e) => {
           if (e === "") {
-            g(""), C("", c);
+            g(""), x("", l);
             return;
           }
-          const t = K(e);
+          const t = P(e);
           if (t != null && t.country)
-            T.current = !0, E(t.country), g(t.formatNational()), C(t.formatNational(), t.country);
+            A.current = !0, j(t.country), g(t.formatNational()), x(t.formatNational(), t.country);
           else {
-            const p = new M(c).input(e);
-            g(p), C(p, c);
+            const u = new O(l).input(e);
+            g(u), x(u, l);
           }
         },
         clear: () => {
-          g(""), C("", c);
+          g(""), x("", l);
         },
         focus: () => {
           var e;
-          return (e = D.current) == null ? void 0 : e.focus();
+          return (e = B.current) == null ? void 0 : e.focus();
         }
       }),
-      [c, C, ae]
+      [l, x, ye]
     );
-    $e(We, Ve, _);
-    const Fe = (e) => {
-      if (e === c) {
-        O(!1);
+    Xe(ct, Ue, L);
+    const Oe = (e) => {
+      if (e === l) {
+        X(!1);
         return;
       }
-      const t = te.replace(/\D/g, ""), n = new M(e), p = t ? n.input(t) : "";
-      T.current = !0, E(e), g(p), O(!1), ne(""), C(p, e), requestAnimationFrame(() => {
-        var z;
-        (z = D.current) == null || z.focus();
+      const t = J.replace(/\D/g, ""), n = new O(e), u = t ? n.input(t) : "";
+      A.current = !0, j(e), g(u), X(!1), fe(""), x(u, e), requestAnimationFrame(() => {
+        var R;
+        (R = B.current) == null || R.focus();
       });
-    }, x = b(
-      () => rt(
-        R.language,
-        u ?? Array.from(h)
+    }, N = v(
+      () => Nt(
+        E.language,
+        p ?? Array.from(h)
       ),
-      [R.language, h, u]
-    ), P = b(() => {
+      [E.language, h, p]
+    ), F = v(() => {
       if (!V || V.length === 0) return [];
-      const e = new Map(x.map((t) => [t.code, t]));
+      const e = new Map(N.map((t) => [t.code, t]));
       return V.filter((t) => h.has(t)).map((t) => e.get(t)).filter((t) => !!t);
-    }, [V, x, h]), W = b(
-      () => new Set(P.map((e) => e.code)),
-      [P]
-    ), Ee = b(
-      () => W.size > 0 ? x.filter((e) => !W.has(e.code)) : x,
-      [x, W]
-    ), A = b(
-      () => x.find((e) => e.code === c),
-      [x, c]
-    ), Y = A ? A.dialCode : "", ie = A ? A.name : c, $ = w("inputs.phone.countryPickerLabel", "Country"), je = `${$}: ${ie}, +${Y}`, Te = ue(
+    }, [V, N, h]), re = v(
+      () => new Set(F.map((e) => e.code)),
+      [F]
+    ), We = v(
+      () => re.size > 0 ? N.filter((e) => !re.has(e.code)) : N,
+      [N, re]
+    ), M = v(
+      () => N.find((e) => e.code === l),
+      [N, l]
+    ), ae = M ? M.dialCode : "", Ce = M ? M.name : l, _ = w("inputs.phone.countryPickerLabel", "Country"), Ye = `${_}: ${Ce}, +${ae}`, Ze = G(
       (e, t, n) => {
-        const p = J(e), z = J(t), le = n == null ? void 0 : n.map(J);
-        return He(
-          p,
-          z,
-          le
+        const u = le(e), R = le(t), Ie = n == null ? void 0 : n.map(le);
+        return tt(
+          u,
+          R,
+          Ie
         );
       },
       []
-    ), de = (e) => {
+    ), xe = (e) => {
       const t = `${e.name}, +${e.dialCode}`;
       return /* @__PURE__ */ m(
-        N.Item,
+        I.Item,
         {
           value: e.code,
           keywords: [e.name, e.dialCode, `+${e.dialCode}`],
-          onSelect: () => Fe(e.code),
-          className: et,
+          onSelect: () => Oe(e.code),
+          className: vt,
           "aria-label": t,
           children: [
-            /* @__PURE__ */ r(Q, { country: e.code, size: X[d] }),
+            /* @__PURE__ */ r(ue, { country: e.code, size: ce[d] }),
             /* @__PURE__ */ r("span", { className: "ds:flex-1 ds:truncate", children: e.name }),
             /* @__PURE__ */ m("bdi", { dir: "ltr", className: "ds:text-muted-foreground ds:tabular-nums", children: [
               "+",
@@ -429,81 +465,85 @@ const at = De(
     return /* @__PURE__ */ m(
       "div",
       {
+        ref: he,
+        onFocus: Me,
+        onBlur: _e,
         "data-component": "phone-input",
-        "data-component-id": _,
+        "data-component-id": L,
         "data-slot": "phone-input",
-        className: Ye({
+        className: pt({
           size: d,
-          tone: Se,
-          className: ge
+          tone: $e,
+          className: Ee
         }),
         children: [
-          xe ? /* @__PURE__ */ m(
+          Te ? /* @__PURE__ */ m(
             "span",
             {
               "data-slot": "phone-country-fixed",
-              className: `${pe({ size: d })} ds:cursor-default ds:hover:bg-transparent`,
+              className: `${we({ size: d })} ds:cursor-default ds:hover:bg-transparent`,
               children: [
-                /* @__PURE__ */ r("span", { className: "ds:sr-only", children: `${$}: ${ie}` }),
-                /* @__PURE__ */ r(Q, { country: c, size: X[d] }),
+                /* @__PURE__ */ r("span", { className: "ds:sr-only", children: `${_}: ${Ce}` }),
+                /* @__PURE__ */ r(ue, { country: l, size: ce[d] }),
                 /* @__PURE__ */ m("bdi", { dir: "ltr", className: "ds:tabular-nums", children: [
                   "+",
-                  Y
+                  ae
                 ] })
               ]
             }
-          ) : /* @__PURE__ */ m(L.Root, { open: G, onOpenChange: O, children: [
-            /* @__PURE__ */ r(L.Trigger, { asChild: !0, children: /* @__PURE__ */ m(
+          ) : /* @__PURE__ */ m(U.Root, { open: Q, onOpenChange: X, children: [
+            /* @__PURE__ */ r(U.Trigger, { asChild: !0, children: /* @__PURE__ */ m(
               "button",
               {
                 type: "button",
-                disabled: oe,
-                "aria-haspopup": "listbox",
-                "aria-expanded": G,
-                "aria-label": je,
-                className: pe({ size: d }),
+                disabled: te,
+                "aria-haspopup": "dialog",
+                "aria-expanded": Q,
+                "aria-label": Ye,
+                className: we({ size: d }),
                 children: [
-                  /* @__PURE__ */ r(Q, { country: c, size: X[d] }),
+                  /* @__PURE__ */ r(ue, { country: l, size: ce[d] }),
                   /* @__PURE__ */ m("bdi", { dir: "ltr", className: "ds:tabular-nums", children: [
                     "+",
-                    Y
+                    ae
                   ] }),
                   /* @__PURE__ */ r(
-                    Ue,
+                    ut,
                     {
                       "aria-hidden": "true",
                       className: [
-                        nt[d],
+                        yt[d],
                         "ds:shrink-0 ds:text-muted-foreground",
                         "ds:transition-transform ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
-                        G ? "ds:rotate-180" : ""
+                        Q ? "ds:rotate-180" : ""
                       ].join(" ")
                     }
                   )
                 ]
               }
             ) }),
-            /* @__PURE__ */ r(L.Portal, { children: /* @__PURE__ */ r(
-              L.Content,
+            /* @__PURE__ */ r(U.Portal, { children: /* @__PURE__ */ r(
+              U.Content,
               {
+                ref: ge,
                 sideOffset: 6,
                 align: "start",
-                "aria-label": $,
-                className: Je,
+                "aria-label": _,
+                className: mt,
                 children: /* @__PURE__ */ m(
-                  N,
+                  I,
                   {
-                    filter: Te,
+                    filter: Ze,
                     shouldFilter: !0,
                     loop: !0,
-                    label: $,
+                    label: _,
                     children: [
                       /* @__PURE__ */ r(
-                        N.Input,
+                        I.Input,
                         {
                           asChild: !0,
-                          value: Ne,
-                          onValueChange: ne,
+                          value: Le,
+                          onValueChange: fe,
                           children: /* @__PURE__ */ r(
                             "input",
                             {
@@ -516,25 +556,25 @@ const at = De(
                                 "inputs.phone.searchCountry",
                                 "Search countries…"
                               ),
-                              className: Qe
+                              className: ht
                             }
                           )
                         }
                       ),
-                      /* @__PURE__ */ m(N.List, { className: Xe, children: [
-                        /* @__PURE__ */ r(N.Empty, { className: tt, children: w("inputs.phone.noCountryFound", "No country found") }),
-                        P.length > 0 ? /* @__PURE__ */ r(
-                          N.Group,
+                      /* @__PURE__ */ m(I.List, { className: gt, children: [
+                        /* @__PURE__ */ r(I.Empty, { className: bt, children: w("inputs.phone.noCountryFound", "No country found") }),
+                        F.length > 0 ? /* @__PURE__ */ r(
+                          I.Group,
                           {
-                            heading: /* @__PURE__ */ r("span", { className: fe, children: w("inputs.phone.popularCountries", "Popular") }),
-                            children: P.map(de)
+                            heading: /* @__PURE__ */ r("span", { className: ze, children: w("inputs.phone.popularCountries", "Popular") }),
+                            children: F.map(xe)
                           }
                         ) : null,
                         /* @__PURE__ */ r(
-                          N.Group,
+                          I.Group,
                           {
-                            heading: P.length > 0 ? /* @__PURE__ */ r("span", { className: fe, children: w("inputs.phone.allCountries", "All countries") }) : void 0,
-                            children: Ee.map(de)
+                            heading: F.length > 0 ? /* @__PURE__ */ r("span", { className: ze, children: w("inputs.phone.allCountries", "All countries") }) : void 0,
+                            children: We.map(xe)
                           }
                         )
                       ] })
@@ -547,34 +587,43 @@ const at = De(
           /* @__PURE__ */ r(
             "input",
             {
-              ref: we,
-              id: Ie,
-              name: be,
+              ref: je,
+              id: Ae,
+              name: oe ? void 0 : W,
               type: "tel",
               inputMode: "tel",
               autoComplete: "tel-national",
-              value: te,
-              placeholder: ke,
-              disabled: oe,
+              value: J,
+              placeholder: Ke,
+              disabled: te,
               readOnly: S,
-              required: ze,
-              "aria-label": ve,
-              "aria-describedby": Re,
-              "aria-invalid": re || void 0,
-              onChange: Pe,
-              className: Ze({ size: d })
+              required: Be,
+              "aria-label": Pe,
+              "aria-describedby": He,
+              "aria-invalid": ve || void 0,
+              onChange: Ge,
+              className: ft({ size: d })
+            }
+          ),
+          oe ? /* @__PURE__ */ r(
+            "input",
+            {
+              type: "hidden",
+              name: W,
+              value: qe,
+              disabled: te
             }
-          )
+          ) : null
         ]
       }
     );
   }
 );
-at.displayName = "PhoneInput";
+It.displayName = "PhoneInput";
 export {
-  at as P,
-  Ze as a,
-  pe as c,
-  Ye as p
+  It as P,
+  ft as a,
+  we as c,
+  pt as p
 };
-//# sourceMappingURL=phone-input-opMMHkyh.js.map
+//# sourceMappingURL=phone-input-BzeUr49H.js.map