impact-ui 4.0.0-alpha.21 → 4.0.0-alpha.23

package/dist/components/Menu/nestedMenuItemsFromObject.js

@@ -1,4 +1,4 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".ia-styles.ia-menu .MuiPaper-root{background:#fff;border:1px solid #f0f0f0;border-radius:16px;box-shadow:0 1px 6px #0000001f;margin-top:4px;padding:0 6px}.ia-styles.ia-menu .MuiList-root{display:flex;flex-direction:column;gap:4px}.ia-styles.ia-menu .MuiButtonBase-root{align-items:center;color:#1f2b4d;display:flex;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;gap:6px;height:35px;justify-content:space-between;line-height:20px;padding:0 12px}.ia-styles.ia-menu .MuiButtonBase-root.Mui-focusVisible{background-color:initial}.ia-styles.ia-menu .MuiButtonBase-root:hover{background:#f5f6fa;border-radius:8px;color:#1f2b4d}.ia-styles.ia-menu .css-kk1bwy-MuiButtonBase-root-MuiMenuItem-root:has(.ia-list-sublabel){min-height:56px!important}.ia-styles.ia-menu .css-kk1bwy-MuiButtonBase-root-MuiMenuItem-root.Mui-selected{background-color:#eceefd;border-radius:8px}.ia-styles.ia-menu .ia-list-body:has(.menu-section-header){border-top:1px solid #f5f6fa;gap:6px;padding-top:4px}.ia-styles.ia-menu li:first-of-type :has(.menu-section-header){border-top:none}.ia-styles.ia-menu li:has(.menu-section-header){cursor:default;pointer-events:none}.ia-styles.ia-menu .css-kk1bwy-MuiButtonBase-root-MuiMenuItem-root.child-hover{background:#f5f6fa;border-radius:8px;color:#1f2b4d}.ia-styles.ia-menu .ia-vertical-line{align-self:stretch;border:1px solid #f5f6fa;flex:none;flex-grow:0;height:0;min-width:228px}.ia-styles.ia-menu .ia-menu-action-button-container{align-items:center;display:flex;gap:12px;justify-content:flex-end;padding:8px 8px 4px}.ia-styles.ia-menu .ia-menu-action-button-container .ia-styles.ia-btn{font-weight:400;height:32px;padding:8px}.ia-styles.ia-menu .ia-menu-action-button-container .ia-btn-contained{color:#fff}.ia-styles.ia-menu .ia-menu-action-button-container .ia-btn-contained:hover{background-color:#3649c6;color:#fff}.ia-styles.ia-menu .ia-menu-action-button-container .ia-btn-tertiary:hover{background-color:#eceefd;border-color:#3649c6;border-width:1px;color:#3649c6}.ia-styles.ia-menu .menu-scroll-area{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow-y:auto}.ia-styles.ia-menu .menu-item-selected{background:#f5f6fa;border-radius:8px;color:#1f2b4d}.ia-menu-checkbox .MuiCheckbox-root.impact-checkbox-container{height:16px;margin-right:0;width:16px}.ia-menu-checkbox .MuiCheckbox-root.impact-checkbox-container:hover{background:#fff;border-radius:4px!important}.ia-menu-checkbox .MuiCheckbox-root.default-variant.Mui-checked:hover{background:#eceefd url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/tick.svg) no-repeat;background-position:50%;background-size:10px;border:1px solid #4259ee}.menu-section-header{align-items:center;color:#b4bac7;display:flex;font-size:12px;font-weight:700;height:35px;justify-content:flex-start;line-height:20px}.ia-list-icon{min-width:auto!important}.ia-section-icon{min-width:32px!important}.ia-list-label-container{display:flex;flex-direction:column;justify-content:center;overflow:hidden}.ia-list-sublabel{color:#7a8294;font-size:12px;font-weight:400;max-width:7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ia-list-body{align-items:center;display:flex;flex-grow:1;gap:8px}.bottom_action{background:#fff;border-top:1px solid #f0f0f0;bottom:0;padding:0;position:sticky}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".ia-styles.ia-menu .MuiPaper-root{background:#fff;border:1px solid #f0f0f0;border-radius:16px;box-shadow:0 1px 6px #0000001f;margin-top:4px;padding:0 6px}.ia-styles.ia-menu .MuiList-root{display:flex;flex-direction:column;gap:4px}.ia-styles.ia-menu .MuiButtonBase-root{align-items:center;color:#1f2b4d;display:flex;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;gap:6px;height:35px;justify-content:space-between;line-height:20px;padding:0 12px}.ia-styles.ia-menu .MuiButtonBase-root:focus-visible{box-shadow:0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.ia-styles.ia-menu .MuiButtonBase-root:focus:not(:focus-visible){box-shadow:none;outline:none}.ia-styles.ia-menu .MuiButtonBase-root.Mui-focusVisible{background-color:initial}.ia-styles.ia-menu .MuiButtonBase-root:hover{background:#f5f6fa;border-radius:8px;color:#1f2b4d}.ia-styles.ia-menu .css-kk1bwy-MuiButtonBase-root-MuiMenuItem-root:has(.ia-list-sublabel){min-height:56px!important}.ia-styles.ia-menu .css-kk1bwy-MuiButtonBase-root-MuiMenuItem-root.Mui-selected{background-color:#eceefd;border-radius:8px}.ia-styles.ia-menu .ia-list-body:has(.menu-section-header){border-top:1px solid #f5f6fa;gap:6px;padding-top:4px}.ia-styles.ia-menu li:first-of-type :has(.menu-section-header){border-top:none}.ia-styles.ia-menu li:has(.menu-section-header){cursor:default;pointer-events:none}.ia-styles.ia-menu .css-kk1bwy-MuiButtonBase-root-MuiMenuItem-root.child-hover{background:#f5f6fa;border-radius:8px;color:#1f2b4d}.ia-styles.ia-menu .ia-vertical-line{align-self:stretch;border:1px solid #f5f6fa;flex:none;flex-grow:0;height:0;min-width:228px}.ia-styles.ia-menu .ia-menu-action-button-container{align-items:center;display:flex;gap:12px;justify-content:flex-end;padding:8px 8px 4px}.ia-styles.ia-menu .ia-menu-action-button-container .ia-styles.ia-btn{font-weight:400;height:32px;padding:8px}.ia-styles.ia-menu .ia-menu-action-button-container .ia-btn-contained{color:#fff}.ia-styles.ia-menu .ia-menu-action-button-container .ia-btn-contained:hover{background-color:#3649c6;color:#fff}.ia-styles.ia-menu .ia-menu-action-button-container .ia-btn-tertiary:hover{background-color:#eceefd;border-color:#3649c6;border-width:1px;color:#3649c6}.ia-styles.ia-menu .menu-scroll-area{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow-y:auto}.ia-styles.ia-menu .menu-item-selected{background:#f5f6fa;border-radius:8px;color:#1f2b4d}.ia-menu-checkbox .MuiCheckbox-root.impact-checkbox-container{height:16px;margin-right:0;width:16px}.ia-menu-checkbox .MuiCheckbox-root.impact-checkbox-container:hover{background:#fff;border-radius:4px!important}.ia-menu-checkbox .MuiCheckbox-root.default-variant.Mui-checked:hover{background:#eceefd url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/tick.svg) no-repeat;background-position:50%;background-size:10px;border:1px solid #4259ee}.menu-section-header{align-items:center;color:#b4bac7;display:flex;font-size:12px;font-weight:700;height:35px;justify-content:flex-start;line-height:20px}.ia-list-icon{min-width:auto!important}.ia-section-icon{min-width:32px!important}.ia-list-label-container{display:flex;flex-direction:column;justify-content:center;overflow:hidden}.ia-list-sublabel{color:#7a8294;font-size:12px;font-weight:400;max-width:7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ia-list-body{align-items:center;display:flex;flex-grow:1;gap:8px}.bottom_action{background:#fff;border-top:1px solid #f0f0f0;bottom:0;padding:0;position:sticky}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
 import { jsxs, jsx } from "react/jsx-runtime";
 import { IconMenuItem } from "./IconMenuItem.js";
 import { NestedMenuItem } from "./NestedMenuItem.js";
@@ -47,6 +47,7 @@ function nestedMenuItemsFromObject({
         {
           delay,
           disabled,
+          handleSelect,
           icon: /* @__PURE__ */ jsx(ChevronRight, {}),
           item,
           label: itemLabel,

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

@@ -1,11 +1,11 @@
-import { ReactNode } from 'react';
+import { ReactNode, SyntheticEvent } from 'react';
 import { BaseComponentProps } from '../../types';
 import { ButtonProps } from '../Button';
 
 export type ModalSize = 'small' | 'medium' | 'large';
 export interface ModalProps extends BaseComponentProps {
     open: boolean;
-    onClose: () => void;
+    onClose: (event?: SyntheticEvent) => void;
     title?: ReactNode;
     size?: ModalSize;
     children?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC1C,oBAAoB,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,2EAA2E;IAC3E,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B"}
+{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC1C,oBAAoB,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,2EAA2E;IAC3E,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,qBAAqB,CAAC;AAE7B,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE3D,wBAAgB,KAAK,CAAC,EACpB,SAAc,EACd,KAAK,EACL,IAAe,EACf,QAAQ,EACR,kBAAkB,EAClB,oBAAoB,EACpB,IAAI,EACJ,oBAAoB,EACpB,sBAAsB,EACtB,kBAAkB,EAClB,oBAAoB,EACpB,OAAO,EACP,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAqB,EACrB,UAAkB,EAClB,QAAQ,EACR,SAAS,EACT,MAAa,EACb,cAAsB,EACtB,GAAG,IAAI,EACR,EAAE,UAAU,2CA0FZ;yBAjHe,KAAK"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,qBAAqB,CAAC;AAE7B,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE3D,wBAAgB,KAAK,CAAC,EACpB,SAAc,EACd,KAAK,EACL,IAAe,EACf,QAAQ,EACR,kBAAkB,EAClB,oBAAoB,EACpB,IAAI,EACJ,oBAAoB,EACpB,sBAAsB,EACtB,kBAAkB,EAClB,oBAAoB,EACpB,OAAO,EACP,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAqB,EACrB,UAAkB,EAClB,QAAQ,EACR,SAAS,EACT,MAAa,EACb,cAAsB,EACtB,GAAG,IAAI,EACR,EAAE,UAAU,2CA+FZ;yBAtHe,KAAK"}

package/dist/components/Modal/index.js

@@ -1,4 +1,4 @@
-!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)}}();
+!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 .close_icon:focus-visible,.ia_modalPopover .ia_modalHeader .collapse_icon:focus-visible,.ia_modalPopover .ia_modalHeader .expand_icon:focus-visible{box-shadow:0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.ia_modalPopover .ia_modalHeader .close_icon:focus:not(:focus-visible),.ia_modalPopover .ia_modalHeader .collapse_icon:focus:not(:focus-visible),.ia_modalPopover .ia_modalHeader .expand_icon:focus:not(:focus-visible){box-shadow:none;outline:none}.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";
 
@@ -37,7 +37,7 @@ function Modal({
     withExpandIcon ? "with-expand-icon" : ""
   ].filter(Boolean).join(" ");
   const style = { width, height, maxHeight };
-  const handleClose = () => {
+  const handleClose = (_event, _reason) => {
     if (typeof onClose === "function") onClose();
   };
   const headerActions = /* @__PURE__ */ jsxs("div", { className: "modal-actions", children: [
@@ -57,7 +57,9 @@ function Modal({
         className: "close_icon",
         "data-testid": "modal-close-button",
         type: "button",
-        onClick: handleClose
+        onClick: () => {
+          handleClose();
+        }
       }
     )
   ] });

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

@@ -1,4 +1,5 @@
 import { ComponentType } from 'react';
+import { BaseComponentProps } from '../../types';
 
 export interface YearOption {
     label: string;
@@ -18,7 +19,7 @@ export interface MonthPickerSelectProps {
     setSelectedOptions: (opts: YearOption | ((prev: YearOption) => YearOption)) => void;
     minWidth?: number;
 }
-export interface MonthPickerProps {
+export interface MonthPickerProps extends Omit<BaseComponentProps, 'children'> {
     /** Custom year options for the year dropdown (when showYearSelect is true) */
     customYears?: YearOption[];
     /** Locale for month names */
@@ -51,5 +52,7 @@ export interface MonthPickerProps {
     portalClassName?: string;
     /** Optional custom year select component (e.g. for testing); defaults to Select from OldJsComponents */
     YearSelectComponent?: ComponentType<MonthPickerSelectProps>;
+    /** Called when a month is selected (before Apply), for intermediate selection feedback */
+    onMonthChange?: (month: Date) => void;
 }
 //# sourceMappingURL=MonthPicker.types.d.ts.map

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

@@ -1 +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"}
+{"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;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD,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,gBAAiB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC;IAC5E,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;IAC5D,0FAA0F;IAC1F,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;CACvC"}

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

@@ -2,7 +2,7 @@ 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 function MonthPicker({ customYears, locale, isMandatory, displayFormat, focusedInput, onApply, selectedMonth: initialSelectedMonth, isOutsideRange, disabled, showYearSelect, isError, customWidth, withPortal, portalContainer, portalClassName, YearSelectComponent, onMonthChange, className, id, 'data-testid': dataTestId, }: MonthPickerProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MonthPicker {
     var displayName: string;
 }

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

@@ -1 +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"}
+{"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,EACnB,aAAa,EACb,SAAS,EACT,EAAE,EACF,aAAa,EAAE,UAAU,GAC1B,EAAE,gBAAgB,2CA8alB;yBArce,WAAW"}

package/dist/components/MonthPicker/index.js

@@ -1,4 +1,4 @@
-!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)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var i=document.createElement("style");i.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{border:1px solid #4259ee;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 .singleMonthPicker-input-container .mp-close-icon:focus-visible{box-shadow:0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.impact-singleMonthPicker-main-container .singleMonthPicker-input-container .mp-close-icon:focus:not(:focus-visible){box-shadow:none;outline:none}.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{margin-inline:6px}.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-header .Mui-focusVisible:focus-visible{box-shadow:0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.mp-header .Mui-focusVisible:focus:not(:focus-visible){box-shadow:none;outline:none}.mp-render-month-container{display:flex;justify-content:space-between}.mp-render-month{display:flex;flex-wrap:wrap;gap:36px;height:128px;margin-top:4px;row-gap:10px;width:252px}.mp-month{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:#0000;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;gap:10px;height:36px;justify-content:center;padding:0;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-month:focus-visible{box-shadow:0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.mp-month:focus:not(:focus-visible){box-shadow:none;outline:none}.mp-month.Mui-disabled:focus-visible,.mp-month.ia-btn-disabled:focus-visible,.mp-month.ia-switch-disabled:focus-visible,.mp-month.impact-select-disabled:focus-visible,.mp-month.impact_input_disabled:focus-visible,.mp-month.route-disabled:focus-visible,.mp-month:disabled:focus-visible,.mp-month[aria-disabled=true]:focus-visible{box-shadow:none;outline:none}.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,.mp-month:disabled{color:#b4bac7;cursor:default;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(i)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}}();
 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";
@@ -35,7 +35,11 @@ function MonthPicker({
   withPortal = false,
   portalContainer = typeof document !== "undefined" ? document.body : null,
   portalClassName = "",
-  YearSelectComponent
+  YearSelectComponent,
+  onMonthChange,
+  className,
+  id,
+  "data-testid": dataTestId
 }) {
   const ResolvedYearSelect = YearSelectComponent ?? DefaultYearSelect;
   const today = useMemo(() => /* @__PURE__ */ new Date(), []);
@@ -57,6 +61,10 @@ function MonthPicker({
   const [focusInput, setFocusInput] = useState(focusedInput);
   const [dummySelectedMonth, setDummySelectedMonth] = useState(initialSelectedMonth);
   const isResetClicked = useRef(false);
+  const [focusedMonthIndex, setFocusedMonthIndex] = useState(null);
+  const monthButtonRefs = useRef([]);
+  const keyboardOpenRef = useRef(false);
+  const pendingFocusRef = useRef(null);
   const [prevIconDisabled, setPrevIconDisabled] = useState(false);
   const [nextIconDisabled, setNextIconDisabled] = useState(false);
   const [position, setPosition] = useState({
@@ -65,9 +73,13 @@ function MonthPicker({
     offsetHeight: 0,
     offsetWidth: 0
   });
-  const handleMonthClick = useCallback((month) => {
-    setSelectedMonth(month);
-  }, []);
+  const handleMonthClick = useCallback(
+    (month) => {
+      setSelectedMonth(month);
+      onMonthChange == null ? void 0 : onMonthChange(month);
+    },
+    [onMonthChange]
+  );
   const formatDate = useCallback(
     (date) => {
       if (!date) return "";
@@ -91,29 +103,32 @@ function MonthPicker({
       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(" ");
+      const variantClass = isSelected ? "selected" : isDisabled ? "disabled" : isCurrentMonth ? "current-month" : "";
       return /* @__PURE__ */ jsx(
-        "div",
+        "button",
         {
+          ref: (el) => {
+            monthButtonRefs.current[monthIndex] = el;
+          },
+          "aria-label": new Intl.DateTimeFormat(locale, {
+            month: "long",
+            year: "numeric"
+          }).format(monthStart),
+          "aria-pressed": isSelected,
           className: `mp-month month${monthIndex + 1} ${variantClass}`.trim(),
-          role: "button",
-          tabIndex: 0,
+          disabled: isDisabled,
+          tabIndex: focusedMonthIndex === monthIndex ? 0 : -1,
+          type: "button",
           onClick: () => {
             handleMonthClick(monthStart);
           },
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") handleMonthClick(monthStart);
-          },
+          onFocus: () => setFocusedMonthIndex(monthIndex),
           children: /* @__PURE__ */ jsx("span", { className: "mp-calendar-month", children: new Intl.DateTimeFormat(locale, { month: "short" }).format(monthStart) })
         },
         monthIndex
       );
     },
-    [locale, today, isMonthSelected, isOutsideRange, handleMonthClick]
+    [locale, today, isMonthSelected, isOutsideRange, handleMonthClick, focusedMonthIndex]
   );
   const renderYear = useCallback(
     (year) => /* @__PURE__ */ jsx("div", { className: "mp-render-month", children: MONTHS_NUMBER.map((m) => renderMonth(year, m)) }),
@@ -136,6 +151,17 @@ function MonthPicker({
       return { label: newVal.toString(), value: newVal.toString() };
     });
   }, []);
+  const handleInputKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && !openCalendar) {
+        keyboardOpenRef.current = true;
+        setOpenCalendar(true);
+        setFocusInput("selected month");
+        setFocusedMonthIndex((selectedMonth == null ? void 0 : selectedMonth.getMonth()) ?? 0);
+      }
+    },
+    [openCalendar, selectedMonth]
+  );
   const handleInputClick = useCallback(() => {
     setOpenCalendar(true);
     setFocusInput("selected month");
@@ -177,6 +203,42 @@ function MonthPicker({
     setOpenCalendar(false);
     setSelectedMonth(dummySelectedMonth);
   }, [dummySelectedMonth]);
+  const handleCalendarKeyDown = useCallback(
+    (e) => {
+      var _a, _b;
+      if (e.key === "Escape") {
+        handleCancel();
+        (_a = monthInputRef.current) == null ? void 0 : _a.focus();
+        return;
+      }
+      const moves = {
+        ArrowRight: 1,
+        ArrowLeft: -1,
+        ArrowDown: 4,
+        ArrowUp: -4
+      };
+      const delta = moves[e.key];
+      if (delta !== void 0 && focusedMonthIndex !== null) {
+        e.preventDefault();
+        const next = focusedMonthIndex + delta;
+        if (next > 11) {
+          if (!nextIconDisabled) {
+            pendingFocusRef.current = next - 12;
+            handleNextYear();
+          }
+        } else if (next < 0) {
+          if (!prevIconDisabled) {
+            pendingFocusRef.current = next + 12;
+            handlePrevYear();
+          }
+        } else {
+          setFocusedMonthIndex(next);
+          (_b = monthButtonRefs.current[next]) == null ? void 0 : _b.focus();
+        }
+      }
+    },
+    [focusedMonthIndex, nextIconDisabled, prevIconDisabled, handleNextYear, handlePrevYear, handleCancel]
+  );
   const handleApply = useCallback(() => {
     setOpenCalendar(false);
     setDummySelectedMonth(selectedMonth);
@@ -194,6 +256,28 @@ function MonthPicker({
       });
     }
   }, [openCalendar, withPortal]);
+  useEffect(() => {
+    if (openCalendar && keyboardOpenRef.current && focusedMonthIndex !== null) {
+      const timer = setTimeout(() => {
+        var _a;
+        (_a = monthButtonRefs.current[focusedMonthIndex]) == null ? void 0 : _a.focus();
+      }, 0);
+      keyboardOpenRef.current = false;
+      return () => clearTimeout(timer);
+    }
+    return void 0;
+  }, [openCalendar, focusedMonthIndex]);
+  useEffect(() => {
+    if (pendingFocusRef.current !== null) {
+      const idx = pendingFocusRef.current;
+      pendingFocusRef.current = null;
+      setFocusedMonthIndex(idx);
+      setTimeout(() => {
+        var _a;
+        (_a = monthButtonRefs.current[idx]) == null ? void 0 : _a.focus();
+      }, 0);
+    }
+  }, [selectedOptions]);
   useEffect(() => {
     var _a, _b;
     if (selectedOptions.value === ((_a = currentOptions[0]) == null ? void 0 : _a.value)) {
@@ -211,39 +295,51 @@ function MonthPicker({
     () => 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" })
-    ] })
-  ] });
+  const renderCalendarContent = () => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: dropDownContainerRef,
+      "aria-label": "Month picker",
+      className: "mp-single-month-picker-container",
+      role: "dialog",
+      onKeyDown: handleCalendarKeyDown,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mp-header", children: [
+          /* @__PURE__ */ jsx(IconButton, { disableRipple: true, disabled: prevIconDisabled, sx: { padding: 0 }, 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, sx: { padding: 0 }, 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(),
+      className: `impact-singleMonthPicker-main-container single-month-label-flex-column ${disabled ? "disabled" : ""} ${className ?? ""}`.trim(),
+      "data-testid": dataTestId,
+      id,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "singleMonthPicker-label", children: [
           "Select Month & Year",
@@ -262,6 +358,8 @@ function MonthPicker({
                   {
                     ref: monthInputRef,
                     readOnly: true,
+                    "aria-expanded": openCalendar,
+                    "aria-haspopup": "dialog",
                     "aria-label": "Select month and year",
                     className: `singleMonthPicker-input-field ${selectedMonth ? "active" : ""} ${computedIsError ? "error" : ""}`.trim(),
                     placeholder: `Select ${displayFormat}`,
@@ -273,7 +371,8 @@ function MonthPicker({
                     onClick: handleInputClick,
                     onFocus: () => {
                       setFocusInput("selected month");
-                    }
+                    },
+                    onKeyDown: handleInputKeyDown
                   }
                 ),
                 selectedMonth && /* @__PURE__ */ jsx(
@@ -281,8 +380,15 @@ function MonthPicker({
                   {
                     "aria-label": "Clear selection",
                     className: "mp-close-icon",
+                    tabIndex: 0,
                     type: "button",
-                    onClick: handleClear
+                    onClick: handleClear,
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        handleClear();
+                      }
+                    }
                   }
                 )
               ] }),

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

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

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MonthRangePicker/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,gCAAgC,CAAC;AAIxC,eAAO,MAAM,gBAAgB,GAAI;;;;;;;;;;;;;;;;;;;;;;CAsBhC,4CAmqBA,CAAC"}

package/dist/components/MonthRangePicker/index.js

@@ -1,4 +1,4 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('*,:after,:before{box-sizing:border-box}body,textarea{font-style:normal;font-weight:500}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:Manrope,sans-serif}.impact-notification-separator{background-color:#d9dde7;display:inline-block;height:16px;width:1.5px}.impact-notification-horizontal-separator{background-color:#d9dde7;display:inline-block;height:1px;width:100%}ul.storybook-order-list{list-style-type:disc;padding-left:12px}ul.storybook-order-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-list li strong{font-weight:800}ul.storybook-order-child-list{list-style-type:circle;padding-left:20px}ul.storybook-order-child-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-child-list li strong{font-weight:800}.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-monthRangePicker-main-container{display:flex;font-family:Manrope,sans-serif}.impact-monthRangePicker-main-container.label-flex-column{flex-direction:column}.impact-monthRangePicker-main-container.label-flex-column .monthRangePicker-label{margin-bottom:6px}.impact-monthRangePicker-main-container .monthRangePicker-label{color:#60697d;font-family:Manrope,sans-serif;font-size:12px;font-weight:500;line-height:16px}.impact-monthRangePicker-main-container .monthRangePicker-container{position:relative;width:282px}.impact-monthRangePicker-main-container .monthRangePicker-input-container{box-sizing:border-box;display:flex;height:32px;width:100%}.impact-monthRangePicker-main-container .monthRangePicker-input-container:focus-within .dateRangePicker-input-start-date,.impact-monthRangePicker-main-container .monthRangePicker-input-container:hover .dateRangePicker-input-start-date{border:1px solid #4259ee;border-right:none}.impact-monthRangePicker-main-container .monthRangePicker-input-container:focus-within .dateRangePicker-input-end-date,.impact-monthRangePicker-main-container .monthRangePicker-input-container:hover .dateRangePicker-input-end-date{border:1px solid #4259ee;border-left:none}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-start-date{border:1px solid #c3c8d4;border-radius:8px 0 0 8px;border-right:none;box-sizing:border-box;color:#1f2b4d;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;padding-left:12px;width:123px}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-start-date.active{width:76px}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-start-date.error{border-bottom:1px solid #e15554;border-left:1px solid #e15554;border-top:1px solid #e15554}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-start-date::placeholder{color:#b4bac7}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-start-date:focus{outline:none}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-start-date:focus::placeholder,.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-start-date:focus:not(:placeholder-shown){color:#4259ee}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-end-date{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-left:none;border-radius:0 8px 8px 0;box-sizing:border-box;color:#1f2b4d;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;width:100%}@media screen and (max-width:1399px) and (min-width:1200px){.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-end-date{background-position:center right 10px;background-size:13px;padding-left:10px}}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-end-date::placeholder{color:#b4bac7}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-end-date:focus{outline:none}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-end-date.error{border-bottom:1px solid #e15554;border-right:1px solid #e15554;border-top:1px solid #e15554}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-end-date:focus::placeholder,.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-end-date:focus:not(:placeholder-shown){color:#4259ee}.impact-monthRangePicker-main-container .monthRangePicker-input-container .close-icon{border-radius:4px;cursor:pointer;position:absolute;right:36px;top:16px;transform:translateY(-50%)}.impact-monthRangePicker-main-container .monthRangePicker-input-container .close-icon:focus-visible{box-shadow:0 0 0 3px #eceefd;outline:none}.impact-monthRangePicker-main-container.disabled{pointer-events:none}.impact-monthRangePicker-main-container.disabled .monthRangePicker-label{color:#b4bac7}.impact-monthRangePicker-main-container.disabled .dateRangePicker-input-end-date,.impact-monthRangePicker-main-container.disabled .dateRangePicker-input-start-date{background-color:#f8f9fb;border-color:#d9dde7;color:#b4bac7}.impact-monthRangePicker-main-container.disabled .dateRangePicker-input-end-date{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}.impact-monthRangePicker-main-container.disabled .close-icon path{fill:#b4bac7}.ia-month-picker-container{background-color:#fff;border:1px solid #f0f0f0;border-radius:12px;box-shadow:0 0 4px #0000001f;height:276px;left:0;padding:16px;position:absolute;top:40px;width:586px;z-index:1200}.month-range-picker-selected-year{color:#1f2b4d;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;line-height:16px}.month-range-picker-year-select-container{width:85px}.month-range-picker-year-select-container .ia-select-styled-dropdown-main-button{border:none!important;padding:6px}.month-range-picker-year-select-container .ia-select-button-clear-icon{display:none}.month-range-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:36px}.month-range-picker-month-select-dropdown,.month-range-picker-year-select-dropdown{min-width:115px!important;width:115px!important;z-index:9999}.ia-header{align-items:center;display:flex;justify-content:space-between;padding-inline:8px}.ia-header .Mui-focusVisible:focus-visible{box-shadow:0 0 0 3px #eceefd;outline:none}.ia-render-month-container{display:flex;justify-content:space-between}.ia-render-month{display:flex;flex-wrap:wrap;gap:36px;height:128px;margin-top:16px;row-gap:10px;width:252px}.ia-month{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:#0000;border:1px solid #0000;color:inherit;cursor:pointer;display:flex;font:inherit;gap:10px;height:36px;justify-content:center;padding:0;width:36px}.ia-month:hover:not(.start,.end){background-color:#eceefd;border:1px solid #b3bdf8;border-radius:8px;color:#3649c6}.ia-month.current-month{border:1px solid #eceefd;border-radius:8px}.ia-month:focus-visible{box-shadow:0 0 0 3px #eceefd;outline:none}.ia-month.disabled:focus-visible,.ia-month:disabled:focus-visible{box-shadow:none;outline:none}.ia-calendar-month{font-family:Manrope,sans-serif;font-size:12px;font-weight:500;line-height:15px;text-align:left;text-decoration-skip-ink:none;text-underline-position:from-font}.ia-month.end,.ia-month.start{background-color:#4259ee;border-radius:8px;color:#fff;position:relative}.ia-month.end.has-start-month:before{background-color:#eceefd;content:"";height:100%;left:-47px;position:absolute;right:6px;top:0;z-index:-1}.ia-month.selected{background-color:initial;border:1px solid #0000;border-radius:0;position:relative}.ia-month.selected:hover:before{border-radius:6px}.ia-month.selected:before{background-color:#eceefd;content:"";height:100%;left:-47px;position:absolute;right:0;top:0;z-index:-1}.ia-month.selected.hovered-previous-to-end:before{display:none}.ia-month.selected.hovered-previous-to-end:after{background-color:#eceefd;content:"";height:100%;left:0;position:absolute;right:-47px;top:0;z-index:-1}.month12:after,.month4:after,.month8:after{right:-1px!important}.month1:before,.month5:before,.month9:before{left:-1px!important}.month1.end:before,.month1.start:before,.month5.end:before,.month5.start:before,.month9.end:before,.month9.start:before{left:4px!important}.ia-month.disabled,.ia-month:disabled{color:#b4bac7;cursor:default;pointer-events:none}.ia-vertical-line{border:.5px solid #d9dde7;margin-block:16px 0}.ia-calendar-button{display:flex;gap:16px;justify-content:flex-end;margin-top:16px}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(':root{--ia-focus-color:#4259ee;--ia-focus-bg:#fff;--ia-focus-ring-width:2px;--ia-focus-ring-offset:2px}*,:after,:before{box-sizing:border-box}body,textarea{font-style:normal;font-weight:500}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:Manrope,sans-serif}.impact-notification-separator{background-color:#d9dde7;display:inline-block;height:16px;width:1.5px}.impact-notification-horizontal-separator{background-color:#d9dde7;display:inline-block;height:1px;width:100%}ul.storybook-order-list{list-style-type:disc;padding-left:12px}ul.storybook-order-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-list li strong{font-weight:800}ul.storybook-order-child-list{list-style-type:circle;padding-left:20px}ul.storybook-order-child-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-child-list li strong{font-weight:800}.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-monthRangePicker-main-container{display:flex;font-family:Manrope,sans-serif}.impact-monthRangePicker-main-container.label-flex-column{flex-direction:column}.impact-monthRangePicker-main-container.label-flex-column .monthRangePicker-label{margin-bottom:6px}.impact-monthRangePicker-main-container .monthRangePicker-label{color:#60697d;font-family:Manrope,sans-serif;font-size:12px;font-weight:500;line-height:16px}.impact-monthRangePicker-main-container .monthRangePicker-container{position:relative;width:282px}.impact-monthRangePicker-main-container .monthRangePicker-input-container{box-sizing:border-box;display:flex;height:32px;width:100%}.impact-monthRangePicker-main-container .monthRangePicker-input-container:focus-within .dateRangePicker-input-start-date,.impact-monthRangePicker-main-container .monthRangePicker-input-container:hover .dateRangePicker-input-start-date{border:1px solid #4259ee;border-right:none}.impact-monthRangePicker-main-container .monthRangePicker-input-container:focus-within .dateRangePicker-input-end-date,.impact-monthRangePicker-main-container .monthRangePicker-input-container:hover .dateRangePicker-input-end-date{border:1px solid #4259ee;border-left:none}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-start-date{border:1px solid #c3c8d4;border-radius:8px 0 0 8px;border-right:none;box-sizing:border-box;color:#1f2b4d;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;padding-left:12px;width:123px}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-start-date.active{width:76px}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-start-date.error{border-bottom:1px solid #e15554;border-left:1px solid #e15554;border-top:1px solid #e15554}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-start-date::placeholder{color:#b4bac7}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-start-date:focus{outline:none}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-start-date:focus::placeholder,.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-start-date:focus:not(:placeholder-shown){color:#4259ee}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-end-date{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-left:none;border-radius:0 8px 8px 0;box-sizing:border-box;color:#1f2b4d;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;width:100%}@media screen and (max-width:1399px) and (min-width:1200px){.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-end-date{background-position:center right 10px;background-size:13px;padding-left:10px}}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-end-date::placeholder{color:#b4bac7}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-end-date:focus{outline:none}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-end-date.error{border-bottom:1px solid #e15554;border-right:1px solid #e15554;border-top:1px solid #e15554}.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-end-date:focus::placeholder,.impact-monthRangePicker-main-container .monthRangePicker-input-container .dateRangePicker-input-end-date:focus:not(:placeholder-shown){color:#4259ee}.impact-monthRangePicker-main-container .monthRangePicker-input-container .close-icon{border-radius:4px;cursor:pointer;position:absolute;right:36px;top:16px;transform:translateY(-50%)}.impact-monthRangePicker-main-container .monthRangePicker-input-container .close-icon:focus-visible{box-shadow:0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.impact-monthRangePicker-main-container .monthRangePicker-input-container .close-icon:focus:not(:focus-visible){box-shadow:none;outline:none}.impact-monthRangePicker-main-container.disabled{pointer-events:none}.impact-monthRangePicker-main-container.disabled .monthRangePicker-label{color:#b4bac7}.impact-monthRangePicker-main-container.disabled .dateRangePicker-input-end-date,.impact-monthRangePicker-main-container.disabled .dateRangePicker-input-start-date{background-color:#f8f9fb;border-color:#d9dde7;color:#b4bac7}.impact-monthRangePicker-main-container.disabled .dateRangePicker-input-end-date{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}.impact-monthRangePicker-main-container.disabled .close-icon path{fill:#b4bac7}.ia-month-picker-container{background-color:#fff;border:1px solid #f0f0f0;border-radius:12px;box-shadow:0 0 4px #0000001f;height:276px;left:0;padding:16px;position:absolute;top:40px;width:586px;z-index:1200}.month-range-picker-selected-year{color:#1f2b4d;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;line-height:16px}.month-range-picker-year-select-container{width:85px}.month-range-picker-year-select-container .ia-select-styled-dropdown-main-button{border:none!important;padding:6px}.month-range-picker-year-select-container .ia-select-button-clear-icon{display:none}.month-range-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:36px}.month-range-picker-month-select-dropdown,.month-range-picker-year-select-dropdown{min-width:115px!important;width:115px!important;z-index:9999}.ia-header{align-items:center;display:flex;justify-content:space-between;padding-inline:8px}.ia-header .Mui-focusVisible:focus-visible{box-shadow:0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.ia-header .Mui-focusVisible:focus:not(:focus-visible){box-shadow:none;outline:none}.ia-render-month-container{display:flex;justify-content:space-between}.ia-render-month{display:flex;flex-wrap:wrap;gap:36px;height:128px;margin-top:16px;row-gap:10px;width:252px}.ia-month{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:#0000;border:1px solid #0000;color:inherit;cursor:pointer;display:flex;font:inherit;gap:10px;height:36px;justify-content:center;padding:0;width:36px}.ia-month:hover:not(.start,.end){background-color:#eceefd;border:1px solid #b3bdf8;border-radius:8px;color:#3649c6}.ia-month.current-month{border:1px solid #eceefd;border-radius:8px}.ia-month:focus-visible{box-shadow:0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.ia-month:focus:not(:focus-visible){box-shadow:none;outline:none}.ia-month.Mui-disabled:focus-visible,.ia-month.ia-btn-disabled:focus-visible,.ia-month.ia-switch-disabled:focus-visible,.ia-month.impact-select-disabled:focus-visible,.ia-month.impact_input_disabled:focus-visible,.ia-month.route-disabled:focus-visible,.ia-month:disabled:focus-visible,.ia-month[aria-disabled=true]:focus-visible{box-shadow:none;outline:none}.ia-calendar-month{font-family:Manrope,sans-serif;font-size:12px;font-weight:500;line-height:15px;text-align:left;text-decoration-skip-ink:none;text-underline-position:from-font}.ia-month.end,.ia-month.start{background-color:#4259ee;border-radius:8px;color:#fff;position:relative}.ia-month.end.has-start-month:before{background-color:#eceefd;content:"";height:100%;left:-47px;position:absolute;right:6px;top:0;z-index:-1}.ia-month.selected{background-color:initial;border:1px solid #0000;border-radius:0;position:relative}.ia-month.selected:hover:before{border-radius:6px}.ia-month.selected:before{background-color:#eceefd;content:"";height:100%;left:-47px;position:absolute;right:0;top:0;z-index:-1}.ia-month.selected.hovered-previous-to-end:before{display:none}.ia-month.selected.hovered-previous-to-end:after{background-color:#eceefd;content:"";height:100%;left:0;position:absolute;right:-47px;top:0;z-index:-1}.month12:after,.month4:after,.month8:after{right:-1px!important}.month1:before,.month5:before,.month9:before{left:-1px!important}.month1.end:before,.month1.start:before,.month5.end:before,.month5.start:before,.month9.end:before,.month9.start:before{left:4px!important}.ia-month.disabled,.ia-month:disabled{color:#b4bac7;cursor:default;pointer-events:none}.ia-vertical-line{border:.5px solid #d9dde7;margin-block:16px 0}.ia-calendar-button{display:flex;gap:16px;justify-content:flex-end;margin-top:16px}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useLayoutEffect } from "react";
 import default_1 from "../../node_modules/@mui/icons-material/ChevronLeftOutlined.js";
@@ -10,7 +10,7 @@ import { Portal } from "../Portal/index.js";
 import { Select } from "../Select/index.js";
 
 import IconButton from "../../node_modules/@mui/material/IconButton/IconButton.js";
-const CloseIcon = getAssetUrl("icons/close.svg");
+const closeIconUrl = getAssetUrl("icons/close.svg");
 const MonthRangePicker = ({
   customYears,
   locale = "en-US",
@@ -32,7 +32,10 @@ const MonthRangePicker = ({
   onStartMonthChange = () => {
   },
   onEndMonthChange = () => {
-  }
+  },
+  className,
+  id,
+  "data-testid": dataTestId
 }) => {
   const today = /* @__PURE__ */ new Date();
   const currentYear = today.getFullYear();
@@ -492,7 +495,9 @@ const MonthRangePicker = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `impact-monthRangePicker-main-container label-flex-column ${disabled ? "disabled" : ""}`,
+      className: `impact-monthRangePicker-main-container label-flex-column ${disabled ? "disabled" : ""} ${className ?? ""}`.trim(),
+      "data-testid": dataTestId,
+      id,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "monthRangePicker-label", children: [
           "Select Month & Year",
@@ -553,18 +558,20 @@ const MonthRangePicker = ({
                   }
                 ),
                 (startMonth || endMonth) && /* @__PURE__ */ jsx(
-                  CloseIcon,
+                  "button",
                   {
                     "aria-label": "Close month range picker",
                     className: "close-icon",
                     tabIndex: 0,
+                    type: "button",
                     onClick: handleClear,
                     onKeyDown: (e) => {
                       if (e.key === "Enter" || e.key === " ") {
                         e.preventDefault();
                         handleClear();
                       }
-                    }
+                    },
+                    children: /* @__PURE__ */ jsx("img", { alt: "", src: closeIconUrl })
                   }
                 )
               ] }),