@simplybusiness/mobius 4.2.8 → 4.3.0

package/dist/cjs/utils/index.js

@@ -9,7 +9,6 @@ _export_star(require("./mergeRefs"), exports);
 _export_star(require("./polyfill-tests"), exports);
 _export_star(require("./sizeClasses"), exports);
 _export_star(require("./spaceDelimitedList"), exports);
-_export_star(require("./StoryContainer"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from \"./changeCSS\";\nexport * from \"./excludeControls\";\nexport * from \"./jestHTMLDialogPolyfill\";\nexport * from \"./mergeRefs\";\nexport * from \"./polyfill-tests\";\nexport * from \"./sizeClasses\";\nexport * from \"./spaceDelimitedList\";\nexport * from \"./StoryContainer\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA"}
+{"version":3,"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from \"./changeCSS\";\nexport * from \"./excludeControls\";\nexport * from \"./jestHTMLDialogPolyfill\";\nexport * from \"./mergeRefs\";\nexport * from \"./polyfill-tests\";\nexport * from \"./sizeClasses\";\nexport * from \"./spaceDelimitedList\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA"}

package/dist/cjs/utils/jestMockMatchMedia.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "jestMockMatchMedia", {
+    enumerable: true,
+    get: function() {
+        return jestMockMatchMedia;
+    }
+});
+const jestMockMatchMedia = (matches)=>{
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        configurable: true,
+        value: jest.fn().mockImplementation((query)=>({
+                matches,
+                media: query,
+                onchange: null,
+                addListener: jest.fn(),
+                removeListener: jest.fn(),
+                addEventListener: jest.fn(),
+                removeEventListener: jest.fn(),
+                dispatchEvent: jest.fn()
+            }))
+    });
+};
+
+//# sourceMappingURL=jestMockMatchMedia.js.map

