@rpcbase/ui 0.280.0 → 0.282.0

package/dist/index362.js

@@ -1,121 +1,494 @@
 import { cn as e } from "./index12.js";
-import { c as t } from "react/compiler-runtime";
-import * as n from "react";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/components/PhoneNumberInput/suggestions.tsx
-var o = n.createContext(null);
-function s(e, t) {
-	if (typeof e == "function") {
-		e(t);
-		return;
+import { getCountryCallingCode as t } from "./index355.js";
+import { resolveMessages as n } from "./index356.js";
+import { COMMON_IDD_PREFIXES as r, buildFallbackSelectedCountry as i, getCachedCountryOptions as a, getLocaleCacheKey as o, getValidCountry as s, normalizeSearchValue as ee, optionMatchIndex as c, parseLocaleCacheKey as l, toSelectedCountry as te } from "./index358.js";
+import { formatWithAsYouType as u, getLengthIssue as d, sanitizeDigits as f, stripPrefix as ne } from "./index359.js";
+import { captureSelectionSnapshot as p, resolveSelection as m, skipFormattingCharactersLeft as re, skipFormattingCharactersRight as ie } from "./index360.js";
+import { HiddenControl as ae, NullComponent as h, SuggestionContext as oe, SuggestionOption as se, formatCountryOption as ce, suggestionSelectStyles as le } from "./index361.js";
+import * as g from "react";
+import { jsx as _, jsxs as ue } from "react/jsx-runtime";
+import de from "react-select";
+//#region src/components/PhoneNumberInput/index.tsx
+var v = /[\u061C\u200B-\u200F\u202A-\u202E\u2066-\u2069\uFEFF]/g;
+function y(e) {
+	return e.replace(v, "");
+}
+function b(e) {
+	for (let t of r) if (e.startsWith(t)) return e.slice(t.length);
+	return e;
+}
+function fe(e) {
+	let t = `+${e}`, { phoneNumber: n, detectedCountry: r } = u(t);
+	return n?.isValid() && r ? t : null;
+}
+function pe(e) {
+	let t = y(e).trim();
+	if (!t) return null;
+	if (t.startsWith("+")) {
+		let e = f(t);
+		if (!e) return "+";
+		let n = b(e);
+		return n ? `+${n}` : "+";
 	}
-	e && typeof e == "object" && Reflect.set(e, "current", t);
+	let n = f(t);
+	if (!n) return null;
+	let r = b(n);
+	return r === n ? null : r ? `+${r}` : "+";
 }
-var c = (r) => {
-	let a = t(30), c = n.useContext(o), l = c?.highlightedValue === r.data.value, u, d, f;
-	a[0] === r.innerProps ? (u = a[1], d = a[2], f = a[3]) : ({onMouseMove: u, className: d, ...f} = r.innerProps, a[0] = r.innerProps, a[1] = u, a[2] = d, a[3] = f);
-	let m;
-	a[4] === c?.renderOptionLabel ? m = a[5] : (m = c?.renderOptionLabel ?? p, a[4] = c?.renderOptionLabel, a[5] = m);
-	let h = m, g = n.useRef(null), { innerRef: _ } = r, v;
-	a[6] === _ ? v = a[7] : (v = (e) => {
-		g.current = e, s(_, e);
-	}, a[6] = _, a[7] = v);
-	let y = v, b;
-	a[8] !== c?.consumeScrollBehavior || a[9] !== l ? (b = () => {
-		if (!l) return;
-		let e = c?.consumeScrollBehavior, t = e ? e() : "smooth", n = g.current;
-		if (!n) return;
-		let r = n.parentElement;
-		if (!r) return;
-		let i = n.offsetTop, a = i + n.offsetHeight, o = r.scrollTop, s = o + r.clientHeight;
-		i >= o && a <= s || n.scrollIntoView({
-			block: "nearest",
-			behavior: t
-		});
-	}, a[8] = c?.consumeScrollBehavior, a[9] = l, a[10] = b) : b = a[10];
-	let x;
-	a[11] !== c || a[12] !== l ? (x = [c, l], a[11] = c, a[12] = l, a[13] = x) : x = a[13], n.useEffect(b, x);
-	let S;
-	a[14] !== c || a[15] !== u || a[16] !== r.data ? (S = (e) => {
-		u?.(e), c?.setHighlightedOption(r.data);
-	}, a[14] = c, a[15] = u, a[16] = r.data, a[17] = S) : S = a[17];
-	let C = S, w = l ? "bg-muted text-foreground" : "text-foreground hover:bg-muted", T;
-	a[18] !== d || a[19] !== w ? (T = e("flex cursor-pointer items-center justify-between gap-3 px-3 py-2 text-sm", d, w), a[18] = d, a[19] = w, a[20] = T) : T = a[20];
-	let E;
-	a[21] !== r.data || a[22] !== h ? (E = h(r.data), a[21] = r.data, a[22] = h, a[23] = E) : E = a[23];
-	let D;
-	return a[24] !== y || a[25] !== C || a[26] !== f || a[27] !== T || a[28] !== E ? (D = /* @__PURE__ */ i("div", {
-		ref: y,
-		...f,
-		onMouseMove: C,
-		className: T,
-		children: E
-	}), a[24] = y, a[25] = C, a[26] = f, a[27] = T, a[28] = E, a[29] = D) : D = a[29], D;
-}, l = {
-	control: () => ({ display: "none" }),
-	menu: (e) => ({
-		...e,
-		marginTop: 4,
-		borderRadius: "var(--radius)",
-		boxShadow: "0 18px 36px rgba(15, 23, 42, 0.18)",
-		backgroundColor: "hsl(var(--popover))",
-		overflow: "hidden",
-		zIndex: 20
-	}),
-	menuList: (e) => ({
-		...e,
-		maxHeight: 240,
-		padding: 0
-	}),
-	option: (e, t) => ({
-		...e,
-		fontSize: "0.875rem",
-		backgroundColor: t.isFocused ? "hsl(var(--muted))" : t.isSelected ? "hsl(var(--accent))" : "transparent",
-		color: t.isSelected ? "hsl(var(--accent-foreground))" : "hsl(var(--foreground))",
-		cursor: "pointer"
-	}),
-	noOptionsMessage: (e) => ({
+function me(e) {
+	let t = pe(e);
+	if (t != null) return t;
+	let n = y(e).trim(), r = f(n);
+	return r ? fe(r) : null;
+}
+function he(e, n) {
+	return n || (e ? t(e) : null);
+}
+function ge(e, t, n) {
+	let r = y(e).trim(), i = f(r);
+	if (!i) return `+${t.dialCode}`;
+	let a = n?.allowImplicitInternational === !1 ? pe(r) : me(r);
+	if (a) {
+		let e = f(a);
+		if (e.startsWith(t.dialCode)) return a;
+		let { phoneNumber: n } = u(a), r = n?.countryCallingCode, i = r && e.startsWith(r) ? e.slice(r.length) : n?.nationalNumber ?? e;
+		return `+${t.dialCode}${i}`;
+	}
+	let { phoneNumber: o } = u(r, t.value);
+	return `+${t.dialCode}${o?.nationalNumber ?? i}`;
+}
+function _e(e, t) {
+	return {
 		...e,
-		fontSize: "0.875rem",
-		color: "hsl(var(--muted-foreground))"
-	})
-}, u = (e) => {
-	let n = t(5), { children: r, innerProps: a, innerRef: o } = e, s;
-	n[0] === Symbol.for("react.memo_cache_sentinel") ? (s = {
-		height: 0,
-		minHeight: 0,
-		opacity: 0,
-		overflow: "hidden",
-		pointerEvents: "none"
-	}, n[0] = s) : s = n[0];
-	let c;
-	return n[1] !== r || n[2] !== a || n[3] !== o ? (c = /* @__PURE__ */ i("div", {
-		...a,
-		ref: o,
-		style: s,
-		children: r
-	}), n[1] = r, n[2] = a, n[3] = o, n[4] = c) : c = n[4], c;
-}, d = () => null;
-function f(e) {
-	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("span", {
-		className: "flex min-w-0 items-center gap-2",
-		children: [e.flag ? /* @__PURE__ */ i("span", {
-			"aria-hidden": "true",
-			className: "text-lg leading-none",
-			children: e.flag
-		}) : null, /* @__PURE__ */ i("span", {
-			className: "truncate",
-			children: e.name
-		})]
-	}), /* @__PURE__ */ a("span", {
-		className: "text-xs text-muted-foreground",
-		children: ["+", e.dialCode]
-	})] });
+		country: t.value,
+		countryCallingCode: t.dialCode,
+		lengthIssue: d(e.rawInput, t.value)
+	};
 }
