impact-ui 4.0.0-alpha.11 → 4.0.0-alpha.13

package/dist/components/MonthPicker/index.js

@@ -0,0 +1,324 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".impact-portal-container{position:absolute;z-index:9999}.ia-select-container-v3-blanket{bottom:0;left:0;position:fixed;right:0;top:0;z-index:9998}.impact-singleMonthPicker-main-container{display:flex;font-family:Manrope,sans-serif}.impact-singleMonthPicker-main-container.single-month-label-flex-column{flex-direction:column}.impact-singleMonthPicker-main-container.single-month-label-flex-column .singleMonthPicker-label{margin-bottom:6px}.impact-singleMonthPicker-main-container .singleMonthPicker-label{color:#60697d;font-family:Manrope,sans-serif;font-size:12px;font-weight:500;line-height:16px}.impact-singleMonthPicker-main-container .singleMonthPicker-container{position:relative;width:282px}.impact-singleMonthPicker-main-container .singleMonthPicker-input-container{box-sizing:border-box;display:flex;height:32px;width:100%}.impact-singleMonthPicker-main-container .singleMonthPicker-input-container:hover .singleMonthPicker-input-field{border:1px solid #4259ee}.impact-singleMonthPicker-main-container .singleMonthPicker-input-container .singleMonthPicker-input-field{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/calendar.svg) no-repeat;background-color:#fff;background-position:center right 12px;background-size:14px;border:1px solid #c3c8d4;border-radius:8px;box-sizing:border-box;color:#1f2b4d;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;padding-left:12px;width:100%}@media screen and (max-width:1399px) and (min-width:1200px){.impact-singleMonthPicker-main-container .singleMonthPicker-input-container .singleMonthPicker-input-field{background-position:center right 10px;background-size:13px;padding-left:10px}}.impact-singleMonthPicker-main-container .singleMonthPicker-input-container .singleMonthPicker-input-field.active{width:100%}.impact-singleMonthPicker-main-container .singleMonthPicker-input-container .singleMonthPicker-input-field.error{border:1px solid #e15554}.impact-singleMonthPicker-main-container .singleMonthPicker-input-container .singleMonthPicker-input-field::placeholder{color:#b4bac7}.impact-singleMonthPicker-main-container .singleMonthPicker-input-container .singleMonthPicker-input-field:focus{outline:none}.impact-singleMonthPicker-main-container .singleMonthPicker-input-container .singleMonthPicker-input-field:focus::placeholder,.impact-singleMonthPicker-main-container .singleMonthPicker-input-container .singleMonthPicker-input-field:focus:not(:placeholder-shown){color:#4259ee}.impact-singleMonthPicker-main-container .singleMonthPicker-input-container .mp-close-icon{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/close.svg) no-repeat 50%;background-size:14px;border:none;cursor:pointer;height:24px;padding:0;position:absolute;right:36px;top:16px;transform:translateY(-50%);width:24px}.impact-singleMonthPicker-main-container.disabled{pointer-events:none}.impact-singleMonthPicker-main-container.disabled .singleMonthPicker-label{color:#b4bac7}.impact-singleMonthPicker-main-container.disabled .singleMonthPicker-input-field{background-color:#f8f9fb;background-image:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/calendarDisable.svg);background-position:center right 12px;background-repeat:no-repeat;background-size:14px;border-color:#d9dde7;color:#b4bac7}.impact-singleMonthPicker-main-container.disabled .mp-close-icon{opacity:.6}.mp-single-month-picker-container{background-color:#fff;border:1px solid #f0f0f0;border-radius:12px;box-shadow:0 0 4px #0000001f;height:264px;left:0;padding:16px;position:absolute;top:40px;width:300px;z-index:1200}.month-picker-year-select-container .ia-select-button-text-full-width{flex:0 0 auto}.month-picker-year-select-container .ia-select-styled-dropdown-main-button{border:none;padding:6px}.month-picker-year-select-container .ia-select-button-clear-icon{display:none}.month-picker-year-select-container .ia-select-chevron-icon{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/arrowDownMonthRange.svg) no-repeat;background-position:50%;background-size:10px;margin-left:-110px;margin-right:0}.month-picker-year-select-dropdown{min-width:115px!important;width:115px!important;z-index:9999}.mp-header{align-items:center;display:flex;justify-content:center;padding-inline:8px}.mp-render-month-container{display:flex;justify-content:space-between}.mp-render-month{display:flex;flex-wrap:wrap;gap:36px;height:128px;margin-top:0;row-gap:10px;width:252px}.mp-month{align-items:center;cursor:pointer;display:flex;gap:10px;height:36px;justify-content:center;width:36px}.mp-month:hover{background-color:#eceefd;border:1px solid #b3bdf8;border-radius:8px;color:#3649c6}.mp-month.current-month{border:1px solid #eceefd;border-radius:8px}.mp-selected-year{color:#1f2b4d;font-size:14px;line-height:16px}.mp-calendar-month,.mp-selected-year{font-family:Manrope,sans-serif;font-weight:500}.mp-calendar-month{font-size:12px;line-height:15px;text-align:left;text-decoration-skip-ink:none;text-underline-position:from-font}.mp-month.end,.mp-month.start{position:relative}.mp-month.end,.mp-month.selected,.mp-month.start{background-color:#4259ee;border-radius:8px;color:#fff}.mp-month.disabled{color:#b4bac7;pointer-events:none}.mp-vertical-line{border:.5px solid #d9dde7;margin-block:16px 0}.mp-calendar-button{display:flex;gap:16px;justify-content:flex-end;margin-top:16px}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useRef, useCallback, useEffect, useLayoutEffect, Suspense, lazy } from "react";
+import default_1 from "../../node_modules/@mui/icons-material/ChevronLeftOutlined.js";
+import default_1$1 from "../../node_modules/@mui/icons-material/ChevronRightOutlined.js";
+import { Button } from "../Button/index.js";
+import { Portal } from "../Portal/index.js";
+import { MONTHS_NUMBER } from "./constants.js";
+
+import IconButton from "../../node_modules/@mui/material/IconButton/IconButton.js";
+const DefaultYearSelect = lazy(
+  () => import("./DefaultYearSelect.js").then((m) => ({ default: m.DefaultYearSelect }))
+);
+const defaultYears = () => {
+  const today = /* @__PURE__ */ new Date();
+  const currentYear = today.getFullYear();
+  return Array.from({ length: 10 }, (_, index) => {
+    const year = (currentYear - 5 + index).toString();
+    return { label: year, value: year };
+  });
+};
+function MonthPicker({
+  customYears,
+  locale = "en-US",
+  isMandatory = false,
+  displayFormat = "MM/YYYY",
+  focusedInput = null,
+  onApply,
+  selectedMonth: initialSelectedMonth = null,
+  isOutsideRange = () => false,
+  disabled = false,
+  showYearSelect = false,
+  isError = false,
+  customWidth = "282px",
+  withPortal = false,
+  portalContainer = typeof document !== "undefined" ? document.body : null,
+  portalClassName = "",
+  YearSelectComponent
+}) {
+  const ResolvedYearSelect = YearSelectComponent ?? DefaultYearSelect;
+  const today = useMemo(() => /* @__PURE__ */ new Date(), []);
+  const yrs = useMemo(() => defaultYears(), []);
+  const years = customYears && customYears.length > 0 ? customYears : yrs;
+  const [openCalendar, setOpenCalendar] = useState(false);
+  const [selectedMonth, setSelectedMonth] = useState(initialSelectedMonth);
+  const [, setYearOffset] = useState(0);
+  const [currentOptions, setCurrentOptions] = useState(years);
+  const [selectedOptions, setSelectedOptions] = useState({
+    label: today.getFullYear().toString(),
+    value: today.getFullYear().toString()
+  });
+  const inputContainerRef = useRef(null);
+  const dropDownContainerRef = useRef(null);
+  const monthInputRef = useRef(null);
+  const monthPickerMainContainerRef = useRef(null);
+  const [isSelectOpen, setIsSelectOpen] = useState(false);
+  const [focusInput, setFocusInput] = useState(focusedInput);
+  const [dummySelectedMonth, setDummySelectedMonth] = useState(initialSelectedMonth);
+  const isResetClicked = useRef(false);
+  const [prevIconDisabled, setPrevIconDisabled] = useState(false);
+  const [nextIconDisabled, setNextIconDisabled] = useState(false);
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0,
+    offsetHeight: 0,
+    offsetWidth: 0
+  });
+  const handleMonthClick = useCallback((month) => {
+    setSelectedMonth(month);
+  }, []);
+  const formatDate = useCallback(
+    (date) => {
+      if (!date) return "";
+      const month = new Intl.DateTimeFormat("en-US", { month: "2-digit" }).format(date);
+      const year = new Intl.DateTimeFormat("en-US", { year: "numeric" }).format(date);
+      if (displayFormat === "YYYY/MM") return `${year}/${month}`;
+      return `${month}/${year}`;
+    },
+    [displayFormat]
+  );
+  const isMonthSelected = useCallback(
+    (month) => {
+      if (!selectedMonth || !month) return false;
+      return selectedMonth.getMonth() === month.getMonth() && selectedMonth.getFullYear() === month.getFullYear();
+    },
+    [selectedMonth]
+  );
+  const renderMonth = useCallback(
+    (year, monthIndex) => {
+      const monthStart = new Date(year, monthIndex, 1);
+      const isSelected = isMonthSelected(monthStart);
+      const isDisabled = isOutsideRange(monthStart);
+      const isCurrentMonth = monthStart.getFullYear() === today.getFullYear() && monthStart.getMonth() === today.getMonth();
+      const variants = [];
+      if (isSelected) variants.push("selected");
+      if (isDisabled) variants.push("disabled");
+      if (isCurrentMonth) variants.push("current-month");
+      const variantClass = variants.join(" ");
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `mp-month month${monthIndex + 1} ${variantClass}`.trim(),
+          role: "button",
+          tabIndex: 0,
+          onClick: () => {
+            handleMonthClick(monthStart);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") handleMonthClick(monthStart);
+          },
+          children: /* @__PURE__ */ jsx("span", { className: "mp-calendar-month", children: new Intl.DateTimeFormat(locale, { month: "short" }).format(monthStart) })
+        },
+        monthIndex
+      );
+    },
+    [locale, today, isMonthSelected, isOutsideRange, handleMonthClick]
+  );
+  const renderYear = useCallback(
+    (year) => /* @__PURE__ */ jsx("div", { className: "mp-render-month", children: MONTHS_NUMBER.map((m) => renderMonth(year, m)) }),
+    [renderMonth]
+  );
+  const handlePrevYear = useCallback(() => {
+    setYearOffset((o) => o - 1);
+    setSelectedOptions((prevState) => {
+      var _a;
+      const newVal = parseInt(prevState.value, 10) - 1;
+      const str = newVal.toString();
+      if (str === ((_a = currentOptions[0]) == null ? void 0 : _a.value)) setPrevIconDisabled(true);
+      return { label: str, value: str };
+    });
+  }, [currentOptions]);
+  const handleNextYear = useCallback(() => {
+    setYearOffset((o) => o + 1);
+    setSelectedOptions((prevState) => {
+      const newVal = parseInt(prevState.value, 10) + 1;
+      return { label: newVal.toString(), value: newVal.toString() };
+    });
+  }, []);
+  const handleInputClick = useCallback(() => {
+    setOpenCalendar(true);
+    setFocusInput("selected month");
+  }, []);
+  const handleClickOutside = useCallback(
+    (event) => {
+      const target = event.target;
+      if (inputContainerRef.current && !inputContainerRef.current.contains(target) && dropDownContainerRef.current && !dropDownContainerRef.current.contains(target) && !target.closest(".mp-close-icon") && !target.closest(".month-picker-year-select-dropdown") && !isSelectOpen) {
+        setOpenCalendar(false);
+        if (isResetClicked.current) {
+          setSelectedMonth(null);
+          setDummySelectedMonth(null);
+          isResetClicked.current = false;
+        } else {
+          setSelectedMonth(dummySelectedMonth);
+        }
+      }
+    },
+    [isSelectOpen, dummySelectedMonth]
+  );
+  useEffect(() => {
+    var _a;
+    if (focusInput === "selected month") {
+      (_a = monthInputRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [focusInput]);
+  useEffect(() => {
+    document.addEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [openCalendar, handleClickOutside]);
+  const handleClear = useCallback(() => {
+    setSelectedMonth(null);
+    setDummySelectedMonth(null);
+    isResetClicked.current = true;
+  }, []);
+  const handleCancel = useCallback(() => {
+    setOpenCalendar(false);
+    setSelectedMonth(dummySelectedMonth);
+  }, [dummySelectedMonth]);
+  const handleApply = useCallback(() => {
+    setOpenCalendar(false);
+    setDummySelectedMonth(selectedMonth);
+    onApply == null ? void 0 : onApply(selectedMonth);
+  }, [selectedMonth, onApply]);
+  useLayoutEffect(() => {
+    if (withPortal && monthPickerMainContainerRef.current) {
+      const rect = monthPickerMainContainerRef.current.getBoundingClientRect();
+      const scrollY = window.scrollY || document.documentElement.scrollTop;
+      setPosition({
+        x: rect.x,
+        y: rect.y + scrollY,
+        offsetHeight: rect.height,
+        offsetWidth: rect.width
+      });
+    }
+  }, [openCalendar, withPortal]);
+  useEffect(() => {
+    var _a, _b;
+    if (selectedOptions.value === ((_a = currentOptions[0]) == null ? void 0 : _a.value)) {
+      setPrevIconDisabled(true);
+    } else {
+      setPrevIconDisabled(false);
+    }
+    if (selectedOptions.value === ((_b = currentOptions[currentOptions.length - 1]) == null ? void 0 : _b.value)) {
+      setNextIconDisabled(true);
+    } else {
+      setNextIconDisabled(false);
+    }
+  }, [selectedOptions, currentOptions]);
+  const computedIsError = useMemo(
+    () => Boolean(isError || selectedMonth && isOutsideRange(selectedMonth)),
+    [isError, selectedMonth, isOutsideRange]
+  );
+  const renderCalendarContent = () => /* @__PURE__ */ jsxs("div", { ref: dropDownContainerRef, className: "mp-single-month-picker-container", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mp-header", children: [
+      /* @__PURE__ */ jsx(IconButton, { disableRipple: true, disabled: prevIconDisabled, onClick: handlePrevYear, children: /* @__PURE__ */ jsx(default_1, { className: "mp-left-icon" }) }),
+      showYearSelect ? /* @__PURE__ */ jsx("div", { className: "month-picker-year-select-container", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "mp-selected-year", children: selectedOptions.value }), children: /* @__PURE__ */ jsx(
+        ResolvedYearSelect,
+        {
+          isWithSearch: true,
+          withPortal: true,
+          currentOptions,
+          dropDownPortalClassName: "month-picker-year-select-dropdown",
+          initialOptions: years,
+          isOpen: isSelectOpen,
+          minWidth: 62,
+          name: "year-select",
+          selectedOptions,
+          setCurrentOptions,
+          setIsOpen: setIsSelectOpen,
+          setSelectedOptions
+        }
+      ) }) }) : /* @__PURE__ */ jsx("div", { className: "mp-selected-year", children: selectedOptions.value }),
+      /* @__PURE__ */ jsx(IconButton, { disableRipple: true, disabled: nextIconDisabled, onClick: handleNextYear, children: /* @__PURE__ */ jsx(default_1$1, { className: "mp-right-icon" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mp-render-month-container", children: renderYear(parseInt(selectedOptions.value, 10)) }),
+    /* @__PURE__ */ jsx("hr", { className: "mp-vertical-line" }),
+    /* @__PURE__ */ jsxs("div", { className: "mp-calendar-button", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: handleCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleApply, children: "Apply" })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `impact-singleMonthPicker-main-container single-month-label-flex-column ${disabled ? "disabled" : ""}`.trim(),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "singleMonthPicker-label", children: [
+          "Select Month & Year",
+          isMandatory && /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: monthPickerMainContainerRef,
+            className: "singleMonthPicker-container",
+            style: { width: customWidth },
+            children: [
+              /* @__PURE__ */ jsxs("div", { ref: inputContainerRef, className: "singleMonthPicker-input-container", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: monthInputRef,
+                    readOnly: true,
+                    "aria-label": "Select month and year",
+                    className: `singleMonthPicker-input-field ${selectedMonth ? "active" : ""} ${computedIsError ? "error" : ""}`.trim(),
+                    placeholder: `Select ${displayFormat}`,
+                    type: "text",
+                    value: selectedMonth ? formatDate(selectedMonth) : "",
+                    onBlur: () => {
+                      setFocusInput(null);
+                    },
+                    onClick: handleInputClick,
+                    onFocus: () => {
+                      setFocusInput("selected month");
+                    }
+                  }
+                ),
+                selectedMonth && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    "aria-label": "Clear selection",
+                    className: "mp-close-icon",
+                    type: "button",
+                    onClick: handleClear
+                  }
+                )
+              ] }),
+              openCalendar && (withPortal && portalContainer ? /* @__PURE__ */ jsxs(Portal, { container: portalContainer, children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `impact-portal-container ${portalClassName}`.trim(),
+                    style: {
+                      top: position.y,
+                      left: position.x,
+                      width: `${position.offsetWidth || 0}px`
+                    },
+                    children: renderCalendarContent()
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "aria-hidden": true,
+                    className: "ia-select-container-v3-blanket",
+                    onClick: () => {
+                      setOpenCalendar(false);
+                    }
+                  }
+                )
+              ] }) : renderCalendarContent())
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+MonthPicker.displayName = "MonthPicker";
+export {
+  MONTHS_NUMBER,
+  MonthPicker
+};

