impact-nova 2.0.7 → 2.0.9

package/dist/components/ui/ag-grid-react/headers/use-header-search-editing-state.d.ts

@@ -0,0 +1,34 @@
+import { ColDef, GridApi } from 'ag-grid-community';
+import { HeaderSearchCommittedState } from './derive-header-search-state';
+interface UseHeaderSearchEditingStateOptions {
+    api: GridApi;
+    colId: string;
+    colDef: ColDef | undefined;
+    isDateFilter: boolean;
+    isMonthVariant: boolean;
+    isWeekVariant: boolean;
+    datePickerVariant: "date" | "month" | "week";
+    dateDisplayFormat: string;
+}
+/**
+ * Inline header search display state.
+ *
+ * AG Grid's filter model is the source of truth. While inline search is open,
+ * AgGridWrapper skips refreshHeader on filterChanged, so this hook subscribes
+ * to filterChanged and keeps a column-scoped snapshot in React state. When the
+ * snapshot changes, committed display values are re-derived from the live filter
+ * model. While an input is focused, a draft overlays committed values so typing
+ * is not interrupted.
+ */
+export declare function useHeaderSearchEditingState(options: UseHeaderSearchEditingStateOptions): {
+    searchText: string;
+    dateDisplayString: string;
+    selectedDate: Date;
+    selectedMonth: import('../../calendar').MonthSelection;
+    selectedWeek: import('../../calendar').WeekSelection;
+    updateDraft: (patch: Partial<HeaderSearchCommittedState>) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    clearEditingOverlay: () => void;
+};
+export {};

package/dist/components/ui/ag-grid-react/headers/use-header-search-editing-state.js

@@ -0,0 +1,70 @@
+import { useCallback as V, useState as l, useEffect as b, useMemo as v } from "react";
+import { subscribeGridApiEvent as W } from "../grid-api-event-subscription.js";
+import { deriveHeaderSearchCommittedState as H } from "./derive-header-search-state.js";
+function A(D) {
+  const {
+    api: e,
+    colId: r,
+    colDef: c,
+    isDateFilter: d,
+    isMonthVariant: u,
+    isWeekVariant: m,
+    datePickerVariant: S,
+    dateDisplayFormat: f
+  } = D, n = V(
+    () => JSON.stringify(e.getFilterModel()[r] ?? null),
+    [e, r]
+  ), [y, g] = l(
+    n
+  ), [i, o] = l(null), [M, p] = l(!1);
+  b(() => W(
+    e,
+    "filterChanged",
+    () => {
+      const a = n();
+      g(
+        (F) => F === a ? F : a
+      );
+    }
+  ), [e, r, n]);
+  const h = v(() => H({
+    api: e,
+    colId: r,
+    colDef: c,
+    isDateFilter: d,
+    isMonthVariant: u,
+    isWeekVariant: m,
+    datePickerVariant: S,
+    dateDisplayFormat: f
+  }), [
+    e,
+    r,
+    c,
+    d,
+    u,
+    m,
+    S,
+    f,
+    y
+  ]), s = (t) => M && i && i[t] !== void 0 ? i[t] : h[t], k = (t) => {
+    o((a) => ({ ...h, ...a, ...t }));
+  }, C = () => p(!0), x = () => {
+    p(!1), o(null);
+  }, E = () => {
+    o(null);
+  };
+  return {
+    searchText: s("searchText"),
+    dateDisplayString: s("dateDisplayString"),
+    selectedDate: s("selectedDate"),
+    selectedMonth: s("selectedMonth"),
+    selectedWeek: s("selectedWeek"),
+    updateDraft: k,
+    handleFocus: C,
+    handleBlur: x,
+    clearEditingOverlay: E
+  };
+}
+export {
+  A as useHeaderSearchEditingState
+};

package/dist/components/ui/date-picker/date-picker.js

@@ -1,14 +1,14 @@
-import { jsxs as P, jsx as r } from "react/jsx-runtime";
+import { jsxs as x, jsx as r } from "react/jsx-runtime";
 import * as o from "react";
 import { Cross as Z, CalendarMonth as _ } from "impact-nova-icons";
-import { format as h, isValid as I, parse as N } from "date-fns";
+import { format as m, isValid as I, parse as b } from "date-fns";
 import { cn as $, padValidDateString as F, maskDate as ee } from "../../../lib/utils.js";
 import { Input as te } from "../input.js";
 import { Popover as ne, PopoverAnchor as re, PopoverContent as oe } from "../popover.js";
 import { Calendar as ce } from "../calendar.js";
 import { Tooltip as S, TooltipTrigger as E, TooltipContent as T } from "../tooltip.js";
