impact-nova 1.3.0 → 1.5.2

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

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

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

@@ -1,127 +1,130 @@
 import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import * as s from "react";
-import { X as dt } from "lucide-react";
-import { CalendarMonth as st, Info as at } from "../../../icons/index.js";
-import { isValid as b, parse as w } from "date-fns";
-import { cn as S, padValidDateString as T, maskDate as A } from "../../../lib/utils.js";
-import { Popover as it, PopoverTrigger as ct, PopoverContent as lt } from "../popover.js";
-import { Calendar as mt } from "../calendar.js";
-import { Tooltip as j, TooltipTrigger as B, TooltipContent as O } from "../tooltip.js";
-const n = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, ft = s.forwardRef(
+import * as d from "react";
+import { X as ct } from "lucide-react";
+import { CalendarMonth as lt, Info as mt } from "../../../icons/index.js";
+import { isValid as w, parse as S } from "date-fns";
+import { cn as P, padValidDateString as A, maskDate as j } from "../../../lib/utils.js";
+import { Popover as ft, PopoverTrigger as pt, PopoverContent as ht } from "../popover.js";
+import { Calendar as yt } from "../calendar.js";
+import { Tooltip as B, TooltipTrigger as O, TooltipContent as $ } from "../tooltip.js";
+import { useImpactNovaI18n as ut } from "../../../i18n/ImpactNovaI18nContext.js";
+const n = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, gt = d.forwardRef(
   ({
     value: t,
     onChange: l,
-    placeholder: pt = "Select Month Range",
-    minDate: $,
-    maxDate: z,
-    startMonth: H,
-    endMonth: X,
+    placeholder: z,
+    minDate: H,
+    maxDate: X,
+    startMonth: q,
+    endMonth: v,
     showFooter: p = !0,
-    disabled: g,
-    className: q,
-    isError: C,
+    disabled: x,
+    className: F,
+    isError: k,
     size: N,
-    label: D,
-    helperText: I,
+    label: I,
+    helperText: D,
     required: G,
-    prefix: ht,
-    prefixClick: yt,
+    prefix: xt,
+    prefixClick: Mt,
     ...J
   }, K) => {
-    const Y = s.useRef(null), L = s.useRef(null);
-    s.useRef(null), s.useRef(null), s.useImperativeHandle(K, () => Y.current);
-    const [a, P] = s.useState(!1), [k, i] = s.useState(t), [x, h] = s.useState(t?.from ? n(t.from) : ""), [M, y] = s.useState(t?.to ? n(t.to) : ""), [Q, R] = s.useState(() => t?.from ? new Date(t.from.year, t.from.month, 1) : /* @__PURE__ */ new Date());
-    s.useEffect(() => {
-      a || (h(t?.from ? n(t.from) : ""), y(t?.to ? n(t.to) : ""), i(t));
-    }, [a, t]), s.useEffect(() => {
-      a && (i(t), h(t?.from ? n(t.from) : ""), y(t?.to ? n(t.to) : ""), R(t?.from ? new Date(t.from.year, t.from.month, 1) : /* @__PURE__ */ new Date()));
-    }, [a, t]);
+    const { t: u } = ut();
+    z ?? u("datePicker.selectMonthRange");
+    const V = d.useRef(null), L = d.useRef(null);
+    d.useRef(null), d.useRef(null), d.useImperativeHandle(K, () => V.current);
+    const [s, R] = d.useState(!1), [E, i] = d.useState(t), [M, h] = d.useState(t?.from ? n(t.from) : ""), [b, y] = d.useState(t?.to ? n(t.to) : ""), [Q, C] = d.useState(() => t?.from ? new Date(t.from.year, t.from.month, 1) : /* @__PURE__ */ new Date());
+    d.useEffect(() => {
+      s || (h(t?.from ? n(t.from) : ""), y(t?.to ? n(t.to) : ""), i(t));
+    }, [s, t]), d.useEffect(() => {
+      s && (i(t), h(t?.from ? n(t.from) : ""), y(t?.to ? n(t.to) : ""), C(t?.from ? new Date(t.from.year, t.from.month, 1) : /* @__PURE__ */ new Date()));
+    }, [s, t]);
     const U = (e) => {
-      i(e), e?.from && h(n(e.from)), e?.to && y(n(e.to)), !p && e?.from && e?.to && (e.from.month !== e.to.month || e.from.year !== e.to.year) && (l?.(e), P(!1));
+      i(e), e?.from && h(n(e.from)), e?.to && y(n(e.to)), !p && e?.from && e?.to && (e.from.month !== e.to.month || e.from.year !== e.to.year) && (l?.(e), R(!1));
     }, W = (e) => {
-      l?.(e !== void 0 ? e : k), P(!1);
+      l?.(e !== void 0 ? e : E), R(!1);
     }, Z = () => {
-      i(t), h(t?.from ? n(t.from) : ""), y(t?.to ? n(t.to) : ""), P(!1);
-    }, V = () => {
-      i(void 0), h(""), y(""), l?.(void 0), p || P(!1);
-    }, v = (e) => {
-      const m = e.target.value, r = A(m, "MM/yyyy", x);
+      i(t), h(t?.from ? n(t.from) : ""), y(t?.to ? n(t.to) : ""), R(!1);
+    }, T = () => {
+      i(void 0), h(""), y(""), l?.(void 0), p || R(!1);
+    }, _ = (e) => {
+      const m = e.target.value, r = j(m, "MM/yyyy", M);
       if (h(r), r === "") {
         const c = { from: void 0, to: t?.to };
         i(c), p || l?.(c);
         return;
       }
-      const d = w(r, "MM/yyyy", /* @__PURE__ */ new Date());
-      if (b(d) && r.length === 7) {
-        const u = { from: { month: d.getMonth(), year: d.getFullYear() }, to: t?.to };
-        i(u), R(d), p || l?.(u);
+      const a = S(r, "MM/yyyy", /* @__PURE__ */ new Date());
+      if (w(a) && r.length === 7) {
+        const g = { from: { month: a.getMonth(), year: a.getFullYear() }, to: t?.to };
+        i(g), C(a), p || l?.(g);
       }
-    }, F = (e) => {
-      const m = e.target.value, r = A(m, "MM/yyyy", M);
+    }, tt = (e) => {
+      const m = e.target.value, r = j(m, "MM/yyyy", b);
       if (y(r), r === "") {
         const c = { from: t?.from, to: void 0 };
         i(c), p || l?.(c);
         return;
       }
-      const d = w(r, "MM/yyyy", /* @__PURE__ */ new Date());
-      if (b(d) && r.length === 7) {
-        const c = { month: d.getMonth(), year: d.getFullYear() }, u = { from: t?.from, to: c };
-        i(u), R(d), p || l?.(u);
+      const a = S(r, "MM/yyyy", /* @__PURE__ */ new Date());
+      if (w(a) && r.length === 7) {
+        const c = { month: a.getMonth(), year: a.getFullYear() }, g = { from: t?.from, to: c };
+        i(g), C(a), p || l?.(g);
       }
-    }, E = () => {
-      if (a) return;
-      const e = T(x, "MM/yyyy"), m = T(M, "MM/yyyy"), r = w(e, "MM/yyyy", /* @__PURE__ */ new Date()), d = w(m, "MM/yyyy", /* @__PURE__ */ new Date()), c = b(r) && e.length === 7, u = b(d) && m.length === 7;
-      !c || !u ? (h(t?.from ? n(t.from) : ""), y(t?.to ? n(t.to) : ""), i(t)) : (h(e), y(m), p || l?.({
+    }, Y = () => {
+      if (s) return;
+      const e = A(M, "MM/yyyy"), m = A(b, "MM/yyyy"), r = S(e, "MM/yyyy", /* @__PURE__ */ new Date()), a = S(m, "MM/yyyy", /* @__PURE__ */ new Date()), c = w(r) && e.length === 7, g = w(a) && m.length === 7;
+      !c || !g ? (h(t?.from ? n(t.from) : ""), y(t?.to ? n(t.to) : ""), i(t)) : (h(e), y(m), p || l?.({
         from: { month: r.getMonth(), year: r.getFullYear() },
-        to: { month: d.getMonth(), year: d.getFullYear() }
+        to: { month: a.getMonth(), year: a.getFullYear() }
       }));
-    }, _ = t?.from ? n(t.from) : "", tt = t?.to ? n(t.to) : "", et = x !== _, ot = M !== tt, nt = x.length === 7 && !b(w(x, "MM/yyyy", /* @__PURE__ */ new Date())), rt = M.length === 7 && !b(w(M, "MM/yyyy", /* @__PURE__ */ new Date()));
-    return /* @__PURE__ */ f("div", { className: "w-full space-y-1.5 min-w-[240px]", "data-component": "month-range-picker", "data-disabled": g || void 0, children: [
-      D && /* @__PURE__ */ f(
+    }, et = t?.from ? n(t.from) : "", ot = t?.to ? n(t.to) : "", nt = M !== et, rt = b !== ot, at = M.length === 7 && !w(S(M, "MM/yyyy", /* @__PURE__ */ new Date())), dt = b.length === 7 && !w(S(b, "MM/yyyy", /* @__PURE__ */ new Date())), st = u("datePicker.startMonth"), it = u("datePicker.endMonth");
+    return /* @__PURE__ */ f("div", { className: "w-full space-y-1.5 min-w-[240px]", "data-component": "month-range-picker", "data-disabled": x || void 0, children: [
+      I && /* @__PURE__ */ f(
         "label",
         {
-          className: S(
+          className: P(
             "text-xs font-medium leading-[18px] text-[#60697d]",
-            g && "opacity-70",
-            C && "text-destructive"
+            x && "opacity-70",
+            k && "text-destructive"
           ),
           children: [
-            D,
+            I,
             " ",
             G && /* @__PURE__ */ o("span", { className: "text-destructive", children: "*" })
           ]
         }
       ),
-      /* @__PURE__ */ f(it, { open: a, onOpenChange: P, children: [
-        /* @__PURE__ */ o(ct, { asChild: !0, children: /* @__PURE__ */ f(
+      /* @__PURE__ */ f(ft, { open: s, onOpenChange: R, children: [
+        /* @__PURE__ */ o(pt, { asChild: !0, children: /* @__PURE__ */ f(
           "div",
           {
-            "data-state": a ? "open" : "closed",
-            className: S(
+            "data-state": s ? "open" : "closed",
+            className: P(
               "flex w-full items-center justify-between gap-2 rounded-md border bg-white px-3 text-sm shadow-sm transition-colors hover:border-primary disabled:cursor-not-allowed disabled:bg-disabled-secondary-bg disabled:text-disabled-text disabled:border-border",
-              C ? "border-destructive hover:border-destructive" : "border-input",
+              k ? "border-destructive hover:border-destructive" : "border-input",
               N === "sm" ? "h-6" : N === "md" ? "h-[28px]" : "h-8",
-              g && "pointer-events-none opacity-100 bg-disabled-secondary-bg border-border text-disabled-text hover:border-border",
+              x && "pointer-events-none opacity-100 bg-disabled-secondary-bg border-border text-disabled-text hover:border-border",
               "cursor-pointer",
-              q
+              F
             ),
             children: [
               /* @__PURE__ */ f("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
                 /* @__PURE__ */ o(
                   "input",
                   {
-                    ref: Y,
+                    ref: V,
                     type: "text",
-                    value: x,
-                    onChange: v,
-                    onBlur: E,
-                    onClick: (e) => a && e.stopPropagation(),
-                    placeholder: a ? "MM/YYYY" : "Start Month",
-                    disabled: !!g,
+                    value: M,
+                    onChange: _,
+                    onBlur: Y,
+                    onClick: (e) => s && e.stopPropagation(),
+                    placeholder: s ? u("datePicker.monthYearFormat") : st,
+                    disabled: !!x,
                     "data-field": "start",
-                    className: S(
+                    className: P(
                       "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-[#dfe2e7] disabled:cursor-not-allowed disabled:opacity-50",
-                      nt ? "text-destructive" : et ? "text-muted-foreground" : ""
+                      at ? "text-destructive" : nt ? "text-muted-foreground" : ""
                     ),
                     ...J
                   }
@@ -131,85 +134,85 @@ const n = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, ft =
                   {
                     ref: L,
                     type: "text",
-                    value: M,
-                    onChange: F,
-                    onBlur: E,
-                    onClick: (e) => a && e.stopPropagation(),
-                    placeholder: a ? "MM/YYYY" : "End Month",
-                    disabled: !!g,
+                    value: b,
+                    onChange: tt,
+                    onBlur: Y,
+                    onClick: (e) => s && e.stopPropagation(),
+                    placeholder: s ? u("datePicker.monthYearFormat") : it,
+                    disabled: !!x,
                     "data-field": "end",
-                    className: S(
+                    className: P(
                       "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-[#dfe2e7] disabled:cursor-not-allowed disabled:opacity-50",
-                      rt ? "text-destructive" : ot ? "text-muted-foreground" : ""
+                      dt ? "text-destructive" : rt ? "text-muted-foreground" : ""
                     )
                   }
                 )
               ] }),
               /* @__PURE__ */ f("div", { className: "flex items-center gap-1 shrink-0", children: [
-                t?.from && !g && /* @__PURE__ */ f(j, { children: [
-                  /* @__PURE__ */ o(B, { asChild: !0, children: /* @__PURE__ */ o(
-                    dt,
+                t?.from && !x && /* @__PURE__ */ f(B, { children: [
+                  /* @__PURE__ */ o(O, { asChild: !0, children: /* @__PURE__ */ o(
+                    ct,
                     {
                       className: "h-4 w-4 cursor-pointer hover:text-foreground text-muted-foreground",
                       onClick: (e) => {
-                        e.stopPropagation(), V();
+                        e.stopPropagation(), T();
                       }
                     }
                   ) }),
-                  /* @__PURE__ */ o(O, { variant: "tertiary", side: "top", children: "Clear" })
+                  /* @__PURE__ */ o($, { variant: "tertiary", side: "top", children: u("calendar.clear") })
                 ] }),
-                /* @__PURE__ */ f(j, { children: [
-                  /* @__PURE__ */ o(B, { asChild: !0, children: /* @__PURE__ */ o(st, { className: "h-4 w-4 text-secondary-foreground" }) }),
-                  /* @__PURE__ */ o(O, { variant: "tertiary", side: "top", children: "Pick a range" })
+                /* @__PURE__ */ f(B, { children: [
+                  /* @__PURE__ */ o(O, { asChild: !0, children: /* @__PURE__ */ o(lt, { className: "h-4 w-4 text-secondary-foreground" }) }),
+                  /* @__PURE__ */ o($, { variant: "tertiary", side: "top", children: u("datePicker.selectMonthRange") })
                 ] })
               ] })
             ]
           }
         ) }),
         /* @__PURE__ */ o(
-          lt,
+          ht,
           {
             className: "w-auto p-0",
             align: "start",
             onOpenAutoFocus: (e) => e.preventDefault(),
             children: /* @__PURE__ */ o(
-              mt,
+              yt,
               {
                 pickerType: "month",
                 monthMode: "range",
-                selectedMonths: k,
+                selectedMonths: E,
                 onMonthSelect: U,
                 month: Q,
-                onMonthChange: R,
-                disabled: { before: $, after: z },
-                startMonth: H,
-                endMonth: X,
+                onMonthChange: C,
+                disabled: { before: H, after: X },
+                startMonth: q,
+                endMonth: v,
                 showFooter: p,
                 onApply: W,
                 onCancel: Z,
-                onClear: V
+                onClear: T
               }
             )
           }
         )
       ] }),
-      I && /* @__PURE__ */ f("div", { className: S("flex items-center gap-1", C && "text-destructive"), children: [
-        !C && /* @__PURE__ */ o(at, { size: 10, className: "shrink-0 text-muted-foreground" }),
+      D && /* @__PURE__ */ f("div", { className: P("flex items-center gap-1", k && "text-destructive"), children: [
+        !k && /* @__PURE__ */ o(mt, { size: 10, className: "shrink-0 text-muted-foreground" }),
         /* @__PURE__ */ o(
           "p",
           {
-            className: S(
+            className: P(
               "text-[10px] text-[#7a8294]",
-              C && "text-destructive"
+              k && "text-destructive"
             ),
-            children: I
+            children: D
           }
         )
       ] })
     ] });
   }
 );
-ft.displayName = "MonthRangePicker";
+gt.displayName = "MonthRangePicker";
 export {
-  ft as MonthRangePicker
+  gt as MonthRangePicker
 };