@box-kite/react 2.2.7 → 2.2.9

package/components/datePicker.mjs

@@ -1,27 +1,28 @@
 "use client";
 import { f as e } from "../react-shared.mjs";
 import t from "../box.mjs";
-import { a as n, i as r, t as i } from "../behavior.mjs";
-import { t as a } from "../placement.mjs";
-import { n as o, t as s } from "../dates.mjs";
-import { A as c, N as l, O as u, i as d, r as f, x as p } from "../date-math.mjs";
-import { l as m, s as h } from "../date-input.mjs";
-import { Path as g, Svg as _ } from "./svg.mjs";
-import { n as v } from "../date-environment.mjs";
-import ee from "./calendar.mjs";
+import { a as n, t as r } from "../behavior.mjs";
+import { t as i } from "../placement.mjs";
+import { n as a, t as o } from "../dates.mjs";
+import { A as s, N as c, O as l, i as u, r as d, x as f } from "../date-math.mjs";
+import { l as p, s as m } from "../date-input.mjs";
+import { a as h, t as g } from "../reporting.mjs";
+import { Path as _, Svg as v } from "./svg.mjs";
+import { n as ee } from "../date-environment.mjs";
+import te from "./calendar.mjs";
 import { t as y } from "../layer.mjs";
 import b from "./overlay.mjs";
 import x from "./dateField.mjs";
 import { useCallback as S, useEffect as C, useMemo as w, useState as T } from "react";
-import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { Fragment as ne, jsx as E, jsxs as D } from "react/jsx-runtime";
 //#region src/components/datePicker.tsx