-import { getDateFnsLocale as ie } from "../../../i18n/getDateFnsLocale.js";
-import { useImpactNovaI18n as le } from "../../../i18n/ImpactNovaI18nContext.js";
+import { getDateFnsLocale as le } from "../../../i18n/getDateFnsLocale.js";
+import { useImpactNovaI18n as ie } from "../../../i18n/ImpactNovaI18nContext.js";
 const ae = o.forwardRef(
   ({
     value: t,
@@ -20,44 +20,44 @@ const ae = o.forwardRef(
     startMonth: z,
     endMonth: B,
     showFooter: d = !0,
-    weekStartsOn: R,
+    weekStartsOn: N,
     disabled: a,
     className: O,
     ...H
   }, q) => {
-    const { locale: b, t: m } = le(), i = o.useMemo(() => ie(b), [b]), G = j ?? m("datePicker.selectDate"), g = o.useRef(null), D = o.useRef(null);
+    const { locale: R, t: h } = ie(), l = o.useMemo(() => le(R), [R]), G = j ?? h("datePicker.selectDate"), g = o.useRef(null), D = o.useRef(null);
     o.useImperativeHandle(q, () => g.current);
-    const [c, l] = o.useState(!1), k = o.useRef(!1), [v, s] = o.useState(t), [p, f] = o.useState(t ? h(t, n, { locale: i }) : ""), [J, w] = o.useState(t || /* @__PURE__ */ new Date());
+    const [c, i] = o.useState(!1), k = o.useRef(!1), [v, s] = o.useState(t), [p, f] = o.useState(t ? m(t, n, { locale: l }) : ""), [J, w] = o.useState(t || /* @__PURE__ */ new Date());
     o.useEffect(() => {
       g.current && D.current !== null && (g.current.setSelectionRange(D.current, D.current), D.current = null);
     }, [p]), o.useEffect(() => {
-      c || (f(t ? h(t, n, { locale: i }) : ""), s(t));
-    }, [t, n, c, i]), o.useEffect(() => {
+      c || (f(t ? m(t, n, { locale: l }) : ""), s(t));
+    }, [t, n, c, l]), o.useEffect(() => {
       c && (s(t), w(t || /* @__PURE__ */ new Date()));
     }, [c, t]);
     const Q = (e) => {
-      s(e), e && f(h(e, n, { locale: i })), d || (u?.(e), l(!1));
+      s(e), e && f(m(e, n, { locale: l })), d || (u?.(e), i(!1));
     }, U = (e) => {
-      u?.(e !== void 0 ? e : v), l(!1);
+      u?.(e !== void 0 ? e : v), i(!1);
     }, V = () => {
-      s(t), f(t ? h(t, n, { locale: i }) : ""), l(!1);
+      s(t), f(t ? m(t, n, { locale: l }) : ""), i(!1);
     }, A = () => {
-      s(void 0), f(""), u?.(void 0), d || l(!1);
+      s(void 0), f(""), u?.(void 0), d || i(!1);
     }, W = (e) => {
       const y = e.target.value, C = ee(y, n, p);
       if (f(C), C === "") {
         s(void 0), d || u?.(void 0);
         return;
       }
-      const x = N(C, n, /* @__PURE__ */ new Date(), { locale: i });
-      I(x) && C.length === n.length && (s(x), w(x), d || u?.(x));
+      const P = b(C, n, /* @__PURE__ */ new Date(), { locale: l });
+      I(P) && C.length === n.length && (s(P), w(P), d || u?.(P));
     }, X = () => {
       if (c) return;
-      const e = F(p, n), y = N(e, n, /* @__PURE__ */ new Date(), { locale: i });
-      !I(y) || e.length !== n.length ? (f(t ? h(t, n, { locale: i }) : ""), s(t)) : (f(e), d || u?.(y));
-    }, M = (t ? h(t, n, { locale: i }) : "") !== p, Y = p.length === n.length && !I(N(p, n, /* @__PURE__ */ new Date(), { locale: i }));
-    return /* @__PURE__ */ P(ne, { open: a ? !1 : c, onOpenChange: (e) => {
-      a || l(e);
+      const e = F(p, n), y = b(e, n, /* @__PURE__ */ new Date(), { locale: l });
+      !I(y) || e.length !== n.length ? (f(t ? m(t, n, { locale: l }) : ""), s(t)) : (f(e), d || u?.(y));
+    }, M = (t ? m(t, n, { locale: l }) : "") !== p, Y = p.length === n.length && !I(b(p, n, /* @__PURE__ */ new Date(), { locale: l }));
+    return /* @__PURE__ */ x(ne, { open: a ? !1 : c, onOpenChange: (e) => {
+      a || i(e);
     }, children: [
       /* @__PURE__ */ r(re, { asChild: !0, children: /* @__PURE__ */ r("div", { "data-component": "date-picker", "data-state": c ? "open" : "closed", "data-pending": M || void 0, children: /* @__PURE__ */ r(
         te,
@@ -66,9 +66,9 @@ const ae = o.forwardRef(
           value: p,
           onChange: W,
           onBlur: X,
-          onClick: () => !a && l(!0),
+          onClick: () => !a && i(!0),
           onKeyDown: (e) => {
-            (e.key === "Enter" || e.key === "ArrowDown") && !c && !a && (e.preventDefault(), k.current = !0, l(!0)), e.key === "Escape" && c && (e.preventDefault(), V());
+            (e.key === "Enter" || e.key === "ArrowDown") && !c && !a && (e.preventDefault(), k.current = !0, i(!0)), e.key === "Escape" && c && (e.preventDefault(), V());
           },
           placeholder: c ? n : G,
           disabled: a,
@@ -78,14 +78,14 @@ const ae = o.forwardRef(
             Y ? "text-destructive" : M ? "text-content-muted" : "",
             O
           ),
-          suffix: /* @__PURE__ */ P("div", { className: "flex items-center gap-1", children: [
-            t && !a && /* @__PURE__ */ P(S, { children: [
+          suffix: /* @__PURE__ */ x("div", { className: "flex items-center gap-1", children: [
+            t && !a && /* @__PURE__ */ x(S, { children: [
               /* @__PURE__ */ r(E, { asChild: !0, children: /* @__PURE__ */ r(
                 "button",
                 {
                   type: "button",
                   tabIndex: 0,
-                  "aria-label": m("calendar.clear"),
+                  "aria-label": h("calendar.clear"),
                   onClick: (e) => {
                     e.stopPropagation(), A();
                   },
@@ -93,15 +93,15 @@ const ae = o.forwardRef(
                   children: /* @__PURE__ */ r(Z, { className: "size-3 hover:text-content" })
                 }
               ) }),
-              /* @__PURE__ */ r(T, { variant: "tertiary", side: "top", children: m("calendar.clear") })
+              /* @__PURE__ */ r(T, { variant: "tertiary", side: "top", children: h("calendar.clear") })
             ] }),
-            /* @__PURE__ */ P(S, { children: [
-              /* @__PURE__ */ r(E, { asChild: !0, children: /* @__PURE__ */ r("button", { type: "button", tabIndex: 0, "aria-label": m("datePicker.selectDate"), onClick: (e) => {
-                e.stopPropagation(), a || l(!c);
+            /* @__PURE__ */ x(S, { children: [
+              /* @__PURE__ */ r(E, { asChild: !0, children: /* @__PURE__ */ r("button", { type: "button", tabIndex: 0, "aria-label": h("datePicker.selectDate"), onClick: (e) => {
+                e.stopPropagation(), a || i(!c);
               }, onKeyDown: (e) => {
-                (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), a || (k.current = !0, l(!c)));
+                (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), a || (k.current = !0, i(!c)));
               }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ r(_, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
-              /* @__PURE__ */ r(T, { variant: "tertiary", side: "top", children: m("datePicker.selectDate") })
+              /* @__PURE__ */ r(T, { variant: "tertiary", side: "top", children: h("datePicker.selectDate") })
             ] })
           ] }),
           ...H
@@ -112,6 +112,7 @@ const ae = o.forwardRef(
         {
           className: "w-auto p-0",
           align: "start",
+          "aria-label": h("datePicker.selectDate"),
           onOpenAutoFocus: (e) => {
             k.current || e.preventDefault(), k.current = !1;
           },
@@ -131,7 +132,7 @@ const ae = o.forwardRef(
               onCancel: V,
               onClear: A,
               captionLayout: "dropdown",
-              ...R !== void 0 ? { weekStartsOn: R } : {}
+              ...N !== void 0 ? { weekStartsOn: N } : {}
             }
           )
         }

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

@@ -214,6 +214,7 @@ const Re = d.forwardRef(
                   {
                     className: "w-auto p-0",
                     align: "start",
+                    "aria-label": P("datePicker.selectDateRange"),
                     onOpenAutoFocus: (e) => {
                       C.current || e.preventDefault(), C.current = !1;
                     },

package/dist/components/ui/date-picker/month-picker.js

@@ -1,103 +1,103 @@
-import { jsxs as M, jsx as n } from "react/jsx-runtime";
-import * as o from "react";
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import * as r from "react";
 import { Cross as L, CalendarMonth as Q } from "impact-nova-icons";
-import { isValid as C, parse as x } from "date-fns";
+import { isValid as C, parse as P } from "date-fns";
 import { cn as U, padValidDateString as W, maskDate as X } from "../../../lib/utils.js";
 import { Input as Z } from "../input.js";
 import { Popover as _, PopoverAnchor as F, PopoverContent as v } from "../popover.js";
 import { Calendar as tt } from "../calendar.js";
 import { Tooltip as I, TooltipTrigger as N, TooltipContent as T } from "../tooltip.js";
 import { useImpactNovaI18n as et } from "../../../i18n/ImpactNovaI18nContext.js";
-const c = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, nt = o.forwardRef(
+const c = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, nt = r.forwardRef(
   ({
     value: t,
     onChange: s,
     placeholder: V,
     minDate: A,
-    maxDate: R,
-    startMonth: b,
+    maxDate: b,
+    startMonth: R,
     endMonth: j,
     showFooter: l = !0,
-    disabled: m,
+    disabled: y,
     className: O,
     ...Y
   }, z) => {
-    const { t: y } = et(), B = V ?? y("datePicker.selectMonth"), P = o.useRef(null);
-    o.useRef(null), o.useImperativeHandle(z, () => P.current);
-    const [r, p] = o.useState(!1), [S, a] = o.useState(t), [d, i] = o.useState(t ? c(t) : ""), [E, g] = o.useState(t ? new Date(t.year, t.month) : /* @__PURE__ */ new Date());
-    o.useEffect(() => {
-      r || (i(t ? c(t) : ""), a(t));
-    }, [r, t]), o.useEffect(() => {
-      r && (a(t), g(t ? new Date(t.year, t.month) : /* @__PURE__ */ new Date()), i(t ? c(t) : ""));
-    }, [r, t]);
+    const { t: d } = et(), B = V ?? d("datePicker.selectMonth"), k = r.useRef(null);
+    r.useRef(null), r.useImperativeHandle(z, () => k.current);
+    const [o, p] = r.useState(!1), [x, a] = r.useState(t), [h, i] = r.useState(t ? c(t) : ""), [E, g] = r.useState(t ? new Date(t.year, t.month) : /* @__PURE__ */ new Date());
+    r.useEffect(() => {
+      o || (i(t ? c(t) : ""), a(t));
+    }, [o, t]), r.useEffect(() => {
+      o && (a(t), g(t ? new Date(t.year, t.month) : /* @__PURE__ */ new Date()), i(t ? c(t) : ""));
+    }, [o, t]);
     const $ = (e) => {
       a(e), e && i(c(e)), l || (s?.(e), p(!1));
     }, H = (e) => {
-      s?.(e !== void 0 ? e : S), p(!1);
+      s?.(e !== void 0 ? e : x), p(!1);
     }, q = () => {
       a(t), i(t ? c(t) : ""), p(!1);
-    }, k = () => {
+    }, S = () => {
       a(void 0), i(""), s?.(void 0), l || p(!1);
     }, G = (e) => {
-      const f = e.target.value, h = X(f, "MM/yyyy", d);
-      if (i(h), h === "") {
+      const f = e.target.value, m = X(f, "MM/yyyy", h);
+      if (i(m), m === "") {
         a(void 0), l || s?.(void 0);
         return;
       }
-      const u = x(h, "MM/yyyy", /* @__PURE__ */ new Date());
-      if (C(u) && h.length === 7) {
-        const D = { month: u.getMonth(), year: u.getFullYear() };
-        a(D), g(u), l || s?.(D);
+      const M = P(m, "MM/yyyy", /* @__PURE__ */ new Date());
+      if (C(M) && m.length === 7) {
+        const D = { month: M.getMonth(), year: M.getFullYear() };
+        a(D), g(M), l || s?.(D);
       }
     }, J = () => {
-      if (r) return;
-      const e = W(d, "MM/yyyy"), f = x(e, "MM/yyyy", /* @__PURE__ */ new Date());
+      if (o) return;
+      const e = W(h, "MM/yyyy"), f = P(e, "MM/yyyy", /* @__PURE__ */ new Date());
       if (!C(f) || e.length !== 7)
         i(t ? c(t) : ""), a(t);
       else if (i(e), !l) {
-        const h = { month: f.getMonth(), year: f.getFullYear() };
-        s?.(h);
+        const m = { month: f.getMonth(), year: f.getFullYear() };
+        s?.(m);
       }
-    }, w = (t ? c(t) : "") !== d, K = d.length === 7 && !C(x(d, "MM/yyyy", /* @__PURE__ */ new Date()));
-    return /* @__PURE__ */ M(_, { open: m ? !1 : r, onOpenChange: (e) => {
-      m || p(e);
+    }, w = (t ? c(t) : "") !== h, K = h.length === 7 && !C(P(h, "MM/yyyy", /* @__PURE__ */ new Date()));
+    return /* @__PURE__ */ u(_, { open: y ? !1 : o, onOpenChange: (e) => {
+      y || p(e);
     }, children: [
-      /* @__PURE__ */ n(F, { asChild: !0, children: /* @__PURE__ */ n("div", { "data-component": "month-picker", "data-state": r ? "open" : "closed", "data-pending": w || void 0, children: /* @__PURE__ */ n(
+      /* @__PURE__ */ n(F, { asChild: !0, children: /* @__PURE__ */ n("div", { "data-component": "month-picker", "data-state": o ? "open" : "closed", "data-pending": w || void 0, children: /* @__PURE__ */ n(
         Z,
         {
-          ref: P,
-          value: d,
+          ref: k,
+          value: h,
           onChange: G,
           onBlur: J,
-          onClick: () => !m && p(!0),
-          placeholder: r ? y("datePicker.monthYearFormat") : B,
-          disabled: m,
+          onClick: () => !y && p(!0),
+          placeholder: o ? d("datePicker.monthYearFormat") : B,
+          disabled: y,
           "data-form-control": "input",
           className: U(
             "cursor-pointer",
             K ? "text-destructive" : w ? "text-content-muted" : "",
             O
           ),
-          suffix: /* @__PURE__ */ M("div", { className: "flex items-center gap-1", children: [
-            t && !m && /* @__PURE__ */ M(I, { children: [
+          suffix: /* @__PURE__ */ u("div", { className: "flex items-center gap-1", children: [
+            t && !y && /* @__PURE__ */ u(I, { children: [
               /* @__PURE__ */ n(N, { asChild: !0, children: /* @__PURE__ */ n(
                 "button",
                 {
                   type: "button",
                   tabIndex: 0,
-                  "aria-label": y("calendar.clear"),
+                  "aria-label": d("calendar.clear"),
                   onClick: (e) => {
-                    e.stopPropagation(), k();
+                    e.stopPropagation(), S();
                   },
                   className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
                   children: /* @__PURE__ */ n(L, { className: "size-3 hover:text-content" })
                 }
               ) }),
-              /* @__PURE__ */ n(T, { variant: "tertiary", side: "top", children: y("calendar.clear") })
+              /* @__PURE__ */ n(T, { variant: "tertiary", side: "top", children: d("calendar.clear") })
             ] }),
-            /* @__PURE__ */ M(I, { children: [
+            /* @__PURE__ */ u(I, { children: [
               /* @__PURE__ */ n(N, { asChild: !0, children: /* @__PURE__ */ n(Q, { className: "h-4 w-4 text-secondary-foreground" }) }),
-              /* @__PURE__ */ n(T, { variant: "tertiary", side: "top", children: y("datePicker.selectMonth") })
+              /* @__PURE__ */ n(T, { variant: "tertiary", side: "top", children: d("datePicker.selectMonth") })
             ] })
           ] }),
           ...Y
@@ -108,23 +108,24 @@ const c = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, nt =
         {
           className: "w-auto p-0",
           align: "start",
+          "aria-label": d("datePicker.selectMonth"),
           onOpenAutoFocus: (e) => e.preventDefault(),
           children: /* @__PURE__ */ n(
             tt,
             {
               pickerType: "month",
               monthMode: "single",
-              selectedMonths: S,
+              selectedMonths: x,
               onMonthSelect: $,
               month: E,
               onMonthChange: g,
-              disabled: { before: A, after: R },
-              startMonth: b,
+              disabled: { before: A, after: b },
+              startMonth: R,
               endMonth: j,
               showFooter: l,
               onApply: H,
               onCancel: q,
-              onClear: k
+              onClear: S
             }
           )
         }

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

@@ -1,7 +1,7 @@
 import { jsxs as h, jsx as i } from "react/jsx-runtime";
 import * as u from "react";
 import { Cross as ht, CalendarMonth as gt, Info as J } from "impact-nova-icons";
-import { isValid as Y, parse as y } from "date-fns";
+import { isValid as y, parse as w } from "date-fns";
 import { cn as x, padValidDateString as R, maskDate as L } from "../../../lib/utils.js";
 import { Popover as xt, PopoverAnchor as Mt, PopoverContent as Yt } from "../popover.js";
 import { Calendar as yt } from "../calendar.js";
@@ -33,55 +33,55 @@ const p = (e, s = "MM/YYYY") => {
     displayFormat: a = "MM/YYYY",
     ...et
   }, nt) => {
-    const { t: w } = wt();
-    A ?? w("datePicker.selectMonthRange");
+    const { t: Y } = wt();
+    A ?? Y("datePicker.selectMonthRange");
     const H = u.useRef(null), ot = u.useRef(null), c = u.useMemo(
       () => a === "YYYY/MM" ? "yyyy/MM" : "MM/yyyy",
       [a]
     );
     u.useImperativeHandle(nt, () => H.current);
-    const [l, g] = u.useState(!1), V = u.useRef(!1), [P, b] = u.useState(e), [k, N] = u.useState(e?.from ? p(e.from, a) : ""), [D, v] = u.useState(e?.to ? p(e.to, a) : ""), [rt, j] = u.useState(() => e?.from ? new Date(e.from.year, e.from.month, 1) : I || /* @__PURE__ */ new Date());
+    const [l, g] = u.useState(!1), V = u.useRef(!1), [v, b] = u.useState(e), [k, N] = u.useState(e?.from ? p(e.from, a) : ""), [D, P] = u.useState(e?.to ? p(e.to, a) : ""), [rt, j] = u.useState(() => e?.from ? new Date(e.from.year, e.from.month, 1) : I || /* @__PURE__ */ new Date());
     u.useEffect(() => {
-      l || (N(e?.from ? p(e.from, a) : ""), v(e?.to ? p(e.to, a) : ""), b(e));
+      l || (N(e?.from ? p(e.from, a) : ""), P(e?.to ? p(e.to, a) : ""), b(e));
     }, [l, e, a]), u.useEffect(() => {
-      l && (b(e), N(e?.from ? p(e.from, a) : ""), v(e?.to ? p(e.to, a) : ""), j(e?.from ? new Date(e.from.year, e.from.month, 1) : I || /* @__PURE__ */ new Date()));
+      l && (b(e), N(e?.from ? p(e.from, a) : ""), P(e?.to ? p(e.to, a) : ""), j(e?.from ? new Date(e.from.year, e.from.month, 1) : I || /* @__PURE__ */ new Date()));
     }, [l, e, a, I]);
     const at = (t) => {
-      b(t), t?.from && N(p(t.from, a)), t?.to && v(p(t.to, a)), !M && t?.from && t?.to && (t.from.month !== t.to.month || t.from.year !== t.to.year) && (s?.(t), g(!1));
+      b(t), t?.from && N(p(t.from, a)), t?.to && P(p(t.to, a)), !M && t?.from && t?.to && (t.from.month !== t.to.month || t.from.year !== t.to.year) && (s?.(t), g(!1));
     }, st = (t) => {
-      s?.(t !== void 0 ? t : P), g(!1);
+      s?.(t !== void 0 ? t : v), g(!1);
     }, K = () => {
-      b(e), N(e?.from ? p(e.from, a) : ""), v(e?.to ? p(e.to, a) : ""), g(!1);
+      b(e), N(e?.from ? p(e.from, a) : ""), P(e?.to ? p(e.to, a) : ""), g(!1);
     }, $ = () => {
-      b(void 0), N(""), v(""), s?.(void 0), M || g(!1);
+      b(void 0), N(""), P(""), s?.(void 0), M || g(!1);
     }, ct = (t) => {
       const f = t.target.value, r = L(f, c, k);
       if (N(r), r === "") {
-        const o = { from: void 0, to: P?.to };
+        const o = { from: void 0, to: v?.to };
         b(o), M || s?.(o);
         return;
       }
-      const n = y(r, c, /* @__PURE__ */ new Date());
-      if (Y(n) && r.length === 7) {
-        const d = { from: { month: n.getMonth(), year: n.getFullYear() }, to: P?.to };
+      const n = w(r, c, /* @__PURE__ */ new Date());
+      if (y(n) && r.length === 7) {
+        const d = { from: { month: n.getMonth(), year: n.getFullYear() }, to: v?.to };
         b(d), j(n), M || s?.(d);
       }
     }, it = (t) => {
       const f = t.target.value, r = L(f, c, D);
-      if (v(r), r === "") {
-        const o = { from: P?.from, to: void 0 };
+      if (P(r), r === "") {
+        const o = { from: v?.from, to: void 0 };
         b(o), M || s?.(o);
         return;
       }
-      const n = y(r, c, /* @__PURE__ */ new Date());
-      if (Y(n) && r.length === 7) {
-        const o = { month: n.getMonth(), year: n.getFullYear() }, d = { from: P?.from, to: o };
+      const n = w(r, c, /* @__PURE__ */ new Date());
+      if (y(n) && r.length === 7) {
+        const o = { month: n.getMonth(), year: n.getFullYear() }, d = { from: v?.from, to: o };
         b(d), j(n), M || s?.(d);
       }
     }, T = () => {
       if (l) return;
-      const t = R(k, c), f = R(D, c), r = y(t, c, /* @__PURE__ */ new Date()), n = y(f, c, /* @__PURE__ */ new Date()), o = Y(r) && t.length === 7, d = Y(n) && f.length === 7;
-      k && !o ? N(e?.from ? p(e.from, a) : "") : o && N(t), D && !d ? v(e?.to ? p(e.to, a) : "") : d && v(f), o && d && !M ? s?.({
+      const t = R(k, c), f = R(D, c), r = w(t, c, /* @__PURE__ */ new Date()), n = w(f, c, /* @__PURE__ */ new Date()), o = y(r) && t.length === 7, d = y(n) && f.length === 7;
+      k && !o ? N(e?.from ? p(e.from, a) : "") : o && N(t), D && !d ? P(e?.to ? p(e.to, a) : "") : d && P(f), o && d && !M ? s?.({
         from: { month: r.getMonth(), year: r.getFullYear() },
         to: { month: n.getMonth(), year: n.getFullYear() }
       }) : o && !M ? s?.({
@@ -91,7 +91,7 @@ const p = (e, s = "MM/YYYY") => {
         from: e?.from,
         to: { month: n.getMonth(), year: n.getFullYear() }
       });
-    }, lt = e?.from ? p(e.from, a) : "", dt = e?.to ? p(e.to, a) : "", ft = k !== lt, mt = D !== dt, pt = k.length === 7 && !Y(y(k, c, /* @__PURE__ */ new Date())), ut = D.length === 7 && !Y(y(D, c, /* @__PURE__ */ new Date())), q = w("datePicker.startMonth"), G = w("datePicker.endMonth");
+    }, lt = e?.from ? p(e.from, a) : "", dt = e?.to ? p(e.to, a) : "", ft = k !== lt, mt = D !== dt, pt = k.length === 7 && !y(w(k, c, /* @__PURE__ */ new Date())), ut = D.length === 7 && !y(w(D, c, /* @__PURE__ */ new Date())), q = Y("datePicker.startMonth"), G = Y("datePicker.endMonth");
     return /* @__PURE__ */ h("div", { className: "flex w-full min-w-[240px] flex-col gap-[6px]", "data-component": "month-range-picker", "data-disabled": m || void 0, children: [
       /* @__PURE__ */ h("div", { className: "flex flex-col gap-[6px]", children: [
         O && /* @__PURE__ */ h(
@@ -146,7 +146,7 @@ const p = (e, s = "MM/YYYY") => {
                             onKeyDown: (t) => {
                               if (t.key === "Enter" && !l) {
                                 t.preventDefault();
-                                const f = R(k, c), r = R(D, c), n = y(f, c, /* @__PURE__ */ new Date()), o = y(r, c, /* @__PURE__ */ new Date()), d = Y(n) && f.length === 7, C = Y(o) && r.length === 7;
+                                const f = R(k, c), r = R(D, c), n = w(f, c, /* @__PURE__ */ new Date()), o = w(r, c, /* @__PURE__ */ new Date()), d = y(n) && f.length === 7, C = y(o) && r.length === 7;
                                 d && C ? s?.({
                                   from: { month: n.getMonth(), year: n.getFullYear() },
                                   to: { month: o.getMonth(), year: o.getFullYear() }
@@ -160,7 +160,7 @@ const p = (e, s = "MM/YYYY") => {
                               }
                               t.key === "ArrowDown" && !l && !m && (t.preventDefault(), V.current = !0, g(!0)), t.key === "Escape" && l && (t.preventDefault(), K());
                             },
-                            placeholder: l ? a === "YYYY/MM" ? "YYYY/MM" : w("datePicker.monthYearFormat") : q,
+                            placeholder: l ? a === "YYYY/MM" ? "YYYY/MM" : Y("datePicker.monthYearFormat") : q,
                             disabled: !!m,
                             "aria-label": q,
                             "data-field": "start",
@@ -183,7 +183,7 @@ const p = (e, s = "MM/YYYY") => {
                             onKeyDown: (t) => {
                               if (t.key === "Enter" && !l) {
                                 t.preventDefault();
-                                const f = R(k, c), r = R(D, c), n = y(f, c, /* @__PURE__ */ new Date()), o = y(r, c, /* @__PURE__ */ new Date()), d = Y(n) && f.length === 7, C = Y(o) && r.length === 7;
+                                const f = R(k, c), r = R(D, c), n = w(f, c, /* @__PURE__ */ new Date()), o = w(r, c, /* @__PURE__ */ new Date()), d = y(n) && f.length === 7, C = y(o) && r.length === 7;
                                 d && C ? s?.({
                                   from: { month: n.getMonth(), year: n.getFullYear() },
                                   to: { month: o.getMonth(), year: o.getFullYear() }
@@ -197,7 +197,7 @@ const p = (e, s = "MM/YYYY") => {
                               }
                               t.key === "ArrowDown" && !l && !m && (t.preventDefault(), V.current = !0, g(!0)), t.key === "Escape" && l && (t.preventDefault(), K());
                             },
-                            placeholder: l ? a === "YYYY/MM" ? "YYYY/MM" : w("datePicker.monthYearFormat") : G,
+                            placeholder: l ? a === "YYYY/MM" ? "YYYY/MM" : Y("datePicker.monthYearFormat") : G,
                             disabled: !!m,
                             "aria-label": G,
                             "data-field": "end",
@@ -215,7 +215,7 @@ const p = (e, s = "MM/YYYY") => {
                             {
                               type: "button",
                               tabIndex: 0,
-                              "aria-label": w("calendar.clear"),
+                              "aria-label": Y("calendar.clear"),
                               onClick: (t) => {
                                 t.stopPropagation(), $();
                               },
@@ -226,15 +226,15 @@ const p = (e, s = "MM/YYYY") => {
                               children: /* @__PURE__ */ i(ht, { className: "size-3 hover:text-content text-content-muted" })
                             }
                           ) }),
-                          /* @__PURE__ */ i(W, { variant: "tertiary", side: "top", children: w("calendar.clear") })
+                          /* @__PURE__ */ i(W, { variant: "tertiary", side: "top", children: Y("calendar.clear") })
                         ] }),
                         /* @__PURE__ */ h(Q, { children: [
-                          /* @__PURE__ */ i(U, { asChild: !0, children: /* @__PURE__ */ i("button", { type: "button", tabIndex: 0, "aria-label": w("datePicker.selectMonthRange"), onClick: (t) => {
+                          /* @__PURE__ */ i(U, { asChild: !0, children: /* @__PURE__ */ i("button", { type: "button", tabIndex: 0, "aria-label": Y("datePicker.selectMonthRange"), onClick: (t) => {
                             t.stopPropagation(), m || g(!l);
                           }, onKeyDown: (t) => {
                             (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), m || (V.current = !0, g(!l)));
                           }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ i(gt, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
-                          /* @__PURE__ */ i(W, { variant: "tertiary", side: "top", children: w("datePicker.selectMonthRange") })
+                          /* @__PURE__ */ i(W, { variant: "tertiary", side: "top", children: Y("datePicker.selectMonthRange") })
                         ] })
                       ] })
                     ]
@@ -245,6 +245,7 @@ const p = (e, s = "MM/YYYY") => {
                   {
                     className: "w-auto p-0",
                     align: "start",
+                    "aria-label": Y("datePicker.selectMonthRange"),
                     onOpenAutoFocus: (t) => {
                       V.current || t.preventDefault(), V.current = !1;
                     },
@@ -253,7 +254,7 @@ const p = (e, s = "MM/YYYY") => {
                       {
                         pickerType: "month",
                         monthMode: "range",
-                        selectedMonths: P,
+                        selectedMonths: v,
                         onMonthSelect: at,
                         month: rt,
                         onMonthChange: j,