package/dist/cjs/utils/jestMockMatchMedia.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/jestMockMatchMedia.ts"],"sourcesContent":["export const jestMockMatchMedia = (matches: boolean) => {\n  Object.defineProperty(window, \"matchMedia\", {\n    writable: true,\n    configurable: true,\n    value: jest.fn().mockImplementation(query => ({\n      matches,\n      media: query,\n      onchange: null,\n      addListener: jest.fn(),\n      removeListener: jest.fn(),\n      addEventListener: jest.fn(),\n      removeEventListener: jest.fn(),\n      dispatchEvent: jest.fn(),\n    })),\n  });\n};\n"],"names":["jestMockMatchMedia","matches","Object","defineProperty","window","writable","configurable","value","jest","fn","mockImplementation","query","media","onchange","addListener","removeListener","addEventListener","removeEventListener","dispatchEvent"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,qBAAqB,CAACC;IACjCC,OAAOC,cAAc,CAACC,QAAQ,cAAc;QAC1CC,UAAU;QACVC,cAAc;QACdC,OAAOC,KAAKC,EAAE,GAAGC,kBAAkB,CAACC,CAAAA,QAAU,CAAA;gBAC5CV;gBACAW,OAAOD;gBACPE,UAAU;gBACVC,aAAaN,KAAKC,EAAE;gBACpBM,gBAAgBP,KAAKC,EAAE;gBACvBO,kBAAkBR,KAAKC,EAAE;gBACzBQ,qBAAqBT,KAAKC,EAAE;gBAC5BS,eAAeV,KAAKC,EAAE;YACxB,CAAA;IACF;AACF"}

package/dist/esm/components/Drawer/Drawer.js

@@ -26,7 +26,7 @@ const Drawer = /*#__PURE__*/ forwardRef((props, ref)=>{
             event.stopPropagation();
         }
         const doClose = ()=>{
-            dialog.close();
+            dialog === null || dialog === void 0 ? void 0 : dialog.close();
             onClose === null || onClose === void 0 ? void 0 : onClose();
         };
         // Delay close to allow exit animation

package/dist/esm/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  Ref,\n  SyntheticEvent,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { DrawerProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\n\nexport type DialogElementType = HTMLDialogElement;\nexport type DialogRef = Ref<DialogElementType>;\n\nconst Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {\n  const {\n    isOpen,\n    className,\n    closeLabel,\n    direction,\n    announce = \"Drawer opened on screen\",\n    onOpen,\n    onClose,\n    children,\n  } = props;\n  const hasOpened = useRef<boolean>(false);\n  const modalRef = useRef<HTMLDialogElement>(null);\n  const dialog = modalRef.current as HTMLDialogElement;\n\n  // Fire onOpen once\n  if (onOpen && !hasOpened.current) {\n    onOpen();\n    hasOpened.current = true;\n  }\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing animations\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      const doClose = () => {\n        dialog.close();\n        onClose?.();\n      };\n\n      // Delay close to allow exit animation\n      dialog?.classList.add(\"close\");\n      dialog?.addEventListener(\n        \"animationend\",\n        () => {\n          dialog.classList.remove(\"close\");\n          doClose();\n        },\n        { once: true },\n      );\n    },\n    [onClose, dialog],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Drawer\",\n    `--${direction}`,\n    className,\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (!supportsDialog() && typeof window !== \"undefined\") {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n        dialogPolyfill.registerDialog(modalRef.current as HTMLDialogElement);\n      }\n\n      if (isOpen) {\n        modalRef.current?.showModal();\n        onOpen?.();\n      } else if (modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose]);\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n      aria-describedby=\"screen-reader-announce\"\n    >\n      <VisuallyHidden>\n        <div id=\"screen-reader-announce\">{announce}</div>\n      </VisuallyHidden>\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\n    </dialog>\n  );\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n"],"names":["classNames","Children","cloneElement","forwardRef","isValidElement","useCallback","useEffect","useRef","useBodyScrollLock","supportsDialog","VisuallyHidden","mergeRefs","Drawer","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","modalRef","dialog","current","enabled","handleClose","event","preventDefault","stopPropagation","doClose","close","classList","add","addEventListener","remove","once","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","showModal","open","onCancel","aria-describedby","div","id","map","child","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SACEC,QAAQ,EAGRC,YAAY,EACZC,UAAU,EACVC,cAAc,EACdC,WAAW,EACXC,SAAS,EACTC,MAAM,QACD,QAAQ;AACf,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,cAAc,QAAQ,oBAAoB;AAEnD,SAASC,SAAS,QAAQ,cAAc;AAKxC,MAAMC,uBAAST,WAAW,CAACU,OAAoBC;IAC7C,MAAM,EACJC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,WAAW,yBAAyB,EACpCC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACT,GAAGT;IACJ,MAAMU,YAAYhB,OAAgB;IAClC,MAAMiB,WAAWjB,OAA0B;IAC3C,MAAMkB,SAASD,SAASE,OAAO;IAE/B,mBAAmB;IACnB,IAAIN,UAAU,CAACG,UAAUG,OAAO,EAAE;QAChCN;QACAG,UAAUG,OAAO,GAAG;IACtB;IAEAlB,kBAAkB;QAAEmB,SAASZ;IAAO;IAEpC,kDAAkD;IAClD,MAAMa,cAAcvB,YAClB,CAACwB;QACC,IAAIA,OAAO;YACTA,MAAMC,cAAc;YACpBD,MAAME,eAAe;QACvB;QAEA,MAAMC,UAAU;YACdP,OAAOQ,KAAK;YACZZ,oBAAAA,8BAAAA;QACF;QAEA,sCAAsC;QACtCI,mBAAAA,6BAAAA,OAAQS,SAAS,CAACC,GAAG,CAAC;QACtBV,mBAAAA,6BAAAA,OAAQW,gBAAgB,CACtB,gBACA;YACEX,OAAOS,SAAS,CAACG,MAAM,CAAC;YACxBL;QACF,GACA;YAAEM,MAAM;QAAK;IAEjB,GACA;QAACjB;QAASI;KAAO;IAGnB,MAAMc,eAAevC,WACnB,UACA,iBACA,CAAC,EAAE,EAAEkB,UAAU,CAAC,EAChBF;IAGF,+CAA+C;IAC/CV,UAAU;QACR,eAAekC;gBAUFhB;YATX,IAAI,CAACf,oBAAoB,OAAOgC,WAAW,aAAa;gBACtD,6DAA6D;gBAC7D,MAAM,EAAEC,SAASC,cAAc,EAAE,GAAG,MAAM,MAAM,CAAC;gBACjDA,eAAeC,cAAc,CAACpB,SAASE,OAAO;YAChD;YAEA,IAAIX,QAAQ;oBACVS;iBAAAA,qBAAAA,SAASE,OAAO,cAAhBF,yCAAAA,mBAAkBqB,SAAS;gBAC3BzB,mBAAAA,6BAAAA;YACF,OAAO,KAAII,oBAAAA,SAASE,OAAO,cAAhBF,wCAAAA,kBAAkBsB,IAAI,EAAE;gBACjClB;YACF;QACF;QAEAY;IACF,GAAG;QAACzB;QAAQK;QAAQQ;KAAY;IAEhC,qBACE,MAACH;QACCX,KAAKH,UAAU;YAACa;YAAUV;SAAI;QAC9BiC,UAAUnB;QACVZ,WAAWuB;QACXS,oBAAiB;;0BAEjB,KAACtC;0BACC,cAAA,KAACuC;oBAAIC,IAAG;8BAA0B/B;;;YAEnClB,SAASkD,GAAG,CAAC7B,UAAU8B,CAAAA;gBACtB,kBAAIhD,eAAegD,QAAQ;oBACzB,qBAAOlD,aAAakD,OAAO;wBACzB/B,SAASO;wBACTX;oBACF;gBACF;gBAEA,OAAOmC;YACT;;;AAGN;AAEAxC,OAAOyC,WAAW,GAAG;AACrB,SAASzC,MAAM,GAAG"}
+{"version":3,"sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  Ref,\n  SyntheticEvent,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { DrawerProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\n\nexport type DialogElementType = HTMLDialogElement;\nexport type DialogRef = Ref<DialogElementType>;\n\nconst Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {\n  const {\n    isOpen,\n    className,\n    closeLabel,\n    direction,\n    announce = \"Drawer opened on screen\",\n    onOpen,\n    onClose,\n    children,\n  } = props;\n  const hasOpened = useRef<boolean>(false);\n  const modalRef = useRef<HTMLDialogElement>(null);\n  const dialog = modalRef.current as HTMLDialogElement;\n\n  // Fire onOpen once\n  if (onOpen && !hasOpened.current) {\n    onOpen();\n    hasOpened.current = true;\n  }\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing animations\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      const doClose = () => {\n        dialog?.close();\n        onClose?.();\n      };\n\n      // Delay close to allow exit animation\n      dialog?.classList.add(\"close\");\n      dialog?.addEventListener(\n        \"animationend\",\n        () => {\n          dialog.classList.remove(\"close\");\n          doClose();\n        },\n        { once: true },\n      );\n    },\n    [onClose, dialog],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Drawer\",\n    `--${direction}`,\n    className,\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (!supportsDialog() && typeof window !== \"undefined\") {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n        dialogPolyfill.registerDialog(modalRef.current as HTMLDialogElement);\n      }\n\n      if (isOpen) {\n        modalRef.current?.showModal();\n        onOpen?.();\n      } else if (modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose]);\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n      aria-describedby=\"screen-reader-announce\"\n    >\n      <VisuallyHidden>\n        <div id=\"screen-reader-announce\">{announce}</div>\n      </VisuallyHidden>\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\n    </dialog>\n  );\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n"],"names":["classNames","Children","cloneElement","forwardRef","isValidElement","useCallback","useEffect","useRef","useBodyScrollLock","supportsDialog","VisuallyHidden","mergeRefs","Drawer","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","modalRef","dialog","current","enabled","handleClose","event","preventDefault","stopPropagation","doClose","close","classList","add","addEventListener","remove","once","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","showModal","open","onCancel","aria-describedby","div","id","map","child","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SACEC,QAAQ,EAGRC,YAAY,EACZC,UAAU,EACVC,cAAc,EACdC,WAAW,EACXC,SAAS,EACTC,MAAM,QACD,QAAQ;AACf,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,cAAc,QAAQ,oBAAoB;AAEnD,SAASC,SAAS,QAAQ,cAAc;AAKxC,MAAMC,uBAAST,WAAW,CAACU,OAAoBC;IAC7C,MAAM,EACJC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,WAAW,yBAAyB,EACpCC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACT,GAAGT;IACJ,MAAMU,YAAYhB,OAAgB;IAClC,MAAMiB,WAAWjB,OAA0B;IAC3C,MAAMkB,SAASD,SAASE,OAAO;IAE/B,mBAAmB;IACnB,IAAIN,UAAU,CAACG,UAAUG,OAAO,EAAE;QAChCN;QACAG,UAAUG,OAAO,GAAG;IACtB;IAEAlB,kBAAkB;QAAEmB,SAASZ;IAAO;IAEpC,kDAAkD;IAClD,MAAMa,cAAcvB,YAClB,CAACwB;QACC,IAAIA,OAAO;YACTA,MAAMC,cAAc;YACpBD,MAAME,eAAe;QACvB;QAEA,MAAMC,UAAU;YACdP,mBAAAA,6BAAAA,OAAQQ,KAAK;YACbZ,oBAAAA,8BAAAA;QACF;QAEA,sCAAsC;QACtCI,mBAAAA,6BAAAA,OAAQS,SAAS,CAACC,GAAG,CAAC;QACtBV,mBAAAA,6BAAAA,OAAQW,gBAAgB,CACtB,gBACA;YACEX,OAAOS,SAAS,CAACG,MAAM,CAAC;YACxBL;QACF,GACA;YAAEM,MAAM;QAAK;IAEjB,GACA;QAACjB;QAASI;KAAO;IAGnB,MAAMc,eAAevC,WACnB,UACA,iBACA,CAAC,EAAE,EAAEkB,UAAU,CAAC,EAChBF;IAGF,+CAA+C;IAC/CV,UAAU;QACR,eAAekC;gBAUFhB;YATX,IAAI,CAACf,oBAAoB,OAAOgC,WAAW,aAAa;gBACtD,6DAA6D;gBAC7D,MAAM,EAAEC,SAASC,cAAc,EAAE,GAAG,MAAM,MAAM,CAAC;gBACjDA,eAAeC,cAAc,CAACpB,SAASE,OAAO;YAChD;YAEA,IAAIX,QAAQ;oBACVS;iBAAAA,qBAAAA,SAASE,OAAO,cAAhBF,yCAAAA,mBAAkBqB,SAAS;gBAC3BzB,mBAAAA,6BAAAA;YACF,OAAO,KAAII,oBAAAA,SAASE,OAAO,cAAhBF,wCAAAA,kBAAkBsB,IAAI,EAAE;gBACjClB;YACF;QACF;QAEAY;IACF,GAAG;QAACzB;QAAQK;QAAQQ;KAAY;IAEhC,qBACE,MAACH;QACCX,KAAKH,UAAU;YAACa;YAAUV;SAAI;QAC9BiC,UAAUnB;QACVZ,WAAWuB;QACXS,oBAAiB;;0BAEjB,KAACtC;0BACC,cAAA,KAACuC;oBAAIC,IAAG;8BAA0B/B;;;YAEnClB,SAASkD,GAAG,CAAC7B,UAAU8B,CAAAA;gBACtB,kBAAIhD,eAAegD,QAAQ;oBACzB,qBAAOlD,aAAakD,OAAO;wBACzB/B,SAASO;wBACTX;oBACF;gBACF;gBAEA,OAAOmC;YACT;;;AAGN;AAEAxC,OAAOyC,WAAW,GAAG;AACrB,SAASzC,MAAM,GAAG"}

package/dist/esm/components/Modal/Content.js

@@ -1,13 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from "classnames/dedupe";
 import { Children, cloneElement, forwardRef, isValidElement } from "react";
-const Content = /*#__PURE__*/ forwardRef((// eslint-disable-next-line @typescript-eslint/no-unused-vars
-{ children, onClose, closeLabel, ...otherProps }, ref)=>{
-    const classes = classNames("mobius/ModalContent");
-    return /*#__PURE__*/ _jsx("div", {
+const Content = /*#__PURE__*/ forwardRef(({ children, onClose, closeLabel: _, ...otherProps }, ref)=>/*#__PURE__*/ _jsx("div", {
         ref: ref,
         ...otherProps,
-        className: classes,
+        className: "mobius/ModalContent",
         children: Children.map(children, (child)=>{
             if (/*#__PURE__*/ isValidElement(child)) {
                 return /*#__PURE__*/ cloneElement(child, {
@@ -16,8 +12,7 @@ const Content = /*#__PURE__*/ forwardRef((// eslint-disable-next-line @typescrip
             }
             return child;
         })
-    });
-});
+    }));
 Content.displayName = "Content";
 export { Content };
 

package/dist/esm/components/Modal/Content.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Modal/Content.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from \"react\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport type DivRef = Ref<HTMLDivElement>;\nexport type DivElementType = HTMLDivElement;\nexport interface ContentProps extends DOMProps, RefAttributes<DivElementType> {\n  children?: ReactNode;\n  onClose?: () => void;\n  closeLabel?: string;\n}\n\nconst Content = forwardRef(\n  (\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    { children, onClose, closeLabel, ...otherProps }: ContentProps,\n    ref: DivRef,\n  ) => {\n    const classes = classNames(\"mobius/ModalContent\");\n\n    return (\n      <div ref={ref} {...otherProps} className={classes}>\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child, {\n              onClose,\n            } as any);\n          }\n\n          return child;\n        })}\n      </div>\n    );\n  },\n);\n\nContent.displayName = \"Content\";\nexport { Content };\n"],"names":["classNames","Children","cloneElement","forwardRef","isValidElement","Content","children","onClose","closeLabel","otherProps","ref","classes","div","className","map","child","displayName"],"mappings":";AAAA,OAAOA,gBAAgB,oBAAoB;AAC3C,SACEC,QAAQ,EAIRC,YAAY,EACZC,UAAU,EACVC,cAAc,QACT,QAAQ;AAWf,MAAMC,wBAAUF,WACd,CACE,6DAA6D;AAC7D,EAAEG,QAAQ,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,YAA0B,EAC9DC;IAEA,MAAMC,UAAUX,WAAW;IAE3B,qBACE,KAACY;QAAIF,KAAKA;QAAM,GAAGD,UAAU;QAAEI,WAAWF;kBACvCV,SAASa,GAAG,CAACR,UAAUS,CAAAA;YACtB,kBAAIX,eAAeW,QAAQ;gBACzB,qBAAOb,aAAaa,OAAO;oBACzBR;gBACF;YACF;YAEA,OAAOQ;QACT;;AAGN;AAGFV,QAAQW,WAAW,GAAG;AACtB,SAASX,OAAO,GAAG"}
+{"version":3,"sources":["../../../../src/components/Modal/Content.tsx"],"sourcesContent":["import {\n  Children,\n  PropsWithChildren,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from \"react\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport type DivRef = Ref<HTMLDivElement>;\nexport type DivElementType = HTMLDivElement;\nexport interface ContentProps\n  extends DOMProps,\n    RefAttributes<DivElementType>,\n    PropsWithChildren {\n  onClose?: () => void;\n  closeLabel?: string;\n}\n\nconst Content = forwardRef(\n  (\n    { children, onClose, closeLabel: _, ...otherProps }: ContentProps,\n    ref: DivRef,\n  ) => (\n    <div ref={ref} {...otherProps} className=\"mobius/ModalContent\">\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose,\n          } as any);\n        }\n\n        return child;\n      })}\n    </div>\n  ),\n);\n\nContent.displayName = \"Content\";\nexport { Content };\n"],"names":["Children","cloneElement","forwardRef","isValidElement","Content","children","onClose","closeLabel","_","otherProps","ref","div","className","map","child","displayName"],"mappings":";AAAA,SACEA,QAAQ,EAIRC,YAAY,EACZC,UAAU,EACVC,cAAc,QACT,QAAQ;AAaf,MAAMC,wBAAUF,WACd,CACE,EAAEG,QAAQ,EAAEC,OAAO,EAAEC,YAAYC,CAAC,EAAE,GAAGC,YAA0B,EACjEC,oBAEA,KAACC;QAAID,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;kBACtCZ,SAASa,GAAG,CAACR,UAAUS,CAAAA;YACtB,kBAAIX,eAAeW,QAAQ;gBACzB,qBAAOb,aAAaa,OAAO;oBACzBR;gBACF;YACF;YAEA,OAAOQ;QACT;;AAKNV,QAAQW,WAAW,GAAG;AACtB,SAASX,OAAO,GAAG"}

package/dist/esm/components/Modal/Header.js

@@ -1,23 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import classNames from "classnames/dedupe";
 import { cross } from "@simplybusiness/icons";
 import { Button } from "../Button";
 import { Icon } from "../Icon";
-const Header = /*#__PURE__*/ forwardRef(({ children, onClose, closeLabel, ...otherProps }, ref)=>{
-    const classes = classNames("mobius/ModalHeader");
-    const closeClasses = classNames("mobius/ModalClose");
-    return /*#__PURE__*/ _jsxs("header", {
+const Header = /*#__PURE__*/ forwardRef(({ children, onClose, closeLabel, ...otherProps }, ref)=>/*#__PURE__*/ _jsxs("header", {
         ref: ref,
         ...otherProps,
-        className: classes,
+        className: "mobius/ModalHeader",
         children: [
             children,
             /*#__PURE__*/ _jsxs(Button, {
                 "aria-label": "Close",
                 variant: "basic",
                 onPress: onClose,
-                className: closeClasses,
+                className: "mobius/ModalClose",
                 children: [
                     /*#__PURE__*/ _jsx(Icon, {
                         icon: cross
@@ -27,8 +23,7 @@ const Header = /*#__PURE__*/ forwardRef(({ children, onClose, closeLabel, ...oth
                 ]
             })
         ]
-    });
-});
+    }));
 Header.displayName = "Header";
 export { Header };
 

package/dist/esm/components/Modal/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Modal/Header.tsx"],"sourcesContent":["import { ReactNode, Ref, RefAttributes, forwardRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\n\nimport { cross } from \"@simplybusiness/icons\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\n\nexport type HeaderElementType = HTMLDivElement;\nexport type HeaderRef = Ref<HTMLElement>;\n\nexport interface HeaderProps\n  extends DOMProps,\n    RefAttributes<HeaderElementType> {\n  children?: ReactNode;\n  onClose?: () => void;\n  closeLabel?: string;\n}\n\nconst Header = forwardRef(\n  (\n    { children, onClose, closeLabel, ...otherProps }: HeaderProps,\n    ref: HeaderRef,\n  ) => {\n    const classes = classNames(\"mobius/ModalHeader\");\n    const closeClasses = classNames(\"mobius/ModalClose\");\n\n    return (\n      <header ref={ref} {...otherProps} className={classes}>\n        {children}\n        <Button\n          aria-label=\"Close\"\n          variant=\"basic\"\n          onPress={onClose}\n          className={closeClasses}\n        >\n          <Icon icon={cross} /> {closeLabel}\n        </Button>\n      </header>\n    );\n  },\n);\n\nHeader.displayName = \"Header\";\nexport { Header };\n"],"names":["forwardRef","classNames","cross","Button","Icon","Header","children","onClose","closeLabel","otherProps","ref","classes","closeClasses","header","className","aria-label","variant","onPress","icon","displayName"],"mappings":";AAAA,SAAwCA,UAAU,QAAQ,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAE3C,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,UAAU;AAa/B,MAAMC,uBAASL,WACb,CACE,EAAEM,QAAQ,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,YAAyB,EAC7DC;IAEA,MAAMC,UAAUV,WAAW;IAC3B,MAAMW,eAAeX,WAAW;IAEhC,qBACE,MAACY;QAAOH,KAAKA;QAAM,GAAGD,UAAU;QAAEK,WAAWH;;YAC1CL;0BACD,MAACH;gBACCY,cAAW;gBACXC,SAAQ;gBACRC,SAASV;gBACTO,WAAWF;;kCAEX,KAACR;wBAAKc,MAAMhB;;oBAAS;oBAAEM;;;;;AAI/B;AAGFH,OAAOc,WAAW,GAAG;AACrB,SAASd,MAAM,GAAG"}
+{"version":3,"sources":["../../../../src/components/Modal/Header.tsx"],"sourcesContent":["import { PropsWithChildren, Ref, RefAttributes, forwardRef } from \"react\";\n\nimport { cross } from \"@simplybusiness/icons\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\n\nexport type HeaderElementType = HTMLDivElement;\nexport type HeaderRef = Ref<HTMLElement>;\n\nexport interface HeaderProps\n  extends DOMProps,\n    RefAttributes<HeaderElementType>,\n    PropsWithChildren {\n  onClose?: () => void;\n  closeLabel?: string;\n}\n\nconst Header = forwardRef(\n  (\n    { children, onClose, closeLabel, ...otherProps }: HeaderProps,\n    ref: HeaderRef,\n  ) => (\n    <header ref={ref} {...otherProps} className=\"mobius/ModalHeader\">\n      {children}\n      <Button\n        aria-label=\"Close\"\n        variant=\"basic\"\n        onPress={onClose}\n        className=\"mobius/ModalClose\"\n      >\n        <Icon icon={cross} /> {closeLabel}\n      </Button>\n    </header>\n  ),\n);\n\nHeader.displayName = \"Header\";\nexport { Header };\n"],"names":["forwardRef","cross","Button","Icon","Header","children","onClose","closeLabel","otherProps","ref","header","className","aria-label","variant","onPress","icon","displayName"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,UAAU;AAa/B,MAAMC,uBAASJ,WACb,CACE,EAAEK,QAAQ,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,YAAyB,EAC7DC,oBAEA,MAACC;QAAOD,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;;YACzCN;0BACD,MAACH;gBACCU,cAAW;gBACXC,SAAQ;gBACRC,SAASR;gBACTK,WAAU;;kCAEV,KAACR;wBAAKY,MAAMd;;oBAAS;oBAAEM;;;;;AAM/BH,OAAOY,WAAW,GAAG;AACrB,SAASZ,MAAM,GAAG"}

package/dist/esm/components/Modal/Modal.js

@@ -1,13 +1,14 @@
-/* eslint-disable no-console */ "use client";
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-// eslint-disable-next-line import/no-extraneous-dependencies
 import classNames from "classnames/dedupe";
-import { Children, cloneElement, isValidElement, useCallback, useEffect, useRef } from "react";
+import { Children, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useRef } from "react";
 import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
 import { supportsDialog } from "../../utils/polyfill-tests";
-const Modal = ({ isOpen, onClose, children, className, closeLabel, isFullScreen, animation, // Deprecated props below
-size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector })=>{
+import { mergeRefs } from "../../utils";
+const Modal = /*#__PURE__*/ forwardRef((props, ref)=>{
     var _window;
+    const { isOpen, onClose, onOpen, children, className, closeLabel, isFullScreen, animation, // Deprecated props below
+    size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector } = props;
     const hasWarnedAboutMissingLabels = useRef(false);
     // Handle deprecated props
     if (!hasWarnedAboutMissingLabels.current) {
@@ -16,9 +17,15 @@ size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector })=>
             hasWarnedAboutMissingLabels.current = true;
         }
     }
+    const hasOpened = useRef(false);
     const modalRef = useRef(null);
     const dialog = modalRef.current;
     const noPreference = (_window = window) === null || _window === void 0 ? void 0 : _window.matchMedia("(prefers-reduced-motion: no-preference)");
+    // Fire onOpen once
+    if (onOpen && !hasOpened.current) {
+        onOpen();
+        hasOpened.current = true;
+    }
     useBodyScrollLock({
         enabled: isOpen
     });
@@ -27,21 +34,21 @@ size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector })=>
         if (event) {
             event.preventDefault();
             event.stopPropagation();
-            const doClose = ()=>{
-                dialog.close();
-                onClose === null || onClose === void 0 ? void 0 : onClose();
-            };
-            if (animation) {
-                dialog.classList.add("close");
-                dialog.addEventListener("animationend", ()=>{
-                    dialog.classList.remove("close");
-                    doClose();
-                }, {
-                    once: true
-                });
-            } else {
+        }
+        const doClose = ()=>{
+            dialog === null || dialog === void 0 ? void 0 : dialog.close();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        };
+        if (animation) {
+            dialog === null || dialog === void 0 ? void 0 : dialog.classList.add("close");
+            dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener("animationend", ()=>{
+                dialog.classList.remove("close");
                 doClose();
-            }
+            }, {
+                once: true
+            });
+        } else {
+            doClose();
         }
     }, [
         animation,
@@ -67,17 +74,22 @@ size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector })=>
             if (isOpen) {
                 var _modalRef_current1;
                 (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.showModal();
+                onOpen === null || onOpen === void 0 ? void 0 : onOpen();
             } else if ((_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.open) {
-                var _modalRef_current2;
-                (_modalRef_current2 = modalRef.current) === null || _modalRef_current2 === void 0 ? void 0 : _modalRef_current2.close();
+                handleClose();
             }
         }
         toggleModal();
     }, [
-        isOpen
+        isOpen,
+        onOpen,
+        handleClose
     ]);
     return /*#__PURE__*/ _jsx("dialog", {
-        ref: modalRef,
+        ref: mergeRefs([
+            modalRef,
+            ref
+        ]),
         onCancel: handleClose,
         className: modalClasses,
         children: Children.map(children, (child)=>{
@@ -90,7 +102,7 @@ size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector })=>
             return child;
         })
     });
-};
+});
 Modal.displayName = "Modal";
 export { Modal };
 

package/dist/esm/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable no-console */\n\n\"use client\";\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  ReactEventHandler,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\n\nexport interface ModalProps {\n  isOpen: boolean;\n  onClose?: () => void;\n  children?: ReactNode;\n  className?: string;\n  closeLabel?: string;\n  animation?: \"slideUp\" | \"fade\";\n  isFullScreen?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  size?: string;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  appElement?: string;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  preventCloseOnEsc?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  shouldFocusAfterRender?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  parentSelector?: () => HTMLElement;\n}\n\nconst Modal = ({\n  isOpen,\n  onClose,\n  children,\n  className,\n  closeLabel,\n  isFullScreen,\n  animation,\n  // Deprecated props below\n  size,\n  appElement,\n  preventCloseOnEsc,\n  shouldFocusAfterRender,\n  parentSelector,\n}: ModalProps) => {\n  const hasWarnedAboutMissingLabels = useRef<boolean>(false);\n  // Handle deprecated props\n  if (!hasWarnedAboutMissingLabels.current) {\n    if (\n      size ||\n      appElement ||\n      preventCloseOnEsc ||\n      shouldFocusAfterRender ||\n      parentSelector\n    ) {\n      console.warn(\n        `Deprecation warning: Mobius Modal no longer supports the following props: size, appElement, preventCloseOnEsc, shouldFocusAfterRender and parentSelector.`,\n      );\n      hasWarnedAboutMissingLabels.current = true;\n    }\n  }\n\n  const modalRef = useRef<HTMLDialogElement>(null);\n  const dialog = modalRef.current as HTMLDialogElement;\n  const noPreference = window?.matchMedia(\n    \"(prefers-reduced-motion: no-preference)\",\n  );\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing animations\n  const handleClose: ReactEventHandler<HTMLDialogElement> = useCallback(\n    event => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const doClose = () => {\n          dialog.close();\n          onClose?.();\n        };\n\n        if (animation) {\n          dialog.classList.add(\"close\");\n          dialog.addEventListener(\n            \"animationend\",\n            () => {\n              dialog.classList.remove(\"close\");\n              doClose();\n            },\n            { once: true },\n          );\n        } else {\n          doClose();\n        }\n      }\n    },\n    [animation, dialog, onClose],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--has-reduced-motion\": !noPreference.matches,\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (!supportsDialog() && typeof window !== \"undefined\") {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n        dialogPolyfill.registerDialog(modalRef.current as HTMLDialogElement);\n      }\n\n      if (isOpen) {\n        modalRef.current?.showModal();\n      } else if (modalRef.current?.open) {\n        modalRef.current?.close();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen]);\n\n  return (\n    <dialog ref={modalRef} onCancel={handleClose} className={modalClasses}>\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\n    </dialog>\n  );\n};\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["classNames","Children","cloneElement","isValidElement","useCallback","useEffect","useRef","useBodyScrollLock","supportsDialog","Modal","isOpen","onClose","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","window","hasWarnedAboutMissingLabels","current","console","warn","modalRef","dialog","noPreference","matchMedia","enabled","handleClose","event","preventDefault","stopPropagation","doClose","close","classList","add","addEventListener","remove","once","modalClasses","matches","toggleModal","default","dialogPolyfill","registerDialog","showModal","open","ref","onCancel","map","child","displayName"],"mappings":"AAAA,6BAA6B,GAE7B;;AAEA,6DAA6D;AAC7D,OAAOA,gBAAgB,oBAAoB;AAC3C,SACEC,QAAQ,EAGRC,YAAY,EACZC,cAAc,EACdC,WAAW,EACXC,SAAS,EACTC,MAAM,QACD,QAAQ;AACf,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,cAAc,QAAQ,6BAA6B;AAgC5D,MAAMC,QAAQ,CAAC,EACbC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,SAAS,EACT,yBAAyB;AACzBC,IAAI,EACJC,UAAU,EACVC,iBAAiB,EACjBC,sBAAsB,EACtBC,cAAc,EACH;QAoBUC;IAnBrB,MAAMC,8BAA8BjB,OAAgB;IACpD,0BAA0B;IAC1B,IAAI,CAACiB,4BAA4BC,OAAO,EAAE;QACxC,IACEP,QACAC,cACAC,qBACAC,0BACAC,gBACA;YACAI,QAAQC,IAAI,CACV,CAAC,yJAAyJ,CAAC;YAE7JH,4BAA4BC,OAAO,GAAG;QACxC;IACF;IAEA,MAAMG,WAAWrB,OAA0B;IAC3C,MAAMsB,SAASD,SAASH,OAAO;IAC/B,MAAMK,gBAAeP,UAAAA,oBAAAA,8BAAAA,QAAQQ,UAAU,CACrC;IAGFvB,kBAAkB;QAAEwB,SAASrB;IAAO;IAEpC,kDAAkD;IAClD,MAAMsB,cAAoD5B,YACxD6B,CAAAA;QACE,IAAIA,OAAO;YACTA,MAAMC,cAAc;YACpBD,MAAME,eAAe;YAErB,MAAMC,UAAU;gBACdR,OAAOS,KAAK;gBACZ1B,oBAAAA,8BAAAA;YACF;YAEA,IAAIK,WAAW;gBACbY,OAAOU,SAAS,CAACC,GAAG,CAAC;gBACrBX,OAAOY,gBAAgB,CACrB,gBACA;oBACEZ,OAAOU,SAAS,CAACG,MAAM,CAAC;oBACxBL;gBACF,GACA;oBAAEM,MAAM;gBAAK;YAEjB,OAAO;gBACLN;YACF;QACF;IACF,GACA;QAACpB;QAAWY;QAAQjB;KAAQ;IAG9B,MAAMgC,eAAe3C,WACnB,UACA,gBACA;QACEgB;QACA,cAAcA,cAAc;QAC5B,UAAUA,cAAc;QACxB,wBAAwB,CAACa,aAAae,OAAO;QAC7C,mBAAmB7B;IACrB,GACAF;IAGF,+CAA+C;IAC/CR,UAAU;QACR,eAAewC;gBASFlB;YARX,IAAI,CAACnB,oBAAoB,OAAOc,WAAW,aAAa;gBACtD,6DAA6D;gBAC7D,MAAM,EAAEwB,SAASC,cAAc,EAAE,GAAG,MAAM,MAAM,CAAC;gBACjDA,eAAeC,cAAc,CAACrB,SAASH,OAAO;YAChD;YAEA,IAAId,QAAQ;oBACViB;iBAAAA,qBAAAA,SAASH,OAAO,cAAhBG,yCAAAA,mBAAkBsB,SAAS;YAC7B,OAAO,KAAItB,oBAAAA,SAASH,OAAO,cAAhBG,wCAAAA,kBAAkBuB,IAAI,EAAE;oBACjCvB;iBAAAA,qBAAAA,SAASH,OAAO,cAAhBG,yCAAAA,mBAAkBU,KAAK;YACzB;QACF;QAEAQ;IACF,GAAG;QAACnC;KAAO;IAEX,qBACE,KAACkB;QAAOuB,KAAKxB;QAAUyB,UAAUpB;QAAanB,WAAW8B;kBACtD1C,SAASoD,GAAG,CAACzC,UAAU0C,CAAAA;YACtB,kBAAInD,eAAemD,QAAQ;gBACzB,qBAAOpD,aAAaoD,OAAO;oBACzB3C,SAASqB;oBACTlB;gBACF;YACF;YAEA,OAAOwC;QACT;;AAGN;AAEA7C,MAAM8C,WAAW,GAAG;AACpB,SAAS9C,KAAK,GAAG"}
+{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  Ref,\n  SyntheticEvent,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst Modal = forwardRef((props: ModalProps, ref: ModalRef) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    children,\n    className,\n    closeLabel,\n    isFullScreen,\n    animation,\n    // Deprecated props below\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  } = props;\n  const hasWarnedAboutMissingLabels = useRef<boolean>(false);\n  // Handle deprecated props\n  if (!hasWarnedAboutMissingLabels.current) {\n    if (\n      size ||\n      appElement ||\n      preventCloseOnEsc ||\n      shouldFocusAfterRender ||\n      parentSelector\n    ) {\n      console.warn(\n        `Deprecation warning: Mobius Modal no longer supports the following props: size, appElement, preventCloseOnEsc, shouldFocusAfterRender and parentSelector.`,\n      );\n      hasWarnedAboutMissingLabels.current = true;\n    }\n  }\n\n  const hasOpened = useRef<boolean>(false);\n  const modalRef = useRef<HTMLDialogElement>(null);\n  const dialog = modalRef.current as HTMLDialogElement;\n  const noPreference = window?.matchMedia(\n    \"(prefers-reduced-motion: no-preference)\",\n  );\n\n  // Fire onOpen once\n  if (onOpen && !hasOpened.current) {\n    onOpen();\n    hasOpened.current = true;\n  }\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing animations\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      const doClose = () => {\n        dialog?.close();\n        onClose?.();\n      };\n\n      if (animation) {\n        dialog?.classList.add(\"close\");\n        dialog?.addEventListener(\n          \"animationend\",\n          () => {\n            dialog.classList.remove(\"close\");\n            doClose();\n          },\n          { once: true },\n        );\n      } else {\n        doClose();\n      }\n    },\n    [animation, dialog, onClose],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--has-reduced-motion\": !noPreference.matches,\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (!supportsDialog() && typeof window !== \"undefined\") {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n        dialogPolyfill.registerDialog(modalRef.current as HTMLDialogElement);\n      }\n\n      if (isOpen) {\n        modalRef.current?.showModal();\n        onOpen?.();\n      } else if (modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose]);\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n    >\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["classNames","Children","cloneElement","forwardRef","isValidElement","useCallback","useEffect","useRef","useBodyScrollLock","supportsDialog","mergeRefs","Modal","props","ref","window","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","current","console","warn","hasOpened","modalRef","dialog","noPreference","matchMedia","enabled","handleClose","event","preventDefault","stopPropagation","doClose","close","classList","add","addEventListener","remove","once","modalClasses","matches","toggleModal","default","dialogPolyfill","registerDialog","showModal","open","onCancel","map","child","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SACEC,QAAQ,EAGRC,YAAY,EACZC,UAAU,EACVC,cAAc,EACdC,WAAW,EACXC,SAAS,EACTC,MAAM,QACD,QAAQ;AACf,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,cAAc,QAAQ,6BAA6B;AAE5D,SAASC,SAAS,QAAQ,cAAc;AAKxC,MAAMC,sBAAQR,WAAW,CAACS,OAAmBC;QAqCtBC;IApCrB,MAAM,EACJC,MAAM,EACNC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,SAAS,EACT,yBAAyB;IACzBC,IAAI,EACJC,UAAU,EACVC,iBAAiB,EACjBC,sBAAsB,EACtBC,cAAc,EACf,GAAGf;IACJ,MAAMgB,8BAA8BrB,OAAgB;IACpD,0BAA0B;IAC1B,IAAI,CAACqB,4BAA4BC,OAAO,EAAE;QACxC,IACEN,QACAC,cACAC,qBACAC,0BACAC,gBACA;YACAG,QAAQC,IAAI,CACV,CAAC,yJAAyJ,CAAC;YAE7JH,4BAA4BC,OAAO,GAAG;QACxC;IACF;IAEA,MAAMG,YAAYzB,OAAgB;IAClC,MAAM0B,WAAW1B,OAA0B;IAC3C,MAAM2B,SAASD,SAASJ,OAAO;IAC/B,MAAMM,gBAAerB,UAAAA,oBAAAA,8BAAAA,QAAQsB,UAAU,CACrC;IAGF,mBAAmB;IACnB,IAAInB,UAAU,CAACe,UAAUH,OAAO,EAAE;QAChCZ;QACAe,UAAUH,OAAO,GAAG;IACtB;IAEArB,kBAAkB;QAAE6B,SAAStB;IAAO;IAEpC,kDAAkD;IAClD,MAAMuB,cAAcjC,YAClB,CAACkC;QACC,IAAIA,OAAO;YACTA,MAAMC,cAAc;YACpBD,MAAME,eAAe;QACvB;QAEA,MAAMC,UAAU;YACdR,mBAAAA,6BAAAA,OAAQS,KAAK;YACb3B,oBAAAA,8BAAAA;QACF;QAEA,IAAIM,WAAW;YACbY,mBAAAA,6BAAAA,OAAQU,SAAS,CAACC,GAAG,CAAC;YACtBX,mBAAAA,6BAAAA,OAAQY,gBAAgB,CACtB,gBACA;gBACEZ,OAAOU,SAAS,CAACG,MAAM,CAAC;gBACxBL;YACF,GACA;gBAAEM,MAAM;YAAK;QAEjB,OAAO;YACLN;QACF;IACF,GACA;QAACpB;QAAWY;QAAQlB;KAAQ;IAG9B,MAAMiC,eAAejD,WACnB,UACA,gBACA;QACEsB;QACA,cAAcA,cAAc;QAC5B,UAAUA,cAAc;QACxB,wBAAwB,CAACa,aAAae,OAAO;QAC7C,mBAAmB7B;IACrB,GACAF;IAGF,+CAA+C;IAC/Cb,UAAU;QACR,eAAe6C;gBAUFlB;YATX,IAAI,CAACxB,oBAAoB,OAAOK,WAAW,aAAa;gBACtD,6DAA6D;gBAC7D,MAAM,EAAEsC,SAASC,cAAc,EAAE,GAAG,MAAM,MAAM,CAAC;gBACjDA,eAAeC,cAAc,CAACrB,SAASJ,OAAO;YAChD;YAEA,IAAId,QAAQ;oBACVkB;iBAAAA,qBAAAA,SAASJ,OAAO,cAAhBI,yCAAAA,mBAAkBsB,SAAS;gBAC3BtC,mBAAAA,6BAAAA;YACF,OAAO,KAAIgB,oBAAAA,SAASJ,OAAO,cAAhBI,wCAAAA,kBAAkBuB,IAAI,EAAE;gBACjClB;YACF;QACF;QAEAa;IACF,GAAG;QAACpC;QAAQE;QAAQqB;KAAY;IAEhC,qBACE,KAACJ;QACCrB,KAAKH,UAAU;YAACuB;YAAUpB;SAAI;QAC9B4C,UAAUnB;QACVnB,WAAW8B;kBAEVhD,SAASyD,GAAG,CAACxC,UAAUyC,CAAAA;YACtB,kBAAIvD,eAAeuD,QAAQ;gBACzB,qBAAOzD,aAAayD,OAAO;oBACzB3C,SAASsB;oBACTlB;gBACF;YACF;YAEA,OAAOuC;QACT;;AAGN;AAEAhD,MAAMiD,WAAW,GAAG;AACpB,SAASjD,KAAK,GAAG"}

package/dist/esm/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Modal/index.tsx"],"sourcesContent":["import {\n  Content,\n  DivElementType as ModalContentDivElementType,\n  ContentProps as ModalContentProps,\n} from \"./Content\";\nimport {\n  Header,\n  HeaderElementType as ModalHeaderElementType,\n  HeaderProps as ModalHeaderProps,\n} from \"./Header\";\nimport { Modal as ModalComponent, ModalProps } from \"./Modal\";\n\nconst Modal = Object.assign(ModalComponent, {\n  Header,\n  Content,\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n\nexport type {\n  ModalContentDivElementType,\n  ModalContentProps,\n  ModalHeaderElementType,\n  ModalHeaderProps,\n  ModalProps,\n};\n"],"names":["Content","Header","Modal","ModalComponent","Object","assign","displayName"],"mappings":"AAAA,SACEA,OAAO,QAGF,YAAY;AACnB,SACEC,MAAM,QAGD,WAAW;AAClB,SAASC,SAASC,cAAc,QAAoB,UAAU;AAE9D,MAAMD,QAAQE,OAAOC,MAAM,CAACF,gBAAgB;IAC1CF;IACAD;AACF;AAEAE,MAAMI,WAAW,GAAG;AACpB,SAASJ,KAAK,GAAG"}
+{"version":3,"sources":["../../../../src/components/Modal/index.tsx"],"sourcesContent":["import {\n  Content,\n  DivElementType as ModalContentDivElementType,\n  ContentProps as ModalContentProps,\n} from \"./Content\";\nimport {\n  Header,\n  HeaderElementType as ModalHeaderElementType,\n  HeaderProps as ModalHeaderProps,\n} from \"./Header\";\nimport { Modal as ModalComponent } from \"./Modal\";\nimport { ModalProps } from \"./types\";\n\nconst Modal = Object.assign(ModalComponent, {\n  Header,\n  Content,\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n\nexport type {\n  ModalContentDivElementType,\n  ModalContentProps,\n  ModalHeaderElementType,\n  ModalHeaderProps,\n  ModalProps,\n};\n"],"names":["Content","Header","Modal","ModalComponent","Object","assign","displayName"],"mappings":"AAAA,SACEA,OAAO,QAGF,YAAY;AACnB,SACEC,MAAM,QAGD,WAAW;AAClB,SAASC,SAASC,cAAc,QAAQ,UAAU;AAGlD,MAAMD,QAAQE,OAAOC,MAAM,CAACF,gBAAgB;IAC1CF;IACAD;AACF;AAEAE,MAAMI,WAAW,GAAG;AACpB,SAASJ,KAAK,GAAG"}

package/dist/esm/components/Modal/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/esm/components/Modal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Modal/types.ts"],"sourcesContent":["import { ReactNode } from \"react\";\n\nexport interface ModalProps {\n  isOpen: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n  children?: ReactNode;\n  className?: string;\n  closeLabel?: string;\n  animation?: \"slideUp\" | \"fade\";\n  isFullScreen?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  size?: string;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  appElement?: string;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  preventCloseOnEsc?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  shouldFocusAfterRender?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  parentSelector?: () => HTMLElement;\n}\n"],"names":[],"mappings":"AAEA,WA6BC"}

package/dist/esm/hooks/useTextField/useTextField.js

@@ -1,6 +1,6 @@
 import { useId } from "react";
-import { useLabel } from "../useLabel/useLabel";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
+import { useLabel } from "../useLabel/useLabel";
 export function useTextField(props) {
     const { isDisabled = false, isReadOnly = false, isRequired = false, inputElementType = "input" } = props;
     const { labelProps, fieldProps } = useLabel(props);

package/dist/esm/hooks/useTextField/useTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/hooks/useTextField/useTextField.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport { useLabel } from \"../useLabel/useLabel\";\nimport { UseTextFieldProps, UseTextFieldReturn } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\n\nexport function useTextField(props: UseTextFieldProps): UseTextFieldReturn {\n  const {\n    isDisabled = false,\n    isReadOnly = false,\n    isRequired = false,\n    inputElementType = \"input\",\n  } = props;\n  const { labelProps, fieldProps } = useLabel(props);\n\n  const descriptionId = useId();\n  const descriptionProps = { id: descriptionId };\n\n  const errorMessageId = useId();\n  const errorMessageProps = { id: errorMessageId };\n\n  const ariaDescribedBy = spaceDelimitedList([\n    props.description && descriptionId,\n    props.errorMessage && errorMessageId,\n    props[\"aria-describedby\"],\n  ]);\n\n  return {\n    descriptionProps,\n    errorMessageProps,\n    labelProps,\n    inputProps: {\n      defaultValue: props.defaultValue,\n      value: props.value,\n      onChange: props.onChange,\n      disabled: isDisabled,\n      readOnly: isReadOnly,\n      \"aria-required\": isRequired === true ? true : undefined,\n      \"aria-invalid\":\n        props.validationState === \"invalid\"\n          ? true\n          : props.validationState === \"valid\"\n          ? false\n          : undefined,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": props[\"aria-errormessage\"],\n\n      type: inputElementType === \"input\" ? props.type : undefined,\n      pattern: inputElementType === \"input\" ? props.pattern : undefined,\n\n      autoComplete: props.autoComplete,\n      maxLength: props.maxLength,\n      minLength: props.minLength,\n      name: props.name,\n      placeholder: props.placeholder,\n      inputMode: props.inputMode,\n\n      // Clipboard events\n      onCopy: props.onCopy,\n      onCut: props.onCut,\n      onPaste: props.onPaste,\n\n      // Composition events\n      onCompositionEnd: props.onCompositionEnd,\n      onCompositionStart: props.onCompositionStart,\n      onCompositionUpdate: props.onCompositionUpdate,\n\n      // Selection events\n      onSelect: props.onSelect,\n\n      // Input events\n      onBeforeInput: props.onBeforeInput,\n      onInput: props.onInput,\n\n      // Focus events\n      onFocus: props.onFocus,\n      onBlur: props.onBlur,\n\n      ...fieldProps,\n    },\n  };\n}\n"],"names":["useId","useLabel","spaceDelimitedList","useTextField","props","isDisabled","isReadOnly","isRequired","inputElementType","labelProps","fieldProps","descriptionId","descriptionProps","id","errorMessageId","errorMessageProps","ariaDescribedBy","description","errorMessage","inputProps","defaultValue","value","onChange","disabled","readOnly","undefined","validationState","type","pattern","autoComplete","maxLength","minLength","name","placeholder","inputMode","onCopy","onCut","onPaste","onCompositionEnd","onCompositionStart","onCompositionUpdate","onSelect","onBeforeInput","onInput","onFocus","onBlur"],"mappings":"AAAA,SAASA,KAAK,QAAQ,QAAQ;AAC9B,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EACJC,aAAa,KAAK,EAClBC,aAAa,KAAK,EAClBC,aAAa,KAAK,EAClBC,mBAAmB,OAAO,EAC3B,GAAGJ;IACJ,MAAM,EAAEK,UAAU,EAAEC,UAAU,EAAE,GAAGT,SAASG;IAE5C,MAAMO,gBAAgBX;IACtB,MAAMY,mBAAmB;QAAEC,IAAIF;IAAc;IAE7C,MAAMG,iBAAiBd;IACvB,MAAMe,oBAAoB;QAAEF,IAAIC;IAAe;IAE/C,MAAME,kBAAkBd,mBAAmB;QACzCE,MAAMa,WAAW,IAAIN;QACrBP,MAAMc,YAAY,IAAIJ;QACtBV,KAAK,CAAC,mBAAmB;KAC1B;IAED,OAAO;QACLQ;QACAG;QACAN;QACAU,YAAY;YACVC,cAAchB,MAAMgB,YAAY;YAChCC,OAAOjB,MAAMiB,KAAK;YAClBC,UAAUlB,MAAMkB,QAAQ;YACxBC,UAAUlB;YACVmB,UAAUlB;YACV,iBAAiBC,eAAe,OAAO,OAAOkB;YAC9C,gBACErB,MAAMsB,eAAe,KAAK,YACtB,OACAtB,MAAMsB,eAAe,KAAK,UAC1B,QACAD;YACN,oBAAoBT;YACpB,qBAAqBZ,KAAK,CAAC,oBAAoB;YAE/CuB,MAAMnB,qBAAqB,UAAUJ,MAAMuB,IAAI,GAAGF;YAClDG,SAASpB,qBAAqB,UAAUJ,MAAMwB,OAAO,GAAGH;YAExDI,cAAczB,MAAMyB,YAAY;YAChCC,WAAW1B,MAAM0B,SAAS;YAC1BC,WAAW3B,MAAM2B,SAAS;YAC1BC,MAAM5B,MAAM4B,IAAI;YAChBC,aAAa7B,MAAM6B,WAAW;YAC9BC,WAAW9B,MAAM8B,SAAS;YAE1B,mBAAmB;YACnBC,QAAQ/B,MAAM+B,MAAM;YACpBC,OAAOhC,MAAMgC,KAAK;YAClBC,SAASjC,MAAMiC,OAAO;YAEtB,qBAAqB;YACrBC,kBAAkBlC,MAAMkC,gBAAgB;YACxCC,oBAAoBnC,MAAMmC,kBAAkB;YAC5CC,qBAAqBpC,MAAMoC,mBAAmB;YAE9C,mBAAmB;YACnBC,UAAUrC,MAAMqC,QAAQ;YAExB,eAAe;YACfC,eAAetC,MAAMsC,aAAa;YAClCC,SAASvC,MAAMuC,OAAO;YAEtB,eAAe;YACfC,SAASxC,MAAMwC,OAAO;YACtBC,QAAQzC,MAAMyC,MAAM;YAEpB,GAAGnC,UAAU;QACf;IACF;AACF"}
+{"version":3,"sources":["../../../../src/hooks/useTextField/useTextField.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useLabel } from \"../useLabel/useLabel\";\nimport { UseTextFieldProps, UseTextFieldReturn } from \"./types\";\n\nexport function useTextField(props: UseTextFieldProps): UseTextFieldReturn {\n  const {\n    isDisabled = false,\n    isReadOnly = false,\n    isRequired = false,\n    inputElementType = \"input\",\n  } = props;\n  const { labelProps, fieldProps } = useLabel(props);\n\n  const descriptionId = useId();\n  const descriptionProps = { id: descriptionId };\n\n  const errorMessageId = useId();\n  const errorMessageProps = { id: errorMessageId };\n\n  const ariaDescribedBy = spaceDelimitedList([\n    props.description && descriptionId,\n    props.errorMessage && errorMessageId,\n    props[\"aria-describedby\"],\n  ]);\n\n  return {\n    descriptionProps,\n    errorMessageProps,\n    labelProps,\n    inputProps: {\n      defaultValue: props.defaultValue,\n      value: props.value,\n      onChange: props.onChange,\n      disabled: isDisabled,\n      readOnly: isReadOnly,\n      \"aria-required\": isRequired === true ? true : undefined,\n      \"aria-invalid\":\n        props.validationState === \"invalid\"\n          ? true\n          : props.validationState === \"valid\"\n            ? false\n            : undefined,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": props[\"aria-errormessage\"],\n\n      type: inputElementType === \"input\" ? props.type : undefined,\n      pattern: inputElementType === \"input\" ? props.pattern : undefined,\n\n      autoComplete: props.autoComplete,\n      maxLength: props.maxLength,\n      minLength: props.minLength,\n      name: props.name,\n      placeholder: props.placeholder,\n      inputMode: props.inputMode,\n\n      // Clipboard events\n      onCopy: props.onCopy,\n      onCut: props.onCut,\n      onPaste: props.onPaste,\n\n      // Composition events\n      onCompositionEnd: props.onCompositionEnd,\n      onCompositionStart: props.onCompositionStart,\n      onCompositionUpdate: props.onCompositionUpdate,\n\n      // Selection events\n      onSelect: props.onSelect,\n\n      // Input events\n      onBeforeInput: props.onBeforeInput,\n      onInput: props.onInput,\n\n      // Focus events\n      onFocus: props.onFocus,\n      onBlur: props.onBlur,\n\n      ...fieldProps,\n    },\n  };\n}\n"],"names":["useId","spaceDelimitedList","useLabel","useTextField","props","isDisabled","isReadOnly","isRequired","inputElementType","labelProps","fieldProps","descriptionId","descriptionProps","id","errorMessageId","errorMessageProps","ariaDescribedBy","description","errorMessage","inputProps","defaultValue","value","onChange","disabled","readOnly","undefined","validationState","type","pattern","autoComplete","maxLength","minLength","name","placeholder","inputMode","onCopy","onCut","onPaste","onCompositionEnd","onCompositionStart","onCompositionUpdate","onSelect","onBeforeInput","onInput","onFocus","onBlur"],"mappings":"AAAA,SAASA,KAAK,QAAQ,QAAQ;AAC9B,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,QAAQ,QAAQ,uBAAuB;AAGhD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EACJC,aAAa,KAAK,EAClBC,aAAa,KAAK,EAClBC,aAAa,KAAK,EAClBC,mBAAmB,OAAO,EAC3B,GAAGJ;IACJ,MAAM,EAAEK,UAAU,EAAEC,UAAU,EAAE,GAAGR,SAASE;IAE5C,MAAMO,gBAAgBX;IACtB,MAAMY,mBAAmB;QAAEC,IAAIF;IAAc;IAE7C,MAAMG,iBAAiBd;IACvB,MAAMe,oBAAoB;QAAEF,IAAIC;IAAe;IAE/C,MAAME,kBAAkBf,mBAAmB;QACzCG,MAAMa,WAAW,IAAIN;QACrBP,MAAMc,YAAY,IAAIJ;QACtBV,KAAK,CAAC,mBAAmB;KAC1B;IAED,OAAO;QACLQ;QACAG;QACAN;QACAU,YAAY;YACVC,cAAchB,MAAMgB,YAAY;YAChCC,OAAOjB,MAAMiB,KAAK;YAClBC,UAAUlB,MAAMkB,QAAQ;YACxBC,UAAUlB;YACVmB,UAAUlB;YACV,iBAAiBC,eAAe,OAAO,OAAOkB;YAC9C,gBACErB,MAAMsB,eAAe,KAAK,YACtB,OACAtB,MAAMsB,eAAe,KAAK,UACxB,QACAD;YACR,oBAAoBT;YACpB,qBAAqBZ,KAAK,CAAC,oBAAoB;YAE/CuB,MAAMnB,qBAAqB,UAAUJ,MAAMuB,IAAI,GAAGF;YAClDG,SAASpB,qBAAqB,UAAUJ,MAAMwB,OAAO,GAAGH;YAExDI,cAAczB,MAAMyB,YAAY;YAChCC,WAAW1B,MAAM0B,SAAS;YAC1BC,WAAW3B,MAAM2B,SAAS;YAC1BC,MAAM5B,MAAM4B,IAAI;YAChBC,aAAa7B,MAAM6B,WAAW;YAC9BC,WAAW9B,MAAM8B,SAAS;YAE1B,mBAAmB;YACnBC,QAAQ/B,MAAM+B,MAAM;YACpBC,OAAOhC,MAAMgC,KAAK;YAClBC,SAASjC,MAAMiC,OAAO;YAEtB,qBAAqB;YACrBC,kBAAkBlC,MAAMkC,gBAAgB;YACxCC,oBAAoBnC,MAAMmC,kBAAkB;YAC5CC,qBAAqBpC,MAAMoC,mBAAmB;YAE9C,mBAAmB;YACnBC,UAAUrC,MAAMqC,QAAQ;YAExB,eAAe;YACfC,eAAetC,MAAMsC,aAAa;YAClCC,SAASvC,MAAMuC,OAAO;YAEtB,eAAe;YACfC,SAASxC,MAAMwC,OAAO;YACtBC,QAAQzC,MAAMyC,MAAM;YAEpB,GAAGnC,UAAU;QACf;IACF;AACF"}

package/dist/esm/utils/index.js

@@ -5,6 +5,5 @@ export * from "./mergeRefs";
 export * from "./polyfill-tests";
 export * from "./sizeClasses";
 export * from "./spaceDelimitedList";
-export * from "./StoryContainer";
 
 //# sourceMappingURL=index.js.map

package/dist/esm/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from \"./changeCSS\";\nexport * from \"./excludeControls\";\nexport * from \"./jestHTMLDialogPolyfill\";\nexport * from \"./mergeRefs\";\nexport * from \"./polyfill-tests\";\nexport * from \"./sizeClasses\";\nexport * from \"./spaceDelimitedList\";\nexport * from \"./StoryContainer\";\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,oBAAoB;AAClC,cAAc,2BAA2B;AACzC,cAAc,cAAc;AAC5B,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,uBAAuB;AACrC,cAAc,mBAAmB"}
+{"version":3,"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from \"./changeCSS\";\nexport * from \"./excludeControls\";\nexport * from \"./jestHTMLDialogPolyfill\";\nexport * from \"./mergeRefs\";\nexport * from \"./polyfill-tests\";\nexport * from \"./sizeClasses\";\nexport * from \"./spaceDelimitedList\";\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,oBAAoB;AAClC,cAAc,2BAA2B;AACzC,cAAc,cAAc;AAC5B,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,uBAAuB"}

package/dist/esm/utils/jestMockMatchMedia.js

@@ -0,0 +1,18 @@
+export const jestMockMatchMedia = (matches)=>{
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        configurable: true,
+        value: jest.fn().mockImplementation((query)=>({
+                matches,
+                media: query,
+                onchange: null,
+                addListener: jest.fn(),
+                removeListener: jest.fn(),
+                addEventListener: jest.fn(),
+                removeEventListener: jest.fn(),
+                dispatchEvent: jest.fn()
+            }))
+    });
+};
+
+//# sourceMappingURL=jestMockMatchMedia.js.map

