impact-nova 2.5.7 → 2.5.8

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

@@ -1,18 +1,19 @@
 import { jsxs as f, jsx as r } from "react/jsx-runtime";
 import * as a from "react";
-import { Cross as H, CalendarMonth as V } from "impact-nova-icons";
-import { format as $ } from "date-fns";
-import { cn as G } from "../../../lib/utils.js";
-import { Input as J } from "../input/input.js";
-import { Popover as Q, PopoverAnchor as U, PopoverContent as W } from "../../feedback/popover/popover.js";
-import { Calendar as X } from "../../data-display/calendar/calendar.js";
+import { Cross as Y, CalendarMonth as Z } from "impact-nova-icons";
+import { format as _ } from "date-fns";
+import { cn as ee } from "../../../lib/utils.js";
+import { Input as te } from "../input/input.js";
+import { Popover as re, PopoverAnchor as oe, PopoverContent as ne } from "../../feedback/popover/popover.js";
+import { Calendar as ae } from "../../data-display/calendar/calendar.js";
 import { Tooltip as P, TooltipTrigger as C, TooltipContent as k } from "../../feedback/tooltip/tooltip.js";
-import { useImpactNovaI18n as Y } from "../../../i18n/use-impact-nova-i18n.js";
-import { getDateFnsLocale as Z } from "../../../i18n/getDateFnsLocale.js";
-import { coerceDateArrayApply as _, coerceDateArray as ee } from "./calendar-selection-adapters.js";
-import { usePickerDismissActionsRef as te, usePickerFooterDismissNudge as re, handlePickerSurfacePointerDown as ne } from "./date-input-behavior.js";
-import { buildDateBoundsMatcher as oe } from "../../../lib/date-bounds-matcher.js";
-const ae = a.forwardRef(
+import { useImpactNovaI18n as se } from "../../../i18n/use-impact-nova-i18n.js";
+import { getDateFnsLocale as ie } from "../../../i18n/getDateFnsLocale.js";
+import { coerceDateArrayApply as ce, coerceDateArray as le } from "./calendar-selection-adapters.js";
+import { usePickerDismissActionsRef as pe, usePickerFooterDismissNudge as de, handlePickerSurfacePointerDown as fe } from "./date-input-behavior.js";
+import { buildDateBoundsMatcher as me } from "../../../lib/date-bounds-matcher.js";
+import { fiscalCalendarPassThrough as ue } from "./fiscal-pass-through.js";
+const he = a.forwardRef(
   ({
     value: t,
     onChange: m,
@@ -23,62 +24,71 @@ const ae = a.forwardRef(
     startMonth: b,
     endMonth: T,
     showFooter: l = !0,
-    disabled: n,
+    disabled: o,
     className: R,
-    ...S
-  }, F) => {
-    const { locale: h, t: s } = Y(), I = a.useMemo(() => Z(h), [h]), L = M ?? s("datePicker.selectMultipleDates"), [i, o] = a.useState(!1), u = a.useRef(null), y = te(), { footerFlashKey: j, footerFlashTarget: O, popoverHandlers: w } = re(l, i, y, u), [p, d] = a.useState(t);
+    calendarKind: S,
+    fiscalMode: F,
+    granularity: I,
+    fiscalMonthPattern: L,
+    fiscalYearStartMonth: j,
+    fiscalConfig: O,
+    showPresets: w,
+    comparison: E,
+    onComparisonChange: v,
+    ...z
+  }, K) => {
+    const { locale: h, t: s } = se(), q = a.useMemo(() => ie(h), [h]), B = M ?? s("datePicker.selectMultipleDates"), [i, n] = a.useState(!1), u = a.useRef(null), y = pe(), { footerFlashKey: H, footerFlashTarget: V, popoverHandlers: $ } = de(l, i, y, u), [p, d] = a.useState(t);
     a.useEffect(() => {
       d(t);
     }, [i, t]);
-    const E = (e) => {
-      const c = ee(e);
+    const G = (e) => {
+      const c = le(e);
       d(c), l || m?.(c);
-    }, v = (e) => {
-      const c = _(e, p);
-      m?.(c), o(!1);
+    }, J = (e) => {
+      const c = ce(e, p);
+      m?.(c), n(!1);
     }, g = () => {
-      d(t), o(!1);
+      d(t), n(!1);
     }, D = () => {
-      d(void 0), m?.(void 0), l || o(!1);
-    }, z = t && t.length > 0 ? t.length === 1 ? $(t[0], x, { locale: I }) : `${t.length} dates selected` : "", K = a.useCallback(() => {
+      d(void 0), m?.(void 0), l || n(!1);
+    }, Q = t && t.length > 0 ? t.length === 1 ? _(t[0], x, { locale: q }) : `${t.length} dates selected` : "", U = a.useCallback(() => {
       const e = p?.length ?? 0, c = t?.length ?? 0;
       return e === c && (p ?? []).every(
-        (q, B) => q.getTime() === t?.[B]?.getTime()
+        (W, X) => W.getTime() === t?.[X]?.getTime()
       ) ? "dismiss" : e > 0 ? "apply" : "cancel";
     }, [p, t]);
     return a.useLayoutEffect(() => {
       y.current = {
         onDismiss: g,
-        resolveFlash: K
+        resolveFlash: U
       };
-    }), /* @__PURE__ */ f(Q, { open: n ? !1 : i, onOpenChange: (e) => {
-      n || !e && l || o(e);
+    }), /* @__PURE__ */ f(re, { open: o ? !1 : i, onOpenChange: (e) => {
+      o || !e && l || n(e);
     }, children: [
-      /* @__PURE__ */ r(U, { asChild: !0, children: /* @__PURE__ */ r(
+      /* @__PURE__ */ r(oe, { asChild: !0, children: /* @__PURE__ */ r(
         "div",
         {
           ref: u,
-          onPointerDown: (e) => ne({
-            disabled: n,
+          onPointerDown: (e) => fe({
+            disabled: o,
             event: e,
-            onOpen: () => o(!0),
+            onOpen: () => n(!0),
             focusField: () => u.current?.querySelector("input")?.focus()
           }),
           children: /* @__PURE__ */ r(
-            J,
+            te,
             {
-              ref: F,
-              value: z,
-              placeholder: L,
+              ref: K,
+              value: Q,
+              placeholder: B,
               readOnly: !0,
-              disabled: n,
+              disabled: o,
               onClick: () => {
-                !n && !i && o(!0);
+                !o && !i && n(!0);
               },
-              className: G("cursor-pointer", R),
+              className: ee("cursor-pointer", R),
               suffix: /* @__PURE__ */ f("div", { className: "flex items-center gap-1", children: [
-                t && t.length > 0 && !n && /* @__PURE__ */ f(P, { children: [
+                t && t.length > 0 && !o && /* @__PURE__ */ f(P, { children: [
                   /* @__PURE__ */ r(C, { asChild: !0, children: /* @__PURE__ */ r(
                     "button",
                     {
@@ -89,7 +99,7 @@ const ae = a.forwardRef(
                         e.stopPropagation(), D();
                       },
                       className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
-                      children: /* @__PURE__ */ r(H, { className: "size-3 hover:text-content" })
+                      children: /* @__PURE__ */ r(Y, { className: "size-3 hover:text-content" })
                     }
                   ) }),
                   /* @__PURE__ */ r(k, { variant: "tertiary", side: "top", children: s("calendar.clear") })
@@ -103,47 +113,58 @@ const ae = a.forwardRef(
                       "data-component": "calendar-trigger",
                       "aria-label": s("datePicker.selectMultipleDates"),
                       onPointerDown: (e) => {
-                        e.preventDefault(), e.stopPropagation(), n || o(!i);
+                        e.preventDefault(), e.stopPropagation(), o || n(!i);
                       },
                       onKeyDown: (e) => {
-                        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), n || o(!i));
+                        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), o || n(!i));
                       },
                       className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer",
-                      children: /* @__PURE__ */ r(V, { className: "h-4 w-4 text-secondary-foreground" })
+                      children: /* @__PURE__ */ r(Z, { className: "h-4 w-4 text-secondary-foreground" })
                     }
                   ) }),
                   /* @__PURE__ */ r(k, { variant: "tertiary", side: "top", children: s("datePicker.selectMultipleDates") })
                 ] })
               ] }),
-              ...S
+              ...z
             }
           )
         }
       ) }),
       /* @__PURE__ */ r(
-        W,
+        ne,
         {
           className: "w-auto p-0",
           align: "start",
           "aria-label": s("datePicker.selectMultipleDates"),
           onOpenAutoFocus: (e) => e.preventDefault(),
-          ...w,
+          ...$,
           children: /* @__PURE__ */ r(
-            X,
+            ae,
             {
               mode: "multiple",
               selected: p,
-              footerFlashKey: j,
-              footerFlashTarget: O,
-              onSelect: E,
-              disabled: oe(A, N),
+              footerFlashKey: H,
+              footerFlashTarget: V,
+              onSelect: G,
+              disabled: me(A, N),
               startMonth: b,
               endMonth: T,
               showFooter: l,
-              onApply: v,
+              onApply: J,
               onCancel: g,
               onClear: D,
-              captionLayout: "dropdown"
+              captionLayout: "dropdown",
+              ...ue({
+                calendarKind: S,
+                fiscalMode: F,
+                granularity: I,
+                fiscalMonthPattern: L,
+                fiscalYearStartMonth: j,
+                fiscalConfig: O,
+                showPresets: w,
+                comparison: E,
+                onComparisonChange: v
+              })
             }
           )
         }
@@ -151,7 +172,7 @@ const ae = a.forwardRef(
     ] });
   }
 );
-ae.displayName = "MultiDatePicker";
+he.displayName = "MultiDatePicker";
 export {
-  ae as MultiDatePicker
+  he as MultiDatePicker
 };

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

@@ -1,46 +1,56 @@
-import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
 import * as s from "react";
-import { Cross as $, CalendarMonth as q } from "impact-nova-icons";
-import { cn as B } from "../../../lib/utils.js";
-import { Input as H } from "../input/input.js";
-import { Popover as G, PopoverAnchor as J, PopoverContent as Q } from "../../feedback/popover/popover.js";
-import { Calendar as U } from "../../data-display/calendar/calendar.js";
+import { Cross as X, CalendarMonth as Y } from "impact-nova-icons";
+import { cn as Z } from "../../../lib/utils.js";
+import { Input as _ } from "../input/input.js";
+import { Popover as ee, PopoverAnchor as te, PopoverContent as ne } from "../../feedback/popover/popover.js";
+import { Calendar as re } from "../../data-display/calendar/calendar.js";
 import { Tooltip as D, TooltipTrigger as b, TooltipContent as x } from "../../feedback/tooltip/tooltip.js";
-import { useImpactNovaI18n as W } from "../../../i18n/use-impact-nova-i18n.js";
-import { coerceMonthArrayApply as X, coerceMonthArray as Y } from "./calendar-selection-adapters.js";
-import { usePickerDismissActionsRef as Z, usePickerFooterDismissNudge as _, handlePickerSurfacePointerDown as ee } from "./date-input-behavior.js";
-import { buildDateBoundsMatcher as te } from "../../../lib/date-bounds-matcher.js";
-const ne = s.forwardRef(
+import { useImpactNovaI18n as oe } from "../../../i18n/use-impact-nova-i18n.js";
+import { coerceMonthArrayApply as se, coerceMonthArray as ie } from "./calendar-selection-adapters.js";
+import { usePickerDismissActionsRef as ce, usePickerFooterDismissNudge as ae, handlePickerSurfacePointerDown as le } from "./date-input-behavior.js";
+import { buildDateBoundsMatcher as pe } from "../../../lib/date-bounds-matcher.js";
+import { fiscalCalendarPassThrough as fe } from "./fiscal-pass-through.js";
+const de = s.forwardRef(
   ({
     value: t,
-    onChange: u,
+    onChange: h,
     placeholder: A,
     minDate: y,
     maxDate: N,
     startMonth: R,
-    endMonth: S,
+    endMonth: T,
     showFooter: l = !0,
     disabled: r,
-    className: T,
-    ...I
-  }, O) => {
-    const { t: i } = W(), j = A ?? i("datePicker.selectMultipleMonths"), [c, o] = s.useState(!1), h = s.useRef(!1), m = s.useRef(null), g = Z(), { footerFlashKey: v, footerFlashTarget: w, popoverHandlers: E } = _(l, c, g, m), [p, d] = s.useState(t);
+    className: S,
+    calendarKind: I,
+    fiscalMode: O,
+    granularity: j,
+    fiscalMonthPattern: v,
+    fiscalYearStartMonth: w,
+    fiscalConfig: E,
+    showPresets: F,
+    comparison: K,
+    onComparisonChange: z,
+    ...L
+  }, V) => {
+    const { t: i } = oe(), $ = A ?? i("datePicker.selectMultipleMonths"), [c, o] = s.useState(!1), u = s.useRef(!1), m = s.useRef(null), g = ce(), { footerFlashKey: q, footerFlashTarget: B, popoverHandlers: H } = ae(l, c, g, m), [p, f] = s.useState(t);
     s.useEffect(() => {
-      d(t);
+      f(t);
     }, [c, t]);
-    const F = (e) => {
-      const a = Y(e);
-      d(a), l || u?.(a);
-    }, K = (e) => {
-      const a = X(e, p);
-      u?.(a), o(!1);
+    const G = (e) => {
+      const a = ie(e);
+      f(a), l || h?.(a);
+    }, J = (e) => {
+      const a = se(e, p);
+      h?.(a), o(!1);
     }, M = () => {
-      d(t), o(!1);
+      f(t), o(!1);
     }, P = () => {
-      d(void 0), u?.(void 0), l || o(!1);
-    }, z = t && t.length > 0 ? t.length === 1 ? `${t[0].month + 1}/${t[0].year}` : i("datePicker.monthsSelected", { count: t.length }) : "", L = (e) => {
+      f(void 0), h?.(void 0), l || o(!1);
+    }, Q = t && t.length > 0 ? t.length === 1 ? `${t[0].month + 1}/${t[0].year}` : i("datePicker.monthsSelected", { count: t.length }) : "", U = (e) => {
       r || !e && l || o(e);
-    }, V = s.useCallback(() => {
+    }, W = s.useCallback(() => {
       const e = p?.length ?? 0, a = t?.length ?? 0;
       return e === a && (p ?? []).every(
         (C, k) => C.month === t?.[k]?.month && C.year === t?.[k]?.year
@@ -49,33 +59,33 @@ const ne = s.forwardRef(
     return s.useLayoutEffect(() => {
       g.current = {
         onDismiss: M,
-        resolveFlash: V
+        resolveFlash: W
       };
-    }), /* @__PURE__ */ f(G, { open: r ? !1 : c, onOpenChange: L, children: [
-      /* @__PURE__ */ n(J, { asChild: !0, children: /* @__PURE__ */ n(
+    }), /* @__PURE__ */ d(ee, { open: r ? !1 : c, onOpenChange: U, children: [
+      /* @__PURE__ */ n(te, { asChild: !0, children: /* @__PURE__ */ n(
         "div",
         {
           ref: m,
-          onPointerDown: (e) => ee({
+          onPointerDown: (e) => le({
             disabled: r,
             event: e,
             onOpen: () => o(!0),
             focusField: () => m.current?.querySelector("input")?.focus()
           }),
           children: /* @__PURE__ */ n(
-            H,
+            _,
             {
-              ref: O,
-              value: z,
-              placeholder: j,
+              ref: V,
+              value: Q,
+              placeholder: $,
               readOnly: !0,
               disabled: r,
               onClick: () => {
                 !r && !c && o(!0);
               },
-              className: B("cursor-pointer", T),
-              suffix: /* @__PURE__ */ f("div", { className: "flex items-center gap-1", children: [
-                t && t.length > 0 && !r && /* @__PURE__ */ f(D, { children: [
+              className: Z("cursor-pointer", S),
+              suffix: /* @__PURE__ */ d("div", { className: "flex items-center gap-1", children: [
+                t && t.length > 0 && !r && /* @__PURE__ */ d(D, { children: [
                   /* @__PURE__ */ n(b, { asChild: !0, children: /* @__PURE__ */ n(
                     "button",
                     {
@@ -86,12 +96,12 @@ const ne = s.forwardRef(
                         e.stopPropagation(), P();
                       },
                       className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
-                      children: /* @__PURE__ */ n($, { className: "size-3 hover:text-content" })
+                      children: /* @__PURE__ */ n(X, { className: "size-3 hover:text-content" })
                     }
                   ) }),
                   /* @__PURE__ */ n(x, { variant: "tertiary", side: "top", children: i("calendar.clear") })
                 ] }),
-                /* @__PURE__ */ f(D, { children: [
+                /* @__PURE__ */ d(D, { children: [
                   /* @__PURE__ */ n(b, { asChild: !0, children: /* @__PURE__ */ n(
                     "button",
                     {
@@ -103,48 +113,59 @@ const ne = s.forwardRef(
                         e.preventDefault(), e.stopPropagation(), r || o(!c);
                       },
                       onKeyDown: (e) => {
-                        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), r || (h.current = !0, o(!c)));
+                        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), r || (u.current = !0, o(!c)));
                       },
                       className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer",
-                      children: /* @__PURE__ */ n(q, { className: "h-4 w-4 text-secondary-foreground" })
+                      children: /* @__PURE__ */ n(Y, { className: "h-4 w-4 text-secondary-foreground" })
                     }
                   ) }),
                   /* @__PURE__ */ n(x, { variant: "tertiary", side: "top", children: i("datePicker.selectMultipleMonths") })
                 ] })
               ] }),
-              ...I
+              ...L
             }
           )
         }
       ) }),
       /* @__PURE__ */ n(
-        Q,
+        ne,
         {
           className: "w-auto p-0",
           align: "start",
           "aria-label": i("datePicker.selectMultipleMonths"),
           onOpenAutoFocus: (e) => {
-            h.current || e.preventDefault(), h.current = !1;
+            u.current || e.preventDefault(), u.current = !1;
           },
-          ...E,
+          ...H,
           children: /* @__PURE__ */ n(
-            U,
+            re,
             {
               pickerType: "month",
               monthMode: "multiple",
               selectedMonths: p,
-              footerFlashKey: v,
-              footerFlashTarget: w,
-              onMonthSelect: F,
-              disabled: te(y, N),
+              footerFlashKey: q,
+              footerFlashTarget: B,
+              onMonthSelect: G,
+              disabled: pe(y, N),
               startMonth: R,
-              endMonth: S,
+              endMonth: T,
               defaultMonth: y,
               showFooter: l,
-              onApply: K,
+              onApply: J,
               onCancel: M,
               onClear: P,
-              captionLayout: "dropdown"
+              captionLayout: "dropdown",
+              ...fe({
+                calendarKind: I,
+                fiscalMode: O,
+                granularity: j,
+                fiscalMonthPattern: v,
+                fiscalYearStartMonth: w,
+                fiscalConfig: E,
+                showPresets: F,
+                comparison: K,
+                onComparisonChange: z
+              })
             }
           )
         }
@@ -152,7 +173,7 @@ const ne = s.forwardRef(
     ] });
   }
 );
-ne.displayName = "MultiMonthPicker";
+de.displayName = "MultiMonthPicker";
 export {
-  ne as MultiMonthPicker
+  de as MultiMonthPicker
 };

package/dist/components/forms/date-picker/multi-quarter-picker.d.ts

@@ -0,0 +1,3 @@
+import { MultiQuarterPickerProps } from './date-picker.types';
+import * as React from "react";
+export declare const MultiQuarterPicker: React.ForwardRefExoticComponent<MultiQuarterPickerProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/forms/date-picker/multi-quarter-picker.js

@@ -0,0 +1,177 @@
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import * as n from "react";
+import { Cross as X, CalendarMonth as Y } from "impact-nova-icons";
+import { cn as Z } from "../../../lib/utils.js";
+import { Input as _ } from "../input/input.js";
+import { Calendar as $ } from "../../data-display/calendar/calendar.js";
+import { Tooltip as M, TooltipTrigger as x, TooltipContent as b } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as ee } from "../../../i18n/use-impact-nova-i18n.js";
+import { buildDateBoundsMatcher as te } from "../../../lib/date-bounds-matcher.js";
+import { fiscalCalendarPassThrough as re } from "./fiscal-pass-through.js";
+import { DatePickerShell as ne } from "./date-picker-shell.js";
+import { usePickerDismissActionsRef as oe, usePickerFooterDismissNudge as ae, handleReadonlyPickerKeyDown as ie, handlePickerSurfacePointerDown as ce } from "./date-input-behavior.js";
+import { formatQuarterInput as se } from "../../data-display/calendar/calendar-fiscal-labels.js";
+import { viewMonthFromQuarter as le } from "../../data-display/calendar/calendar-quarter-utils.js";
+const pe = n.forwardRef(
+  ({
+    value: t,
+    onChange: u,
+    placeholder: R,
+    minDate: D,
+    maxDate: Q,
+    startMonth: N,
+    endMonth: S,
+    showFooter: s = !0,
+    disabled: o,
+    className: A,
+    calendarKind: I,
+    fiscalMode: O,
+    granularity: T,
+    fiscalMonthPattern: w,
+    fiscalYearStartMonth: v,
+    fiscalConfig: K,
+    showPresets: j,
+    ...F
+  }, z) => {
+    const { t: a } = ee(), E = R ?? a("datePicker.selectMultipleQuarters"), f = n.useRef(null), y = n.useRef(null);
+    n.useImperativeHandle(z, () => f.current);
+    const [i, c] = n.useState(!1), d = n.useRef(!1), k = oe(), { footerFlashKey: H, footerFlashTarget: L, popoverHandlers: V } = ae(s, i, k, y), [P, l] = n.useState(t), [q, B] = n.useState(le(t?.[0]));
+    n.useEffect(() => {
+      i || l(t);
+    }, [i, t]);
+    const m = n.useCallback(() => c(!1), []), G = re({
+      calendarKind: I,
+      fiscalMode: O,
+      granularity: T,
+      fiscalMonthPattern: w,
+      fiscalYearStartMonth: v,
+      fiscalConfig: K,
+      showPresets: j
+    }), J = (e) => {
+      const p = Array.isArray(e) && e.length > 0 ? e : void 0;
+      l(p), s || u?.(p);
+    }, U = () => {
+      u?.(P), m();
+    }, h = () => {
+      l(t), m();
+    }, C = () => {
+      l(void 0), u?.(void 0), s || m();
+    };
+    n.useLayoutEffect(() => {
+      k.current = { onDismiss: h, resolveFlash: () => "cancel" };
+    });
+    const W = t && t.length > 0 ? t.length === 1 ? se(t[0]) : a("datePicker.quartersSelected", { count: t.length }) : "";
+    return /* @__PURE__ */ r(
+      ne,
+      {
+        open: i,
+        disabled: o,
+        ariaLabel: a("datePicker.selectMultipleQuarters"),
+        onOpenChange: (e) => {
+          o || c(e);
+        },
+        onOpenAutoFocus: (e) => {
+          d.current || e.preventDefault(), d.current = !1;
+        },
+        popoverHandlers: V,
+        trigger: /* @__PURE__ */ r(
+          "div",
+          {
+            ref: y,
+            "data-component": "multi-quarter-picker",
+            "data-state": i ? "open" : "closed",
+            onPointerDown: (e) => ce({
+              disabled: o,
+              event: e,
+              onOpen: () => c(!0),
+              focusField: () => f.current?.focus()
+            }),
+            children: /* @__PURE__ */ r(
+              _,
+              {
+                ref: f,
+                value: W,
+                readOnly: !0,
+                onKeyDown: (e) => ie(e, {
+                  disabled: o,
+                  open: i,
+                  onOpen: () => c(!0),
+                  onCancel: h,
+                  onKeyboardOpen: () => {
+                    d.current = !0;
+                  }
+                }),
+                onClick: () => !o && c(!0),
+                placeholder: E,
+                disabled: o,
+                "data-form-control": "input",
+                className: Z("cursor-pointer", A),
+                suffix: /* @__PURE__ */ g("div", { className: "flex items-center gap-1", children: [
+                  t && t.length > 0 && !o ? /* @__PURE__ */ g(M, { children: [
+                    /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: 0,
+                        "aria-label": a("calendar.clear"),
+                        onClick: (e) => {
+                          e.stopPropagation(), C();
+                        },
+                        className: "inline-flex size-4 items-center justify-center border-none bg-transparent p-0",
+                        children: /* @__PURE__ */ r(X, { className: "size-3 hover:text-content" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ r(b, { variant: "tertiary", side: "top", children: a("calendar.clear") })
+                  ] }) : null,
+                  /* @__PURE__ */ g(M, { children: [
+                    /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: 0,
+                        "data-component": "calendar-trigger",
+                        "aria-label": a("datePicker.selectMultipleQuarters"),
+                        onClick: (e) => {
+                          e.stopPropagation(), o || c((p) => !p);
+                        },
+                        className: "inline-flex items-center justify-center border-none bg-transparent p-0",
+                        children: /* @__PURE__ */ r(Y, { className: "h-4 w-4 text-secondary-foreground" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ r(b, { variant: "tertiary", side: "top", children: a("datePicker.selectMultipleQuarters") })
+                  ] })
+                ] }),
+                ...F
+              }
+            )
+          }
+        ),
+        children: /* @__PURE__ */ r(
+          $,
+          {
+            pickerType: "quarter",
+            monthMode: "multiple",
+            selectedQuarters: P,
+            footerFlashKey: H,
+            footerFlashTarget: L,
+            onQuarterSelect: J,
+            month: q,
+            onMonthChange: B,
+            disabled: te(D, Q),
+            startMonth: N,
+            endMonth: S,
+            showFooter: s,
+            onApply: U,
+            onCancel: h,
+            onClear: C,
+            ...G
+          }
+        )
+      }
+    );
+  }
+);
+pe.displayName = "MultiQuarterPicker";
+export {
+  pe as MultiQuarterPicker
+};