impact-nova 2.5.18 → 2.5.20

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

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

package/dist/form-react/Fields/DateRangeField.js

@@ -1,50 +1,50 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import "react";
-import { Controller as g } from "react-hook-form";
+import { Controller as S } from "react-hook-form";
 import { DateRangePicker as v } from "../../components/forms/date-picker/date-range-picker.js";
-import { toLocalDate as a } from "../utils/calendar-boundary.js";
-import { handleMinMaxProp as S } from "../utils/date.utils.js";
-const T = ({
+import { toLocalDate as c } from "../utils/calendar-boundary.js";
+import { resolveDateRangeMinMax as P } from "../utils/date.utils.js";
+const Y = ({
   field: r,
-  validationRules: h,
+  validationRules: d,
   isDisabled: l,
-  formHelpers: s
+  formHelpers: n
 }) => {
   const t = r.fieldType === "date_range" ? r : null;
   if (!t) return null;
-  const c = s.form.control, { minDate: m, maxDate: u } = S(t);
-  return /* @__PURE__ */ n(
-    g,
+  const h = n.form.control, { minDate: m, maxDate: u, startMonth: p, endMonth: g } = P(t);
+  return /* @__PURE__ */ a(
+    S,
     {
       name: r.id,
-      control: c,
+      control: h,
       disabled: l,
-      rules: h,
-      render: ({ field: p, fieldState: i }) => {
-        const d = !!i.error, e = p.value;
-        return /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n(
+      rules: d,
+      render: ({ field: f, fieldState: s }) => {
+        const i = !!s.error, o = f.value;
+        return /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
           v,
           {
             label: r.label,
             minDate: m,
             maxDate: u,
-            startMonth: t.startMonth ? a(t.startMonth) : void 0,
-            endMonth: t.endMonth ? a(t.endMonth) : void 0,
+            startMonth: p,
+            endMonth: g,
             value: {
-              from: e?.start ? a(e.start) : void 0,
-              to: e?.end ? a(e.end) : void 0
+              from: o?.start ? c(o.start) : void 0,
+              to: o?.end ? c(o.end) : void 0
             },
-            onChange: (o) => {
-              const M = o?.from ? `${o.from.getFullYear()}-${String(o.from.getMonth() + 1).padStart(2, "0")}-${String(o.from.getDate()).padStart(2, "0")}` : null, f = o?.to ? `${o.to.getFullYear()}-${String(o.to.getMonth() + 1).padStart(2, "0")}-${String(o.to.getDate()).padStart(2, "0")}` : null;
-              s.setValue(r.id, { start: M, end: f });
+            onChange: (e) => {
+              const M = e?.from ? `${e.from.getFullYear()}-${String(e.from.getMonth() + 1).padStart(2, "0")}-${String(e.from.getDate()).padStart(2, "0")}` : null, D = e?.to ? `${e.to.getFullYear()}-${String(e.to.getMonth() + 1).padStart(2, "0")}-${String(e.to.getDate()).padStart(2, "0")}` : null;
+              n.setValue(r.id, { start: M, end: D });
             },
             startPlaceholder: t.startPlaceholder || "Start Date",
             endPlaceholder: t.endPlaceholder || "End Date",
             placeholder: r.placeholder,
             required: r.isRequired,
             disabled: l,
-            error: d,
-            helperText: d ? i.error?.message : r.helpText,
+            error: i,
+            helperText: i ? s.error?.message : r.helpText,
             showFooter: !0,
             calendarKind: t.calendarKind,
             fiscalMode: t.fiscalMode,
@@ -59,5 +59,5 @@ const T = ({
   );
 };
 export {
-  T as DateRangeField
+  Y as DateRangeField
 };

package/dist/form-react/Fields/MonthRangeField.js

@@ -1,72 +1,72 @@
-import { jsx as u } from "react/jsx-runtime";
-import { Controller as x } from "react-hook-form";
-import { MonthRangePicker as F } from "../../components/forms/date-picker/month-range-picker.js";
-import { getFieldTestId as T } from "../utils/fieldTestIds.js";
-import { toLocalDate as o } from "../utils/calendar-boundary.js";
-const w = (a) => {
-  if (a.includes("/")) {
-    const [r, i] = a.split("/");
-    return { year: parseInt(i, 10), month: parseInt(r, 10) - 1 };
+import { jsx as i } from "react/jsx-runtime";
+import { Controller as F } from "react-hook-form";
+import { MonthRangePicker as b } from "../../components/forms/date-picker/month-range-picker.js";
+import { getFieldTestId as w } from "../utils/fieldTestIds.js";
+import { resolveMonthRangeMinMax as I } from "../utils/date.utils.js";
+const D = (r) => {
+  if (r.includes("/")) {
+    const [a, l] = r.split("/");
+    return { year: parseInt(l, 10), month: parseInt(a, 10) - 1 };
   }
-  const [s, l] = a.split("-");
-  return { year: parseInt(s, 10), month: parseInt(l, 10) - 1 };
-}, O = ({
-  field: a,
-  validationRules: s,
-  isDisabled: l,
-  formHelpers: r
+  const [n, s] = r.split("-");
+  return { year: parseInt(n, 10), month: parseInt(s, 10) - 1 };
+}, K = ({
+  field: r,
+  validationRules: n,
+  isDisabled: s,
+  formHelpers: a
 }) => {
-  const i = r.form.control, t = a.fieldType === "month_range" ? a : null;
-  if (!t) return null;
-  const y = t.displayFormat || "MM/YYYY", c = t.minMonthsOffset != null ? new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth() - t.minMonthsOffset, 1) : t.disablePastMonths ? new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth(), 1) : o(t.minDate), h = t.maxMonthsOffset != null ? new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth() + t.maxMonthsOffset, 1) : o(t.maxDate);
-  return /* @__PURE__ */ u(
-    x,
+  const l = a.form.control, e = r.fieldType === "month_range" ? r : null;
+  if (!e) return null;
+  const y = e.displayFormat || "MM/YYYY", { minDate: u, maxDate: c, startMonth: v, endMonth: $ } = I(e);
+  return /* @__PURE__ */ i(
+    F,
     {
-      name: a.id,
-      control: i,
-      defaultValue: t.defaultRange ? { start: t.defaultRange.start || null, end: t.defaultRange.end || null } : void 0,
-      rules: s,
-      render: ({ field: d, fieldState: M }) => {
-        const f = !!M.error, n = d.value, p = n?.start ? w(n.start) : null, m = n?.end ? w(n.end) : null, Y = p && m;
-        return /* @__PURE__ */ u("div", { "data-testid": T(a.id), children: /* @__PURE__ */ u(
-          F,
+      name: r.id,
+      control: l,
+      defaultValue: e.defaultRange ? { start: e.defaultRange.start || null, end: e.defaultRange.end || null } : void 0,
+      rules: n,
+      render: ({ field: d, fieldState: p }) => {
+        const M = !!p.error, o = d.value, h = o?.start ? D(o.start) : null, S = o?.end ? D(o.end) : null, x = h && S;
+        return /* @__PURE__ */ i("div", { "data-testid": w(r.id), children: /* @__PURE__ */ i(
+          b,
           {
-            label: a.label,
+            label: r.label,
             displayFormat: y,
-            ...Y && {
+            ...x && {
               value: {
-                from: p,
-                to: m
+                from: h,
+                to: S
               }
             },
-            onChange: (e) => {
-              if (!e?.from || !e?.to) {
-                const S = { start: null, end: null };
-                d.onChange(S), r.setValue(a.id, S);
+            onChange: (t) => {
+              if (!t?.from || !t?.to) {
+                const g = { start: null, end: null };
+                d.onChange(g), a.setValue(r.id, g);
                 return;
               }
-              const $ = e.from.start ? `${e.from.start.getFullYear()}-${String(e.from.start.getMonth() + 1).padStart(2, "0")}-${String(e.from.start.getDate()).padStart(2, "0")}` : `${e.from.year}-${String(e.from.month + 1).padStart(2, "0")}-01`, D = e.to.end ? e.to.end.getDate() : new Date(e.to.year, e.to.month + 1, 0).getDate(), v = e.to.end ? `${e.to.end.getFullYear()}-${String(e.to.end.getMonth() + 1).padStart(2, "0")}-${String(D).padStart(2, "0")}` : `${e.to.year}-${String(e.to.month + 1).padStart(2, "0")}-${String(D).padStart(2, "0")}`, g = {
-                start: $,
-                end: v
+              const Y = t.from.start ? `${t.from.start.getFullYear()}-${String(t.from.start.getMonth() + 1).padStart(2, "0")}-${String(t.from.start.getDate()).padStart(2, "0")}` : `${t.from.year}-${String(t.from.month + 1).padStart(2, "0")}-01`, m = t.to.end ? t.to.end.getDate() : new Date(t.to.year, t.to.month + 1, 0).getDate(), T = t.to.end ? `${t.to.end.getFullYear()}-${String(t.to.end.getMonth() + 1).padStart(2, "0")}-${String(m).padStart(2, "0")}` : `${t.to.year}-${String(t.to.month + 1).padStart(2, "0")}-${String(m).padStart(2, "0")}`, f = {
+                start: Y,
+                end: T
               };
-              d.onChange(g), r.setValue(a.id, g);
+              d.onChange(f), a.setValue(r.id, f);
             },
-            placeholder: a.placeholder,
-            minDate: c,
-            maxDate: h,
-            startMonth: c || o(t.startMonth),
-            endMonth: h || o(t.endMonth),
-            required: a.isRequired,
-            disabled: l,
-            error: f,
-            helperText: f ? M.error?.message : a.helpText,
+            placeholder: r.placeholder,
+            minDate: u,
+            maxDate: c,
+            startMonth: v ?? u,
+            endMonth: $ ?? c,
+            required: r.isRequired,
+            disabled: s,
+            error: M,
+            helperText: M ? p.error?.message : r.helpText,
             showFooter: !0,
-            calendarKind: t.calendarKind,
-            fiscalMode: t.fiscalMode,
-            fiscalYearStartMonth: t.fiscalYearStartMonth,
-            fiscalMonthPattern: t.fiscalMonthPattern,
-            showPresets: t.showPresets,
-            autoNavigateToAvailable: t.autoNavigateToAvailable
+            calendarKind: e.calendarKind,
+            fiscalMode: e.fiscalMode,
+            fiscalYearStartMonth: e.fiscalYearStartMonth,
+            fiscalMonthPattern: e.fiscalMonthPattern,
+            showPresets: e.showPresets,
+            autoNavigateToAvailable: e.autoNavigateToAvailable
           }
         ) });
       }
@@ -74,5 +74,5 @@ const w = (a) => {
   );
 };
 export {
-  O as MonthRangeField
+  K as MonthRangeField
 };

package/dist/form-react/Fields/MultiMonthPickerField.js

@@ -1,47 +1,49 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Controller as d } from "react-hook-form";
-import { MultiMonthPicker as p } from "../../components/forms/date-picker/multi-month-picker.js";
-import { getFieldTestId as M } from "../utils/fieldTestIds.js";
-import { toLocalDate as t } from "../utils/calendar-boundary.js";
-const D = ({
+import { Controller as v } from "react-hook-form";
+import { MultiMonthPicker as g } from "../../components/forms/date-picker/multi-month-picker.js";
+import { getFieldTestId as x } from "../utils/fieldTestIds.js";
+import { resolveMonthRangeMinMax as T } from "../utils/date.utils.js";
+const q = ({
   field: r,
-  validationRules: m,
+  validationRules: i,
   isDisabled: u,
-  formHelpers: h
+  formHelpers: m
 }) => {
-  const s = h.form.control, e = r.fieldType === "multi_month_picker" ? r : null;
-  return e ? /* @__PURE__ */ o(
-    d,
+  const s = m.form.control, e = r.fieldType === "multi_month_picker" ? r : null;
+  if (!e) return null;
+  const { minDate: h, maxDate: c, startMonth: d, endMonth: p } = T(e);
+  return /* @__PURE__ */ o(
+    v,
     {
       name: r.id,
       control: s,
-      rules: m,
-      render: ({ field: a, fieldState: n }) => {
-        const l = !!n.error, i = a.value;
-        return /* @__PURE__ */ o("div", { "data-testid": M(r.id), children: /* @__PURE__ */ o(
-          p,
+      rules: i,
+      render: ({ field: t, fieldState: n }) => {
+        const a = !!n.error, l = t.value;
+        return /* @__PURE__ */ o("div", { "data-testid": x(r.id), children: /* @__PURE__ */ o(
+          g,
           {
             label: r.label,
-            value: Array.isArray(i) ? i : void 0,
-            onChange: (c) => {
-              a.onChange(c ?? []);
+            value: Array.isArray(l) ? l : void 0,
+            onChange: (M) => {
+              t.onChange(M ?? []);
             },
             placeholder: r.placeholder,
             required: r.isRequired,
             disabled: u,
-            error: l,
-            helperText: l ? n.error?.message : r.helpText,
-            minDate: t(e.minDate),
-            maxDate: t(e.maxDate),
-            startMonth: t(e.startMonth),
-            endMonth: t(e.endMonth),
+            error: a,
+            helperText: a ? n.error?.message : r.helpText,
+            minDate: h,
+            maxDate: c,
+            startMonth: d,
+            endMonth: p,
             autoNavigateToAvailable: e.autoNavigateToAvailable
           }
         ) });
       }
     }
-  ) : null;
+  );
 };
 export {
-  D as MultiMonthPickerField
+  q as MultiMonthPickerField
 };