@rpcbase/ui 0.230.0 → 0.232.0

package/dist/index18.js

@@ -1,223 +1,230 @@
 import { j as x } from "./index30.js";
 import * as t from "react";
 import vt from "react-select";
-import { cn as we } from "./index2.js";
+import { cn as Re } from "./index2.js";
 import { resolveMessages as xt } from "./index43.js";
-import { getLocaleCacheKey as Nt, parseLocaleCacheKey as wt, getCachedCountryOptions as Ot, toSelectedCountry as Vt, buildFallbackSelectedCountry as Pt, getValidCountry as Rt, DEFAULT_COUNTRY as qe, normalizeSearchValue as Mt, optionMatchIndex as Qe, COMMON_IDD_PREFIXES as kt } from "./index44.js";
-import { sanitizeDigits as N, formatWithAsYouType as ue, stripPrefix as Ft, getLengthIssue as Ze } from "./index45.js";
+import { getLocaleCacheKey as Nt, parseLocaleCacheKey as wt, getCachedCountryOptions as Rt, toSelectedCountry as Ot, buildFallbackSelectedCountry as Vt, getValidCountry as Pt, DEFAULT_COUNTRY as qe, normalizeSearchValue as Mt, optionMatchIndex as Qe, COMMON_IDD_PREFIXES as kt } from "./index44.js";
+import { sanitizeDigits as N, formatWithAsYouType as se, stripPrefix as Ft, getLengthIssue as Je } from "./index45.js";
 import { resolveSelection as Dt, captureSelectionSnapshot as Et, skipFormattingCharactersLeft as Ge, skipFormattingCharactersRight as Tt } from "./index46.js";
-import { suggestionSelectStyles as Lt, SuggestionOption as zt, NullComponent as ae, HiddenControl as Bt, formatCountryOption as jt, SuggestionContext as At } from "./index47.js";
-import { getCountryCallingCode as se } from "./index48.js";
+import { suggestionSelectStyles as Lt, SuggestionOption as zt, NullComponent as ue, HiddenControl as Bt, formatCountryOption as jt, SuggestionContext as At } from "./index47.js";
+import { getCountryCallingCode as ie } from "./index48.js";
 const $t = /[\u061C\u200B-\u200F\u202A-\u202E\u2066-\u2069\uFEFF]/g;
