impact-nova 2.1.0-alpha.9 → 2.2.0

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

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