package/dist/esm/utils/jestMockMatchMedia.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/jestMockMatchMedia.ts"],"sourcesContent":["export const jestMockMatchMedia = (matches: boolean) => {\n  Object.defineProperty(window, \"matchMedia\", {\n    writable: true,\n    configurable: true,\n    value: jest.fn().mockImplementation(query => ({\n      matches,\n      media: query,\n      onchange: null,\n      addListener: jest.fn(),\n      removeListener: jest.fn(),\n      addEventListener: jest.fn(),\n      removeEventListener: jest.fn(),\n      dispatchEvent: jest.fn(),\n    })),\n  });\n};\n"],"names":["jestMockMatchMedia","matches","Object","defineProperty","window","writable","configurable","value","jest","fn","mockImplementation","query","media","onchange","addListener","removeListener","addEventListener","removeEventListener","dispatchEvent"],"mappings":"AAAA,OAAO,MAAMA,qBAAqB,CAACC;IACjCC,OAAOC,cAAc,CAACC,QAAQ,cAAc;QAC1CC,UAAU;QACVC,cAAc;QACdC,OAAOC,KAAKC,EAAE,GAAGC,kBAAkB,CAACC,CAAAA,QAAU,CAAA;gBAC5CV;gBACAW,OAAOD;gBACPE,UAAU;gBACVC,aAAaN,KAAKC,EAAE;gBACpBM,gBAAgBP,KAAKC,EAAE;gBACvBO,kBAAkBR,KAAKC,EAAE;gBACzBQ,qBAAqBT,KAAKC,EAAE;gBAC5BS,eAAeV,KAAKC,EAAE;YACxB,CAAA;IACF;AACF,EAAE"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "4.2.8",
+  "version": "4.3.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",

package/src/components/Accordion/Accordion.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Accordion } from ".";
+import { jestMockMatchMedia } from "../../utils/jestMockMatchMedia";
 
 const CONTAINER_CLASS_NAME = "mobius/Accordion";
 const CONTENT_CONTAINER_CLASS_NAME = "mobius/AccordionContentContainer";