-function ie(a) {
+function ce(a) {
   return a.replace($t, "");
 }
 function Ye(a) {
-  for (const r of kt)
-    if (a.startsWith(r))
-      return a.slice(r.length);
+  for (const o of kt)
+    if (a.startsWith(o))
+      return a.slice(o.length);
   return a;
 }
-function Kt(a) {
-  const r = `+${a}`, {
-    phoneNumber: s,
-    detectedCountry: u
-  } = ue(r);
-  return s?.isValid() && u ? r : null;
+function Wt(a) {
+  const o = `+${a}`, {
+    phoneNumber: i,
+    detectedCountry: s
+  } = se(o);
+  return i?.isValid() && s ? o : null;
 }
 function Oe(a) {
-  const r = ie(a).trim();
-  if (!r)
+  const o = ce(a).trim();
+  if (!o)
     return null;
-  if (r.startsWith("+")) {
-    const O = N(r);
-    if (!O)
+  if (o.startsWith("+")) {
+    const R = N(o);
+    if (!R)
       return "+";
-    const c = Ye(O);
-    return c ? `+${c}` : "+";
+    const f = Ye(R);
+    return f ? `+${f}` : "+";
   }
-  const s = N(r);
-  if (!s)
+  const i = N(o);
+  if (!i)
     return null;
-  const u = Ye(s);
-  return u !== s ? u ? `+${u}` : "+" : null;
+  const s = Ye(i);
+  return s !== i ? s ? `+${s}` : "+" : null;
 }
 function _e(a) {
-  const r = Oe(a);
-  if (r != null)
-    return r;
-  const s = ie(a).trim(), u = N(s);
-  return u ? Kt(u) : null;
+  const o = Oe(a);
+  if (o != null)
+    return o;
+  const i = ce(a).trim(), s = N(i);
+  return s ? Wt(s) : null;
 }
-function Wt(a, r) {
-  return r || (a ? se(a) : null);
+function Kt(a, o) {
+  return o || (a ? ie(a) : null);
 }
-function Xe(a, r, s) {
-  const u = ie(a).trim(), O = N(u);
-  if (!O)
-    return `+${r.dialCode}`;
-  const c = s?.allowImplicitInternational === !1 ? Oe(u) : _e(u);
-  if (c) {
-    const V = N(c);
-    if (V.startsWith(r.dialCode))
-      return c;
+function Xe(a, o, i) {
+  const s = ce(a).trim(), R = N(s);
+  if (!R)
+    return `+${o.dialCode}`;
+  const f = i?.allowImplicitInternational === !1 ? Oe(s) : _e(s);
+  if (f) {
+    const O = N(f);
+    if (O.startsWith(o.dialCode))
+      return f;
     const {
       phoneNumber: D
-    } = ue(c), b = D?.countryCallingCode, z = b && V.startsWith(b) ? V.slice(b.length) : D?.nationalNumber ?? V;
-    return `+${r.dialCode}${z}`;
+    } = se(f), I = D?.countryCallingCode, z = I && O.startsWith(I) ? O.slice(I.length) : D?.nationalNumber ?? O;
+    return `+${o.dialCode}${z}`;
   }
   const {
     phoneNumber: L
-  } = ue(u, r.value);
-  return `+${r.dialCode}${L?.nationalNumber ?? O}`;
+  } = se(s, o.value);
+  return `+${o.dialCode}${L?.nationalNumber ?? R}`;
 }
-function Je(a, r) {
+function Ze(a, o) {
   return {
     ...a,
-    country: r.value,
-    countryCallingCode: r.dialCode,
-    lengthIssue: Ze(a.rawInput, r.value)
+    country: o.value,
+    countryCallingCode: o.dialCode,
+    lengthIssue: Je(a.rawInput, o.value)
   };
 }
-function U(a, r) {
-  const s = ie(a ?? "").trim();
-  if (!s) {
-    const W = r ?? null, Q = W ? se(W) : null;
+function q(a, o) {
+  const i = ce(a ?? "").trim();
+  if (!i) {
+    const H = o ?? null, G = H ? ie(H) : null;
     return {
       displayValue: "",
       formattedInternational: "",
       formattedNational: "",
       e164: null,
-      country: W,
-      countryCallingCode: Q,
+      country: H,
+      countryCallingCode: G,
       nationalNumber: "",
       rawInput: "",
       isValid: !1,
       lengthIssue: null
     };
   }
-  const u = _e(s);
-  if (!(u != null || r != null))
+  const s = _e(i);
+  if (!(s != null || o != null))
     return {
-      displayValue: s,
-      formattedInternational: s,
-      formattedNational: s,
+      displayValue: i,
+      formattedInternational: i,
+      formattedNational: i,
       e164: null,
       country: null,
       countryCallingCode: null,
-      nationalNumber: N(s),
-      rawInput: s,
+      nationalNumber: N(i),
+      rawInput: i,
       isValid: !1,
       lengthIssue: null
     };
-  const c = u ?? s, {
+  const f = s ?? i, {
     international: L,
-    national: V,
+    national: O,
     formatted: D,
-    phoneNumber: b,
+    phoneNumber: I,
     detectedCountry: z
-  } = ue(c, r), M = u != null, P = M ? z ?? r ?? null : r ?? z ?? null, K = Wt(P, b?.countryCallingCode), ce = N(c), q = b?.nationalNumber ?? (K && c.startsWith("+") ? Ft(ce, K) : N(s));
+  } = se(f, o), M = s != null, V = M ? z ?? o ?? null : o ?? z ?? null, K = Kt(V, I?.countryCallingCode), fe = N(f), Q = I?.nationalNumber ?? (K && f.startsWith("+") ? Ft(fe, K) : N(i));
   return {
     displayValue: M ? L : D,
-    formattedInternational: b?.formatInternational() ?? L,
-    formattedNational: b?.formatNational() ?? V,
-    e164: b?.number ?? null,
-    country: P,
+    formattedInternational: I?.formatInternational() ?? L,
+    formattedNational: I?.formatNational() ?? O,
+    e164: I?.number ?? null,
+    country: V,
     countryCallingCode: K,
-    nationalNumber: q,
-    rawInput: c,
-    isValid: b?.isValid() ?? !1,
-    lengthIssue: P ? Ze(c, P) : null
+    nationalNumber: Q,
+    rawInput: f,
+    isValid: I?.isValid() ?? !1,
+    lengthIssue: V ? Je(f, V) : null
   };
 }
-const Ht = t.forwardRef(function(r, s) {
+const Ht = t.forwardRef(function(o, i) {
   const {
-    value: u,
-    defaultCountry: O,
-    country: c,
+    value: s,
+    defaultCountry: R,
+    country: f,
     locale: L,
-    onChange: V,
+    onChange: O,
     onCountryChange: D,
-    className: b,
+    className: I,
     inputClassName: z,
     disabled: M,
-    readOnly: P,
+    readOnly: V,
     selectProps: K,
-    autofillShimName: ce,
-    messages: q,
+    autofillShimName: fe,
+    messages: Q,
     renderValidationMessage: Ve,
-    ...W
-  } = r, {
-    onFocus: Q,
+    ...H
+  } = o, {
+    onFocus: G,
     onBlur: Pe,
-    onKeyDown: Re,
-    name: fe,
+    onKeyDown: Me,
+    name: de,
     autoComplete: et,
     ...tt
-  } = W, g = typeof c == "string" ? c : null, G = Nt(L), Y = t.useMemo(() => wt(G), [G]), X = t.useMemo(() => xt(Y, q), [Y, q]), h = t.useMemo(() => Ot(Y, G), [G, Y]), J = t.useCallback((e) => {
-    const n = h.find((o) => o.value === e);
-    return n ? Vt(n) : Pt(e);
-  }, [h]), Me = t.useMemo(() => {
-    const e = Rt(O ?? c ?? qe);
-    return h.some((n) => n.value === e) ? e : h[0]?.value ?? qe;
-  }, [h, c, O]), de = t.useRef(null);
-  if (!de.current) {
-    const e = U(u, g ?? void 0);
-    de.current = e;
+  } = H, h = typeof f == "string" ? f : null, Y = Nt(L), X = t.useMemo(() => wt(Y), [Y]), Z = t.useMemo(() => xt(X, Q), [X, Q]), C = t.useMemo(() => Rt(X, Y), [Y, X]), J = t.useCallback((e) => {
+    const n = C.find((r) => r.value === e);
+    return n ? Ot(n) : Vt(e);
+  }, [C]), ke = t.useMemo(() => {
+    const e = Pt(R ?? f ?? qe);
+    return C.some((n) => n.value === e) ? e : C[0]?.value ?? qe;
+  }, [C, f, R]), me = t.useRef(null);
+  if (!me.current) {
+    const e = q(s, h ?? void 0);
+    me.current = e;
   }
-  const me = de.current, [H, pe] = t.useState(g ? null : me.country), [Z, ge] = t.useState(me.displayValue), [_, k] = t.useState(""), [E, w] = t.useState(!1), [ee, C] = t.useState(-1), [nt, ke] = t.useState(!1), [rt, he] = t.useState(me.lengthIssue), B = t.useRef(null), m = t.useRef(""), j = t.useRef(null), A = t.useRef("smooth"), te = t.useRef(null), Ce = t.useRef(!1), Fe = t.useRef(null), $ = t.useRef(null), I = g ?? H, De = g ?? B.current ?? void 0;
-  t.useImperativeHandle(s, () => $.current, []), t.useLayoutEffect(() => {
-    const e = te.current;
+  const pe = me.current, [U, ge] = t.useState(h ? null : pe.country), [_, he] = t.useState(pe.displayValue), [ee, k] = t.useState(""), [E, w] = t.useState(!1), [te, y] = t.useState(-1), [nt, Fe] = t.useState(!1), [ot, Ce] = t.useState(pe.lengthIssue), B = t.useRef(null), g = t.useRef(""), j = t.useRef(null), A = t.useRef("smooth"), ne = t.useRef(null), ye = t.useRef(!1), De = t.useRef(null), $ = t.useRef(null), S = h ?? U, Ee = h ?? B.current ?? void 0;
+  t.useImperativeHandle(i, () => $.current, []), t.useLayoutEffect(() => {
+    const e = ne.current;
     if (!e)
       return;
     const n = $.current;
-    if (te.current = null, !n)
+    if (ne.current = null, !n)
       return;
     const {
-      start: o,
-      end: f
+      start: r,
+      end: d
     } = e;
-    n.setSelectionRange(o, f);
-  }, [Z]);
-  const Ee = K ?? {}, {
-    styles: ye,
-    components: Te,
-    classNamePrefix: ot,
-    formatOptionLabel: be,
+    n.setSelectionRange(r, d);
+  }, [_]);
+  const Te = K ?? {}, {
+    styles: be,
+    components: Le,
+    classNamePrefix: rt,
+    formatOptionLabel: Ie,
     menuPortalTarget: lt,
     menuPosition: at,
     ...ut
-  } = Ee, {
+  } = Te, {
     noOptionsMessage: st,
     ...it
-  } = ut, [ct, ft] = t.useState(null), Ie = "menuPortalTarget" in Ee, Le = Ie ? lt : ct, dt = t.useMemo(() => {
-    const e = ye?.menuPortal;
+  } = ut, [ct, ft] = t.useState(null), Se = "menuPortalTarget" in Te, W = Se ? lt : ct, dt = t.useMemo(() => {
+    const e = be?.menuPortal;
     return {
       ...Lt,
-      ...ye ?? {},
-      menuPortal: (n, o) => {
-        const f = {
+      ...be ?? {},
+      menuPortal: (n, r) => {
+        const d = {
           ...n,
           zIndex: 1300
+        }, u = e ? e(d, r) : d;
+        if (typeof document > "u" || !W || W === document.body)
+          return u;
+        const m = W.getBoundingClientRect();
+        return {
+          ...u,
+          left: typeof u.left == "number" ? u.left - m.left : u.left,
+          top: typeof u.top == "number" ? u.top - m.top : u.top
         };
-        return e ? e(f, o) : f;
       }
     };
-  }, [ye]);
+  }, [W, be]);
   t.useLayoutEffect(() => {
-    if (Ie || typeof document > "u")
+    if (Se || typeof document > "u")
       return;
     const e = $.current?.closest("[data-slot='dialog-content'], [data-slot='sheet-content'], [role='dialog']") ?? document.body;
     ft(e);
-  }, [Ie]);
+  }, [Se]);
   const mt = t.useMemo(() => {
     const e = {
       Control: Bt,
-      IndicatorsContainer: ae,
-      DropdownIndicator: ae,
-      IndicatorSeparator: ae,
-      ValueContainer: ae
-    }, n = Te ?? {};
+      IndicatorsContainer: ue,
+      DropdownIndicator: ue,
+      IndicatorSeparator: ue,
+      ValueContainer: ue
+    }, n = Le ?? {};
     return n.Option ? {
       ...e,
       ...n
@@ -226,29 +233,29 @@ const Ht = t.forwardRef(function(r, s) {
       ...n,
       Option: zt
     };
-  }, [Te]);
+  }, [Le]);
   t.useEffect(() => () => {
     j.current != null && typeof window < "u" && window.clearTimeout(j.current);
   }, []), t.useEffect(() => {
-    if (u == null)
+    if (s == null)
       return;
-    const e = U(u, De);
-    m.current = "", ge(e.displayValue), w(!1), k(""), C(-1), he(e.lengthIssue), !g && e.country !== H && pe(e.country);
-  }, [g, De, H, u]), t.useEffect(() => {
-    const e = I ?? null;
-    !Ce.current && e == null || Ce.current && Fe.current === e || (Ce.current = !0, Fe.current = e, D?.(e, e ? J(e) : null));
-  }, [I, D, J]);
-  const ne = t.useCallback((e) => {
-    V?.({
+    const e = q(s, Ee);
+    g.current = "", he(e.displayValue), w(!1), k(""), y(-1), Ce(e.lengthIssue), !h && e.country !== U && ge(e.country);
+  }, [h, Ee, U, s]), t.useEffect(() => {
+    const e = S ?? null;
+    !ye.current && e == null || ye.current && De.current === e || (ye.current = !0, De.current = e, D?.(e, e ? J(e) : null));
+  }, [S, D, J]);
+  const oe = t.useCallback((e) => {
+    O?.({
       ...e,
       selectedCountry: e.country ? J(e.country) : null
     });
-  }, [V, J]), re = t.useCallback(() => {
+  }, [O, J]), re = t.useCallback(() => {
     typeof window > "u" || (j.current != null && window.clearTimeout(j.current), j.current = window.setTimeout(() => {
-      m.current = "", j.current = null;
+      g.current = "", j.current = null;
     }, 800));
-  }, []), Se = t.useCallback((e, n) => {
-    ge(e.displayValue), w(!1), k(""), C(-1), he(e.lengthIssue), !g && e.country !== H && pe(e.country), n && (te.current = Dt(n, e.displayValue)), ne({
+  }, []), ve = t.useCallback((e, n) => {
+    he(e.displayValue), w(!1), k(""), y(-1), Ce(e.lengthIssue), !h && e.country !== U && ge(e.country), n && (ne.current = Dt(n, e.displayValue)), oe({
       formattedInternational: e.formattedInternational,
       formattedNational: e.formattedNational,
       e164: e.e164,
@@ -258,190 +265,190 @@ const Ht = t.forwardRef(function(r, s) {
       rawInput: e.rawInput,
       isValid: e.isValid
     });
-  }, [g, ne, H]), pt = t.useCallback((e) => {
-    const n = e.target, o = Et(n), f = n.value;
-    m.current = "";
-    const p = Oe(f), S = B.current;
-    if (p != null && S) {
-      const v = se(S);
-      N(p).startsWith(v) || (B.current = null);
-    } else p != null && (B.current = null);
-    const d = B.current, l = N(f);
-    if (!g && d && p == null && l) {
+  }, [h, oe, U]), pt = t.useCallback((e) => {
+    const n = e.target, r = Et(n), d = n.value;
+    g.current = "";
+    const u = Oe(d), m = B.current;
+    if (u != null && m) {
+      const v = ie(m);
+      N(u).startsWith(v) || (B.current = null);
+    } else u != null && (B.current = null);
+    const p = B.current, l = N(d);
+    if (!h && p && u == null && l) {
       const v = {
-        value: d,
-        dialCode: se(d)
-      }, T = Je(U(Xe(f, {
+        value: p,
+        dialCode: ie(p)
+      }, T = Ze(q(Xe(d, {
         value: v.value,
         dialCode: v.dialCode
       }, {
         allowImplicitInternational: !1
-      }), d), v);
-      Se(T, o);
+      }), p), v);
+      ve(T, r);
       return;
     }
-    const R = U(f, g ?? d ?? void 0);
-    Se(R, o);
-  }, [Se, g]), ve = t.useCallback((e) => {
+    const P = q(d, h ?? p ?? void 0);
+    ve(P, r);
+  }, [ve, h]), xe = t.useCallback((e) => {
     if (!e)
       return;
     B.current = e.value;
-    const n = Xe(Z, e), o = Je(U(n, e.value), e);
-    ge(o.displayValue), te.current = {
-      start: o.displayValue.length,
-      end: o.displayValue.length
-    }, w(!1), k(""), C(-1), he(o.lengthIssue), g || pe(e.value), ne({
-      formattedInternational: o.formattedInternational,
-      formattedNational: o.formattedNational,
-      e164: o.e164,
-      country: o.country,
-      countryCallingCode: o.countryCallingCode,
-      nationalNumber: o.nationalNumber,
-      rawInput: o.rawInput,
-      isValid: o.isValid
+    const n = Xe(_, e), r = Ze(q(n, e.value), e);
+    he(r.displayValue), ne.current = {
+      start: r.displayValue.length,
+      end: r.displayValue.length
+    }, w(!1), k(""), y(-1), Ce(r.lengthIssue), h || ge(e.value), oe({
+      formattedInternational: r.formattedInternational,
+      formattedNational: r.formattedNational,
+      e164: r.e164,
+      country: r.country,
+      countryCallingCode: r.countryCallingCode,
+      nationalNumber: r.nationalNumber,
+      rawInput: r.rawInput,
+      isValid: r.isValid
     }), requestAnimationFrame(() => {
       $.current?.focus();
     });
-  }, [g, ne, Z]), i = t.useMemo(() => {
+  }, [h, oe, _]), c = t.useMemo(() => {
     if (!E)
       return [];
     const e = [], n = (l) => {
-      l && !e.some((y) => y.value === l.value) && e.push(l);
-    }, o = h.find((l) => l.value === Me), f = I ? h.find((l) => l.value === I) : void 0, p = _.trim(), S = N(p), d = Mt(p);
-    return !S && !d ? (n(f), n(o), h.forEach(n), e) : (S && h.filter((y) => y.dialCode.startsWith(S)).sort((y, R) => {
-      const v = y.dialCode === S, T = R.dialCode === S;
-      return v && !T ? -1 : !v && T ? 1 : y.dialCode.length - R.dialCode.length;
-    }).forEach(n), d && h.filter((y) => y.normalizedSearchableTokens.some((R) => R.includes(d))).sort((y, R) => {
-      const v = Qe(y.normalizedSearchableTokens, d), T = Qe(R.normalizedSearchableTokens, d);
-      return v !== T ? v - T : y.name.localeCompare(R.name);
-    }).forEach(n), n(f), n(o), e.length === 0 && h.forEach(n), e);
-  }, [I, h, _, Me, E]), F = nt && E && i.length > 0;
+      l && !e.some((b) => b.value === l.value) && e.push(l);
+    }, r = C.find((l) => l.value === ke), d = S ? C.find((l) => l.value === S) : void 0, u = ee.trim(), m = N(u), p = Mt(u);
+    return !m && !p ? (n(d), n(r), C.forEach(n), e) : (m && C.filter((b) => b.dialCode.startsWith(m)).sort((b, P) => {
+      const v = b.dialCode === m, T = P.dialCode === m;
+      return v && !T ? -1 : !v && T ? 1 : b.dialCode.length - P.dialCode.length;
+    }).forEach(n), p && C.filter((b) => b.normalizedSearchableTokens.some((P) => P.includes(p))).sort((b, P) => {
+      const v = Qe(b.normalizedSearchableTokens, p), T = Qe(P.normalizedSearchableTokens, p);
+      return v !== T ? v - T : b.name.localeCompare(P.name);
+    }).forEach(n), n(d), n(r), e.length === 0 && C.forEach(n), e);
+  }, [S, C, ee, ke, E]), F = nt && E && c.length > 0;
   t.useEffect(() => {
     F || (A.current = "smooth");
   }, [F]), t.useEffect(() => {
     if (!F) {
-      C(-1);
+      y(-1);
       return;
     }
-    if (i.length === 0) {
-      C(-1);
+    if (c.length === 0) {
+      y(-1);
       return;
     }
-    C((e) => e < 0 || e >= i.length ? 0 : e);
-  }, [i, F]);
-  const oe = ee >= 0 ? i[ee] ?? null : null;
+    y((e) => e < 0 || e >= c.length ? 0 : e);
+  }, [c, F]);
+  const le = te >= 0 ? c[te] ?? null : null;
   t.useEffect(() => {
-    ee < 0 && (A.current = "smooth");
-  }, [ee]);
+    te < 0 && (A.current = "smooth");
+  }, [te]);
   const ze = t.useCallback(() => {
     const e = A.current;
     return A.current = "smooth", e;
   }, []), Be = t.useCallback((e) => {
-    const n = i.findIndex((o) => o.value === e.value);
-    n !== -1 && C(n);
-  }, [i]), xe = t.useCallback((e, n) => be ? be(e, n) : jt(e), [be]), je = t.useCallback((e) => xe(e, {
+    const n = c.findIndex((r) => r.value === e.value);
+    n !== -1 && y(n);
+  }, [c]), Ne = t.useCallback((e, n) => Ie ? Ie(e, n) : jt(e), [Ie]), je = t.useCallback((e) => Ne(e, {
     context: "menu",
-    inputValue: _,
+    inputValue: ee,
     selectValue: []
-  }), [_, xe]), gt = t.useMemo(() => ({
-    highlightedValue: oe?.value ?? null,
+  }), [ee, Ne]), gt = t.useMemo(() => ({
+    highlightedValue: le?.value ?? null,
     setHighlightedOption: Be,
     renderOptionLabel: je,
     consumeScrollBehavior: ze
-  }), [ze, oe, je, Be]), le = I ? h.find((e) => e.value === I) : void 0, Ae = le?.flag ?? "", ht = I ? X.selectedCountryLabel(le?.name ?? I) : X.selectCountryLabel, $e = !!(I && Ae), Ne = rt === "TOO_LONG" ? X.lengthTooLong(le?.name ?? I ?? null) : null, Ct = le?.name ?? I ?? null;
-  let Ke = null;
-  if (Ne) {
+  }), [ze, le, je, Be]), ae = S ? C.find((e) => e.value === S) : void 0, Ae = ae?.flag ?? "", ht = S ? Z.selectedCountryLabel(ae?.name ?? S) : Z.selectCountryLabel, $e = !!(S && Ae), we = ot === "TOO_LONG" ? Z.lengthTooLong(ae?.name ?? S ?? null) : null, Ct = ae?.name ?? S ?? null;
+  let We = null;
+  if (we) {
     const e = Ve?.({
-      message: Ne,
+      message: we,
       code: "TOO_LONG",
       countryName: Ct
     });
-    Ke = e === void 0 ? /* @__PURE__ */ x.jsx("p", { className: "mt-1 text-xs text-destructive", children: /* @__PURE__ */ x.jsx("span", { children: Ne }) }) : e;
+    We = e === void 0 ? /* @__PURE__ */ x.jsx("p", { className: "mt-1 text-xs text-destructive", children: /* @__PURE__ */ x.jsx("span", { children: we }) }) : e;
   }
-  const We = t.useCallback((e) => {
-    m.current = `${m.current}${e}`.slice(-12), k(m.current), w(!0), re();
+  const Ke = t.useCallback((e) => {
+    g.current = `${g.current}${e}`.slice(-12), k(g.current), w(!0), re();
   }, [re]), He = t.useCallback(() => {
-    const e = m.current;
-    e && (m.current = e.slice(0, -1), k(m.current), m.current && re());
+    const e = g.current;
+    e && (g.current = e.slice(0, -1), k(g.current), g.current && re());
   }, [re]), yt = t.useCallback((e) => {
-    if (Re?.(e), e.defaultPrevented)
+    if (Me?.(e), e.defaultPrevented)
       return;
     const n = e.key;
     if (e.metaKey || e.ctrlKey || e.altKey)
       return;
-    const o = e.currentTarget, f = o.value, p = o.selectionStart ?? 0, S = o.selectionEnd ?? p, d = p === S;
-    if (n === "Backspace" && d) {
-      const l = Ge(f, p);
-      l !== p && o.setSelectionRange(l, l);
-    } else if (n === "ArrowLeft" && d) {
-      const l = Ge(f, p);
-      if (l !== p) {
-        e.preventDefault(), o.setSelectionRange(l, l);
+    const r = e.currentTarget, d = r.value, u = r.selectionStart ?? 0, m = r.selectionEnd ?? u, p = u === m;
+    if (n === "Backspace" && p) {
+      const l = Ge(d, u);
+      l !== u && r.setSelectionRange(l, l);
+    } else if (n === "ArrowLeft" && p) {
+      const l = Ge(d, u);
+      if (l !== u) {
+        e.preventDefault(), r.setSelectionRange(l, l);
         return;
       }
-    } else if (n === "ArrowRight" && d) {
-      const l = Tt(f, S);
-      if (l !== S) {
-        e.preventDefault(), o.setSelectionRange(l, l);
+    } else if (n === "ArrowRight" && p) {
+      const l = Tt(d, m);
+      if (l !== m) {
+        e.preventDefault(), r.setSelectionRange(l, l);
         return;
       }
     }
     if (n === "ArrowDown") {
       if (A.current = e.repeat ? "auto" : "smooth", e.preventDefault(), !E) {
-        w(!0), C(i.length > 0 ? 0 : -1);
+        w(!0), y(c.length > 0 ? 0 : -1);
         return;
       }
-      i.length > 0 && C((l) => l < 0 ? 0 : (l + 1) % i.length);
+      c.length > 0 && y((l) => l < 0 ? 0 : (l + 1) % c.length);
       return;
     }
     if (n === "ArrowUp") {
       if (A.current = e.repeat ? "auto" : "smooth", e.preventDefault(), !E) {
-        w(!0), C(i.length > 0 ? i.length - 1 : -1);
+        w(!0), y(c.length > 0 ? c.length - 1 : -1);
         return;
       }
-      i.length > 0 && C((l) => l < 0 ? i.length - 1 : (l - 1 + i.length) % i.length);
+      c.length > 0 && y((l) => l < 0 ? c.length - 1 : (l - 1 + c.length) % c.length);
       return;
     }
     if (/^[a-z]$/i.test(n)) {
-      e.preventDefault(), E || (w(!0), C(i.length > 0 ? 0 : -1)), We(n.toLowerCase());
+      e.preventDefault(), E || (w(!0), y(c.length > 0 ? 0 : -1)), Ke(n.toLowerCase());
       return;
     }
     if (F) {
-      if (n === "Backspace" && m.current) {
+      if (n === "Backspace" && g.current) {
         e.preventDefault(), He();
         return;
       }
       if (n === "Escape") {
-        e.preventDefault(), m.current = "", k(""), w(!1);
+        e.preventDefault(), g.current = "", k(""), w(!1);
         return;
       }
-      if (n === "Enter" && i.length > 0) {
+      if (n === "Enter" && c.length > 0) {
         e.preventDefault();
-        const l = oe ?? i[0];
-        ve(l);
+        const l = le ?? c[0];
+        xe(l);
         return;
       }
     }
-  }, [We, i, ve, oe, Re, He, E, F]), bt = t.useCallback((e) => {
-    ke(!0), Q?.(e);
-  }, [Q]), It = t.useCallback((e) => {
-    ke(!1), w(!1), m.current = "", k(""), Pe?.(e);
+  }, [Ke, c, xe, le, Me, He, E, F]), bt = t.useCallback((e) => {
+    Fe(!0), G?.(e);
+  }, [G]), It = t.useCallback((e) => {
+    Fe(!1), w(!1), g.current = "", k(""), Pe?.(e);
   }, [Pe]), St = t.useCallback(() => {
-    M || P || (m.current = "", k(""), w(!0), C((e) => e < 0 ? 0 : e), requestAnimationFrame(() => {
+    M || V || (g.current = "", k(""), w(!0), y((e) => e < 0 ? 0 : e), requestAnimationFrame(() => {
       $.current?.focus();
     }));
-  }, [M, P]), Ue = ce ?? (fe ? `${fe}_shim` : void 0);
-  return /* @__PURE__ */ x.jsxs("div", { className: we("relative flex flex-col", b), children: [
+  }, [M, V]), Ue = fe ?? (de ? `${de}_shim` : void 0);
+  return /* @__PURE__ */ x.jsxs("div", { className: Re("relative flex flex-col", I), children: [
     /* @__PURE__ */ x.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ x.jsx("input", { ...tt, ref: $, type: "tel", className: we("flex h-10 w-full rounded-md border border-input bg-background py-2 text-base ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "pl-11 pr-3", z), name: fe, value: Z, onChange: pt, onFocus: bt, onBlur: It, onKeyDown: yt, disabled: M, readOnly: P, autoComplete: et ?? "off" }),
-      /* @__PURE__ */ x.jsx("button", { type: "button", className: we("absolute left-3 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded border text-lg leading-none transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", $e ? "border-transparent" : "border-dashed border-border text-muted-foreground", M ? "cursor-not-allowed opacity-50" : P ? "cursor-default" : "cursor-pointer hover:bg-muted"), "aria-label": ht, onMouseDown: (e) => e.preventDefault(), onClick: St, tabIndex: -1, disabled: M, children: /* @__PURE__ */ x.jsx("span", { "aria-hidden": "true", children: $e ? Ae : "?" }) })
+      /* @__PURE__ */ x.jsx("input", { ...tt, ref: $, type: "tel", className: Re("flex h-10 w-full rounded-md border border-input bg-background py-2 text-base ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "pl-11 pr-3", z), name: de, value: _, onChange: pt, onFocus: bt, onBlur: It, onKeyDown: yt, disabled: M, readOnly: V, autoComplete: et ?? "off" }),
+      /* @__PURE__ */ x.jsx("button", { type: "button", className: Re("absolute left-3 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded border text-lg leading-none transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", $e ? "border-transparent" : "border-dashed border-border text-muted-foreground", M ? "cursor-not-allowed opacity-50" : V ? "cursor-default" : "cursor-pointer hover:bg-muted"), "aria-label": ht, onMouseDown: (e) => e.preventDefault(), onClick: St, tabIndex: -1, disabled: M, children: /* @__PURE__ */ x.jsx("span", { "aria-hidden": "true", children: $e ? Ae : "?" }) })
     ] }),
     Ue ? /* @__PURE__ */ x.jsx("input", { tabIndex: -1, autoComplete: "tel", name: Ue, "aria-hidden": "true", className: "pointer-events-none absolute left-0 top-0 h-0 w-0 opacity-0" }) : null,
     /* @__PURE__ */ x.jsx("div", { className: "absolute left-0 top-full z-30 mt-1", style: {
       pointerEvents: F ? "auto" : "none",
       width: "min(260px, 100%)"
-    }, onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ x.jsx(At.Provider, { value: gt, children: /* @__PURE__ */ x.jsx(vt, { ...it, menuIsOpen: F, options: i, value: null, components: mt, styles: dt, isClearable: !1, isSearchable: !1, backspaceRemovesValue: !1, tabSelectsValue: !1, menuShouldScrollIntoView: !1, menuPortalTarget: Le, menuPosition: at ?? (Le ? "fixed" : "absolute"), onChange: ve, classNamePrefix: ot ?? "phone-number-suggestions", placeholder: "", formatOptionLabel: xe, noOptionsMessage: st ?? (() => X.noMatches) }) }) }),
-    Ke
+    }, onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ x.jsx(At.Provider, { value: gt, children: /* @__PURE__ */ x.jsx(vt, { ...it, menuIsOpen: F, options: c, value: null, components: mt, styles: dt, isClearable: !1, isSearchable: !1, backspaceRemovesValue: !1, tabSelectsValue: !1, menuShouldScrollIntoView: !1, menuPortalTarget: W, menuPosition: at ?? (W ? "fixed" : "absolute"), onChange: xe, classNamePrefix: rt ?? "phone-number-suggestions", placeholder: "", formatOptionLabel: Ne, noOptionsMessage: st ?? (() => Z.noMatches) }) }) }),
+    We
   ] });
 });
 Ht.displayName = "PhoneNumberInput";