impact-ui 3.7.34-alpha.2 → 3.7.34-alpha.3

package/dist/components/Modal/index.js

@@ -0,0 +1,112 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var o=document.createElement("style");o.appendChild(document.createTextNode(".ia_modalPopover{background:#fff;border-radius:8px;bottom:0;display:flex;flex-direction:column;left:0;margin:auto;position:absolute;right:0;top:0}.ia_modalPopover.is-bottom-sheet{border-radius:16px 16px 0 0;bottom:0;left:0;right:0;top:auto;transform:none;transition:height .3s ease-in-out;width:100%!important}.ia_modalPopover.is-bottom-sheet.with-expand-icon{height:465px!important}.ia_modalPopover.is-bottom-sheet.expanded{height:auto!important;top:100px}.ia_modalPopover .ia_modalHeader{align-items:center;background:#eceefd;border-radius:8px 8px 0 0;display:flex;justify-content:space-between;padding:16px}.ia_modalPopover .ia_modalHeader .ia_modalHeading{color:#0d152c;font-size:16px;font-weight:700}.ia_modalPopover .ia_modalHeader .modal-actions{align-items:center;display:flex;gap:8px}.ia_modalPopover .ia_modalHeader .close_icon,.ia_modalPopover .ia_modalHeader .collapse_icon,.ia_modalPopover .ia_modalHeader .expand_icon{background-color:initial;background-repeat:no-repeat;background-size:contain;border:none;cursor:pointer;height:24px;margin:0;padding:0;width:24px}.ia_modalPopover .ia_modalHeader .expand_icon{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/expand-icon.svg) no-repeat;background-position:50%;background-size:16px;height:16px;width:16px}.ia_modalPopover .ia_modalHeader .collapse_icon{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/collapse-icon-2.svg) no-repeat;background-position:50%;background-size:16px;height:16px;width:16px}.ia_modalPopover .ia_modalHeader .close_icon{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/close.svg) no-repeat;background-position:50%;background-size:16px;height:10px;width:10px}.ia_modalPopover .ia_modalBody{bottom:56px;box-sizing:border-box;flex:1;font-size:14px;line-height:22px;overflow:auto;padding:24px 16px 16px;position:absolute;top:48px;width:100%}.ia_modalPopover .ia_modalFooter{align-items:center;border-top:1px solid #d9dde7;bottom:0;display:flex;gap:16px;height:56px;justify-content:flex-end;left:0;padding-right:16px;position:absolute;right:0}.ia_modalPopover.ia_modal_small{height:304px;width:526px}.ia_modalPopover.ia_modal_medium{height:532px;width:800px}.ia_modalPopover.ia_modal_large{top:100px;right:100px;bottom:100px;left:100px}")),document.head.appendChild(o)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}}();
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../Button/index.js";
+
+import Modal$1 from "../../node_modules/@mui/material/Modal/Modal.js";
+import Box from "../../node_modules/@mui/material/Box/Box.js";
+function Modal({
+  className = "",
+  title,
+  size = "medium",
+  children,
+  primaryButtonLabel,
+  secondaryButtonLabel,
+  open,
+  onPrimaryButtonClick,
+  onSecondaryButtonClick,
+  primaryButtonProps,
+  secondaryButtonProps,
+  onClose,
+  width,
+  height,
+  footerOptions,
+  isBottomSheet = false,
+  isExpanded = false,
+  onExpand,
+  maxHeight,
+  zIndex = 1300,
+  withExpandIcon = false,
+  ...args
+}) {
+  const modalClasses = [
+    "ia_modalPopover",
+    `ia_modal_${size}`,
+    className,
+    isBottomSheet ? "is-bottom-sheet" : "",
+    isExpanded ? "expanded" : "",
+    withExpandIcon ? "with-expand-icon" : ""
+  ].filter(Boolean).join(" ");
+  const style = { width, height, maxHeight };
+  const handleClose = () => {
+    if (typeof onClose === "function") onClose();
+  };
+  const headerActions = /* @__PURE__ */ jsxs("div", { className: "modal-actions", children: [
+    isBottomSheet && withExpandIcon && typeof onExpand === "function" && /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": isExpanded ? "Collapse" : "Expand",
+        className: isExpanded ? "collapse_icon" : "expand_icon",
+        type: "button",
+        onClick: onExpand
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": "Close",
+        className: "close_icon",
+        "data-testid": "modal-close-button",
+        type: "button",
+        onClick: handleClose
+      }
+    )
+  ] });
+  if (!primaryButtonLabel && !secondaryButtonLabel) {
+    return /* @__PURE__ */ jsx(
+      Modal$1,
+      {
+        "aria-describedby": "modal-modal-description",
+        "aria-labelledby": "modal-modal-title",
+        open,
+        sx: { "&.MuiModal-root": { zIndex: `${zIndex}` } },
+        onClose: handleClose,
+        ...args,
+        children: /* @__PURE__ */ jsxs(Box, { className: modalClasses, style, children: [
+          /* @__PURE__ */ jsxs("div", { className: "ia_modalHeader", children: [
+            /* @__PURE__ */ jsx("div", { className: "ia_modalHeading", children: title }),
+            headerActions
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "ia_modalBody", children }),
+          footerOptions != null && /* @__PURE__ */ jsx("div", { className: "ia_modalFooter", children: footerOptions })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Modal$1,
+    {
+      "aria-describedby": "modal-modal-description",
+      "aria-labelledby": "modal-modal-title",
+      open,
+      sx: { "&.MuiModal-root": { zIndex: `${zIndex}` } },
+      onClose: handleClose,
+      ...args,
+      children: /* @__PURE__ */ jsxs(Box, { className: modalClasses, style, children: [
+        /* @__PURE__ */ jsxs("div", { className: "ia_modalHeader", children: [
+          /* @__PURE__ */ jsx("div", { className: "ia_modalHeading", children: title }),
+          headerActions
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ia_modalBody", children }),
+        /* @__PURE__ */ jsxs("div", { className: "ia_modalFooter", children: [
+          secondaryButtonLabel != null && /* @__PURE__ */ jsx(Button, { variant: "url", onClick: onSecondaryButtonClick, ...secondaryButtonProps, children: secondaryButtonLabel }),
+          primaryButtonLabel != null && // eslint-disable-next-line jsx-a11y/no-autofocus
+          /* @__PURE__ */ jsx(Button, { autoFocus: true, onClick: onPrimaryButtonClick, ...primaryButtonProps, children: primaryButtonLabel })
+        ] })
+      ] })
+    }
+  );
+}
+Modal.displayName = "Modal";
+export {
+  Modal
+};

package/dist/components/MonthPicker/DefaultYearSelect.d.ts

@@ -0,0 +1,4 @@
+import { MonthPickerSelectProps } from './MonthPicker.types';
+
+export declare const DefaultYearSelect: import('react').ForwardRefExoticComponent<MonthPickerSelectProps & import('react').RefAttributes<HTMLDivElement | null>>;
+//# sourceMappingURL=DefaultYearSelect.d.ts.map

package/dist/components/MonthPicker/DefaultYearSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultYearSelect.d.ts","sourceRoot":"","sources":["../../../src/components/MonthPicker/DefaultYearSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAElE,eAAO,MAAM,iBAAiB,0HAE7B,CAAC"}

package/dist/components/MonthPicker/DefaultYearSelect.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { YearSelect } from "../YearSelect/index.js";
+const DefaultYearSelect = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(YearSelect, { ...props, ref })
+);
+DefaultYearSelect.displayName = "DefaultYearSelect";
+export {
+  DefaultYearSelect
+};

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

@@ -0,0 +1,55 @@
+import { ComponentType } from 'react';
+
+export interface YearOption {
+    label: string;
+    value: string;
+}
+export interface MonthPickerSelectProps {
+    name: string;
+    isWithSearch?: boolean;
+    withPortal?: boolean;
+    dropDownPortalClassName?: string;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    currentOptions: YearOption[];
+    setCurrentOptions: (opts: YearOption[]) => void;
+    initialOptions: YearOption[];
+    selectedOptions: YearOption;
+    setSelectedOptions: (opts: YearOption | ((prev: YearOption) => YearOption)) => void;
+    minWidth?: number;
+}
+export interface MonthPickerProps {
+    /** Custom year options for the year dropdown (when showYearSelect is true) */
+    customYears?: YearOption[];
+    /** Locale for month names */
+    locale?: string;
+    /** Show mandatory asterisk */
+    isMandatory?: boolean;
+    /** Display format for the input value: MM/YYYY or YYYY/MM */
+    displayFormat?: 'MM/YYYY' | 'YYYY/MM';
+    /** Controlled focused input (internal) */
+    focusedInput?: string | null;
+    /** Callback when Apply is clicked with the selected month */
+    onApply?: (month: Date | null) => void;
+    /** Initially selected month (controlled usage via key or parent state) */
+    selectedMonth?: Date | null;
+    /** Returns true if the given month should be disabled */
+    isOutsideRange?: (month: Date) => boolean;
+    /** Disable the whole picker */
+    disabled?: boolean;
+    /** Show year dropdown instead of prev/next only */
+    showYearSelect?: boolean;
+    /** Show error state on input */
+    isError?: boolean;
+    /** Width of the input/container */
+    customWidth?: string;
+    /** Render calendar in a portal (e.g. to avoid overflow clipping) */
+    withPortal?: boolean;
+    /** Portal mount node when withPortal is true */
+    portalContainer?: HTMLElement;
+    /** Class name for the portaled container */
+    portalClassName?: string;
+    /** Optional custom year select component (e.g. for testing); defaults to Select from OldJsComponents */
+    YearSelectComponent?: ComponentType<MonthPickerSelectProps>;
+}
+//# sourceMappingURL=MonthPicker.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MonthPicker.types.d.ts","sourceRoot":"","sources":["../../../src/components/MonthPicker/MonthPicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,UAAU,EAAE,CAAC;IAC7B,iBAAiB,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAChD,cAAc,EAAE,UAAU,EAAE,CAAC;IAC7B,eAAe,EAAE,UAAU,CAAC;IAC5B,kBAAkB,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,CAAC,CAAC,IAAI,EAAE,UAAU,KAAK,UAAU,CAAC,KAAK,IAAI,CAAC;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,8EAA8E;IAC9E,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACtC,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,0EAA0E;IAC1E,aAAa,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,yDAAyD;IACzD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC;IAC1C,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gDAAgD;IAChD,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,4CAA4C;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wGAAwG;IACxG,mBAAmB,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;CAC7D"}

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

@@ -0,0 +1,2 @@
+export declare const MONTHS_NUMBER: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+//# sourceMappingURL=constants.d.ts.map

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

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

package/dist/components/MonthPicker/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/MonthPicker/index.d.ts

@@ -0,0 +1,9 @@
+import { MonthPickerProps } from './MonthPicker.types';
+
+export type { MonthPickerProps, YearOption } from './MonthPicker.types';
+export { MONTHS_NUMBER } from './constants';
+export declare function MonthPicker({ customYears, locale, isMandatory, displayFormat, focusedInput, onApply, selectedMonth: initialSelectedMonth, isOutsideRange, disabled, showYearSelect, isError, customWidth, withPortal, portalContainer, portalClassName, YearSelectComponent, }: MonthPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MonthPicker {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MonthPicker/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,gBAAgB,EAAc,MAAM,qBAAqB,CAAC;AACxE,OAAO,2BAA2B,CAAC;AAMnC,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAW5C,wBAAgB,WAAW,CAAC,EAC1B,WAAW,EACX,MAAgB,EAChB,WAAmB,EACnB,aAAyB,EACzB,YAAmB,EACnB,OAAO,EACP,aAAa,EAAE,oBAA2B,EAC1C,cAA4B,EAC5B,QAAgB,EAChB,cAAsB,EACtB,OAAe,EACf,WAAqB,EACrB,UAAkB,EAClB,eAEoC,EACpC,eAAoB,EACpB,mBAAmB,GACpB,EAAE,gBAAgB,2CAqUlB;yBAxVe,WAAW"}

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"}