@mortenbrudvik/waveui 0.11.0 → 0.12.0

package/dist/components/input/TimePicker.mjs

@@ -10,89 +10,89 @@ import { useIsClient as te } from "../../hooks/useIsClient.mjs";
 import { joinIds as ne } from "../../lib/aria.mjs";
 import { useFieldContext as re, useFieldControl as ie } from "../../hooks/useFieldControl.mjs";
 import { ListboxContext as ae, useListbox as oe, useListboxOption as s } from "../../hooks/useListbox.mjs";
-import { useDismiss as se } from "../../hooks/useDismiss.mjs";
-import { Portal as ce } from "../portal/Portal.mjs";
-import { disabledStyles as le, forcedColors as ue, inputAppearanceClasses as de, inputFocus as fe, inputHeightClasses as pe, inputPaddingClasses as me, inputTextClasses as he } from "../../lib/styles.mjs";
-import { CheckIcon as c, DismissIcon as ge } from "../../lib/icons.mjs";
-import { useInputLook as _e } from "./inputLook.mjs";
-import { isInvalidLook as ve } from "./Input.mjs";
-import { useFormReset as ye } from "../../hooks/useFormReset.mjs";
-import { HiddenInput as be } from "../internal/HiddenInput.mjs";
-import { pickerButtonOffset as xe, pickerEndPadding as Se, pickerGlyphSize as Ce, pickerIconButtonClasses as we } from "./pickerStyles.mjs";
-import { PickerExpandButton as Te, showsExpandButton as Ee } from "./Combobox.expand.mjs";
-import { usePopupPosition as De } from "../../hooks/usePopupPosition.mjs";
-import { generateTimeOptions as Oe, minutesToTime as ke, minutesToValue as l, normalizeTimeStep as Ae, timeToMinutes as u } from "./dateUtils.mjs";
+import { resolvePositioning as se, usePopupPosition as ce } from "../../hooks/usePopupPosition.mjs";
+import { useDismiss as le } from "../../hooks/useDismiss.mjs";
+import { disabledStyles as ue, forcedColors as de, inputAppearanceClasses as fe, inputFocus as pe, inputHeightClasses as me, inputPaddingClasses as he, inputTextClasses as ge } from "../../lib/styles.mjs";
+import { Portal as _e } from "../portal/Portal.mjs";
+import { CheckIcon as c, DismissIcon as ve } from "../../lib/icons.mjs";
+import { useInputLook as ye } from "./inputLook.mjs";
+import { isInvalidLook as be } from "./Input.mjs";
+import { useFormReset as xe } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as Se } from "../internal/HiddenInput.mjs";
+import { pickerButtonOffset as Ce, pickerEndPadding as we, pickerGlyphSize as Te, pickerIconButtonClasses as Ee } from "./pickerStyles.mjs";
+import { PickerExpandButton as De, showsExpandButton as Oe } from "./Combobox.expand.mjs";
+import { generateTimeOptions as ke, minutesToTime as Ae, minutesToValue as l, normalizeTimeStep as je, timeToMinutes as u } from "./dateUtils.mjs";
 import * as d from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { flushSync as je } from "react-dom";
+import { flushSync as Me } from "react-dom";
 //#region src/components/input/TimePicker.tsx