-function p(e) {
-	return f(e);
+function x(e, n) {
+	let r = y(e ?? "").trim();
+	if (!r) {
+		let e = n ?? null;
+		return {
+			displayValue: "",
+			formattedInternational: "",
+			formattedNational: "",
+			e164: null,
+			country: e,
+			countryCallingCode: e ? t(e) : null,
+			nationalNumber: "",
+			rawInput: "",
+			isValid: !1,
+			lengthIssue: null
+		};
+	}
+	let i = me(r);
+	if (i == null && n == null) return {
+		displayValue: r,
+		formattedInternational: r,
+		formattedNational: r,
+		e164: null,
+		country: null,
+		countryCallingCode: null,
+		nationalNumber: f(r),
+		rawInput: r,
+		isValid: !1,
+		lengthIssue: null
+	};
+	let a = i ?? r, { international: o, national: s, formatted: ee, phoneNumber: c, detectedCountry: l } = u(a, n), te = i != null, p = te ? l ?? n ?? null : n ?? l ?? null, m = he(p, c?.countryCallingCode), re = f(a), ie = c?.nationalNumber ?? (m && a.startsWith("+") ? ne(re, m) : f(r));
+	return {
+		displayValue: te ? o : ee,
+		formattedInternational: c?.formatInternational() ?? o,
+		formattedNational: c?.formatNational() ?? s,
+		e164: c?.number ?? null,
+		country: p,
+		countryCallingCode: m,
+		nationalNumber: ie,
+		rawInput: a,
+		isValid: c?.isValid() ?? !1,
+		lengthIssue: p ? d(a, p) : null
+	};
 }
+var S = g.forwardRef(function(r, u) {
+	let { value: d, defaultCountry: ne, country: v, locale: y, onChange: b, onCountryChange: fe, className: me, inputClassName: he, disabled: S, readOnly: C, selectProps: ve, autofillShimName: ye, messages: be, renderValidationMessage: xe, ...Se } = r, { onFocus: Ce, onBlur: we, onKeyDown: Te, name: Ee, autoComplete: De, ...Oe } = Se, w = typeof v == "string" ? v : null, T = o(y), E = g.useMemo(() => l(T), [T]), D = g.useMemo(() => n(E, be), [E, be]), O = g.useMemo(() => a(E, T), [T, E]), k = g.useCallback((e) => {
+		let t = O.find((t) => t.value === e);
+		return t ? te(t) : i(e);
+	}, [O]), ke = g.useMemo(() => {
+		let e = s(ne ?? v ?? "US");
+		return O.some((t) => t.value === e) ? e : O[0]?.value ?? "US";
+	}, [
+		O,
+		v,
+		ne
+	]), Ae = g.useRef(null);
+	Ae.current ||= x(d, w ?? void 0);
+	let je = Ae.current, [A, Me] = g.useState(w ? null : je.country), [j, Ne] = g.useState(je.displayValue), [M, N] = g.useState(""), [P, F] = g.useState(!1), [I, L] = g.useState(-1), [Pe, Fe] = g.useState(!1), [Ie, Le] = g.useState(!1), [Re, R] = g.useState(je.lengthIssue), z = g.useRef(null), B = g.useRef(""), V = g.useRef(null), H = g.useRef("smooth"), U = g.useRef(null), ze = g.useRef(!1), Be = g.useRef(null), W = g.useRef(null), G = w ?? A, Ve = w ?? z.current ?? void 0;
+	g.useImperativeHandle(u, () => W.current, []), g.useLayoutEffect(() => {
+		Le(!0);
+	}, []), g.useLayoutEffect(() => {
+		let e = U.current;
+		if (!e) return;
+		let t = W.current;
+		if (U.current = null, !t) return;
+		let { start: n, end: r } = e;
+		t.setSelectionRange(n, r);
+	}, [j]);
+	let He = ve ?? {}, Ue = g.useId(), { styles: We, components: Ge, classNamePrefix: Ke, formatOptionLabel: qe, menuPortalTarget: Je, menuPosition: Ye, ...Xe } = He, { instanceId: Ze, noOptionsMessage: Qe, ...$e } = Xe, et = Ze ?? Ue, [tt, nt] = g.useState(null), rt = "menuPortalTarget" in He, K = rt ? Je : tt, it = g.useMemo(() => {
+		let e = We?.menuPortal;
+		return {
+			...le,
+			...We ?? {},
+			menuPortal: (t, n) => {
+				let r = {
+					...t,
+					zIndex: 1300
+				}, i = e ? e(r, n) : r;
+				if (typeof document > "u" || !K || K === document.body) return i;
+				let a = K.getBoundingClientRect();
+				return {
+					...i,
+					left: typeof i.left == "number" ? i.left - a.left : i.left,
+					top: typeof i.top == "number" ? i.top - a.top : i.top
+				};
+			}
+		};
+	}, [K, We]);
+	g.useLayoutEffect(() => {
+		if (rt || typeof document > "u") return;
+		let e = W.current?.closest("[data-slot='dialog-content'], [data-slot='sheet-content'], [role='dialog']") ?? document.body;
+		nt(e);
+	}, [rt]);
+	let at = g.useMemo(() => {
+		let e = {
+			Control: ae,
+			IndicatorsContainer: h,
+			DropdownIndicator: h,
+			IndicatorSeparator: h,
+			ValueContainer: h
+		}, t = Ge ?? {};
+		return t.Option ? {
+			...e,
+			...t
+		} : {
+			...e,
+			...t,
+			Option: se
+		};
+	}, [Ge]);
+	g.useEffect(() => () => {
+		V.current != null && typeof window < "u" && window.clearTimeout(V.current);
+	}, []), g.useEffect(() => {
+		if (d == null) return;
+		let e = x(d, Ve);
+		B.current = "", Ne(e.displayValue), F(!1), N(""), L(-1), R(e.lengthIssue), !w && e.country !== A && Me(e.country);
+	}, [
+		w,
+		Ve,
+		A,
+		d
+	]), g.useEffect(() => {
+		let e = G ?? null;
+		!ze.current && e == null || ze.current && Be.current === e || (ze.current = !0, Be.current = e, fe?.(e, e ? k(e) : null));
+	}, [
+		G,
+		fe,
+		k
+	]);
+	let q = g.useCallback((e) => {
+		b?.({
+			...e,
+			selectedCountry: e.country ? k(e.country) : null
+		});
+	}, [b, k]), J = g.useCallback(() => {
+		typeof window > "u" || (V.current != null && window.clearTimeout(V.current), V.current = window.setTimeout(() => {
+			B.current = "", V.current = null;
+		}, 800));
+	}, []), ot = g.useCallback((e, t) => {
+		Ne(e.displayValue), F(!1), N(""), L(-1), R(e.lengthIssue), !w && e.country !== A && Me(e.country), t && (U.current = m(t, e.displayValue)), q({
+			formattedInternational: e.formattedInternational,
+			formattedNational: e.formattedNational,
+			e164: e.e164,
+			country: e.country,
+			countryCallingCode: e.countryCallingCode,
+			nationalNumber: e.nationalNumber,
+			rawInput: e.rawInput,
+			isValid: e.isValid
+		});
+	}, [
+		w,
+		q,
+		A
+	]), st = g.useCallback((e) => {
+		let n = e.target, r = p(n), i = n.value;
+		B.current = "";
+		let a = pe(i), o = z.current;
+		if (a != null && o) {
+			let e = t(o);
+			f(a).startsWith(e) || (z.current = null);
+		} else a != null && (z.current = null);
+		let s = z.current, ee = f(i);
+		if (!w && s && a == null && ee) {
+			let e = {
+				value: s,
+				dialCode: t(s)
+			}, n = _e(x(ge(i, {
+				value: e.value,
+				dialCode: e.dialCode
+			}, { allowImplicitInternational: !1 }), s), e);
+			ot(n, r);
+			return;
+		}
+		let c = x(i, w ?? s ?? void 0);
+		ot(c, r);
+	}, [ot, w]), ct = g.useCallback((e) => {
+		if (!e) return;
+		z.current = e.value;
+		let t = _e(x(ge(j, e), e.value), e);
+		Ne(t.displayValue), U.current = {
+			start: t.displayValue.length,
+			end: t.displayValue.length
+		}, F(!1), N(""), L(-1), R(t.lengthIssue), w || Me(e.value), q({
+			formattedInternational: t.formattedInternational,
+			formattedNational: t.formattedNational,
+			e164: t.e164,
+			country: t.country,
+			countryCallingCode: t.countryCallingCode,
+			nationalNumber: t.nationalNumber,
+			rawInput: t.rawInput,
+			isValid: t.isValid
+		}), requestAnimationFrame(() => {
+			W.current?.focus();
+		});
+	}, [
+		w,
+		q,
+		j
+	]), Y = g.useMemo(() => {
+		if (!P) return [];
+		let e = [], t = (t) => {
+			t && !e.some((e) => e.value === t.value) && e.push(t);
+		}, n = O.find((e) => e.value === ke), r = G ? O.find((e) => e.value === G) : void 0, i = M.trim(), a = f(i), o = ee(i);
+		return !a && !o ? (t(r), t(n), O.forEach(t), e) : (a && O.filter((e) => e.dialCode.startsWith(a)).sort((e, t) => {
+			let n = e.dialCode === a, r = t.dialCode === a;
+			return n && !r ? -1 : !n && r ? 1 : e.dialCode.length - t.dialCode.length;
+		}).forEach(t), o && O.filter((e) => e.normalizedSearchableTokens.some((e) => e.includes(o))).sort((e, t) => {
+			let n = c(e.normalizedSearchableTokens, o), r = c(t.normalizedSearchableTokens, o);
+			return n === r ? e.name.localeCompare(t.name) : n - r;
+		}).forEach(t), t(r), t(n), e.length === 0 && O.forEach(t), e);
+	}, [
+		G,
+		O,
+		M,
+		ke,
+		P
+	]), X = Pe && P && Y.length > 0;
+	g.useEffect(() => {
+		X || (H.current = "smooth");
+	}, [X]), g.useEffect(() => {
+		if (!X) {
+			L(-1);
+			return;
+		}
+		if (Y.length === 0) {
+			L(-1);
+			return;
+		}
+		L((e) => e < 0 || e >= Y.length ? 0 : e);
+	}, [Y, X]);
+	let Z = I >= 0 ? Y[I] ?? null : null;
+	g.useEffect(() => {
+		I < 0 && (H.current = "smooth");
+	}, [I]);
+	let lt = g.useCallback(() => {
+		let e = H.current;
+		return H.current = "smooth", e;
+	}, []), ut = g.useCallback((e) => {
+		let t = Y.findIndex((t) => t.value === e.value);
+		t !== -1 && L(t);
+	}, [Y]), dt = g.useCallback((e, t) => qe ? qe(e, t) : ce(e), [qe]), ft = g.useCallback((e) => dt(e, {
+		context: "menu",
+		inputValue: M,
+		selectValue: []
+	}), [M, dt]), pt = g.useMemo(() => ({
+		highlightedValue: Z?.value ?? null,
+		setHighlightedOption: ut,
+		renderOptionLabel: ft,
+		consumeScrollBehavior: lt
+	}), [
+		lt,
+		Z,
+		ft,
+		ut
+	]), Q = G ? O.find((e) => e.value === G) : void 0, mt = Q?.flag ?? "", ht = G ? D.selectedCountryLabel(Q?.name ?? G) : D.selectCountryLabel, gt = !!(G && mt), $ = Re === "TOO_LONG" ? D.lengthTooLong(Q?.name ?? G ?? null) : null, _t = Q?.name ?? G ?? null, vt = null;
+	if ($) {
+		let e = xe?.({
+			message: $,
+			code: "TOO_LONG",
+			countryName: _t
+		});
+		vt = e === void 0 ? /* @__PURE__ */ _("p", {
+			className: "mt-1 text-xs text-destructive",
+			children: /* @__PURE__ */ _("span", { children: $ })
+		}) : e;
+	}
+	let yt = g.useCallback((e) => {
+		B.current = `${B.current}${e}`.slice(-12), N(B.current), F(!0), J();
+	}, [J]), bt = g.useCallback(() => {
+		let e = B.current;
+		e && (B.current = e.slice(0, -1), N(B.current), B.current && J());
+	}, [J]), xt = g.useCallback((e) => {
+		if (Te?.(e), e.defaultPrevented) return;
+		let t = e.key;
+		if (e.metaKey || e.ctrlKey || e.altKey) return;
+		let n = e.currentTarget, r = n.value, i = n.selectionStart ?? 0, a = n.selectionEnd ?? i, o = i === a;
+		if (t === "Backspace" && o) {
+			let e = re(r, i);
+			e !== i && n.setSelectionRange(e, e);
+		} else if (t === "ArrowLeft" && o) {
+			let t = re(r, i);
+			if (t !== i) {
+				e.preventDefault(), n.setSelectionRange(t, t);
+				return;
+			}
+		} else if (t === "ArrowRight" && o) {
+			let t = ie(r, a);
+			if (t !== a) {
+				e.preventDefault(), n.setSelectionRange(t, t);
+				return;
+			}
+		}
+		if (t === "ArrowDown") {
+			if (H.current = e.repeat ? "auto" : "smooth", e.preventDefault(), !P) {
+				F(!0), L(Y.length > 0 ? 0 : -1);
+				return;
+			}
+			Y.length > 0 && L((e) => e < 0 ? 0 : (e + 1) % Y.length);
+			return;
+		}
+		if (t === "ArrowUp") {
+			if (H.current = e.repeat ? "auto" : "smooth", e.preventDefault(), !P) {
+				F(!0), L(Y.length > 0 ? Y.length - 1 : -1);
+				return;
+			}
+			Y.length > 0 && L((e) => e < 0 ? Y.length - 1 : (e - 1 + Y.length) % Y.length);
+			return;
+		}
+		if (/^[a-z]$/i.test(t)) {
+			e.preventDefault(), P || (F(!0), L(Y.length > 0 ? 0 : -1)), yt(t.toLowerCase());
+			return;
+		}
+		if (X) {
+			if (t === "Backspace" && B.current) {
+				e.preventDefault(), bt();
+				return;
+			}
+			if (t === "Escape") {
+				e.preventDefault(), B.current = "", N(""), F(!1);
+				return;
+			}
+			if (t === "Enter" && Y.length > 0) {
+				e.preventDefault();
+				let t = Z ?? Y[0];
+				ct(t);
+				return;
+			}
+		}
+	}, [
+		yt,
+		Y,
+		ct,
+		Z,
+		Te,
+		bt,
+		P,
+		X
+	]), St = g.useCallback((e) => {
+		Fe(!0), Ce?.(e);
+	}, [Ce]), Ct = g.useCallback((e) => {
+		Fe(!1), F(!1), B.current = "", N(""), we?.(e);
+	}, [we]), wt = g.useCallback(() => {
+		S || C || (B.current = "", N(""), F(!0), L((e) => e < 0 ? 0 : e), requestAnimationFrame(() => {
+			W.current?.focus();
+		}));
+	}, [S, C]), Tt = ye ?? (Ee ? `${Ee}_shim` : void 0);
+	return /* @__PURE__ */ ue("div", {
+		className: e("relative flex flex-col", me),
+		children: [
+			/* @__PURE__ */ ue("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ _("input", {
+					...Oe,
+					ref: W,
+					type: "tel",
+					className: e("flex h-10 w-full rounded-md border border-input bg-background py-2 text-base ring-offset-background placeholder:text-muted-foreground 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", he),
+					name: Ee,
+					value: j,
+					onChange: st,
+					onFocus: St,
+					onBlur: Ct,
+					onKeyDown: xt,
+					disabled: S,
+					readOnly: C,
+					autoComplete: De ?? "off"
+				}), /* @__PURE__ */ _("button", {
+					type: "button",
+					className: e("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", gt ? "border-transparent" : "border-dashed border-border text-muted-foreground", S ? "cursor-not-allowed opacity-50" : C ? "cursor-default" : "cursor-pointer hover:bg-muted"),
+					"aria-label": ht,
+					onMouseDown: (e) => e.preventDefault(),
+					onClick: wt,
+					tabIndex: -1,
+					disabled: S,
+					children: /* @__PURE__ */ _("span", {
+						"aria-hidden": "true",
+						children: gt ? mt : "?"
+					})
+				})]
+			}),
+			Tt ? /* @__PURE__ */ _("input", {
+				tabIndex: -1,
+				autoComplete: "tel",
+				name: Tt,
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute left-0 top-0 h-0 w-0 opacity-0"
+			}) : null,
+			/* @__PURE__ */ _("div", {
+				className: "absolute left-0 top-full z-30 mt-1",
+				style: {
+					pointerEvents: X ? "auto" : "none",
+					width: "min(260px, 100%)"
+				},
+				onMouseDown: (e) => e.preventDefault(),
+				children: Ie ? /* @__PURE__ */ _(oe.Provider, {
+					value: pt,
+					children: /* @__PURE__ */ _(de, {
+						...$e,
+						instanceId: et,
+						menuIsOpen: X,
+						options: Y,
+						value: null,
+						components: at,
+						styles: it,
+						isClearable: !1,
+						isSearchable: !1,
+						backspaceRemovesValue: !1,
+						tabSelectsValue: !1,
+						menuShouldScrollIntoView: !1,
+						menuPortalTarget: K,
+						menuPosition: Ye ?? (K ? "fixed" : "absolute"),
+						onChange: ct,
+						classNamePrefix: Ke ?? "phone-number-suggestions",
+						placeholder: "",
+						formatOptionLabel: dt,
+						noOptionsMessage: Qe ?? (() => D.noMatches)
+					})
+				}) : null
+			}),
+			vt
+		]
+	});
+});
+S.displayName = "PhoneNumberInput";
 //#endregion
-export { u as HiddenControl, d as NullComponent, o as SuggestionContext, c as SuggestionOption, f as formatCountryOption, l as suggestionSelectStyles };
+export { S as PhoneNumberInput };
 
 //# sourceMappingURL=index362.js.map