impact-nova 2.1.0-alpha.9 → 2.2.0

package/dist/components/forms/date-picker/date-range-picker.js

@@ -1,238 +1,325 @@
-import { jsx as d, jsxs as S } from "react/jsx-runtime";
-import * as m from "react";
-import { Cross as we, CalendarMonth as xe } from "impact-nova-icons";
-import { format as p, isValid as y, parse as D } from "date-fns";
-import { cn as A, padValidDateString as I, maskDate as q } from "../../../lib/utils.js";
-import { useFieldChrome as ke } from "../../../lib/primitives/use-field-chrome.js";
-import { Popover as Ee, PopoverAnchor as Pe, PopoverContent as Re } from "../../feedback/popover/popover.js";
-import { Calendar as Se } from "../../data-display/calendar/calendar.js";
-import { Tooltip as G, TooltipTrigger as J, TooltipContent as Q } from "../../feedback/tooltip/tooltip.js";
-import { useImpactNovaI18n as Ie } from "../../../i18n/use-impact-nova-i18n.js";
-import { getDateFnsLocale as Ve } from "../../../i18n/getDateFnsLocale.js";
-import { coerceDateRangeApply as Ce, coerceDateRange as Ne } from "./calendar-selection-adapters.js";
-import { buildDateBoundsMatcher as Me } from "../../../lib/date-bounds-matcher.js";
-const ve = m.forwardRef(
+import { jsx as u, jsxs as E } from "react/jsx-runtime";
+import * as a from "react";
+import { Cross as Ve, CalendarMonth as Oe } from "impact-nova-icons";
+import { format as x } from "date-fns";
+import { cn as O } from "../../../lib/utils.js";
+import { usePickerDismissActionsRef as Ke, usePickerFooterDismissNudge as je, createRangePickerOpenChangeHandler as Le, parseDateInput as K, normalizeOrderedRange as qe, flashRangeReorder as ze, isDateInputInvalid as $, resolveRangeFieldBlur as N, resolveRangePickerDismissFlash as He, compareDates as j, deferRangeInputBlur as Ge, maskDateInput as F, resolveDateInputOnBlur as S } from "./date-input-behavior.js";
+import { useFieldChrome as Je } from "../../../lib/primitives/use-field-chrome.js";
+import { Popover as Qe, PopoverAnchor as Ue, PopoverContent as We } from "../../feedback/popover/popover.js";
+import { Calendar as Xe } from "../../data-display/calendar/calendar.js";
+import { Tooltip as ee, TooltipTrigger as te, TooltipContent as re } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as Ye } from "../../../i18n/use-impact-nova-i18n.js";
+import { getDateFnsLocale as Ze } from "../../../i18n/getDateFnsLocale.js";
+import { coerceDateRangeApply as _e, coerceDateRange as $e } from "./calendar-selection-adapters.js";
+import { buildDateBoundsMatcher as Fe } from "../../../lib/date-bounds-matcher.js";
+function et(r, c) {
+  if (!r && !c) return !0;
+  if (!r || !c) return !1;
+  const n = !r.from && !c.from || r.from && c.from && j(r.from, c.from) === 0, A = !r.to && !c.to || r.to && c.to && j(r.to, c.to) === 0;
+  return !!(n && A);
+}
+const tt = a.forwardRef(
   ({
-    value: n,
-    onChange: a,
-    format: e = "MM/dd/yyyy",
-    startPlaceholder: U,
-    endPlaceholder: W,
-    minDate: X,
-    maxDate: Y,
-    startMonth: Z,
-    endMonth: _,
-    showFooter: h = !0,
-    weekStartsOn: T,
+    value: r,
+    onChange: c,
+    format: n = "MM/dd/yyyy",
+    startPlaceholder: A,
+    endPlaceholder: oe,
+    minDate: ne,
+    maxDate: se,
+    startMonth: ie,
+    endMonth: le,
+    showFooter: g = !0,
+    weekStartsOn: L,
     disabled: f,
-    label: $,
-    helperText: F,
-    helperTextPosition: ee = "absolute",
-    prefix: Ae,
-    prefixClick: Te,
-    isError: te,
-    error: ne,
-    size: j,
-    required: oe,
-    className: re,
-    ...le
-  }, se) => {
-    const { locale: K, t: P } = Ie(), r = m.useMemo(() => Ve(K), [K]), B = U ?? P("datePicker.startDate"), L = W ?? P("datePicker.endDate"), z = ne ?? te, ie = ke({
-      label: $,
-      helperText: F,
-      helperTextPosition: ee,
-      error: z,
-      required: oe,
+    label: ae,
+    helperText: ce,
+    helperTextPosition: fe = "absolute",
+    prefix: rt,
+    prefixClick: ot,
+    isError: de,
+    error: pe,
+    size: q,
+    required: me,
+    className: ue,
+    ...ge
+  }, he) => {
+    const { locale: z, t: b } = Ye(), s = a.useMemo(() => Ze(z), [z]), H = A ?? b("datePicker.startDate"), G = oe ?? b("datePicker.endDate"), J = pe ?? de, ye = Je({
+      label: ae,
+      helperText: ce,
+      helperTextPosition: fe,
+      error: J,
+      required: me,
       disabled: f ?? void 0,
       rootClassName: "w-full min-w-[240px]"
-    }), O = m.useRef(null), ce = m.useRef(null);
-    m.useImperativeHandle(se, () => O.current);
-    const [c, u] = m.useState(!1), V = m.useRef(!1), [R, b] = m.useState(n), [w, k] = m.useState(n?.from ? p(n.from, e, { locale: r }) : ""), [x, E] = m.useState(n?.to ? p(n.to, e, { locale: r }) : ""), [ae, N] = m.useState(n?.from || /* @__PURE__ */ new Date());
-    m.useEffect(() => {
-      c || (k(n?.from ? p(n.from, e, { locale: r }) : ""), E(n?.to ? p(n.to, e, { locale: r }) : ""), b(n));
-    }, [n, e, c, r]), m.useEffect(() => {
-      c && (b(n), k(n?.from ? p(n.from, e, { locale: r }) : ""), E(n?.to ? p(n.to, e, { locale: r }) : ""), N(n?.from || /* @__PURE__ */ new Date()));
-    }, [c, n, e, r]);
-    const fe = (t) => {
-      const o = Ne(t);
-      b(o), o?.from && k(p(o.from, e, { locale: r })), o?.to && E(p(o.to, e, { locale: r })), h || o?.from && o?.to && o.from.getTime() !== o.to.getTime() && (a?.(o), u(!1));
-    }, de = (t) => {
-      let o = Ce(t, R);
-      o?.from && !o.to && (o = { from: o.from, to: o.from }), a?.(o), u(!1);
-    }, M = () => {
-      b(n), k(n?.from ? p(n.from, e, { locale: r }) : ""), E(n?.to ? p(n.to, e, { locale: r }) : ""), u(!1);
-    }, v = () => {
-      b(void 0), k(""), E(""), a?.(void 0), h || u(!1);
-    }, pe = (t) => {
-      const o = t.target.value, s = q(o, e, w);
-      if (k(s), s === "") {
-        const l = { from: void 0, to: R?.to };
-        b(l), h || a?.(l);
+    }), Q = a.useRef(null), Re = a.useRef(null), U = a.useRef(null), T = a.useRef(null), M = a.useRef(null);
+    a.useImperativeHandle(he, () => Q.current);
+    const [d, h] = a.useState(!1), W = Ke(), { footerFlashKey: xe, footerFlashTarget: De, popoverHandlers: ke } = je(g, d, W, U), I = a.useRef(!1), [p, y] = a.useState(r), [m, D] = a.useState(r?.from ? x(r.from, n, { locale: s }) : ""), [R, k] = a.useState(r?.to ? x(r.to, n, { locale: s }) : ""), [ve, P] = a.useState(r?.from || /* @__PURE__ */ new Date()), v = r?.from ? x(r.from, n, { locale: s }) : "", C = r?.to ? x(r.to, n, { locale: s }) : "";
+    a.useEffect(() => {
+      D(r?.from ? x(r.from, n, { locale: s }) : ""), k(r?.to ? x(r.to, n, { locale: s }) : ""), y(r);
+    }, [r, n, s]);
+    const Ce = a.useCallback(
+      (e) => Le({
+        disabled: f ?? void 0,
+        showFooter: g,
+        containerRef: T,
+        popoverContentRef: M,
+        setOpen: h
+      })(e),
+      [f, g]
+    ), X = a.useRef(!1);
+    a.useEffect(() => {
+      if (d && !X.current) {
+        const e = K(m, n, s);
+        e.parsed ? P(e.parsed) : p?.from ? P(p.from) : r?.from && P(r.from);
+      }
+      X.current = d;
+    }, [d, m, n, s, p?.from, r?.from]);
+    const be = (e) => {
+      const t = $e(e);
+      y(t), t?.from && D(x(t.from, n, { locale: s })), t?.to && k(x(t.to, n, { locale: s })), g || t?.from && t?.to && t.from.getTime() !== t.to.getTime() && (c?.(t), h(!1));
+    }, w = a.useCallback((e, t) => {
+      const o = qe(e, t, j);
+      return o.swapped && (o.from && D(x(o.from, n, { locale: s })), o.to && k(x(o.to, n, { locale: s })), ze(T.current)), { from: o.from, to: o.to };
+    }, [n, s]), Y = (e) => {
+      let t = _e(e, p);
+      t?.from && !t.to && (t = { from: t.from, to: t.from });
+      const o = w(t?.from, t?.to);
+      y({ from: o.from, to: o.to }), c?.({ from: o.from, to: o.to }), h(!1);
+    }, B = () => {
+      y(r), D(r?.from ? x(r.from, n, { locale: s }) : ""), k(r?.to ? x(r.to, n, { locale: s }) : ""), h(!1);
+    }, V = () => {
+      y(void 0), D(""), k(""), c?.(void 0), g || h(!1);
+    }, Ie = (e) => {
+      const t = F(e.target.value, n, m);
+      if (D(t), t === "") {
+        const l = { from: void 0, to: p?.to };
+        y(l), g || c?.(l);
         return;
       }
-      const i = D(s, e, /* @__PURE__ */ new Date(), { locale: r });
-      if (y(i) && s.length === e.length) {
-        const l = { from: i, to: R?.to };
-        b(l), N(i), h || a?.(l);
+      const { parsed: o, isValid: i } = K(t, n, s);
+      if (i && o) {
+        const l = { from: o, to: p?.to };
+        y(l), P(o), g || c?.(l);
       }
-    }, me = (t) => {
-      const o = t.target.value, s = q(o, e, x);
-      if (E(s), s === "") {
-        const l = { from: R?.from, to: void 0 };
-        b(l), h || a?.(l);
+    }, Pe = (e) => {
+      const t = F(e.target.value, n, R);
+      if (k(t), t === "") {
+        const l = { from: p?.from, to: void 0 };
+        y(l), g || c?.(l);
         return;
       }
-      const i = D(s, e, /* @__PURE__ */ new Date(), { locale: r });
-      if (y(i) && s.length === e.length) {
-        const l = { from: R?.from, to: i };
-        b(l), i && N(i), h || a?.(l);
+      const { parsed: o, isValid: i } = K(t, n, s);
+      if (i && o) {
+        const l = { from: p?.from, to: o };
+        y(l), P(o), g || c?.(l);
       }
-    }, H = () => {
-      if (c) return;
-      const t = I(w, e), o = I(x, e), s = D(t, e, /* @__PURE__ */ new Date(), { locale: r }), i = D(o, e, /* @__PURE__ */ new Date(), { locale: r }), l = y(s) && t.length === e.length, g = y(i) && o.length === e.length;
-      w && !l ? k(n?.from ? p(n.from, e, { locale: r }) : "") : l && k(t), x && !g ? E(n?.to ? p(n.to, e, { locale: r }) : "") : g && E(o), l && g && !h ? a?.({ from: s, to: i }) : l && !h ? a?.({ from: s, to: n?.to }) : g && !h && a?.({ from: n?.from, to: i });
-    }, ue = n?.from ? p(n.from, e, { locale: r }) : "", he = n?.to ? p(n.to, e, { locale: r }) : "", ge = w !== ue, ye = x !== he, De = w.length === e.length && !y(D(w, e, /* @__PURE__ */ new Date(), { locale: r })), be = x.length === e.length && !y(D(x, e, /* @__PURE__ */ new Date(), { locale: r }));
-    return /* @__PURE__ */ d("div", { "data-component": "date-range-picker", "data-disabled": f || void 0, children: ie.wrapControl(
-      /* @__PURE__ */ S(Ee, { open: f ? !1 : c, onOpenChange: (t) => {
-        f || u(t);
-      }, children: [
-        /* @__PURE__ */ d(Pe, { asChild: !0, children: /* @__PURE__ */ S(
-          "div",
-          {
-            "data-state": c ? "open" : "closed",
-            className: A(
-              "flex w-full items-center justify-between gap-2 rounded-md border bg-canvas-elevated px-3 text-sm shadow-sm transition-colors hover:border-brand disabled:cursor-not-allowed disabled:bg-disabled-surface disabled:text-disabled-foreground disabled:border-stroke",
-              z ? "border-destructive hover:border-destructive" : "border-field",
-              j === "sm" ? "h-6" : j === "md" ? "h-[28px]" : "h-8",
-              f && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
-              "cursor-pointer",
-              re
-            ),
-            children: [
-              /* @__PURE__ */ S("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
-                /* @__PURE__ */ d(
-                  "input",
-                  {
-                    ref: O,
-                    type: "text",
-                    value: w,
-                    onChange: pe,
-                    onBlur: H,
-                    onClick: () => !f && u(!0),
-                    onKeyDown: (t) => {
-                      if (t.key === "Enter" && !c) {
-                        t.preventDefault();
-                        const o = I(w, e), s = I(x, e), i = D(o, e, /* @__PURE__ */ new Date(), { locale: r }), l = D(s, e, /* @__PURE__ */ new Date(), { locale: r }), g = y(i) && o.length === e.length, C = y(l) && s.length === e.length;
-                        g && C ? a?.({ from: i, to: l }) : g ? a?.({ from: i, to: n?.to }) : C && a?.({ from: n?.from, to: l });
+    }, Z = () => {
+      Ge(
+        T,
+        M,
+        () => {
+          const e = N(m, n, v, s), t = N(R, n, C, s);
+          e.resetToCommitted ? D(v) : e.parsed && D(e.display), t.resetToCommitted ? k(C) : t.parsed && k(t.display);
+          let o = e.parsed ? e.parsed : e.resetToCommitted ? r?.from : p?.from, i = t.parsed ? t.parsed : t.resetToCommitted ? r?.to : p?.to;
+          o && i && ({ from: o, to: i } = w(o, i));
+          const l = o || i ? { from: o, to: i } : void 0;
+          y(l), g || (l ? c?.(l) : !m && !R && c?.(void 0));
+        }
+      );
+    }, Ee = () => {
+      const e = S(m, n, v, s), t = S(R, n, C, s);
+      e.resetToCommitted ? D(v) : e.parsed && D(e.display), t.resetToCommitted ? k(C) : t.parsed && k(t.display);
+      let o = e.parsed ?? p?.from ?? r?.from, i = t.parsed ?? p?.to ?? r?.to;
+      o && i && ({ from: o, to: i } = w(o, i));
+      const l = o || i ? { from: o, to: i } : void 0;
+      l ? (y(l), c?.(l)) : !m && !R && (y(void 0), c?.(void 0));
+    }, _ = () => {
+      if (d && g) {
+        Y();
+        return;
+      }
+      if (!d) {
+        if (g) {
+          Ee();
+          return;
+        }
+        const e = S(m, n, v, s), t = S(R, n, C, s);
+        if (e.parsed || t.parsed) return;
+        I.current = !0, h(!0);
+      }
+    }, we = m !== v, Te = R !== C, Be = $(m, n, s), Ne = $(R, n, s), Se = a.useCallback(() => {
+      const e = N(m, n, v, s), t = N(R, n, C, s);
+      let o = e.parsed ? e.parsed : e.resetToCommitted ? r?.from : p?.from, i = t.parsed ? t.parsed : t.resetToCommitted ? r?.to : p?.to;
+      o && i && ({ from: o, to: i } = w(o, i));
+      const l = o || i ? { from: o, to: i } : void 0;
+      return He({
+        startInput: m,
+        endInput: R,
+        committedStart: v,
+        committedEnd: C,
+        committedRange: r,
+        computeEffectiveRange: () => l,
+        rangesEqual: (Ae, Me) => et(Ae, Me)
+      });
+    }, [
+      m,
+      R,
+      v,
+      C,
+      r,
+      p,
+      n,
+      s,
+      w
+    ]);
+    return a.useLayoutEffect(() => {
+      W.current = {
+        onDismiss: B,
+        resolveFlash: Se
+      };
+    }), /* @__PURE__ */ u(
+      "div",
+      {
+        ref: U,
+        "data-component": "date-range-picker",
+        "data-disabled": f || void 0,
+        children: ye.wrapControl(
+          /* @__PURE__ */ E(Qe, { open: f ? !1 : d, onOpenChange: Ce, children: [
+            /* @__PURE__ */ u(Ue, { asChild: !0, children: /* @__PURE__ */ E(
+              "div",
+              {
+                ref: T,
+                "data-state": d ? "open" : "closed",
+                className: O(
+                  "flex w-full items-center justify-between gap-2 rounded-md border bg-canvas-elevated px-3 text-sm shadow-sm transition-colors hover:border-brand disabled:cursor-not-allowed disabled:bg-disabled-surface disabled:text-disabled-foreground disabled:border-stroke",
+                  J ? "border-destructive hover:border-destructive" : "border-field",
+                  q === "sm" ? "h-6" : q === "md" ? "h-[28px]" : "h-8",
+                  f && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
+                  "cursor-pointer",
+                  ue
+                ),
+                children: [
+                  /* @__PURE__ */ E("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
+                    /* @__PURE__ */ u(
+                      "input",
+                      {
+                        ref: Q,
+                        type: "text",
+                        value: m,
+                        onChange: Ie,
+                        onBlur: Z,
+                        onClick: () => !f && h(!0),
+                        onKeyDown: (e) => {
+                          e.key === "Enter" && !f && (e.preventDefault(), _()), e.key === "ArrowDown" && !d && !f && (e.preventDefault(), I.current = !0, h(!0)), e.key === "Escape" && d && (e.preventDefault(), B());
+                        },
+                        placeholder: d ? n : H,
+                        disabled: !!f,
+                        "aria-label": H,
+                        "data-field": "start",
+                        className: O(
+                          "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
+                          Be ? "text-destructive" : we ? "text-content-placeholder" : ""
+                        ),
+                        ...ge
                       }
-                      t.key === "ArrowDown" && !c && !f && (t.preventDefault(), V.current = !0, u(!0)), t.key === "Escape" && c && (t.preventDefault(), M());
-                    },
-                    placeholder: c ? e : B,
-                    disabled: !!f,
-                    "aria-label": B,
-                    "data-field": "start",
-                    className: A(
-                      "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
-                      De ? "text-destructive" : ge ? "text-content-placeholder" : ""
                     ),
-                    ...le
-                  }
-                ),
-                /* @__PURE__ */ d(
-                  "input",
-                  {
-                    ref: ce,
-                    type: "text",
-                    value: x,
-                    onChange: me,
-                    onBlur: H,
-                    onClick: () => !f && u(!0),
-                    onKeyDown: (t) => {
-                      if (t.key === "Enter" && !c) {
-                        t.preventDefault();
-                        const o = I(w, e), s = I(x, e), i = D(o, e, /* @__PURE__ */ new Date(), { locale: r }), l = D(s, e, /* @__PURE__ */ new Date(), { locale: r }), g = y(i) && o.length === e.length, C = y(l) && s.length === e.length;
-                        g && C ? a?.({ from: i, to: l }) : g ? a?.({ from: i, to: n?.to }) : C && a?.({ from: n?.from, to: l });
+                    /* @__PURE__ */ u(
+                      "input",
+                      {
+                        ref: Re,
+                        type: "text",
+                        value: R,
+                        onChange: Pe,
+                        onBlur: Z,
+                        onClick: () => !f && h(!0),
+                        onKeyDown: (e) => {
+                          e.key === "Enter" && !f && (e.preventDefault(), _()), e.key === "ArrowDown" && !d && !f && (e.preventDefault(), I.current = !0, h(!0)), e.key === "Escape" && d && (e.preventDefault(), B());
+                        },
+                        placeholder: d ? n : G,
+                        disabled: !!f,
+                        "aria-label": G,
+                        "data-field": "end",
+                        className: O(
+                          "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
+                          Ne ? "text-destructive" : Te ? "text-content-placeholder" : ""
+                        )
                       }
-                      t.key === "ArrowDown" && !c && !f && (t.preventDefault(), V.current = !0, u(!0)), t.key === "Escape" && c && (t.preventDefault(), M());
-                    },
-                    placeholder: c ? e : L,
-                    disabled: !!f,
-                    "aria-label": L,
-                    "data-field": "end",
-                    className: A(
-                      "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
-                      be ? "text-destructive" : ye ? "text-content-placeholder" : ""
                     )
+                  ] }),
+                  /* @__PURE__ */ E("div", { className: "flex items-center gap-1 shrink-0", children: [
+                    r?.from && !f && /* @__PURE__ */ E(ee, { children: [
+                      /* @__PURE__ */ u(te, { asChild: !0, children: /* @__PURE__ */ u(
+                        "button",
+                        {
+                          type: "button",
+                          tabIndex: 0,
+                          "aria-label": b("calendar.clear"),
+                          onClick: (e) => {
+                            e.stopPropagation(), V();
+                          },
+                          onKeyDown: (e) => {
+                            (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), V());
+                          },
+                          className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
+                          children: /* @__PURE__ */ u(Ve, { className: "size-3 hover:text-content text-content-icon" })
+                        }
+                      ) }),
+                      /* @__PURE__ */ u(re, { variant: "tertiary", side: "top", children: b("calendar.clear") })
+                    ] }),
+                    /* @__PURE__ */ E(ee, { children: [
+                      /* @__PURE__ */ u(te, { asChild: !0, children: /* @__PURE__ */ u("button", { type: "button", tabIndex: 0, "aria-label": b("datePicker.selectMonthRange"), onClick: (e) => {
+                        e.stopPropagation(), f || h(!d);
+                      }, onKeyDown: (e) => {
+                        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), f || (I.current = !0, h(!d)));
+                      }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ u(Oe, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
+                      /* @__PURE__ */ u(re, { variant: "tertiary", side: "top", children: b("datePicker.selectMonthRange") })
+                    ] })
+                  ] })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ u(
+              We,
+              {
+                ref: M,
+                className: "w-auto p-0",
+                align: "start",
+                "aria-label": b("datePicker.selectDateRange"),
+                onOpenAutoFocus: (e) => {
+                  I.current || e.preventDefault(), I.current = !1;
+                },
+                ...ke,
+                children: /* @__PURE__ */ u(
+                  Xe,
+                  {
+                    mode: "range",
+                    selected: p,
+                    footerFlashKey: xe,
+                    footerFlashTarget: De,
+                    onSelect: be,
+                    month: ve,
+                    onMonthChange: P,
+                    disabled: Fe(ne, se),
+                    startMonth: ie,
+                    endMonth: le,
+                    showFooter: g,
+                    onApply: Y,
+                    onCancel: B,
+                    onClear: V,
+                    captionLayout: "dropdown",
+                    ...L !== void 0 ? { weekStartsOn: L } : {}
                   }
                 )
-              ] }),
-              /* @__PURE__ */ S("div", { className: "flex items-center gap-1 shrink-0", children: [
-                n?.from && !f && /* @__PURE__ */ S(G, { children: [
-                  /* @__PURE__ */ d(J, { asChild: !0, children: /* @__PURE__ */ d(
-                    "button",
-                    {
-                      type: "button",
-                      tabIndex: 0,
-                      "aria-label": P("calendar.clear"),
-                      onClick: (t) => {
-                        t.stopPropagation(), v();
-                      },
-                      onKeyDown: (t) => {
-                        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), v());
-                      },
-                      className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
-                      children: /* @__PURE__ */ d(we, { className: "size-3 hover:text-content text-content-icon" })
-                    }
-                  ) }),
-                  /* @__PURE__ */ d(Q, { variant: "tertiary", side: "top", children: P("calendar.clear") })
-                ] }),
-                /* @__PURE__ */ S(G, { children: [
-                  /* @__PURE__ */ d(J, { asChild: !0, children: /* @__PURE__ */ d("button", { type: "button", tabIndex: 0, "aria-label": P("datePicker.selectMonthRange"), onClick: (t) => {
-                    t.stopPropagation(), f || u(!c);
-                  }, onKeyDown: (t) => {
-                    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), f || (V.current = !0, u(!c)));
-                  }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ d(xe, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
-                  /* @__PURE__ */ d(Q, { variant: "tertiary", side: "top", children: P("datePicker.selectMonthRange") })
-                ] })
-              ] })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ d(
-          Re,
-          {
-            className: "w-auto p-0",
-            align: "start",
-            "aria-label": P("datePicker.selectDateRange"),
-            onOpenAutoFocus: (t) => {
-              V.current || t.preventDefault(), V.current = !1;
-            },
-            children: /* @__PURE__ */ d(
-              Se,
-              {
-                mode: "range",
-                selected: R,
-                onSelect: fe,
-                month: ae,
-                onMonthChange: N,
-                disabled: Me(X, Y),
-                startMonth: Z,
-                endMonth: _,
-                showFooter: h,
-                onApply: de,
-                onCancel: M,
-                onClear: v,
-                captionLayout: "dropdown",
-                ...T !== void 0 ? { weekStartsOn: T } : {}
               }
             )
-          }
+          ] })
         )
-      ] })
-    ) });
+      }
+    );
   }
 );
-ve.displayName = "DateRangePicker";
+tt.displayName = "DateRangePicker";
 export {
-  ve as DateRangePicker
+  tt as DateRangePicker
 };