@@ -10,26 +11,9 @@ const OPEN_CLASS_NAME = "--is-open";
 const OPEN_TEXT = "See more";
 const CLOSE_TEXT = "See less";
 
-const mockMatchMedia = (matches: boolean) => {
-  Object.defineProperty(window, "matchMedia", {
-    writable: true,
-    configurable: true,
-    value: jest.fn().mockImplementation(query => ({
-      matches,
-      media: query,
-      onchange: null,
-      addListener: jest.fn(),
-      removeListener: jest.fn(),
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      dispatchEvent: jest.fn(),
-    })),
-  });
-};
-
 describe("Accordion", () => {
   beforeEach(() => {
-    mockMatchMedia(true);
+    jestMockMatchMedia(true);
   });
 
   it("should render without errors", () => {
@@ -234,7 +218,7 @@ describe("Accordion", () => {
 
   describe("given user prefers reduced motion", () => {
     beforeEach(() => {
-      mockMatchMedia(false);
+      jestMockMatchMedia(false);
     });
 
     it("runs no animations", () => {

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Checkbox, CheckboxProps } from ".";
-import { StoryContainer, excludeControls } from "../../utils";
+import { excludeControls } from "../../utils";
+import { StoryContainer } from "../../utils/StoryContainer";
 
 type StoryType = StoryObj<typeof Checkbox>;
 

package/src/components/Checkbox/CheckboxGroup.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { CheckboxGroup, CheckboxGroupProps, Checkbox } from ".";
-import { StoryContainer, excludeControls } from "../../utils";
+import { Checkbox, CheckboxGroup, CheckboxGroupProps } from ".";
+import { excludeControls } from "../../utils";
+import { StoryContainer } from "../../utils/StoryContainer";
 
 type StoryType = StoryObj<typeof CheckboxGroup>;
 

package/src/components/Divider/Divider.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { StoryContainer } from "../../utils/StoryContainer";
 import { Divider, DividerProps } from "./Divider";
-import { StoryContainer } from "../../utils";
 
 type StoryType = StoryObj<typeof Divider>;