@box-kite/react 2.2.16 → 2.2.18

package/components/datePicker.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { f as e } from "../react-shared.mjs";
-import { l as t } from "../platform.mjs";
+import { d as t } from "../platform.mjs";
 import n from "../box.mjs";
 import { a as r, t as i } from "../behavior.mjs";
 import { t as a } from "../placement.mjs";
@@ -13,17 +13,18 @@ import { n as ee } from "../date-environment.mjs";
 import x from "./calendar.mjs";
 import { t as S } from "../layer.mjs";
 import C from "./overlay.mjs";
-import w from "./dateField.mjs";
-import { useCallback as T, useEffect as E, useMemo as D, useRef as O, useState as te } from "react";
-import { Fragment as ne, jsx as k, jsxs as A } from "react/jsx-runtime";
+import { n as w } from "../motion.mjs";
+import te from "./dateField.mjs";
+import { useCallback as T, useEffect as E, useMemo as D, useRef as ne, useState as re } from "react";
+import { Fragment as ie, jsx as O, jsxs as k } from "react/jsx-runtime";
 //#region src/components/datePicker.tsx
-function re() {
-	return /* @__PURE__ */ k(b, {
+function A() {
+	return /* @__PURE__ */ O(b, {
 		viewBox: "0 0 16 16",
 		width: "1rem",
 		height: "1rem",
 		props: { fill: "none" },
-		children: /* @__PURE__ */ k(y, {
+		children: /* @__PURE__ */ O(y, {
 			d: "M3 3.5h10a1 1 0 0 1 1 1V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4.5a1 1 0 0 1 1-1ZM2 7h12M5.5 2v3M10.5 2v3",
 			stroke: "currentColor",
 			strokeWidth: 1.5,
@@ -31,13 +32,13 @@ function re() {
 		})
 	});
 }
-function ie() {
-	return /* @__PURE__ */ k(b, {
+function j() {
+	return /* @__PURE__ */ O(b, {
 		viewBox: "0 0 16 16",
 		width: "1rem",
 		height: "1rem",
 		props: { fill: "none" },
-		children: /* @__PURE__ */ k(y, {
+		children: /* @__PURE__ */ O(y, {
 			d: "M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12ZM8 5v3l2 1.5",
 			stroke: "currentColor",
 			strokeWidth: 1.5,
@@ -47,12 +48,12 @@ function ie() {
 	});
 }
 function ae() {
-	return /* @__PURE__ */ k(b, {
+	return /* @__PURE__ */ O(b, {
 		viewBox: "0 0 16 16",
 		width: "0.875rem",
 		height: "0.875rem",
 		props: { fill: "none" },
-		children: /* @__PURE__ */ k(y, {
+		children: /* @__PURE__ */ O(y, {
 			d: "m4.5 4.5 7 7m0-7-7 7",
 			stroke: "currentColor",
 			strokeWidth: 1.5,
@@ -61,7 +62,7 @@ function ae() {
 	});
 }
 function oe(e) {
-	let [i, o] = te(null), s = e.ref, c = T((e) => {
+	let [i, o] = re(null), s = e.ref, c = T((e) => {
 		o(e), t(s, e);
 	}, [s]), l = (e) => {
 		if (!e || e.contains(document.activeElement) && document.activeElement !== e) return;
@@ -81,10 +82,7 @@ function oe(e) {
 			component: "datePicker",
 			type: "openChange"
 		},
-		onOpened: u,
-		onClosing: (e, t) => {
-			e && t?.focus();
-		}
+		onOpened: u
 	}), y = a({
 		side: e.side,
 		align: e.align,
@@ -93,9 +91,11 @@ function oe(e) {
 		matchWidth: e.matchWidth,
 		anchor: i
 	});
-	return E(() => {
+	E(() => {
 		f && l(v);
-	}, [f, v]), {
+	}, [f, v]);
+	let b = T(() => v, [v]), ee = w(f, b);
+	return {
 		attachTrigger: g.ref,
 		triggerAttributes: g.props,
 		triggerElement: _,
@@ -113,7 +113,7 @@ function oe(e) {
 				"aria-label": e.label,
 				tabIndex: -1
 			};
-			return d ? /* @__PURE__ */ k(n, {
+			return d ? /* @__PURE__ */ O(n, {
 				ref: m,
 				component: "popover",
 				variant: { topLayer: !0 },
@@ -124,8 +124,8 @@ function oe(e) {
 					popover: "auto",
 					...r
 				},
-				children: f ? t : null
-			}) : f && /* @__PURE__ */ k(C, {
+				children: ee === "closed" ? null : t
+			}) : f && /* @__PURE__ */ O(C, {
 				contentRef: m,
 				anchor: i,
 				side: e.side,
@@ -158,7 +158,7 @@ function se(e) {
 		ps: 2,
 		bs: 1
 	} : {};
-	return m.length === 0 ? /* @__PURE__ */ k(n, {
+	return m.length === 0 ? /* @__PURE__ */ O(n, {
 		component: "datePicker.empty",
 		flexGrow: 1,
 		px: 3,
@@ -167,7 +167,7 @@ function se(e) {
 		...b,
 		props: { role: "status" },
 		children: f
-	}) : /* @__PURE__ */ k(n, {
+	}) : /* @__PURE__ */ O(n, {
 		component: "datePicker.times",
 		position: "relative",
 		display: "flex",
@@ -183,7 +183,7 @@ function se(e) {
 			"aria-label": l,
 			onKeyDown: y.onKeyDown
 		},
-		children: m.map((e, t) => /* @__PURE__ */ k(n, {
+		children: m.map((e, t) => /* @__PURE__ */ O(n, {
 			component: "datePicker.time",
 			variant: { selected: e === _ },
 			px: 3,
@@ -209,7 +209,7 @@ function se(e) {
 	});
 }
 function ce(e) {
-	return /* @__PURE__ */ k(n, {
+	return /* @__PURE__ */ O(n, {
 		component: "datePicker.presets",
 		display: "flex",
 		d: "column",
@@ -217,7 +217,7 @@ function ce(e) {
 		pe: 2,
 		be: 1,
 		props: { role: "group" },
-		children: e.presets.map((t) => /* @__PURE__ */ k(n, {
+		children: e.presets.map((t) => /* @__PURE__ */ O(n, {
 			tag: "button",
 			component: "datePicker.preset",
 			variant: { selected: e.isSelected(t.value) },
@@ -236,11 +236,11 @@ function ce(e) {
 	});
 }
 function le(e) {
-	let { frame: t, attachField: i, attachTrigger: a, triggerAttributes: o, triggerElement: s, id: c, label: l, labelledBy: u, describedBy: d } = e, { text: f, placeholder: p, icon: m, clear: h, disabled: g, invalid: _, required: v = !1, tabIndex: y, inputs: b, onReset: ee } = e, x = O(null), S = l === void 0 ? void 0 : `${c}-label`, C = `${c}-value`, w = r(ee);
+	let { frame: t, attachField: i, attachTrigger: a, triggerAttributes: o, triggerElement: s, id: c, label: l, labelledBy: u, describedBy: d } = e, { text: f, placeholder: p, icon: m, clear: h, disabled: g, invalid: _, required: v = !1, tabIndex: y, inputs: b, onReset: ee } = e, x = ne(null), S = l === void 0 ? void 0 : `${c}-label`, C = `${c}-value`, w = r(ee);
 	return E(() => {
 		let e = x.current?.form;
 		if (e) return e.addEventListener("reset", w), () => e.removeEventListener("reset", w);
-	}, [w]), /* @__PURE__ */ A(ne, { children: [l !== void 0 && /* @__PURE__ */ k(n, {
+	}, [w]), /* @__PURE__ */ k(ie, { children: [l !== void 0 && /* @__PURE__ */ O(n, {
 		component: "dateField.label",
 		display: "block",
 		mb: 1.5,
@@ -248,7 +248,7 @@ function le(e) {
 		id: S,
 		props: { onClick: () => s?.focus() },
 		children: l
-	}), /* @__PURE__ */ A(n, {
+	}), /* @__PURE__ */ k(n, {
 		ref: i,
 		component: "dateField",
 		display: "inline-flex",
@@ -262,7 +262,7 @@ function le(e) {
 			invalid: _
 		}],
 		children: [
-			/* @__PURE__ */ k(n, {
+			/* @__PURE__ */ O(n, {
 				tag: "button",
 				ref: a,
 				component: "datePicker.value",
@@ -288,17 +288,17 @@ function le(e) {
 					"aria-invalid": _ || void 0,
 					...o
 				},
-				children: /* @__PURE__ */ k("span", {
+				children: /* @__PURE__ */ O("span", {
 					id: C,
 					children: f || p
 				})
 			}),
-			/* @__PURE__ */ A(n, {
+			/* @__PURE__ */ k(n, {
 				display: "inline-flex",
 				ai: "center",
 				gap: 1,
 				ms: 2,
-				children: [h, /* @__PURE__ */ k(n, {
+				children: [h, /* @__PURE__ */ O(n, {
 					component: "datePicker.icon",
 					display: "inline-flex",
 					ai: "center",
@@ -310,7 +310,7 @@ function le(e) {
 					children: m
 				})]
 			}),
-			b.map((e, t) => v ? /* @__PURE__ */ k(n, {
+			b.map((e, t) => v ? /* @__PURE__ */ O(n, {
 				tag: "input",
 				ref: t === 0 ? x : void 0,
 				component: "dateField.validation",
@@ -325,7 +325,7 @@ function le(e) {
 					onChange: () => {},
 					onFocus: () => s?.focus()
 				}
-			}, t) : e.name === void 0 ? null : /* @__PURE__ */ k("input", {
+			}, t) : e.name === void 0 ? null : /* @__PURE__ */ O("input", {
 				ref: t === 0 ? x : void 0,
 				type: "hidden",
 				name: e.name,
@@ -335,62 +335,62 @@ function le(e) {
 		]
 	})] });
 }
-function j(e, t) {
-	let { type: r = "date", value: i, defaultValue: a = null, onValueChange: o, zone: h, locale: g, hourCycle: y, granularity: b, disambiguation: S, min: C, max: T, isDateUnavailable: E, disabled: D = !1, readOnly: O = !1, required: te, invalid: j, name: M, label: N, labelledBy: P, describedBy: ue, open: de, defaultOpen: fe, onOpenChange: pe, closeOnSelect: F = !0, firstDayOfWeek: I, weekNumbers: me, side: L = "bottom", align: R = "start", matchWidth: he = r === "time", emptyTimesLabel: z = "No times available", clearable: ge = !1, pickOnly: B = !1, triggerLabel: _e, clearLabel: ve = "Clear", tabIndex: V, step: H = 30, defaultTime: U = "00:00", presets: W, showZone: G, ...ye } = e, K = ee({
+function M(e, t) {
+	let { type: r = "date", value: i, defaultValue: a = null, onValueChange: o, zone: h, locale: g, hourCycle: y, granularity: b, disambiguation: S, min: C, max: w, isDateUnavailable: T, disabled: E = !1, readOnly: D = !1, required: ne, invalid: re, name: M, label: N, labelledBy: P, describedBy: F, open: ue, defaultOpen: de, onOpenChange: fe, closeOnSelect: I = !0, firstDayOfWeek: L, weekNumbers: pe, side: R = "bottom", align: me = "start", matchWidth: he = r === "time", emptyTimesLabel: ge = "No times available", clearable: _e = !1, pickOnly: z = !1, triggerLabel: ve, clearLabel: ye = "Clear", tabIndex: B, step: V = 30, defaultTime: H = "00:00", presets: U, showZone: W, ...be } = e, G = ee({
 		locale: g,
 		zone: h === "none" ? void 0 : h
-	}), { locale: q } = K, J = r === "datetime" && h !== "none" ? K.zone : null, Y = J ?? K.zone, [X, Z] = _({
+	}), { locale: K } = G, q = r === "datetime" && h !== "none" ? G.zone : null, J = q ?? G.zone, [Y, X] = _({
 		value: i,
 		defaultValue: a,
 		onChange: (e, t) => o?.(e, {
 			...t,
-			...m(e, Y)
+			...m(e, J)
 		}),
 		interaction: {
 			component: "datePicker",
 			type: "valueChange",
 			content: ["value"]
 		}
-	}), Q = _e ?? (r === "time" ? "Choose time" : "Choose date"), be = typeof N == "string" ? N : Q, { attachTrigger: xe, triggerAttributes: Se, triggerElement: Ce, closeOnChoice: we, id: Te, attachField: Ee, panel: De } = oe({
+	}), Z = ve ?? (r === "time" ? "Choose time" : "Choose date"), xe = typeof N == "string" ? N : Z, { attachTrigger: Q, triggerAttributes: Se, triggerElement: Ce, closeOnChoice: we, id: Te, attachField: Ee, panel: De } = oe({
 		ref: t,
-		open: de,
-		defaultOpen: fe,
-		onOpenChange: pe,
-		side: L,
-		align: R,
+		open: ue,
+		defaultOpen: de,
+		onOpenChange: fe,
+		side: R,
+		align: me,
 		matchWidth: he,
-		label: be
-	}), $ = X && r !== "time" ? d(X, { zone: Y }) : null, Oe = X && r !== "date" ? l(X, { zone: Y }) : null, ke = r === "datetime" ? $ ?? u(Y) : null, Ae = (e) => e && (ke === null || d(e, { zone: Y }) === ke) ? l(e, { zone: Y }) : null, je = X ? c(X, {
-		locale: q,
-		zone: Y,
+		label: xe
+	}), $ = Y && r !== "time" ? d(Y, { zone: J }) : null, Oe = Y && r !== "date" ? l(Y, { zone: J }) : null, ke = r === "datetime" ? $ ?? u(J) : null, Ae = (e) => e && (ke === null || d(e, { zone: J }) === ke) ? l(e, { zone: J }) : null, je = Y ? c(Y, {
+		locale: K,
+		zone: J,
 		hourCycle: y === void 0 ? void 0 : y === 12 ? "h12" : "h23",
 		...r === "date" ? { dateStyle: "medium" } : r === "time" ? { timeStyle: "short" } : {
 			dateStyle: "medium",
 			timeStyle: "short"
 		}
-	}) : "", Me = B && X && J && (G ?? J !== K.readerZone) ? s(J, {
-		locale: q,
+	}) : "", Me = z && Y && q && (W ?? q !== G.readerZone) ? s(q, {
+		locale: K,
 		style: "short",
-		at: X
-	}) : null, Ne = we, Pe = (e, t) => p(e, t, J ? {
-		zone: J,
+		at: Y
+	}) : null, Ne = we, Pe = (e, t) => p(e, t, q ? {
+		zone: q,
 		disambiguation: S
 	} : {}), Fe = (e, t) => {
-		e && (r === "date" ? (Z(e, {
+		e && (r === "date" ? (X(e, {
 			reason: "select",
 			event: t
-		}), F && Ne(t)) : Z(Pe(e, Oe ?? U), {
+		}), I && Ne(t)) : X(Pe(e, Oe ?? H), {
 			reason: "select",
 			event: t
 		}));
 	}, Ie = (e, t) => {
-		Z(r === "time" ? e : Pe($ ?? u(Y), e), {
+		X(r === "time" ? e : Pe($ ?? u(J), e), {
 			reason: "select",
 			event: t
-		}), F && Ne(t);
-	}, Le = /* @__PURE__ */ k(n, {
+		}), I && Ne(t);
+	}, Le = /* @__PURE__ */ O(n, {
 		tag: "button",
-		ref: xe,
+		ref: Q,
 		component: "datePicker.trigger",
 		display: "inline-flex",
 		ai: "center",
@@ -400,15 +400,15 @@ function j(e, t) {
 		ms: 2,
 		me: -1.5,
 		borderRadius: 1.5,
-		disabled: D || O,
+		disabled: E || D,
 		props: {
 			type: "button",
-			"aria-label": je ? `${Q}, ${je}` : Q,
-			tabIndex: V,
+			"aria-label": je ? `${Z}, ${je}` : Z,
+			tabIndex: B,
 			...Se
 		},
-		children: k(r === "time" ? ie : re, {})
-	}), Re = ge && X && !D && !O && /* @__PURE__ */ k(n, {
+		children: O(r === "time" ? j : A, {})
+	}), Re = _e && Y && !E && !D && /* @__PURE__ */ O(n, {
 		tag: "button",
 		component: "datePicker.clear",
 		display: "inline-flex",
@@ -422,46 +422,46 @@ function j(e, t) {
 		zIndex: 1,
 		props: {
 			type: "button",
-			"aria-label": ve,
-			tabIndex: V,
-			onClick: (e) => Z(null, {
+			"aria-label": ye,
+			tabIndex: B,
+			onClick: (e) => X(null, {
 				reason: "clear",
 				event: e
 			})
 		},
-		children: /* @__PURE__ */ k(ae, {})
-	}), ze = X !== null && (C != null && f(X, C) < 0 || T != null && f(X, T) > 0), Be = B ? /* @__PURE__ */ k(le, {
-		frame: ye,
+		children: /* @__PURE__ */ O(ae, {})
+	}), ze = Y !== null && (C != null && f(Y, C) < 0 || w != null && f(Y, w) > 0), Be = z ? /* @__PURE__ */ O(le, {
+		frame: be,
 		attachField: Ee,
-		attachTrigger: O ? void 0 : xe,
-		triggerAttributes: O ? void 0 : Se,
+		attachTrigger: D ? void 0 : Q,
+		triggerAttributes: D ? void 0 : Se,
 		triggerElement: Ce,
 		id: Te,
 		label: N,
 		labelledBy: P,
-		describedBy: ue,
+		describedBy: F,
 		text: Me ? `${je} ${Me}` : je,
-		placeholder: Q,
-		icon: k(r === "time" ? ie : re, {}),
+		placeholder: Z,
+		icon: O(r === "time" ? j : A, {}),
 		clear: Re,
-		disabled: D,
-		invalid: j ?? (ze || $ !== null && !!E?.($)),
-		required: te,
-		tabIndex: V,
+		disabled: E,
+		invalid: re ?? (ze || $ !== null && !!T?.($)),
+		required: ne,
+		tabIndex: B,
 		inputs: [{
 			name: M,
-			value: X ?? ""
+			value: Y ?? ""
 		}],
-		onReset: (e) => Z(a, {
+		onReset: (e) => X(a, {
 			reason: "reset",
 			event: e
 		})
-	}) : /* @__PURE__ */ k(w, {
+	}) : /* @__PURE__ */ O(te, {
 		ref: Ee,
-		...ye,
+		...be,
 		type: r,
-		value: X,
-		onValueChange: (e, t) => Z(e, {
+		value: Y,
+		onValueChange: (e, t) => X(e, {
 			reason: t.reason,
 			event: t.event
 		}),
@@ -471,63 +471,63 @@ function j(e, t) {
 		granularity: b,
 		disambiguation: S,
 		min: C,
-		max: T,
-		isDateUnavailable: E,
-		disabled: D,
-		readOnly: O,
-		required: te,
-		invalid: j,
+		max: w,
+		isDateUnavailable: T,
+		disabled: E,
+		readOnly: D,
+		required: ne,
+		invalid: re,
 		name: M,
 		label: N,
 		labelledBy: P,
-		describedBy: ue,
-		showZone: G,
-		tabIndex: V,
-		end: /* @__PURE__ */ A(ne, { children: [Re, Le] })
+		describedBy: F,
+		showZone: W,
+		tabIndex: B,
+		end: /* @__PURE__ */ k(ie, { children: [Re, Le] })
 	});
-	return /* @__PURE__ */ A(v, { children: [Be, De(/* @__PURE__ */ A(n, {
+	return /* @__PURE__ */ k(v, { children: [Be, De(/* @__PURE__ */ k(n, {
 		display: "flex",
 		gap: 3,
 		ai: "stretch",
 		children: [
-			W && W.length > 0 && /* @__PURE__ */ k(ce, {
-				presets: W,
-				isSelected: (e) => X !== null && f(e, X, { zone: Y }) === 0,
+			U && U.length > 0 && /* @__PURE__ */ O(ce, {
+				presets: U,
+				isSelected: (e) => Y !== null && f(e, Y, { zone: J }) === 0,
 				onSelect: (e, t) => {
-					Z(e, {
+					X(e, {
 						reason: "preset",
 						event: t
-					}), F && Ne(t);
+					}), I && Ne(t);
 				}
 			}),
-			r !== "time" && /* @__PURE__ */ k(x, {
+			r !== "time" && /* @__PURE__ */ O(x, {
 				value: $,
 				onValueChange: (e, t) => Fe(e, t.event),
-				min: C ? d(C, { zone: Y }) : void 0,
-				max: T ? d(T, { zone: Y }) : void 0,
-				isDateUnavailable: E,
+				min: C ? d(C, { zone: J }) : void 0,
+				max: w ? d(w, { zone: J }) : void 0,
+				isDateUnavailable: T,
 				locale: g,
 				zone: h === "none" ? void 0 : h,
-				firstDayOfWeek: I,
-				weekNumbers: me
+				firstDayOfWeek: L,
+				weekNumbers: pe
 			}),
-			r !== "date" && /* @__PURE__ */ k(se, {
+			r !== "date" && /* @__PURE__ */ O(se, {
 				value: Oe,
-				step: H,
-				locale: q,
+				step: V,
+				locale: K,
 				hourCycle: y,
-				label: r === "time" ? be : "Time",
+				label: r === "time" ? xe : "Time",
 				min: Ae(C),
-				max: Ae(T),
-				emptyLabel: z,
+				max: Ae(w),
+				emptyLabel: ge,
 				separated: r === "datetime",
 				onSelect: Ie
 			})
 		]
 	}))] });
 }
-function M(e, t) {
-	let { value: r, defaultValue: i = null, onValueChange: a, locale: s, min: c, max: l, isDateUnavailable: u, disabled: d = !1, readOnly: p = !1, required: m, invalid: h, startName: g, endName: y, label: b, labelledBy: S, describedBy: C, startLabel: T = "Start date", endLabel: E = "End date", open: D, defaultOpen: O, onOpenChange: ie, closeOnSelect: se = !0, firstDayOfWeek: j, weekNumbers: M, months: N = 2, side: P = "bottom", align: ue = "start", matchWidth: de = !1, emptyTimesLabel: fe, clearable: pe = !1, pickOnly: F = !1, triggerLabel: I = "Choose dates", clearLabel: me = "Clear", tabIndex: L, presets: R, props: he, ...z } = e, { locale: ge } = ee({ locale: s }), [B, _e] = _({
+function N(e, t) {
+	let { value: r, defaultValue: i = null, onValueChange: a, locale: s, min: c, max: l, isDateUnavailable: u, disabled: d = !1, readOnly: p = !1, required: m, invalid: h, startName: g, endName: y, label: b, labelledBy: S, describedBy: C, startLabel: w = "Start date", endLabel: T = "End date", open: E, defaultOpen: D, onOpenChange: ne, closeOnSelect: j = !0, firstDayOfWeek: se, weekNumbers: M, months: N = 2, side: P = "bottom", align: F = "start", matchWidth: ue = !1, emptyTimesLabel: de, clearable: fe = !1, pickOnly: I = !1, triggerLabel: L = "Choose dates", clearLabel: pe = "Clear", tabIndex: R, presets: me, props: he, ...ge } = e, { locale: _e } = ee({ locale: s }), [z, ve] = _({
 		value: r,
 		defaultValue: i,
 		onChange: a,
@@ -536,39 +536,39 @@ function M(e, t) {
 			type: "valueChange",
 			content: ["value"]
 		}
-	}), [ve, V] = te({
-		start: B?.start ?? null,
-		end: B?.end ?? null,
-		source: B
-	}), { start: H, end: U } = ve;
-	ve.source !== B && (H = B?.start ?? null, U = B?.end ?? null, V({
-		start: H,
-		end: U,
-		source: B
+	}), [ye, B] = re({
+		start: z?.start ?? null,
+		end: z?.end ?? null,
+		source: z
+	}), { start: V, end: H } = ye;
+	ye.source !== z && (V = z?.start ?? null, H = z?.end ?? null, B({
+		start: V,
+		end: H,
+		source: z
 	}));
-	let { attachTrigger: W, triggerAttributes: G, triggerElement: ye, closeOnChoice: K, id: q, attachField: J, panel: Y } = oe({
+	let { attachTrigger: U, triggerAttributes: W, triggerElement: be, closeOnChoice: G, id: K, attachField: q, panel: J } = oe({
 		ref: t,
-		open: D,
-		defaultOpen: O,
-		onOpenChange: ie,
+		open: E,
+		defaultOpen: D,
+		onOpenChange: ne,
 		side: P,
-		align: ue,
-		matchWidth: de,
-		label: typeof b == "string" ? b : I
-	}), X = B ? o(B.start, B.end, { locale: ge }) : "", Z = H !== null && U !== null && f(H, U) > 0, Q = (e, t, n, r) => {
+		align: F,
+		matchWidth: ue,
+		label: typeof b == "string" ? b : L
+	}), Y = z ? o(z.start, z.end, { locale: _e }) : "", X = V !== null && H !== null && f(V, H) > 0, Z = (e, t, n, r) => {
 		let i = e && t && f(e, t) <= 0 ? {
 			start: e,
 			end: t
 		} : null;
-		V({
+		B({
 			start: e,
 			end: t,
 			source: i
-		}), _e(i, {
+		}), ve(i, {
 			reason: n,
 			event: r
 		});
-	}, be = K, xe = {
+	}, xe = G, Q = {
 		locale: s,
 		min: c,
 		max: l,
@@ -579,8 +579,8 @@ function M(e, t) {
 		component: "datePicker.part",
 		px: 0,
 		py: 0,
-		tabIndex: L
-	}, Se = pe && B && !d && !p && /* @__PURE__ */ k(n, {
+		tabIndex: R
+	}, Se = fe && z && !d && !p && /* @__PURE__ */ O(n, {
 		tag: "button",
 		component: "datePicker.clear",
 		display: "inline-flex",
@@ -593,97 +593,97 @@ function M(e, t) {
 		zIndex: 1,
 		props: {
 			type: "button",
-			"aria-label": me,
-			tabIndex: L,
-			onClick: (e) => Q(null, null, "clear", e)
+			"aria-label": pe,
+			tabIndex: R,
+			onClick: (e) => Z(null, null, "clear", e)
 		},
-		children: /* @__PURE__ */ k(ae, {})
-	}), Ce = B !== null && (c != null && f(B.start, c) < 0 || l != null && f(B.end, l) > 0), we = F ? /* @__PURE__ */ k(le, {
+		children: /* @__PURE__ */ O(ae, {})
+	}), Ce = z !== null && (c != null && f(z.start, c) < 0 || l != null && f(z.end, l) > 0), we = I ? /* @__PURE__ */ O(le, {
 		frame: {
-			...z,
+			...ge,
 			props: he
 		},
-		attachField: J,
-		attachTrigger: p ? void 0 : W,
-		triggerAttributes: p ? void 0 : G,
-		triggerElement: ye,
-		id: q,
+		attachField: q,
+		attachTrigger: p ? void 0 : U,
+		triggerAttributes: p ? void 0 : W,
+		triggerElement: be,
+		id: K,
 		label: b,
 		labelledBy: S,
 		describedBy: C,
-		text: X,
-		placeholder: I,
-		icon: /* @__PURE__ */ k(re, {}),
+		text: Y,
+		placeholder: L,
+		icon: /* @__PURE__ */ O(A, {}),
 		clear: Se,
 		disabled: d,
 		invalid: h ?? Ce,
 		required: m,
-		tabIndex: L,
+		tabIndex: R,
 		inputs: [{
 			name: g,
-			value: B?.start ?? ""
+			value: z?.start ?? ""
 		}, {
 			name: y,
-			value: B?.end ?? ""
+			value: z?.end ?? ""
 		}],
-		onReset: (e) => Q(i?.start ?? null, i?.end ?? null, "reset", e)
-	}) : /* @__PURE__ */ A(ne, { children: [b !== void 0 && /* @__PURE__ */ k(n, {
+		onReset: (e) => Z(i?.start ?? null, i?.end ?? null, "reset", e)
+	}) : /* @__PURE__ */ k(ie, { children: [b !== void 0 && /* @__PURE__ */ O(n, {
 		component: "dateField.label",
 		display: "block",
 		mb: 1.5,
 		fontSize: 14,
-		id: `${q}-label`,
+		id: `${K}-label`,
 		children: b
-	}), /* @__PURE__ */ A(n, {
-		ref: J,
+	}), /* @__PURE__ */ k(n, {
+		ref: q,
 		component: "dateField",
 		display: "inline-flex",
 		ai: "center",
 		gap: 2,
 		px: 3,
 		py: 2,
-		...z,
-		variant: [z.variant, {
+		...ge,
+		variant: [ge.variant, {
 			disabled: d,
-			invalid: h ?? Z
+			invalid: h ?? X
 		}],
 		props: {
 			role: "group",
-			"aria-labelledby": [b === void 0 ? void 0 : `${q}-label`, S].filter(Boolean).join(" ") || void 0,
-			"aria-invalid": (h ?? Z) || void 0,
+			"aria-labelledby": [b === void 0 ? void 0 : `${K}-label`, S].filter(Boolean).join(" ") || void 0,
+			"aria-invalid": (h ?? X) || void 0,
 			"aria-describedby": C,
 			...he
 		},
 		children: [
-			/* @__PURE__ */ k(w, {
-				...xe,
-				value: H,
-				onValueChange: (e, t) => Q(e, U, t.reason, t.event),
+			/* @__PURE__ */ O(te, {
+				...Q,
+				value: V,
+				onValueChange: (e, t) => Z(e, H, t.reason, t.event),
 				name: g,
-				props: { "aria-label": T },
-				invalid: h ?? Z
+				props: { "aria-label": w },
+				invalid: h ?? X
 			}),
-			/* @__PURE__ */ k(n, {
+			/* @__PURE__ */ O(n, {
 				component: "dateField.literal",
 				props: { "aria-hidden": !0 },
 				children: "–"
 			}),
-			/* @__PURE__ */ k(w, {
-				...xe,
-				value: U,
-				onValueChange: (e, t) => Q(H, e, t.reason, t.event),
+			/* @__PURE__ */ O(te, {
+				...Q,
+				value: H,
+				onValueChange: (e, t) => Z(V, e, t.reason, t.event),
 				name: y,
-				props: { "aria-label": E },
-				invalid: h ?? Z
+				props: { "aria-label": T },
+				invalid: h ?? X
 			}),
-			/* @__PURE__ */ A(n, {
+			/* @__PURE__ */ k(n, {
 				display: "inline-flex",
 				ai: "center",
 				gap: 2,
 				ms: "auto",
-				children: [Se, /* @__PURE__ */ k(n, {
+				children: [Se, /* @__PURE__ */ O(n, {
 					tag: "button",
-					ref: W,
+					ref: U,
 					component: "datePicker.trigger",
 					display: "inline-flex",
 					ai: "center",
@@ -695,42 +695,42 @@ function M(e, t) {
 					disabled: d || p,
 					props: {
 						type: "button",
-						"aria-label": X ? `${I}, ${X}` : I,
-						tabIndex: L,
-						...G
+						"aria-label": Y ? `${L}, ${Y}` : L,
+						tabIndex: R,
+						...W
 					},
-					children: /* @__PURE__ */ k(re, {})
+					children: /* @__PURE__ */ O(A, {})
 				})]
 			})
 		]
 	})] });
-	return /* @__PURE__ */ A(v, { children: [we, Y(/* @__PURE__ */ A(n, {
+	return /* @__PURE__ */ k(v, { children: [we, J(/* @__PURE__ */ k(n, {
 		display: "flex",
 		gap: 3,
 		ai: "stretch",
-		children: [R && R.length > 0 && /* @__PURE__ */ k(ce, {
-			presets: R,
-			isSelected: (e) => B !== null && e.start === B.start && e.end === B.end,
+		children: [me && me.length > 0 && /* @__PURE__ */ O(ce, {
+			presets: me,
+			isSelected: (e) => z !== null && e.start === z.start && e.end === z.end,
 			onSelect: (e, t) => {
-				Q(e.start, e.end, "preset", t), se && be(t);
+				Z(e.start, e.end, "preset", t), j && xe(t);
 			}
-		}), /* @__PURE__ */ k(x, {
+		}), /* @__PURE__ */ O(x, {
 			mode: "range",
 			months: N,
-			value: B,
-			defaultFocusedDate: H ?? void 0,
+			value: z,
+			defaultFocusedDate: V ?? void 0,
 			onValueChange: (e, t) => {
-				Q(e?.start ?? null, e?.end ?? null, "select", t.event), se && e && t.event && be(t.event);
+				Z(e?.start ?? null, e?.end ?? null, "select", t.event), j && e && t.event && xe(t.event);
 			},
 			min: c,
 			max: l,
 			isDateUnavailable: u,
 			locale: s,
-			firstDayOfWeek: j,
+			firstDayOfWeek: se,
 			weekNumbers: M
 		})]
 	}))] });
 }
-var N = e(j, "DatePicker"), P = e(M, "DateRangePicker");
+var P = e(M, "DatePicker"), F = e(N, "DateRangePicker");
 //#endregion
-export { P as DateRangePicker, N as default };
+export { F as DateRangePicker, P as default };