package/dist/components/MonthRangePicker/MonthRangePicker.types.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+
+export interface MonthRangePickerYearOption {
+    label: string;
+    value: string;
+}
+export interface MonthRangePickerProps {
+    customYears?: MonthRangePickerYearOption[];
+    locale?: string;
+    isMandatory?: boolean;
+    displayFormat?: string;
+    focusedInput?: 'start' | 'end' | null;
+    onApply?: (start: Date | null, end: Date | null) => void;
+    startMonth?: Date | null;
+    endMonth?: Date | null;
+    showYearSelect?: boolean;
+    isOutsideRange?: (month: Date) => boolean;
+    disabled?: boolean;
+    customWidth?: string;
+    isError?: boolean;
+    withPortal?: boolean;
+    portalContainer?: HTMLElement;
+    portalClassName?: string;
+    onStartMonthChange?: (month: Date | null) => void;
+    onEndMonthChange?: (month: Date | null) => void;
+    className?: string;
+    'data-testid'?: string;
+    children?: ReactNode;
+}
+//# sourceMappingURL=MonthRangePicker.types.d.ts.map

package/dist/components/MonthRangePicker/MonthRangePicker.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthRangePicker.types.d.ts","sourceRoot":"","sources":["../../../src/components/MonthRangePicker/MonthRangePicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,WAAW,CAAC,EAAE,0BAA0B,EAAE,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACzD,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAClD,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