-function te() {
-	return /* @__PURE__ */ D(_, {
+function re() {
+	return /* @__PURE__ */ E(v, {
 		viewBox: "0 0 16 16",
 		width: "1rem",
 		height: "1rem",
 		props: { fill: "none" },
-		children: /* @__PURE__ */ D(g, {
+		children: /* @__PURE__ */ E(_, {
 			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,
@@ -29,13 +30,13 @@ function te() {
 		})
 	});
 }
-function ne() {
-	return /* @__PURE__ */ D(_, {
+function ie() {
+	return /* @__PURE__ */ E(v, {
 		viewBox: "0 0 16 16",
 		width: "1rem",
 		height: "1rem",
 		props: { fill: "none" },
-		children: /* @__PURE__ */ D(g, {
+		children: /* @__PURE__ */ E(_, {
 			d: "M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12ZM8 5v3l2 1.5",
 			stroke: "currentColor",
 			strokeWidth: 1.5,
@@ -44,13 +45,13 @@ function ne() {
 		})
 	});
 }
-function re() {
-	return /* @__PURE__ */ D(_, {
+function ae() {
+	return /* @__PURE__ */ E(v, {
 		viewBox: "0 0 16 16",
 		width: "0.875rem",
 		height: "0.875rem",
 		props: { fill: "none" },
-		children: /* @__PURE__ */ D(g, {
+		children: /* @__PURE__ */ E(_, {
 			d: "m4.5 4.5 7 7m0-7-7 7",
 			stroke: "currentColor",
 			strokeWidth: 1.5,
@@ -58,12 +59,12 @@ function re() {
 		})
 	});
 }
-function k(e, t) {
+function O(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
-function ie(e) {
-	let [r, i] = T(null), o = e.ref, s = S((e) => {
-		i(e), k(o, e);
+function oe(e) {
+	let [r, a] = T(null), o = e.ref, s = S((e) => {
+		a(e), O(o, e);
 	}, [o]), c = (e) => {
 		if (!e || e.contains(document.activeElement) && document.activeElement !== e) return;
 		let t = [
@@ -78,11 +79,15 @@ function ie(e) {
 		open: e.open,
 		defaultOpen: e.defaultOpen,
 		onOpenChange: e.onOpenChange,
+		interaction: {
+			component: "datePicker",
+			type: "openChange"
+		},
 		onOpened: l,
 		onClosing: (e, t) => {
 			e && t?.focus();
 		}
-	}), v = a({
+	}), v = i({
 		side: e.side,
 		align: e.align,
 		offset: 1,
@@ -108,7 +113,7 @@ function ie(e) {
 				"aria-label": e.label,
 				tabIndex: -1
 			};
-			return u ? /* @__PURE__ */ D(t, {
+			return u ? /* @__PURE__ */ E(t, {
 				ref: p,
 				component: "popover",
 				variant: { topLayer: !0 },
@@ -120,7 +125,7 @@ function ie(e) {
 					...i
 				},
 				children: d ? n : null
-			}) : d && /* @__PURE__ */ D(b, {
+			}) : d && /* @__PURE__ */ E(b, {
 				contentRef: p,
 				anchor: r,
 				side: e.side,
@@ -135,14 +140,14 @@ function ie(e) {
 		}
 	};
 }
-function ae(e) {
-	let { value: n, step: r, locale: a, hourCycle: o, onSelect: c, label: l } = e, u = w(() => m(r), [r]), d = h(n, r), f = Math.max(0, d ? u.indexOf(d) : u.indexOf("09:00:00")), p = i({
+function se(e) {
+	let { value: n, step: i, locale: a, hourCycle: s, onSelect: c, label: l } = e, u = w(() => p(i), [i]), d = m(n, i), f = Math.max(0, d ? u.indexOf(d) : u.indexOf("09:00:00")), h = r({
 		count: u.length,
 		defaultActiveIndex: f,
 		loop: !1,
 		onSelect: (e, t) => c(u[e], t)
 	});
-	return /* @__PURE__ */ D(t, {
+	return /* @__PURE__ */ E(t, {
 		component: "datePicker.times",
 		position: "relative",
 		display: "flex",
@@ -155,9 +160,9 @@ function ae(e) {
 		props: {
 			role: "listbox",
 			"aria-label": l,
-			onKeyDown: p.onKeyDown
+			onKeyDown: h.onKeyDown
 		},
-		children: u.map((e, n) => /* @__PURE__ */ D(t, {
+		children: u.map((e, n) => /* @__PURE__ */ E(t, {
 			component: "datePicker.time",
 			variant: { selected: e === d },
 			px: 3,
@@ -170,20 +175,20 @@ function ae(e) {
 			props: {
 				role: "option",
 				"aria-selected": e === d,
-				...p.itemProps(n),
+				...h.itemProps(n),
 				onClick: (t) => c(e, t)
 			},
-			children: s(e, {
+			children: o(e, {
 				locale: a,
 				hour: "numeric",
 				minute: "2-digit",
-				hourCycle: o === void 0 ? void 0 : o === 12 ? "h12" : "h23"
+				hourCycle: s === void 0 ? void 0 : s === 12 ? "h12" : "h23"
 			})
 		}, e))
 	});
 }
-function oe(e) {
-	return /* @__PURE__ */ D(t, {
+function ce(e) {
+	return /* @__PURE__ */ E(t, {
 		component: "datePicker.presets",
 		display: "flex",
 		d: "column",
@@ -191,7 +196,7 @@ function oe(e) {
 		pe: 2,
 		be: 1,
 		props: { role: "group" },
-		children: e.presets.map((n) => /* @__PURE__ */ D(t, {
+		children: e.presets.map((n) => /* @__PURE__ */ E(t, {
 			tag: "button",
 			component: "datePicker.preset",
 			variant: { selected: e.isSelected(n.value) },
@@ -209,51 +214,56 @@ function oe(e) {
 		}, n.label))
 	});
 }
-function A(e, n) {
-	let { type: i = "date", value: a, defaultValue: o = null, onValueChange: m, zone: h, locale: g, hourCycle: _, granularity: y, disambiguation: b, min: S, max: C, isDateUnavailable: w, disabled: T = !1, readOnly: k = !1, required: A, invalid: j, name: M, label: N, labelledBy: se, describedBy: ce, open: le, defaultOpen: ue, onOpenChange: P, closeOnSelect: F = !0, firstDayOfWeek: I, weekNumbers: L, side: de = "bottom", align: R = "start", clearable: fe = !1, triggerLabel: z, clearLabel: pe = "Clear", tabIndex: B, step: V = 30, defaultTime: H = "00:00", presets: U, showZone: me, ...he } = e, W = v({
-		locale: g,
-		zone: h === "none" ? void 0 : h
-	}), { locale: G } = W, K = i === "datetime" && h !== "none" ? W.zone : null, q = K ?? W.zone, [J, Y] = r({
-		value: a,
-		defaultValue: o,
-		onChange: (e, t) => m?.(e, {
+function k(e, n) {
+	let { type: r = "date", value: i, defaultValue: a = null, onValueChange: p, zone: m, locale: _, hourCycle: v, granularity: y, disambiguation: b, min: S, max: C, isDateUnavailable: w, disabled: T = !1, readOnly: O = !1, required: k, invalid: A, name: j, label: M, labelledBy: le, describedBy: ue, open: N, defaultOpen: P, onOpenChange: de, closeOnSelect: F = !0, firstDayOfWeek: I, weekNumbers: fe, side: L = "bottom", align: pe = "start", clearable: R = !1, triggerLabel: z, clearLabel: B = "Clear", tabIndex: V, step: H = 30, defaultTime: U = "00:00", presets: W, showZone: me, ...he } = e, G = ee({
+		locale: _,
+		zone: m === "none" ? void 0 : m
+	}), { locale: K } = G, q = r === "datetime" && m !== "none" ? G.zone : null, J = q ?? G.zone, [Y, X] = h({
+		value: i,
+		defaultValue: a,
+		onChange: (e, t) => p?.(e, {
 			...t,
-			...p(e, q)
-		})
-	}), X = z ?? (i === "time" ? "Choose time" : "Choose date"), Z = typeof N == "string" ? N : X, { attachTrigger: Q, triggerAttributes: ge, closeOnChoice: _e, attachField: ve, panel: ye } = ie({
+			...f(e, J)
+		}),
+		interaction: {
+			component: "datePicker",
+			type: "valueChange",
+			content: ["value"]
+		}
+	}), Z = z ?? (r === "time" ? "Choose time" : "Choose date"), Q = typeof M == "string" ? M : Z, { attachTrigger: ge, triggerAttributes: _e, closeOnChoice: ve, attachField: ye, panel: be } = oe({
 		ref: n,
-		open: le,
-		defaultOpen: ue,
-		onOpenChange: P,
-		side: de,
-		align: R,
-		label: Z
-	}), be = J && i !== "time" ? u(J, { zone: q }) : null, xe = J && i !== "date" ? c(J, { zone: q }) : null, Se = J ? s(J, {
-		locale: G,
-		zone: q,
-		...i === "date" ? { dateStyle: "medium" } : i === "time" ? { timeStyle: "short" } : {
+		open: N,
+		defaultOpen: P,
+		onOpenChange: de,
+		side: L,
+		align: pe,
+		label: Q
+	}), xe = Y && r !== "time" ? l(Y, { zone: J }) : null, Se = Y && r !== "date" ? s(Y, { zone: J }) : null, Ce = Y ? o(Y, {
+		locale: K,
+		zone: J,
+		...r === "date" ? { dateStyle: "medium" } : r === "time" ? { timeStyle: "short" } : {
 			dateStyle: "medium",
 			timeStyle: "short"
 		}
-	}) : "", $ = _e, Ce = (e, t) => f(e, t, K ? {
-		zone: K,
+	}) : "", $ = ve, we = (e, t) => d(e, t, q ? {
+		zone: q,
 		disambiguation: b
-	} : {}), we = (e, t) => {
-		e && (i === "date" ? (Y(e, {
+	} : {}), Te = (e, t) => {
+		e && (r === "date" ? (X(e, {
 			reason: "select",
 			event: t
-		}), F && $(t)) : Y(Ce(e, xe ?? H), {
+		}), F && $(t)) : X(we(e, Se ?? U), {
 			reason: "select",
 			event: t
 		}));
-	}, Te = (e, t) => {
-		Y(i === "time" ? e : Ce(be ?? l(q), e), {
+	}, Ee = (e, t) => {
+		X(r === "time" ? e : we(xe ?? c(J), e), {
 			reason: "select",
 			event: t
 		}), F && $(t);
-	}, Ee = /* @__PURE__ */ D(t, {
+	}, De = /* @__PURE__ */ E(t, {
 		tag: "button",
-		ref: Q,
+		ref: ge,
 		component: "datePicker.trigger",
 		display: "inline-flex",
 		ai: "center",
@@ -263,15 +273,15 @@ function A(e, n) {
 		ms: 2,
 		me: -1.5,
 		borderRadius: 1.5,
-		disabled: T || k,
+		disabled: T || O,
 		props: {
 			type: "button",
-			"aria-label": Se ? `${X}, ${Se}` : X,
-			tabIndex: B,
-			...ge
+			"aria-label": Ce ? `${Z}, ${Ce}` : Z,
+			tabIndex: V,
+			..._e
 		},
-		children: D(i === "time" ? ne : te, {})
-	}), De = fe && J && !T && !k && /* @__PURE__ */ D(t, {
+		children: E(r === "time" ? ie : re, {})
+	}), Oe = R && Y && !T && !O && /* @__PURE__ */ E(t, {
 		tag: "button",
 		component: "datePicker.clear",
 		display: "inline-flex",
@@ -283,105 +293,110 @@ function A(e, n) {
 		borderRadius: 999,
 		props: {
 			type: "button",
-			"aria-label": pe,
-			tabIndex: B,
-			onClick: (e) => Y(null, {
+			"aria-label": B,
+			tabIndex: V,
+			onClick: (e) => X(null, {
 				reason: "clear",
 				event: e
 			})
 		},
-		children: /* @__PURE__ */ D(re, {})
+		children: /* @__PURE__ */ E(ae, {})
 	});
-	return /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(x, {
-		ref: ve,
+	return /* @__PURE__ */ D(g, { children: [/* @__PURE__ */ E(x, {
+		ref: ye,
 		...he,
-		type: i,
-		value: J,
-		onValueChange: (e, t) => Y(e, {
+		type: r,
+		value: Y,
+		onValueChange: (e, t) => X(e, {
 			reason: t.reason,
 			event: t.event
 		}),
-		zone: h,
-		locale: g,
-		hourCycle: _,
+		zone: m,
+		locale: _,
+		hourCycle: v,
 		granularity: y,
 		disambiguation: b,
 		min: S,
 		max: C,
 		isDateUnavailable: w,
 		disabled: T,
-		readOnly: k,
-		required: A,
-		invalid: j,
-		name: M,
-		label: N,
-		labelledBy: se,
-		describedBy: ce,
+		readOnly: O,
+		required: k,
+		invalid: A,
+		name: j,
+		label: M,
+		labelledBy: le,
+		describedBy: ue,
 		showZone: me,
-		tabIndex: B,
-		end: /* @__PURE__ */ O(E, { children: [De, Ee] })
-	}), ye(/* @__PURE__ */ O(t, {
+		tabIndex: V,
+		end: /* @__PURE__ */ D(ne, { children: [Oe, De] })
+	}), be(/* @__PURE__ */ D(t, {
 		display: "flex",
 		gap: 3,
 		ai: "stretch",
 		children: [
-			U && U.length > 0 && /* @__PURE__ */ D(oe, {
-				presets: U,
-				isSelected: (e) => J !== null && d(e, J, { zone: q }) === 0,
+			W && W.length > 0 && /* @__PURE__ */ E(ce, {
+				presets: W,
+				isSelected: (e) => Y !== null && u(e, Y, { zone: J }) === 0,
 				onSelect: (e, t) => {
-					Y(e, {
+					X(e, {
 						reason: "preset",
 						event: t
 					}), F && $(t);
 				}
 			}),
-			i !== "time" && /* @__PURE__ */ D(ee, {
-				value: be,
-				onValueChange: (e, t) => we(e, t.event),
-				min: S ? u(S, { zone: q }) : void 0,
-				max: C ? u(C, { zone: q }) : void 0,
+			r !== "time" && /* @__PURE__ */ E(te, {
+				value: xe,
+				onValueChange: (e, t) => Te(e, t.event),
+				min: S ? l(S, { zone: J }) : void 0,
+				max: C ? l(C, { zone: J }) : void 0,
 				isDateUnavailable: w,
-				locale: g,
-				zone: h === "none" ? void 0 : h,
+				locale: _,
+				zone: m === "none" ? void 0 : m,
 				firstDayOfWeek: I,
-				weekNumbers: L
+				weekNumbers: fe
 			}),
-			i !== "date" && /* @__PURE__ */ D(ae, {
-				value: xe,
-				step: V,
-				locale: G,
-				hourCycle: _,
-				label: i === "time" ? Z : "Time",
-				onSelect: Te
+			r !== "date" && /* @__PURE__ */ E(se, {
+				value: Se,
+				step: H,
+				locale: K,
+				hourCycle: v,
+				label: r === "time" ? Q : "Time",
+				onSelect: Ee
 			})
 		]
 	}))] });
 }
-function j(e, n) {
-	let { value: i, defaultValue: a = null, onValueChange: s, locale: c, min: l, max: u, isDateUnavailable: f, disabled: p = !1, readOnly: m = !1, required: h, invalid: g, startName: _, endName: y, label: b, labelledBy: S, describedBy: C, startLabel: w = "Start date", endLabel: ne = "End date", open: k, defaultOpen: ae, onOpenChange: A, closeOnSelect: j = !0, firstDayOfWeek: M, weekNumbers: N, months: se = 2, side: ce = "bottom", align: le = "start", clearable: ue = !1, triggerLabel: P = "Choose dates", clearLabel: F = "Clear", tabIndex: I, presets: L, props: de, ...R } = e, { locale: fe } = v({ locale: c }), [z, pe] = r({
-		value: i,
-		defaultValue: a,
-		onChange: s
+function A(e, n) {
+	let { value: r, defaultValue: i = null, onValueChange: o, locale: s, min: c, max: l, isDateUnavailable: d, disabled: f = !1, readOnly: p = !1, required: m, invalid: _, startName: v, endName: y, label: b, labelledBy: S, describedBy: C, startLabel: w = "Start date", endLabel: ne = "End date", open: ie, defaultOpen: O, onOpenChange: se, closeOnSelect: k = !0, firstDayOfWeek: A, weekNumbers: j, months: M = 2, side: le = "bottom", align: ue = "start", clearable: N = !1, triggerLabel: P = "Choose dates", clearLabel: de = "Clear", tabIndex: F, presets: I, props: fe, ...L } = e, { locale: pe } = ee({ locale: s }), [R, z] = h({
+		value: r,
+		defaultValue: i,
+		onChange: o,
+		interaction: {
+			component: "dateRangePicker",
+			type: "valueChange",
+			content: ["value"]
+		}
 	}), [B, V] = T({
-		start: z?.start ?? null,
-		end: z?.end ?? null,
-		source: z
+		start: R?.start ?? null,
+		end: R?.end ?? null,
+		source: R
 	}), { start: H, end: U } = B;
-	B.source !== z && (H = z?.start ?? null, U = z?.end ?? null, V({
+	B.source !== R && (H = R?.start ?? null, U = R?.end ?? null, V({
 		start: H,
 		end: U,
-		source: z
+		source: R
 	}));
-	let { attachTrigger: me, triggerAttributes: he, closeOnChoice: W, id: G, attachField: K, panel: q } = ie({
+	let { attachTrigger: W, triggerAttributes: me, closeOnChoice: he, id: G, attachField: K, panel: q } = oe({
 		ref: n,
-		open: k,
-		defaultOpen: ae,
-		onOpenChange: A,
-		side: ce,
-		align: le,
+		open: ie,
+		defaultOpen: O,
+		onOpenChange: se,
+		side: le,
+		align: ue,
 		label: typeof b == "string" ? b : P
-	}), J = z ? o(z.start, z.end, { locale: fe }) : "", Y = H !== null && U !== null && d(H, U) > 0, X = (e, t, n, r) => {
-		let i = e && t && d(e, t) <= 0 ? {
+	}), J = R ? a(R.start, R.end, { locale: pe }) : "", Y = H !== null && U !== null && u(H, U) > 0, X = (e, t, n, r) => {
+		let i = e && t && u(e, t) <= 0 ? {
 			start: e,
 			end: t
 		} : null;
@@ -389,25 +404,25 @@ function j(e, n) {
 			start: e,
 			end: t,
 			source: i
-		}), pe(i, {
+		}), z(i, {
 			reason: n,
 			event: r
 		});
-	}, Z = W, Q = {
-		locale: c,
-		min: l,
-		max: u,
-		isDateUnavailable: f,
-		disabled: p,
-		readOnly: m,
-		required: h,
+	}, Z = he, Q = {
+		locale: s,
+		min: c,
+		max: l,
+		isDateUnavailable: d,
+		disabled: f,
+		readOnly: p,
+		required: m,
 		component: "datePicker.part",
 		px: 0,
 		py: 0,
-		tabIndex: I
+		tabIndex: F
 	};
-	return /* @__PURE__ */ O(E, { children: [
-		b !== void 0 && /* @__PURE__ */ D(t, {
+	return /* @__PURE__ */ D(g, { children: [
+		b !== void 0 && /* @__PURE__ */ E(t, {
 			component: "dateField.label",
 			display: "block",
 			mb: 1.5,
@@ -415,7 +430,7 @@ function j(e, n) {
 			id: `${G}-label`,
 			children: b
 		}),
-		/* @__PURE__ */ O(t, {
+		/* @__PURE__ */ D(t, {
 			ref: K,
 			component: "dateField",
 			display: "inline-flex",
@@ -423,107 +438,112 @@ function j(e, n) {
 			gap: 2,
 			px: 3,
 			py: 2,
-			...R,
-			variant: [R.variant, {
-				disabled: p,
-				invalid: g ?? Y
+			...L,
+			variant: [L.variant, {
+				disabled: f,
+				invalid: _ ?? Y
 			}],
 			props: {
 				role: "group",
 				"aria-labelledby": [b === void 0 ? void 0 : `${G}-label`, S].filter(Boolean).join(" ") || void 0,
-				"aria-invalid": (g ?? Y) || void 0,
+				"aria-invalid": (_ ?? Y) || void 0,
 				"aria-describedby": C,
-				...de
+				...fe
 			},
 			children: [
-				/* @__PURE__ */ D(x, {
+				/* @__PURE__ */ E(x, {
 					...Q,
 					value: H,
 					onValueChange: (e, t) => X(e, U, t.reason, t.event),
-					name: _,
+					name: v,
 					props: { "aria-label": w },
-					invalid: g ?? Y
+					invalid: _ ?? Y
 				}),
-				/* @__PURE__ */ D(t, {
+				/* @__PURE__ */ E(t, {
 					component: "dateField.literal",
 					props: { "aria-hidden": !0 },
 					children: "–"
 				}),
-				/* @__PURE__ */ D(x, {
+				/* @__PURE__ */ E(x, {
 					...Q,
 					value: U,
 					onValueChange: (e, t) => X(H, e, t.reason, t.event),
 					name: y,
 					props: { "aria-label": ne },
-					invalid: g ?? Y
-				}),
-				ue && z && !p && !m && /* @__PURE__ */ D(t, {
-					tag: "button",
-					component: "datePicker.clear",
-					display: "inline-flex",
-					ai: "center",
-					jc: "center",
-					width: 6,
-					height: 6,
-					borderRadius: 999,
-					props: {
-						type: "button",
-						"aria-label": F,
-						tabIndex: I,
-						onClick: (e) => X(null, null, "clear", e)
-					},
-					children: /* @__PURE__ */ D(re, {})
+					invalid: _ ?? Y
 				}),
 				/* @__PURE__ */ D(t, {
-					tag: "button",
-					ref: me,
-					component: "datePicker.trigger",
 					display: "inline-flex",
 					ai: "center",
-					jc: "center",
-					width: 7,
-					height: 7,
-					me: -1.5,
-					borderRadius: 1.5,
-					disabled: p || m,
-					props: {
-						type: "button",
-						"aria-label": J ? `${P}, ${J}` : P,
-						tabIndex: I,
-						...he
-					},
-					children: /* @__PURE__ */ D(te, {})
+					gap: 2,
+					ms: "auto",
+					children: [N && R && !f && !p && /* @__PURE__ */ E(t, {
+						tag: "button",
+						component: "datePicker.clear",
+						display: "inline-flex",
+						ai: "center",
+						jc: "center",
+						width: 6,
+						height: 6,
+						borderRadius: 999,
+						props: {
+							type: "button",
+							"aria-label": de,
+							tabIndex: F,
+							onClick: (e) => X(null, null, "clear", e)
+						},
+						children: /* @__PURE__ */ E(ae, {})
+					}), /* @__PURE__ */ E(t, {
+						tag: "button",
+						ref: W,
+						component: "datePicker.trigger",
+						display: "inline-flex",
+						ai: "center",
+						jc: "center",
+						width: 7,
+						height: 7,
+						me: -1.5,
+						borderRadius: 1.5,
+						disabled: f || p,
+						props: {
+							type: "button",
+							"aria-label": J ? `${P}, ${J}` : P,
+							tabIndex: F,
+							...me
+						},
+						children: /* @__PURE__ */ E(re, {})
+					})]
 				})
 			]
 		}),
-		q(/* @__PURE__ */ O(t, {
+		q(/* @__PURE__ */ D(t, {
 			display: "flex",
 			gap: 3,
 			ai: "stretch",
-			children: [L && L.length > 0 && /* @__PURE__ */ D(oe, {
-				presets: L,
-				isSelected: (e) => z !== null && e.start === z.start && e.end === z.end,
+			children: [I && I.length > 0 && /* @__PURE__ */ E(ce, {
+				presets: I,
+				isSelected: (e) => R !== null && e.start === R.start && e.end === R.end,
 				onSelect: (e, t) => {
-					X(e.start, e.end, "preset", t), j && Z(t);
+					X(e.start, e.end, "preset", t), k && Z(t);
 				}
-			}), /* @__PURE__ */ D(ee, {
+			}), /* @__PURE__ */ E(te, {
 				mode: "range",
-				months: se,
-				value: z,
+				months: M,
+				value: R,
 				defaultFocusedDate: H ?? void 0,
 				onValueChange: (e, t) => {
-					X(e?.start ?? null, e?.end ?? null, "select", t.event), j && e && t.event && Z(t.event);
+					X(e?.start ?? null, e?.end ?? null, "select", t.event), k && e && t.event && Z(t.event);
 				},
-				min: l,
-				max: u,
-				isDateUnavailable: f,
-				locale: c,
-				firstDayOfWeek: M,
-				weekNumbers: N
+				min: c,
+				max: l,
+				isDateUnavailable: d,
+				locale: s,
+				firstDayOfWeek: A,
+				weekNumbers: j
 			})]
 		}))
 	] });
 }
-var M = e(A, "DatePicker"), N = e(j, "DateRangePicker");
+var j = e(k, "DatePicker"), M = e(A, "DateRangePicker");
 //#endregion
-export { N as DateRangePicker, M as default };
+export { M as DateRangePicker, j as default };