-var m = "flex cursor-pointer items-center gap-2 px-3 py-1.5 text-body-1 text-foreground hover:bg-subtle-hover data-[active]:bg-subtle-hover data-[active]:outline-2 data-[active]:outline-ring data-[active]:-outline-offset-2 data-[selected]:bg-subtle-selected data-[selected]:font-semibold", Me = d.memo(function({ value: t, label: n }) {
+var m = "flex cursor-pointer items-center gap-2 px-3 py-1.5 text-body-1 text-foreground hover:bg-subtle-hover data-[active]:bg-subtle-hover data-[active]:outline-2 data-[active]:outline-ring data-[active]:-outline-offset-2 data-[selected]:bg-subtle-selected data-[selected]:font-semibold", Ne = d.memo(function({ value: t, label: n }) {
 	let { selected: r, optionProps: a } = s({
 		value: t,
 		label: n
 	});
 	return /* @__PURE__ */ p("li", {
 		...a,
-		className: e(i.option, m, r && ue.selectedContainer),
+		className: e(i.option, m, r && de.selectedContainer),
 		children: [/* @__PURE__ */ f("span", {
 			className: e(i.checkIcon, "flex h-4 w-4 shrink-0 items-center justify-center"),
 			children: r ? /* @__PURE__ */ f(c, { size: 12 }) : null
 		}), n]
 	});
 });
-Me.displayName = "TimePickerOption";
-var Ne = (e) => `Enter a time in the format ${e}.`, Pe = (e, t) => e !== void 0 && t !== void 0 ? `Enter a time between ${e} and ${t}.` : e === void 0 ? `Enter a time on or before ${t}.` : `Enter a time on or after ${e}.`;
+Ne.displayName = "TimePickerOption";
+var Pe = (e) => `Enter a time in the format ${e}.`, Fe = (e, t) => e !== void 0 && t !== void 0 ? `Enter a time between ${e} and ${t}.` : e === void 0 ? `Enter a time on or before ${t}.` : `Enter a time on or after ${e}.`;
 function h(e, t) {
 	let n = u(e);
-	return Number.isNaN(n) ? e : ke(n, t);
+	return Number.isNaN(n) ? e : Ae(n, t);
 }
-function Fe(e, t) {
+function Ie(e, t) {
 	return e.label.toLowerCase().includes(t) || e.value.includes(t);
 }
-function Ie(e, t) {
+function Le(e, t) {
 	return e.label.toLowerCase().startsWith(t) || e.value.startsWith(t);
 }
 var g = (s) => {
-	let { value: ue, defaultValue: c, onValueChange: ke, onChange: m, format: g = "12h", step: _ = 30, minTime: v = "00:00", maxTime: y = "23:59", placeholder: Le = "Select a time", disabled: b = !1, size: Re, appearance: ze, readOnly: x, clearable: Be = !1, expandIcon: Ve, open: He, defaultOpen: Ue, onOpenChange: We, onInvalidInput: Ge, labels: S, name: Ke, form: qe, required: Je, autoComplete: Ye = "off", autoCapitalize: Xe, autoCorrect: Ze, maxLength: Qe, enterKeyHint: $e, inputMode: et, spellCheck: tt, autoFocus: nt, tabIndex: rt, id: it, "aria-label": at, "aria-labelledby": ot, "aria-describedby": st, "aria-invalid": ct, "aria-required": lt, "aria-errormessage": ut, "aria-details": dt, onFocus: ft, onBlur: pt, onKeyDown: mt, onKeyUp: ht, controlRef: gt, className: _t, ref: vt, ...yt } = s;
+	let { value: de, defaultValue: c, onValueChange: Ae, onChange: m, format: g = "12h", step: _ = 30, minTime: v = "00:00", maxTime: y = "23:59", placeholder: Re = "Select a time", disabled: b = !1, size: ze, positioning: Be, appearance: Ve, readOnly: x, clearable: He = !1, expandIcon: Ue, open: We, defaultOpen: Ge, onOpenChange: Ke, onInvalidInput: qe, labels: S, name: Je, form: Ye, required: Xe, autoComplete: Ze = "off", autoCapitalize: Qe, autoCorrect: $e, maxLength: et, enterKeyHint: tt, inputMode: nt, spellCheck: rt, autoFocus: it, tabIndex: at, id: ot, "aria-label": C, "aria-labelledby": st, "aria-describedby": ct, "aria-invalid": lt, "aria-required": ut, "aria-errormessage": dt, "aria-details": ft, onFocus: pt, onBlur: mt, onKeyDown: ht, onKeyUp: gt, controlRef: _t, className: vt, ref: yt, ...bt } = s;
 	m !== void 0 && t("TimePicker", "onChange", "onValueChange");
-	let { size: C, appearance: w } = _e(Re, ze), [T, E] = a(ue, c ?? "", (e) => {
-		ke?.(e), m?.(e);
-	}), bt = Ae(_).valid, D = u(v), O = u(y), k = !Number.isNaN(D) && !Number.isNaN(O) && D <= O, A = d.useMemo(() => Oe(_, v, y, g), [
+	let { size: w, appearance: T } = ye(ze, Ve), [E, xt] = a(de, c ?? "", (e) => {
+		Ae?.(e), m?.(e);
+	}), St = je(_).valid, D = u(v), O = u(y), k = !Number.isNaN(D) && !Number.isNaN(O) && D <= O, A = d.useMemo(() => ke(_, v, y, g), [
 		_,
 		v,
 		y,
 		g
 	]);
 	d.useEffect(() => {
-		bt || n(`TimePicker:step:${String(_)}`, `TimePicker: \`step\` must be a positive number of minutes (received ${String(_)}); using 30.`);
-	}, [_, bt]), d.useEffect(() => {
+		St || n(`TimePicker:step:${String(_)}`, `TimePicker: \`step\` must be a positive number of minutes (received ${String(_)}); using 30.`);
+	}, [_, St]), d.useEffect(() => {
 		k || n(`TimePicker:bounds:${v}|${y}`, `TimePicker: \`minTime\`/\`maxTime\` must be times such as "09:00", "09:00:00" or "9:00 AM" with minTime <= maxTime (received "${v}" / "${y}"); no times are available.`);
 	}, [
 		v,
 		y,
 		k
 	]);
-	let j = !b && !x, [M, N, xt] = a(He, (Ue ?? !1) && j, We), St = te(), P = M && j && St;
+	let j = !b && !x, [M, N, Ct] = a(We, (Ge ?? !1) && j, Ke), wt = te(), P = M && j && wt;
 	d.useEffect(() => {
-		!j && M && !xt && N(!1);
+		!j && M && !Ct && N(!1);
 	}, [
 		j,
 		M,
-		xt,
+		Ct,
 		N
 	]);
-	let [F, I] = d.useState(null), [L, R] = d.useState(null), [Ct, wt] = d.useState(j);
-	Ct !== j && (wt(j), j || (I(null), R(null)));
-	let [Tt, Et] = d.useState(T);
-	Tt !== T && (Et(T), L !== null && (I(null), R(null)));
-	let Dt = F ?? "", Ot = () => {
+	let [F, I] = d.useState(null), [L, R] = d.useState(null), [Tt, Et] = d.useState(j);
+	Tt !== j && (Et(j), j || (I(null), R(null)));
+	let [Dt, Ot] = d.useState(E);
+	Dt !== E && (Ot(E), L !== null && (I(null), R(null)));
+	let kt = F ?? "", At = () => {
 		j && !P && N(!0);
 	}, z = () => N(!1), B = d.useMemo(() => {
-		let e = Dt.trim().toLowerCase();
+		let e = kt.trim().toLowerCase();
 		if (!e) return;
 		let t = u(e), n = Number.isNaN(t) ? null : l(t);
-		return (t) => t.value === n || Fe(t, e);
-	}, [Dt]), V = (e) => {
+		return (t) => t.value === n || Ie(t, e);
+	}, [kt]), jt = (e) => {
 		let t = e.trim().toLowerCase();
 		if (!t) return null;
 		let n = u(e);
@@ -100,192 +100,194 @@ var g = (s) => {
 			let e = l(n);
 			return A.some((t) => t.value === e) ? e : null;
 		}
-		return (A.find((e) => Ie(e, t)) ?? A.find((e) => Fe(e, t)))?.value ?? null;
-	}, kt = T !== "" && A.some((e) => e.value === T), At = d.useMemo(() => T ? [T] : [], [T]), H = (e) => {
-		E(e), I(null), R(null);
-	}, U = (e) => {
-		if (!e.trim()) return H(""), null;
+		return (A.find((e) => Le(e, t)) ?? A.find((e) => Ie(e, t)))?.value ?? null;
+	}, Mt = E !== "" && A.some((e) => e.value === E), Nt = d.useMemo(() => E ? [E] : [], [E]), V = (e) => {
+		xt(e), I(null), R(null);
+	}, H = (e) => {
+		if (!e.trim()) return V(""), null;
 		let t = u(e);
-		return Number.isNaN(t) ? "unparseable" : !k || t < D || t > O ? "out-of-range" : (H(l(t)), null);
-	}, jt = (e, t) => {
-		R(t), Ge?.(e, t);
-	}, W = () => {
+		return Number.isNaN(t) ? "unparseable" : !k || t < D || t > O ? "out-of-range" : (V(l(t)), null);
+	}, Pt = (e, t) => {
+		R(t), qe?.(e, t);
+	}, U = () => {
 		I(null), R(null);
-	}, G = d.useMemo(() => B ? A.some(B) : A.length > 0, [A, B]), K = P && G, q = oe({
-		open: K,
-		onOpenChange: (e) => e ? Ot() : z(),
+	}, W = d.useMemo(() => B ? A.some(B) : A.length > 0, [A, B]), G = P && W, K = oe({
+		open: G,
+		onOpenChange: (e) => e ? At() : z(),
 		mode: "editable",
-		selectedValues: At,
-		onSelect: (e) => H(e),
+		selectedValues: Nt,
+		onSelect: (e) => V(e),
 		items: A,
 		filter: B,
-		autoHighlight: F === null && kt ? "selected" : !1,
+		autoHighlight: F === null && Mt ? "selected" : !1,
 		idPrefix: "timepicker-listbox",
 		onClearDraft: F === null ? void 0 : () => {
-			W(), z();
+			U(), z();
 		}
-	}), Mt = T ? q.getItem(T)?.label ?? h(T, g) : "", J = Be && !x && T !== "", Nt = P && !G ? A.length === 0 ? S?.noTimes ?? "No times available" : S?.noMatches ?? "No matching times" : "", Pt = d.useRef(null), Y = d.useRef(null), Ft = d.useRef(null), It = o(vt, Pt), Lt = o(gt, Y), { layerId: Rt } = se({
+	}), Ft = E ? K.getItem(E)?.label ?? h(E, g) : "", q = He && !x && E !== "", It = P && !W ? A.length === 0 ? S?.noTimes ?? "No times available" : S?.noMatches ?? "No matching times" : "", Lt = d.useRef(null), J = d.useRef(null), Rt = d.useRef(null), zt = o(yt, Lt), Bt = o(_t, J), { layerId: Vt } = le({
 		open: P,
 		onDismiss: z,
-		refs: [Ft, Pt],
-		anchorRef: Y,
+		refs: [Rt, Lt],
+		anchorRef: J,
 		kind: "listbox",
 		focusOutside: !0
-	}), { setReference: zt, setFloating: Bt, floatingProps: Vt } = De({
+	}), { setReference: Ht, setFloating: Ut, floatingProps: Wt } = ce({
 		open: P,
 		side: "bottom",
 		align: "start",
-		matchReferenceWidth: !0,
-		fitViewport: !0
-	}), Ht = o(Ft, Bt), X = re(), Ut = (Je ?? X?.required ?? !1) && !x, Wt = ee("timepicker-error"), Z = L !== null && !X?.hasErrorMessage, Gt = ie({
-		id: it,
-		"aria-label": at,
-		"aria-labelledby": ot,
-		"aria-describedby": ne(st, Z ? Wt : void 0),
-		"aria-invalid": L !== null || ct,
-		"aria-required": lt ?? Je
-	}), Kt = ve(!1, Gt["aria-invalid"]);
-	ye(Y, () => {
-		E(c ?? ""), W(), z();
-	}, qe);
-	let qt = (e) => {
+		...se(Be, {
+			matchReferenceWidth: !0,
+			fitViewport: !0
+		})
+	}), Gt = o(Rt, Ut), Y = re(), Kt = (Xe ?? Y?.required ?? !1) && !x, qt = ee("timepicker-error"), X = L !== null && !Y?.hasErrorMessage, Z = ie({
+		id: ot,
+		"aria-label": C,
+		"aria-labelledby": st,
+		"aria-describedby": ne(ct, X ? qt : void 0),
+		"aria-invalid": L !== null || lt,
+		"aria-required": ut ?? Xe
+	}), Jt = be(!1, Z["aria-invalid"]);
+	xe(J, () => {
+		xt(c ?? ""), U(), z();
+	}, Ye);
+	let Yt = (e) => {
 		if (!j) return;
 		let t = e.target.value;
-		I(t), R(null), P || N(!0), q.setActiveValue(V(t));
-	}, Jt = r(mt, (e) => {
-		if (j && (q.onKeyDown(e), !(e.defaultPrevented || e.nativeEvent.isComposing))) {
-			if (e.key === "Escape" && F === "" && Mt !== "") {
-				e.preventDefault(), W(), z();
+		I(t), R(null), P || N(!0), K.setActiveValue(jt(t));
+	}, Xt = r(ht, (e) => {
+		if (j && (K.onKeyDown(e), !(e.defaultPrevented || e.nativeEvent.isComposing))) {
+			if (e.key === "Escape" && F === "" && Ft !== "") {
+				e.preventDefault(), U(), z();
 				return;
 			}
 			if (e.key === "Enter" && F !== null) {
 				e.preventDefault();
-				let t = U(F);
-				z(), t !== null && jt(F, t);
+				let t = H(F);
+				z(), t !== null && Pt(F, t);
 			}
-			e.key === "Tab" && !e.shiftKey && J && F !== null && !F.trim() && je(() => U(F)), e.key === "Tab" && P && !K && z();
+			e.key === "Tab" && !e.shiftKey && q && F !== null && !F.trim() && Me(() => H(F)), e.key === "Tab" && P && !G && z();
 		}
-	}), Yt = r(ht, q.onKeyUp), Xt = () => {
-		j && !P && (Ot(), F !== null && q.setActiveValue(V(F)));
-	}, Zt = r(pt, () => {
+	}), Zt = r(gt, K.onKeyUp), Qt = () => {
+		j && !P && (At(), F !== null && K.setActiveValue(jt(F)));
+	}, $t = r(mt, () => {
 		if (!j || F === null) return;
-		let e = L === null ? U(F) : null;
-		z(), e !== null && jt(F, e);
-	}), Qt = () => {
-		j && (P ? z() : Xt(), Y.current?.focus());
-	}, $t = () => {
-		j && (H(""), Y.current?.focus());
-	}, en = ne(ot, X?.labelId), tn = (t) => /* @__PURE__ */ f("ul", {
-		...q.getListboxProps(),
-		"aria-labelledby": en,
-		"aria-label": en ? void 0 : at ?? S?.list ?? "Times",
+		let e = L === null ? H(F) : null;
+		z(), e !== null && Pt(F, e);
+	}), en = () => {
+		j && (P ? z() : Qt(), J.current?.focus());
+	}, tn = () => {
+		j && (V(""), J.current?.focus());
+	}, nn = ne(st, Y?.labelId), rn = (t) => /* @__PURE__ */ f("ul", {
+		...K.getListboxProps(),
+		"aria-labelledby": nn,
+		"aria-label": nn ? void 0 : C ?? S?.list ?? "Times",
 		hidden: t || void 0,
 		className: e(i.listbox, "max-h-60 min-h-0 overflow-auto py-1 focus:outline-hidden"),
-		children: q.items.map((e) => /* @__PURE__ */ f(Me, {
+		children: K.items.map((e) => /* @__PURE__ */ f(Ne, {
 			value: e.value,
 			label: e.label
 		}, e.value))
-	}), Q = Ee(Ve), $ = "";
-	Z && L === "unparseable" ? $ = (S?.invalidTime ?? Ne)(g === "24h" ? "HH:mm" : "h:mm AM") : Z && ($ = (S?.outOfRange ?? Pe)(s.minTime === void 0 ? void 0 : h(v, g), s.maxTime === void 0 ? void 0 : h(y, g)));
-	let nn = P ? G : A.length > 0;
+	}), Q = Oe(Ue), $ = "";
+	X && L === "unparseable" ? $ = (S?.invalidTime ?? Pe)(g === "24h" ? "HH:mm" : "h:mm AM") : X && ($ = (S?.outOfRange ?? Fe)(s.minTime === void 0 ? void 0 : h(v, g), s.maxTime === void 0 ? void 0 : h(y, g)));
+	let an = P ? W : A.length > 0;
 	return /* @__PURE__ */ f(ae.Provider, {
-		value: q.context,
+		value: K.context,
 		children: /* @__PURE__ */ p("div", {
-			"data-size": C,
-			"data-appearance": w,
-			...yt,
-			ref: It,
-			className: e(i.root, "relative inline-flex flex-col", _t),
+			"data-size": w,
+			"data-appearance": T,
+			...bt,
+			ref: zt,
+			className: e(i.root, "relative inline-flex flex-col", vt),
 			children: [
 				/* @__PURE__ */ p("div", {
-					ref: zt,
+					ref: Ht,
 					className: "relative flex items-center",
 					children: [
 						/* @__PURE__ */ f("input", {
-							ref: Lt,
+							ref: Bt,
 							type: "text",
-							...q.getComboboxProps(),
-							"aria-controls": nn ? q.listboxId : void 0,
-							...Gt,
-							"aria-errormessage": ut,
-							"aria-details": dt,
-							value: F ?? Mt,
-							onChange: qt,
-							onClick: Xt,
-							onFocus: ft,
-							onBlur: Zt,
-							onKeyDown: Jt,
-							onKeyUp: Yt,
-							placeholder: Le,
+							...K.getComboboxProps(),
+							"aria-controls": an ? K.listboxId : void 0,
+							...Z,
+							"aria-errormessage": dt,
+							"aria-details": ft,
+							value: F ?? Ft,
+							onChange: Yt,
+							onClick: Qt,
+							onFocus: pt,
+							onBlur: $t,
+							onKeyDown: Xt,
+							onKeyUp: Zt,
+							placeholder: Re,
 							disabled: b,
 							readOnly: x,
-							autoComplete: Ye,
-							autoCapitalize: Xe,
-							autoCorrect: Ze,
-							maxLength: Qe,
-							enterKeyHint: $e,
-							inputMode: et,
-							spellCheck: tt,
-							autoFocus: nt,
-							tabIndex: rt,
-							className: e(i.input, pe[C], "w-full", me[C], he[C], de[w], "text-foreground placeholder:text-muted-foreground", fe, le, Kt && "border-destructive", Se(Number(J) + Number(Q), C))
+							autoComplete: Ze,
+							autoCapitalize: Qe,
+							autoCorrect: $e,
+							maxLength: et,
+							enterKeyHint: tt,
+							inputMode: nt,
+							spellCheck: rt,
+							autoFocus: it,
+							tabIndex: at,
+							className: e(i.input, me[w], "w-full", he[w], ge[w], fe[T], "text-foreground placeholder:text-muted-foreground", pe, ue, Jt && "border-destructive", we(Number(q) + Number(Q), w))
 						}),
-						J && /* @__PURE__ */ f("button", {
+						q && /* @__PURE__ */ f("button", {
 							type: "button",
 							"aria-label": S?.clear ?? "Clear time",
 							disabled: b,
 							onMouseDown: (e) => e.preventDefault(),
-							onClick: $t,
-							className: e(i.clearButton, we(C, w), xe(C, Q ? 2 : 1), "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100"),
-							children: /* @__PURE__ */ f(ge, { size: Ce(C, "icon") })
+							onClick: tn,
+							className: e(i.clearButton, Ee(w, T), Ce(w, Q ? 2 : 1), "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100"),
+							children: /* @__PURE__ */ f(ve, { size: Te(w, "icon") })
 						}),
-						Q && /* @__PURE__ */ f(Te, {
+						Q && /* @__PURE__ */ f(De, {
 							component: "TimePicker",
-							expandIcon: Ve,
+							expandIcon: Ue,
 							label: S?.expand ?? "Show times",
-							expanded: K,
-							listboxId: q.listboxId,
+							expanded: G,
+							listboxId: K.listboxId,
 							disabled: b || !!x,
-							onToggle: Qt,
-							size: C,
-							appearance: w,
+							onToggle: en,
+							size: w,
+							appearance: T,
 							className: i.expandButton,
 							iconClassName: i.expandIcon
 						})
 					]
 				}),
-				Z && /* @__PURE__ */ f("p", {
-					id: Wt,
+				X && /* @__PURE__ */ f("p", {
+					id: qt,
 					role: "alert",
 					className: e(i.errorMessage, "mt-1 text-caption-1 text-error"),
 					children: $
 				}),
-				!P && A.length > 0 && tn(!0),
+				!P && A.length > 0 && rn(!0),
 				/* @__PURE__ */ f("span", {
 					role: "status",
 					className: "sr-only",
-					children: Nt
+					children: It
 				}),
-				/* @__PURE__ */ f(be, {
-					name: Ke,
-					form: qe,
+				/* @__PURE__ */ f(Se, {
+					name: Je,
+					form: Ye,
 					disabled: b,
-					value: T,
+					value: E,
 					type: "text",
-					required: Ut,
-					onInvalid: () => Y.current?.focus()
+					required: Kt,
+					onInvalid: () => J.current?.focus()
 				}),
-				P && /* @__PURE__ */ f(ce, {
-					layerId: Rt,
+				P && /* @__PURE__ */ f(_e, {
+					layerId: Vt,
 					children: /* @__PURE__ */ f("div", {
-						ref: Ht,
-						...Vt,
+						ref: Gt,
+						...Wt,
 						"data-state": "open",
 						className: e(i.surface, "flex flex-col overflow-hidden rounded border border-border bg-background shadow-8"),
-						children: G ? tn(!1) : /* @__PURE__ */ f("div", {
+						children: W ? rn(!1) : /* @__PURE__ */ f("div", {
 							"aria-hidden": "true",
 							className: e(i.emptyMessage, "px-3 py-1.5 text-body-1 text-muted-foreground"),
-							children: Nt
+							children: It
 						})
 					})
 				})