package/dist/components/MonthRangePicker/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const MONTHS_NUMBER: number[];
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/MonthRangePicker/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/MonthRangePicker/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,UAAyC,CAAC"}

package/dist/components/MonthRangePicker/constants.js

@@ -0,0 +1,4 @@
+const MONTHS_NUMBER = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+export {
+  MONTHS_NUMBER
+};

package/dist/components/MonthRangePicker/index.d.ts

@@ -0,0 +1,22 @@
+
+export declare const MonthRangePicker: ({ customYears, locale, isMandatory, displayFormat, focusedInput, onApply, startMonth: initialStartMonth, endMonth: initialEndMonth, showYearSelect, isOutsideRange, disabled, customWidth, isError, withPortal, portalContainer, portalClassName, onStartMonthChange, onEndMonthChange, }: {
+    customYears: any;
+    locale?: string | undefined;
+    isMandatory?: boolean | undefined;
+    displayFormat?: string | undefined;
+    focusedInput?: null | undefined;
+    onApply?: (() => void) | undefined;
+    startMonth?: null | undefined;
+    endMonth?: null | undefined;
+    showYearSelect?: boolean | undefined;
+    isOutsideRange?: (() => boolean) | undefined;
+    disabled?: boolean | undefined;
+    customWidth?: string | undefined;
+    isError?: boolean | undefined;
+    withPortal?: boolean | undefined;
+    portalContainer?: HTMLElement | undefined;
+    portalClassName?: string | undefined;
+    onStartMonthChange?: (() => void) | undefined;
+    onEndMonthChange?: (() => void) | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MonthRangePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MonthRangePicker/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,gCAAgC,CAAC;AAIxC,eAAO,MAAM,gBAAgB,GAAI;;;;;;;;;;;;;;;;;;;CAmBhC,4CA8pBA,CAAC"}