@simplybusiness/mobius 4.5.0 → 4.5.1

package/dist/esm/components/Stack/Stack.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames/dedupe";
+import { sizeClasses } from "../../utils";
+export const Stack = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { elementType: Element = "div", direction = "row", spacing = "xs", ...otherProps } = props;
+    const spaceClasses = sizeClasses(spacing);
+    const classes = classNames("mobius", "mobius/Stack", spaceClasses, {
+        "--is-horizontal": direction === "row",
+        "--is-vertical": direction === "column"
+    }, otherProps.className);
+    return /*#__PURE__*/ _jsx(Element, {
+        ref: ref,
+        ...otherProps,
+        className: classes
+    });
+});
+
+//# sourceMappingURL=Stack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { SizeType } from \"../../types\";\nimport { sizeClasses } from \"../../utils\";\n\nexport type StackElementType = HTMLDivElement;\n\nexport interface StackProps extends DOMProps, RefAttributes<StackElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: string | React.ElementType;\n  direction?: \"row\" | \"column\";\n  spacing?: SizeType;\n}\n\nexport type StackRef = Ref<StackElementType>;\n\nexport const Stack: ForwardedRefComponent<StackProps, StackElementType> =\n  forwardRef((props: StackProps, ref: StackRef) => {\n    const {\n      elementType: Element = \"div\",\n      direction = \"row\",\n      spacing = \"xs\",\n      ...otherProps\n    } = props;\n\n    const spaceClasses = sizeClasses(spacing);\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Stack\",\n      spaceClasses,\n      {\n        \"--is-horizontal\": direction === \"row\",\n        \"--is-vertical\": direction === \"column\",\n      },\n      otherProps.className,\n    );\n\n    return <Element ref={ref} {...otherProps} className={classes} />;\n  });\n"],"names":["forwardRef","classNames","sizeClasses","Stack","props","ref","elementType","Element","direction","spacing","otherProps","spaceClasses","classes","className"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAI3C,SAASC,WAAW,QAAQ,cAAc;AAe1C,OAAO,MAAMC,sBACXH,WAAW,CAACI,OAAmBC;IAC7B,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,YAAY,KAAK,EACjBC,UAAU,IAAI,EACd,GAAGC,YACJ,GAAGN;IAEJ,MAAMO,eAAeT,YAAYO;IAEjC,MAAMG,UAAUX,WACd,UACA,gBACAU,cACA;QACE,mBAAmBH,cAAc;QACjC,iBAAiBA,cAAc;IACjC,GACAE,WAAWG,SAAS;IAGtB,qBAAO,KAACN;QAAQF,KAAKA;QAAM,GAAGK,UAAU;QAAEG,WAAWD;;AACvD,GAAG"}

package/dist/esm/components/Stack/index.js

@@ -0,0 +1,3 @@
+export * from "./Stack";
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Stack/index.tsx"],"sourcesContent":["export * from \"./Stack\";\n"],"names":[],"mappings":"AAAA,cAAc,UAAU"}

package/dist/esm/hooks/index.js

@@ -1,6 +1,7 @@
 export * from "./useBodyScrollLock";
 export * from "./useBreakpoint";
 export * from "./useButton";
+export * from "./useDialog";
 export * from "./useLabel";
 export * from "./useOnClickOutside";
 export * from "./useTextField";

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/index.tsx"],"sourcesContent":["export * from \"./useBodyScrollLock\";\nexport * from \"./useBreakpoint\";\nexport * from \"./useButton\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./useTextField\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,aAAa;AAC3B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAC/B,cAAc,mBAAmB"}
+{"version":3,"sources":["../../../src/hooks/index.tsx"],"sourcesContent":["export * from \"./useBodyScrollLock\";\nexport * from \"./useBreakpoint\";\nexport * from \"./useButton\";\nexport * from \"./useDialog\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./useTextField\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,aAAa;AAC3B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAC/B,cAAc,mBAAmB"}

package/dist/esm/hooks/useBodyScrollLock/useBodyScrollLock.test.js

@@ -0,0 +1,29 @@
+import { renderHook } from "@testing-library/react";
+import { useBodyScrollLock } from "./useBodyScrollLock";
+describe("useBodyScrollLock", () => {
+    it("should be defined", () => {
+        expect(useBodyScrollLock).toBeDefined();
+    });
+    it("should not throw", () => {
+        expect(() => renderHook(() => useBodyScrollLock())).not.toThrow();
+    });
+    it("should disable scroll by default", () => {
+        renderHook(() => useBodyScrollLock());
+        expect(document.body.style.overflow).toBe("hidden");
+    });
+    it("should disable scroll when enabled is true", () => {
+        renderHook(() => useBodyScrollLock({ enabled: true }));
+        expect(document.body.style.overflow).toBe("hidden");
+    });
+    it("should enable scroll when enabled is false", () => {
+        renderHook(() => useBodyScrollLock({ enabled: false }));
+        expect(document.body.style.overflow).toBe("");
+    });
+    it("should enable scroll on unmount", () => {
+        const { unmount } = renderHook(() => useBodyScrollLock());
+        expect(document.body.style.overflow).toBe("hidden");
+        unmount();
+        expect(document.body.style.overflow).toBe("");
+    });
+});
+//# sourceMappingURL=useBodyScrollLock.test.js.map

package/dist/esm/hooks/useBodyScrollLock/useBodyScrollLock.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBodyScrollLock.test.js","sourceRoot":"","sources":["../../../../src/hooks/useBodyScrollLock/useBodyScrollLock.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;QAC3B,MAAM,CAAC,iBAAiB,CAAC,CAAC,WAAW,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kBAAkB,EAAE,GAAG,EAAE;QAC1B,MAAM,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,GAAG,EAAE;QAC1C,UAAU,CAAC,GAAG,EAAE,CAAC,iBAAiB,EAAE,CAAC,CAAC;QACtC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,GAAG,EAAE;QACpD,UAAU,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACvD,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,GAAG,EAAE;QACpD,UAAU,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACxD,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;QACzC,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,iBAAiB,EAAE,CAAC,CAAC;QAC1D,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpD,OAAO,EAAE,CAAC;QACV,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/esm/hooks/useDialog/index.js

@@ -0,0 +1,3 @@
+export * from "./useDialog";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/useDialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/useDialog/index.ts"],"sourcesContent":["export * from \"./useDialog\";\n"],"names":[],"mappings":"AAAA,cAAc,cAAc"}

package/dist/esm/hooks/useDialog/useDialog.js

@@ -0,0 +1,84 @@
+import { useCallback, useEffect } from "react";
+import { useDialogPolyfill } from "../useDialogPolyfill";
+import { useBodyScrollLock } from "../useBodyScrollLock";
+import { supportsDialog } from "../../utils";
+const TRANSITION_CLASS_NAME = "--transition";
+const FALLBACK_TRANSITION_DURATION = 0;
+export const useDialog = (props)=>{
+    const { ref, isOpen, transition, onOpen, onClose } = props;
+    const shouldTransition = supportsDialog() && transition.isEnabled;
+    // Read CSS variable value as number
+    const TRANSITION_DURATION_IN_MS = ref.current && Number(getComputedStyle(ref.current).getPropertyValue(transition.CSSVariable).replace("ms", "")) || FALLBACK_TRANSITION_DURATION;
+    useDialogPolyfill(ref);
+    useBodyScrollLock({
+        enabled: isOpen
+    });
+    const open = useCallback(()=>{
+        var _ref_current;
+        (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.showModal();
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+    }, [
+        onOpen,
+        ref
+    ]);
+    const close = useCallback(()=>{
+        var _ref_current;
+        (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.close();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [
+        onClose,
+        ref
+    ]);
+    // Add close handler, to enable closing transitions
+    const handleClose = useCallback((event)=>{
+        if (event) {
+            // Prevent default event coming from onCancel,
+            // which is triggered by pressing ESC key
+            event.preventDefault();
+            // Ensure that nested `<dialog>` elements
+            // don't close the parent
+            event.stopPropagation();
+        }
+        if (shouldTransition) {
+            var _ref_current;
+            (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.classList.remove(TRANSITION_CLASS_NAME);
+            // Delay close to allow exit transition
+            setTimeout(()=>close(), TRANSITION_DURATION_IN_MS);
+        } else {
+            close();
+        }
+    }, [
+        TRANSITION_DURATION_IN_MS,
+        close,
+        ref,
+        shouldTransition
+    ]);
+    useEffect(()=>{
+        async function toggleDialog() {
+            var _ref_current, _ref_current1;
+            if (isOpen && !((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.open)) {
+                open();
+                // Fix opening transition in Safari being skipped
+                // by wrapping with setTimeout
+                setTimeout(()=>{
+                    var _ref_current;
+                    (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.classList.add(TRANSITION_CLASS_NAME);
+                }, 0);
+            } else if (!isOpen && ((_ref_current1 = ref.current) === null || _ref_current1 === void 0 ? void 0 : _ref_current1.open)) {
+                handleClose();
+            }
+        }
+        toggleDialog();
+    }, [
+        handleClose,
+        isOpen,
+        open,
+        ref
+    ]);
+    return {
+        open,
+        close: handleClose
+    };
+};
+
+//# sourceMappingURL=useDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/useDialog/useDialog.ts"],"sourcesContent":["import {\n  MutableRefObject,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n} from \"react\";\nimport { useDialogPolyfill } from \"../useDialogPolyfill\";\nimport { useBodyScrollLock } from \"../useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils\";\n\nexport type TransitionProps = {\n  isEnabled: boolean;\n  CSSVariable: string;\n};\n\nexport type useDialogProps = {\n  ref: MutableRefObject<HTMLDialogElement | null>;\n  transition: TransitionProps;\n  isOpen: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n};\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\nconst FALLBACK_TRANSITION_DURATION = 0;\n\nexport const useDialog = (props: useDialogProps) => {\n  const { ref, isOpen, transition, onOpen, onClose } = props;\n  const shouldTransition = supportsDialog() && transition.isEnabled;\n\n  // Read CSS variable value as number\n  const TRANSITION_DURATION_IN_MS =\n    (ref.current &&\n      Number(\n        getComputedStyle(ref.current)\n          .getPropertyValue(transition.CSSVariable)\n          .replace(\"ms\", \"\"),\n      )) ||\n    FALLBACK_TRANSITION_DURATION;\n\n  useDialogPolyfill(ref);\n  useBodyScrollLock({ enabled: isOpen });\n\n  const open = useCallback(() => {\n    ref.current?.showModal();\n    onOpen?.();\n  }, [onOpen, ref]);\n\n  const close = useCallback(() => {\n    ref.current?.close();\n    onClose?.();\n  }, [onClose, ref]);\n\n  // Add close handler, to enable closing transitions\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        // Prevent default event coming from onCancel,\n        // which is triggered by pressing ESC key\n        event.preventDefault();\n        // Ensure that nested `<dialog>` elements\n        // don't close the parent\n        event.stopPropagation();\n      }\n\n      if (shouldTransition) {\n        ref.current?.classList.remove(TRANSITION_CLASS_NAME);\n        // Delay close to allow exit transition\n        setTimeout(() => close(), TRANSITION_DURATION_IN_MS);\n      } else {\n        close();\n      }\n    },\n    [TRANSITION_DURATION_IN_MS, close, ref, shouldTransition],\n  );\n\n  useEffect(() => {\n    async function toggleDialog() {\n      if (isOpen && !ref.current?.open) {\n        open();\n        // Fix opening transition in Safari being skipped\n        // by wrapping with setTimeout\n        setTimeout(() => {\n          ref.current?.classList.add(TRANSITION_CLASS_NAME);\n        }, 0);\n      } else if (!isOpen && ref.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleDialog();\n  }, [handleClose, isOpen, open, ref]);\n\n  return {\n    open,\n    close: handleClose,\n  };\n};\n"],"names":["useCallback","useEffect","useDialogPolyfill","useBodyScrollLock","supportsDialog","TRANSITION_CLASS_NAME","FALLBACK_TRANSITION_DURATION","useDialog","props","ref","isOpen","transition","onOpen","onClose","shouldTransition","isEnabled","TRANSITION_DURATION_IN_MS","current","Number","getComputedStyle","getPropertyValue","CSSVariable","replace","enabled","open","showModal","close","handleClose","event","preventDefault","stopPropagation","classList","remove","setTimeout","toggleDialog","add"],"mappings":"AAAA,SAGEA,WAAW,EACXC,SAAS,QACJ,QAAQ;AACf,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,SAASC,cAAc,QAAQ,cAAc;AAe7C,MAAMC,wBAAwB;AAC9B,MAAMC,+BAA+B;AAErC,OAAO,MAAMC,YAAY,CAACC;IACxB,MAAM,EAAEC,GAAG,EAAEC,MAAM,EAAEC,UAAU,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGL;IACrD,MAAMM,mBAAmBV,oBAAoBO,WAAWI,SAAS;IAEjE,oCAAoC;IACpC,MAAMC,4BACJ,AAACP,IAAIQ,OAAO,IACVC,OACEC,iBAAiBV,IAAIQ,OAAO,EACzBG,gBAAgB,CAACT,WAAWU,WAAW,EACvCC,OAAO,CAAC,MAAM,QAErBhB;IAEFJ,kBAAkBO;IAClBN,kBAAkB;QAAEoB,SAASb;IAAO;IAEpC,MAAMc,OAAOxB,YAAY;YACvBS;SAAAA,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAagB,SAAS;QACtBb,mBAAAA,6BAAAA;IACF,GAAG;QAACA;QAAQH;KAAI;IAEhB,MAAMiB,QAAQ1B,YAAY;YACxBS;SAAAA,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAaiB,KAAK;QAClBb,oBAAAA,8BAAAA;IACF,GAAG;QAACA;QAASJ;KAAI;IAEjB,mDAAmD;IACnD,MAAMkB,cAAc3B,YAClB,CAAC4B;QACC,IAAIA,OAAO;YACT,8CAA8C;YAC9C,yCAAyC;YACzCA,MAAMC,cAAc;YACpB,yCAAyC;YACzC,yBAAyB;YACzBD,MAAME,eAAe;QACvB;QAEA,IAAIhB,kBAAkB;gBACpBL;aAAAA,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAasB,SAAS,CAACC,MAAM,CAAC3B;YAC9B,uCAAuC;YACvC4B,WAAW,IAAMP,SAASV;QAC5B,OAAO;YACLU;QACF;IACF,GACA;QAACV;QAA2BU;QAAOjB;QAAKK;KAAiB;IAG3Db,UAAU;QACR,eAAeiC;gBACEzB,cAOOA;YAPtB,IAAIC,UAAU,GAACD,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAae,IAAI,GAAE;gBAChCA;gBACA,iDAAiD;gBACjD,8BAA8B;gBAC9BS,WAAW;wBACTxB;qBAAAA,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAasB,SAAS,CAACI,GAAG,CAAC9B;gBAC7B,GAAG;YACL,OAAO,IAAI,CAACK,YAAUD,gBAAAA,IAAIQ,OAAO,cAAXR,oCAAAA,cAAae,IAAI,GAAE;gBACvCG;YACF;QACF;QAEAO;IACF,GAAG;QAACP;QAAajB;QAAQc;QAAMf;KAAI;IAEnC,OAAO;QACLe;QACAE,OAAOC;IACT;AACF,EAAE"}

package/dist/esm/hooks/useDialogPolyfill/index.js

@@ -0,0 +1,3 @@
+export * from "./useDialogPolyfill";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/useDialogPolyfill/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/useDialogPolyfill/index.ts"],"sourcesContent":["export * from \"./useDialogPolyfill\";\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB"}

package/dist/esm/hooks/useDialogPolyfill/useDialogPolyfill.js

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { supportsDialog } from "../../utils";
+// Add polyfill for HTML Dialog in old browsers
+export const useDialogPolyfill = (ref)=>{
+    const hasDialogSupport = supportsDialog();
+    useEffect(()=>{
+        async function polyfillDialog() {
+            if (!hasDialogSupport && typeof window !== "undefined" && ref.current !== null) {
+                const { default: dialogPolyfill } = await import("dialog-polyfill");
+                try {
+                    dialogPolyfill.registerDialog(ref.current);
+                } catch (error) {
+                    // In iOS 15 <= 15.2 this intermittently fails with
+                    // TypeError: null is not an object (evaluating 'element.showModal')
+                    // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️
+                    console.error("Failed to load dialog-polyfill", error);
+                }
+            }
+        }
+        polyfillDialog();
+    }, [
+        ref,
+        hasDialogSupport
+    ]);
+};
+
+//# sourceMappingURL=useDialogPolyfill.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/useDialogPolyfill/useDialogPolyfill.ts"],"sourcesContent":["import { MutableRefObject, useEffect } from \"react\";\nimport { supportsDialog } from \"../../utils\";\n\n// Add polyfill for HTML Dialog in old browsers\nexport const useDialogPolyfill = (\n  ref: MutableRefObject<HTMLDialogElement | null>,\n) => {\n  const hasDialogSupport = supportsDialog();\n\n  useEffect(() => {\n    async function polyfillDialog() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        ref.current !== null\n      ) {\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n\n        try {\n          dialogPolyfill.registerDialog(ref.current);\n        } catch (error) {\n          // In iOS 15 <= 15.2 this intermittently fails with\n          // TypeError: null is not an object (evaluating 'element.showModal')\n          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️\n          console.error(\"Failed to load dialog-polyfill\", error);\n        }\n      }\n    }\n\n    polyfillDialog();\n  }, [ref, hasDialogSupport]);\n};\n"],"names":["useEffect","supportsDialog","useDialogPolyfill","ref","hasDialogSupport","polyfillDialog","window","current","default","dialogPolyfill","registerDialog","error","console"],"mappings":"AAAA,SAA2BA,SAAS,QAAQ,QAAQ;AACpD,SAASC,cAAc,QAAQ,cAAc;AAE7C,+CAA+C;AAC/C,OAAO,MAAMC,oBAAoB,CAC/BC;IAEA,MAAMC,mBAAmBH;IAEzBD,UAAU;QACR,eAAeK;YACb,IACE,CAACD,oBACD,OAAOE,WAAW,eAClBH,IAAII,OAAO,KAAK,MAChB;gBACA,MAAM,EAAEC,SAASC,cAAc,EAAE,GAAG,MAAM,MAAM,CAAC;gBAEjD,IAAI;oBACFA,eAAeC,cAAc,CAACP,IAAII,OAAO;gBAC3C,EAAE,OAAOI,OAAO;oBACd,mDAAmD;oBACnD,oEAAoE;oBACpE,qGAAqG;oBACrGC,QAAQD,KAAK,CAAC,kCAAkCA;gBAClD;YACF;QACF;QAEAN;IACF,GAAG;QAACF;QAAKC;KAAiB;AAC5B,EAAE"}

package/dist/esm/src/components/Accordion/Accordion.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { chevronDown } from "@simplybusiness/icons";
+import classNames from "classnames/dedupe";
+import { forwardRef, useEffect, useState } from "react";
+import { Flex } from "../Flex";
+import { Icon } from "../Icon";
+const AccordionLink = ({ text, toggle, onClick, headerChildren, ariaExpanded })=>{
+    const linkClasses = classNames("mobius/AccordionLink", {
+        "--is-open": ariaExpanded
+    });
+    const iconClasses = classNames("mobius/AccordionLinkIcon", {
+        "--is-open": ariaExpanded
+    });
+    const handleOnClick = ()=>{
+        if (onClick) {
+            onClick();
+        }
+        toggle();
+    };
+    const handleKeyDown = (e)=>{
+        if (e.key === " " || e.key === "Enter") {
+            toggle();
+        }
+    };
+    if (headerChildren) {
+        return /*#__PURE__*/ _jsxs(Flex, {
+            justifyContent: "space-between",
+            alignItems: "center",
+            className: "mobius/AccordionHeader",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: linkClasses,
+                    onClick: handleOnClick,
+                    onKeyDown: handleKeyDown,
+                    role: "button",
+                    tabIndex: 0,
+                    "aria-expanded": !!ariaExpanded,
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "mobius/AccordionLinkText",
+                            children: text
+                        }),
+                        /*#__PURE__*/ _jsx(Icon, {
+                            icon: chevronDown,
+                            className: iconClasses
+                        })
+                    ]
+                }),
+                headerChildren
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: linkClasses,
+        onClick: handleOnClick,
+        onKeyDown: handleKeyDown,
+        role: "button",
+        tabIndex: 0,
+        "aria-expanded": !!ariaExpanded,
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: "mobius/AccordionLinkText",
+                children: text
+            }),
+            /*#__PURE__*/ _jsx(Icon, {
+                icon: chevronDown,
+                className: iconClasses
+            })
+        ]
+    });
+};
+export const Accordion = /*#__PURE__*/ forwardRef((props, ref)=>{
+    var _window;
+    const { showText = "See more", hideText = "See less", headerPosition = "top", startOpen = false, onOpen, onClose, onChange = ()=>{}, headerChildren, ...rest } = props;
+    const [accordionState, setAccordionState] = useState({
+        open: true,
+        withAnimation: false
+    });
+    const prefersReducedMotion = (_window = window) === null || _window === void 0 ? void 0 : _window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const containerClasses = classNames("mobius", "mobius/Accordion", props.className, {
+        "--should-animate": accordionState.withAnimation && !prefersReducedMotion,
+        "--is-open": accordionState.open
+    });
+    const contentContainerClasses = classNames("mobius/AccordionContentContainer", {
+        "--is-open": accordionState.open
+    });
+    const contentClasses = classNames("mobius/AccordionContent", {
+        "--is-open": accordionState.open
+    });
+    const linkText = accordionState.open ? hideText : showText;
+    const handleChange = ()=>{
+        // Fire events
+        if (!accordionState.open && onOpen) {
+            onOpen();
+        }
+        if (accordionState.open && onClose) {
+            onClose();
+        }
+        if (onChange) {
+            onChange(!accordionState.open);
+        }
+        setAccordionState({
+            open: !accordionState.open,
+            withAnimation: true
+        });
+    };
+    useEffect(()=>{
+        setAccordionState({
+            open: startOpen,
+            withAnimation: false
+        });
+    }, [
+        startOpen
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: ref,
+        ...rest,
+        className: containerClasses,
+        children: [
+            headerPosition === "top" && /*#__PURE__*/ _jsx(AccordionLink, {
+                text: linkText,
+                toggle: handleChange,
+                ariaExpanded: accordionState.open,
+                headerChildren: headerChildren
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: contentContainerClasses,
+                "aria-hidden": !accordionState.open,
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: contentClasses,
+                    children: props.children
+                })
+            }),
+            headerPosition === "bottom" && /*#__PURE__*/ _jsx(AccordionLink, {
+                text: linkText,
+                toggle: handleChange,
+                ariaExpanded: accordionState.open,
+                headerChildren: headerChildren
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=Accordion.js.map

package/dist/esm/src/components/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { chevronDown } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport {\n  KeyboardEvent,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Flex } from \"../Flex\";\nimport { Icon } from \"../Icon\";\n\nexport type AccordionElementType = HTMLDivElement;\nexport type AccordionRef = Ref<AccordionElementType>;\nexport interface AccordionLinkProps extends DOMProps {\n  /** Link text to show accordion content */\n  text?: string;\n  onClick?: () => void;\n  toggle: () => void;\n  headerChildren?: ReactNode;\n  ariaExpanded: boolean | undefined;\n}\n\nconst AccordionLink = ({\n  text,\n  toggle,\n  onClick,\n  headerChildren,\n  ariaExpanded,\n}: AccordionLinkProps) => {\n  const linkClasses = classNames(\"mobius/AccordionLink\", {\n    \"--is-open\": ariaExpanded,\n  });\n  const iconClasses = classNames(\"mobius/AccordionLinkIcon\", {\n    \"--is-open\": ariaExpanded,\n  });\n\n  const handleOnClick = (): void => {\n    if (onClick) {\n      onClick();\n    }\n    toggle();\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \" \" || e.key === \"Enter\") {\n      toggle();\n    }\n  };\n\n  if (headerChildren) {\n    return (\n      <Flex\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        className=\"mobius/AccordionHeader\"\n      >\n        <div\n          className={linkClasses}\n          onClick={handleOnClick}\n          onKeyDown={handleKeyDown}\n          role=\"button\"\n          tabIndex={0}\n          aria-expanded={!!ariaExpanded}\n        >\n          <span className=\"mobius/AccordionLinkText\">{text}</span>\n          <Icon icon={chevronDown} className={iconClasses} />\n        </div>\n        {headerChildren}\n      </Flex>\n    );\n  }\n\n  return (\n    <div\n      className={linkClasses}\n      onClick={handleOnClick}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-expanded={!!ariaExpanded}\n    >\n      <span className=\"mobius/AccordionLinkText\">{text}</span>\n      <Icon icon={chevronDown} className={iconClasses} />\n    </div>\n  );\n};\n\nexport interface AccordionProps\n  extends DOMProps,\n    RefAttributes<AccordionElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Link text to show accordion content */\n  showText?: string;\n  /** Link text to hide accordion content */\n  hideText?: string;\n  /** Whether header is above or below content */\n  headerPosition?: \"top\" | \"bottom\";\n  /** Whether to expand the accordion initially */\n  startOpen?: boolean | undefined;\n  /** Callback that fires each time the accordion is opened */\n  onOpen?: () => void;\n  /** Callback that fires each time the accordion is closed */\n  onClose?: () => void;\n  /** Callback that fires each time the accordion state changes */\n  onChange?: (state: boolean) => void;\n  children?: ReactNode;\n  headerChildren?: ReactNode;\n}\n\nexport const Accordion: ForwardedRefComponent<\n  AccordionProps,\n  AccordionElementType\n> = forwardRef((props: AccordionProps, ref: AccordionRef) => {\n  const {\n    showText = \"See more\",\n    hideText = \"See less\",\n    headerPosition = \"top\",\n    startOpen = false,\n    onOpen,\n    onClose,\n    onChange = () => {},\n    headerChildren,\n    ...rest\n  } = props;\n  const [accordionState, setAccordionState] = useState({\n    open: true,\n    withAnimation: false,\n  });\n  const prefersReducedMotion = window?.matchMedia(\n    \"(prefers-reduced-motion: reduce)\",\n  ).matches;\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius/Accordion\",\n    props.className,\n    {\n      \"--should-animate\": accordionState.withAnimation && !prefersReducedMotion,\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentContainerClasses = classNames(\n    \"mobius/AccordionContentContainer\",\n    {\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentClasses = classNames(\"mobius/AccordionContent\", {\n    \"--is-open\": accordionState.open,\n  });\n  const linkText = accordionState.open ? hideText : showText;\n\n  const handleChange = () => {\n    // Fire events\n    if (!accordionState.open && onOpen) {\n      onOpen();\n    }\n    if (accordionState.open && onClose) {\n      onClose();\n    }\n    if (onChange) {\n      onChange(!accordionState.open);\n    }\n    setAccordionState({\n      open: !accordionState.open,\n      withAnimation: true,\n    });\n  };\n\n  useEffect(() => {\n    setAccordionState({\n      open: startOpen,\n      withAnimation: false,\n    });\n  }, [startOpen]);\n\n  return (\n    <div ref={ref} {...rest} className={containerClasses}>\n      {headerPosition === \"top\" && (\n        <AccordionLink\n          text={linkText}\n          toggle={handleChange}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n        />\n      )}\n      <div\n        className={contentContainerClasses}\n        aria-hidden={!accordionState.open}\n      >\n        <div className={contentClasses}>{props.children}</div>\n      </div>\n      {headerPosition === \"bottom\" && (\n        <AccordionLink\n          text={linkText}\n          toggle={handleChange}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n        />\n      )}\n    </div>\n  );\n});\n"],"names":["chevronDown","classNames","forwardRef","useEffect","useState","Flex","Icon","AccordionLink","text","toggle","onClick","headerChildren","ariaExpanded","linkClasses","iconClasses","handleOnClick","handleKeyDown","e","key","justifyContent","alignItems","className","div","onKeyDown","role","tabIndex","aria-expanded","span","icon","Accordion","props","ref","window","showText","hideText","headerPosition","startOpen","onOpen","onClose","onChange","rest","accordionState","setAccordionState","open","withAnimation","prefersReducedMotion","matchMedia","matches","containerClasses","contentContainerClasses","contentClasses","linkText","handleChange","aria-hidden","children"],"mappings":"AAAA;;AAEA,SAASA,WAAW,QAAQ,wBAAwB;AACpD,OAAOC,gBAAgB,oBAAoB;AAC3C,SAKEC,UAAU,EACVC,SAAS,EACTC,QAAQ,QACH,QAAQ;AAGf,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,IAAI,QAAQ,UAAU;AAa/B,MAAMC,gBAAgB,CAAC,EACrBC,IAAI,EACJC,MAAM,EACNC,OAAO,EACPC,cAAc,EACdC,YAAY,EACO;IACnB,MAAMC,cAAcZ,WAAW,wBAAwB;QACrD,aAAaW;IACf;IACA,MAAME,cAAcb,WAAW,4BAA4B;QACzD,aAAaW;IACf;IAEA,MAAMG,gBAAgB;QACpB,IAAIL,SAAS;YACXA;QACF;QACAD;IACF;IAEA,MAAMO,gBAAgB,CAACC;QACrB,IAAIA,EAAEC,GAAG,KAAK,OAAOD,EAAEC,GAAG,KAAK,SAAS;YACtCT;QACF;IACF;IAEA,IAAIE,gBAAgB;QAClB,qBACE,MAACN;YACCc,gBAAe;YACfC,YAAW;YACXC,WAAU;;8BAEV,MAACC;oBACCD,WAAWR;oBACXH,SAASK;oBACTQ,WAAWP;oBACXQ,MAAK;oBACLC,UAAU;oBACVC,iBAAe,CAAC,CAACd;;sCAEjB,KAACe;4BAAKN,WAAU;sCAA4Bb;;sCAC5C,KAACF;4BAAKsB,MAAM5B;4BAAaqB,WAAWP;;;;gBAErCH;;;IAGP;IAEA,qBACE,MAACW;QACCD,WAAWR;QACXH,SAASK;QACTQ,WAAWP;QACXQ,MAAK;QACLC,UAAU;QACVC,iBAAe,CAAC,CAACd;;0BAEjB,KAACe;gBAAKN,WAAU;0BAA4Bb;;0BAC5C,KAACF;gBAAKsB,MAAM5B;gBAAaqB,WAAWP;;;;AAG1C;AAyBA,OAAO,MAAMe,0BAGT3B,WAAW,CAAC4B,OAAuBC;QAgBRC;IAf7B,MAAM,EACJC,WAAW,UAAU,EACrBC,WAAW,UAAU,EACrBC,iBAAiB,KAAK,EACtBC,YAAY,KAAK,EACjBC,MAAM,EACNC,OAAO,EACPC,WAAW,KAAO,CAAC,EACnB5B,cAAc,EACd,GAAG6B,MACJ,GAAGV;IACJ,MAAM,CAACW,gBAAgBC,kBAAkB,GAAGtC,SAAS;QACnDuC,MAAM;QACNC,eAAe;IACjB;IACA,MAAMC,wBAAuBb,UAAAA,oBAAAA,8BAAAA,QAAQc,UAAU,CAC7C,oCACAC,OAAO;IAET,MAAMC,mBAAmB/C,WACvB,UACA,oBACA6B,MAAMT,SAAS,EACf;QACE,oBAAoBoB,eAAeG,aAAa,IAAI,CAACC;QACrD,aAAaJ,eAAeE,IAAI;IAClC;IAEF,MAAMM,0BAA0BhD,WAC9B,oCACA;QACE,aAAawC,eAAeE,IAAI;IAClC;IAEF,MAAMO,iBAAiBjD,WAAW,2BAA2B;QAC3D,aAAawC,eAAeE,IAAI;IAClC;IACA,MAAMQ,WAAWV,eAAeE,IAAI,GAAGT,WAAWD;IAElD,MAAMmB,eAAe;QACnB,cAAc;QACd,IAAI,CAACX,eAAeE,IAAI,IAAIN,QAAQ;YAClCA;QACF;QACA,IAAII,eAAeE,IAAI,IAAIL,SAAS;YAClCA;QACF;QACA,IAAIC,UAAU;YACZA,SAAS,CAACE,eAAeE,IAAI;QAC/B;QACAD,kBAAkB;YAChBC,MAAM,CAACF,eAAeE,IAAI;YAC1BC,eAAe;QACjB;IACF;IAEAzC,UAAU;QACRuC,kBAAkB;YAChBC,MAAMP;YACNQ,eAAe;QACjB;IACF,GAAG;QAACR;KAAU;IAEd,qBACE,MAACd;QAAIS,KAAKA;QAAM,GAAGS,IAAI;QAAEnB,WAAW2B;;YACjCb,mBAAmB,uBAClB,KAAC5B;gBACCC,MAAM2C;gBACN1C,QAAQ2C;gBACRxC,cAAc6B,eAAeE,IAAI;gBACjChC,gBAAgBA;;0BAGpB,KAACW;gBACCD,WAAW4B;gBACXI,eAAa,CAACZ,eAAeE,IAAI;0BAEjC,cAAA,KAACrB;oBAAID,WAAW6B;8BAAiBpB,MAAMwB,QAAQ;;;YAEhDnB,mBAAmB,0BAClB,KAAC5B;gBACCC,MAAM2C;gBACN1C,QAAQ2C;gBACRxC,cAAc6B,eAAeE,IAAI;gBACjChC,gBAAgBA;;;;AAK1B,GAAG"}

package/dist/esm/src/components/Accordion/index.js

@@ -0,0 +1,3 @@
+export * from "./Accordion";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/Accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Accordion/index.tsx"],"sourcesContent":["export * from \"./Accordion\";\n"],"names":[],"mappings":"AAAA,cAAc,cAAc"}

package/dist/esm/src/components/Alert/Alert.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames/dedupe";
+import { info, success, warning, error } from "@simplybusiness/icons";
+import { Icon } from "../Icon";
+const Alert = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { elementType: Element = "div", variant = "info", show = true, header, children, ...otherProps } = props;
+    if (!show) return null;
+    const classes = classNames("mobius", "mobius/Alert", {
+        "--info": variant === "info",
+        "--success": variant === "success",
+        "--warning": variant === "warning",
+        "--error": variant === "error",
+        "--has-header": header
+    }, otherProps.className);
+    const icon = {
+        info,
+        success,
+        warning,
+        error
+    };
+    const headerClasses = classNames("mobius", "mobius/AlertHeader");
+    const iconClasses = classNames("mobius", "mobius/AlertIcon");
+    const contentClasses = classNames("mobius", "mobius/AlertContent");
+    return /*#__PURE__*/ _jsxs(Element, {
+        ref: ref,
+        role: "alert",
+        ...otherProps,
+        className: classes,
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: iconClasses,
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    icon: icon[variant]
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                children: [
+                    header && /*#__PURE__*/ _jsx("p", {
+                        className: headerClasses,
+                        children: header
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: contentClasses,
+                        children: children
+                    })
+                ]
+            })
+        ]
+    });
+});
+Alert.displayName = "Alert";
+export { Alert };
+
+//# sourceMappingURL=Alert.js.map

package/dist/esm/src/components/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { info, success, warning, error } from \"@simplybusiness/icons\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Icon } from \"../Icon\";\n\nexport type AlertElementType = HTMLDivElement;\n\nexport interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: string | React.ElementType;\n  variant?: \"info\" | \"success\" | \"warning\" | \"error\";\n  show?: boolean;\n  header?: string;\n}\n\nexport type AlertRef = Ref<AlertElementType>;\n\nconst Alert: ForwardedRefComponent<AlertProps, AlertElementType> = forwardRef(\n  (props: AlertProps, ref: AlertRef) => {\n    const {\n      elementType: Element = \"div\",\n      variant = \"info\",\n      show = true,\n      header,\n      children,\n      ...otherProps\n    } = props;\n\n    if (!show) return null;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Alert\",\n      {\n        \"--info\": variant === \"info\",\n        \"--success\": variant === \"success\",\n        \"--warning\": variant === \"warning\",\n        \"--error\": variant === \"error\",\n        \"--has-header\": header,\n      },\n      otherProps.className,\n    );\n    const icon = {\n      info,\n      success,\n      warning,\n      error,\n    };\n\n    const headerClasses = classNames(\"mobius\", \"mobius/AlertHeader\");\n    const iconClasses = classNames(\"mobius\", \"mobius/AlertIcon\");\n    const contentClasses = classNames(\"mobius\", \"mobius/AlertContent\");\n\n    return (\n      <Element ref={ref} role=\"alert\" {...otherProps} className={classes}>\n        <span className={iconClasses}>\n          <Icon icon={icon[variant]} />\n        </span>\n        <div>\n          {header && <p className={headerClasses}>{header}</p>}\n          <div className={contentClasses}>{children}</div>\n        </div>\n      </Element>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\nexport { Alert };\n"],"names":["forwardRef","classNames","info","success","warning","error","Icon","Alert","props","ref","elementType","Element","variant","show","header","children","otherProps","classes","className","icon","headerClasses","iconClasses","contentClasses","role","span","div","p","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAC3C,SAASC,IAAI,EAAEC,OAAO,EAAEC,OAAO,EAAEC,KAAK,QAAQ,wBAAwB;AAGtE,SAASC,IAAI,QAAQ,UAAU;AAgB/B,MAAMC,sBAA6DP,WACjE,CAACQ,OAAmBC;IAClB,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,UAAU,MAAM,EAChBC,OAAO,IAAI,EACXC,MAAM,EACNC,QAAQ,EACR,GAAGC,YACJ,GAAGR;IAEJ,IAAI,CAACK,MAAM,OAAO;IAElB,MAAMI,UAAUhB,WACd,UACA,gBACA;QACE,UAAUW,YAAY;QACtB,aAAaA,YAAY;QACzB,aAAaA,YAAY;QACzB,WAAWA,YAAY;QACvB,gBAAgBE;IAClB,GACAE,WAAWE,SAAS;IAEtB,MAAMC,OAAO;QACXjB;QACAC;QACAC;QACAC;IACF;IAEA,MAAMe,gBAAgBnB,WAAW,UAAU;IAC3C,MAAMoB,cAAcpB,WAAW,UAAU;IACzC,MAAMqB,iBAAiBrB,WAAW,UAAU;IAE5C,qBACE,MAACU;QAAQF,KAAKA;QAAKc,MAAK;QAAS,GAAGP,UAAU;QAAEE,WAAWD;;0BACzD,KAACO;gBAAKN,WAAWG;0BACf,cAAA,KAACf;oBAAKa,MAAMA,IAAI,CAACP,QAAQ;;;0BAE3B,MAACa;;oBACEX,wBAAU,KAACY;wBAAER,WAAWE;kCAAgBN;;kCACzC,KAACW;wBAAIP,WAAWI;kCAAiBP;;;;;;AAIzC;AAGFR,MAAMoB,WAAW,GAAG;AACpB,SAASpB,KAAK,GAAG"}

package/dist/esm/src/components/Alert/index.js

@@ -0,0 +1,3 @@
+export * from "./Alert";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/Alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Alert/index.tsx"],"sourcesContent":["export * from \"./Alert\";\n"],"names":[],"mappings":"AAAA,cAAc,UAAU"}

package/dist/esm/src/components/Box/Box.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames/dedupe";
+import { getSpacingValue, filterUndefinedProps } from "../../utils";
+const Box = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { elementType: Element = "div", padding, paddingX, paddingInline, paddingInlineStart, paddingInlineEnd, paddingY, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingTop, paddingRight, paddingBottom, paddingLeft, minWidth, minHeight, maxWidth, maxHeight, width, height, style, ...otherProps } = props;
+    const classes = classNames("mobius", "mobius/Box", otherProps.className);
+    const styleProps = filterUndefinedProps({
+        padding: getSpacingValue(padding),
+        paddingInline: getSpacingValue(paddingInline || paddingX),
+        paddingBlock: getSpacingValue(paddingBlock || paddingY),
+        paddingTop: getSpacingValue(paddingTop || paddingBlockStart),
+        paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),
+        paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),
+        paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),
+        minWidth,
+        minHeight,
+        maxWidth,
+        maxHeight,
+        width,
+        height,
+        ...style
+    });
+    return /*#__PURE__*/ _jsx(Element, {
+        ref: ref,
+        style: styleProps,
+        ...otherProps,
+        className: classes
+    });
+});
+Box.displayName = "Box";
+export { Box };
+
+//# sourceMappingURL=Box.js.map

package/dist/esm/src/components/Box/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Box/Box.tsx"],"sourcesContent":["import { Ref, forwardRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { BoxElementType, BoxProps } from \"./types\";\nimport { getSpacingValue, filterUndefinedProps } from \"../../utils\";\n\nexport type BoxRef = Ref<BoxElementType>;\n\nconst Box: ForwardedRefComponent<BoxProps, BoxElementType> = forwardRef(\n  (props: BoxProps, ref: BoxRef) => {\n    const {\n      elementType: Element = \"div\",\n      padding,\n      paddingX,\n      paddingInline,\n      paddingInlineStart,\n      paddingInlineEnd,\n      paddingY,\n      paddingBlock,\n      paddingBlockStart,\n      paddingBlockEnd,\n      paddingTop,\n      paddingRight,\n      paddingBottom,\n      paddingLeft,\n      minWidth,\n      minHeight,\n      maxWidth,\n      maxHeight,\n      width,\n      height,\n      style,\n      ...otherProps\n    } = props;\n\n    const classes = classNames(\"mobius\", \"mobius/Box\", otherProps.className);\n\n    const styleProps = filterUndefinedProps({\n      padding: getSpacingValue(padding),\n      paddingInline: getSpacingValue(paddingInline || paddingX),\n      paddingBlock: getSpacingValue(paddingBlock || paddingY),\n      paddingTop: getSpacingValue(paddingTop || paddingBlockStart),\n      paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),\n      paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),\n      paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),\n      minWidth,\n      minHeight,\n      maxWidth,\n      maxHeight,\n      width,\n      height,\n      ...style,\n    });\n\n    return (\n      <Element\n        ref={ref}\n        style={styleProps}\n        {...otherProps}\n        className={classes}\n      />\n    );\n  },\n);\n\nBox.displayName = \"Box\";\nexport { Box };\n"],"names":["forwardRef","classNames","getSpacingValue","filterUndefinedProps","Box","props","ref","elementType","Element","padding","paddingX","paddingInline","paddingInlineStart","paddingInlineEnd","paddingY","paddingBlock","paddingBlockStart","paddingBlockEnd","paddingTop","paddingRight","paddingBottom","paddingLeft","minWidth","minHeight","maxWidth","maxHeight","width","height","style","otherProps","classes","className","styleProps","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAQ,QAAQ;AACxC,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,eAAe,EAAEC,oBAAoB,QAAQ,cAAc;AAIpE,MAAMC,oBAAuDJ,WAC3D,CAACK,OAAiBC;IAChB,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,OAAO,EACPC,QAAQ,EACRC,aAAa,EACbC,kBAAkB,EAClBC,gBAAgB,EAChBC,QAAQ,EACRC,YAAY,EACZC,iBAAiB,EACjBC,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,aAAa,EACbC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,KAAK,EACL,GAAGC,YACJ,GAAGxB;IAEJ,MAAMyB,UAAU7B,WAAW,UAAU,cAAc4B,WAAWE,SAAS;IAEvE,MAAMC,aAAa7B,qBAAqB;QACtCM,SAASP,gBAAgBO;QACzBE,eAAeT,gBAAgBS,iBAAiBD;QAChDK,cAAcb,gBAAgBa,gBAAgBD;QAC9CI,YAAYhB,gBAAgBgB,cAAcF;QAC1CG,cAAcjB,gBAAgBiB,gBAAgBN;QAC9CO,eAAelB,gBAAgBkB,iBAAiBH;QAChDI,aAAanB,gBAAgBmB,eAAeT;QAC5CU;QACAC;QACAC;QACAC;QACAC;QACAC;QACA,GAAGC,KAAK;IACV;IAEA,qBACE,KAACpB;QACCF,KAAKA;QACLsB,OAAOI;QACN,GAAGH,UAAU;QACdE,WAAWD;;AAGjB;AAGF1B,IAAI6B,WAAW,GAAG;AAClB,SAAS7B,GAAG,GAAG"}

package/dist/esm/src/components/Box/index.js

@@ -0,0 +1,3 @@
+export * from "./Box";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/Box/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Box/index.tsx"],"sourcesContent":["export * from \"./Box\";\n"],"names":[],"mappings":"AAAA,cAAc,QAAQ"}

package/dist/esm/src/components/Box/types.js

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

package/dist/esm/src/components/Box/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Box/types.ts"],"sourcesContent":["import { ReactNode, RefAttributes } from \"react\";\nimport { DOMProps, SpacingType } from \"../../types\";\n\nexport type BoxElementType = HTMLDivElement;\n\nexport type BoxDimensionsType = string | number;\n\nexport interface BoxProps extends DOMProps, RefAttributes<BoxElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** HTML element for the Box */\n  elementType?: \"div\" | \"span\";\n  style?: React.CSSProperties;\n  padding?: SpacingType;\n  paddingX?: SpacingType;\n  paddingInline?: SpacingType;\n  paddingInlineStart?: SpacingType;\n  paddingInlineEnd?: SpacingType;\n  paddingY?: SpacingType;\n  paddingBlock?: SpacingType;\n  paddingBlockStart?: SpacingType;\n  paddingBlockEnd?: SpacingType;\n  paddingTop?: SpacingType;\n  paddingRight?: SpacingType;\n  paddingBottom?: SpacingType;\n  paddingLeft?: SpacingType;\n  minWidth?: BoxDimensionsType;\n  minHeight?: BoxDimensionsType;\n  maxWidth?: BoxDimensionsType;\n  maxHeight?: BoxDimensionsType;\n  width?: BoxDimensionsType;\n  height?: BoxDimensionsType;\n}\n"],"names":[],"mappings":"AAOA,WA0BC"}

package/dist/esm/src/components/Breadcrumbs/BreadcrumbItem.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, cloneElement, Children } from "react";
+import classNames from "classnames/dedupe";
+import { Box } from "../Box";
+const BreadcrumbItem = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { isDisabled = false, isCurrent = false, "aria-current": ariaCurrent = "page", children, separator = /*#__PURE__*/ _jsx(Box, {
+        className: "mobius/BreadcrumbSeparator",
+        "aria-hidden": "true",
+        children: ">"
+    }), ...otherProps } = props;
+    const { itemProps } = {
+        itemProps: {
+            "aria-current": isCurrent ? ariaCurrent : undefined,
+            "aria-disabled": isDisabled || isCurrent,
+            ...otherProps
+        }
+    };
+    // Reshape class name and apply to outer element
+    const classes = classNames("mobius", "mobius/BreadcrumbItem", props.className);
+    const child = typeof children === "string" ? /*#__PURE__*/ _jsx("span", {
+        ...itemProps,
+        children: children
+    }) : Children.only(children);
+    return /*#__PURE__*/ _jsxs("li", {
+        className: classes,
+        children: [
+            /*#__PURE__*/ cloneElement(child, {
+                ...child.props,
+                ...itemProps,
+                ref
+            }),
+            !props.isCurrent && separator
+        ]
+    });
+});
+BreadcrumbItem.displayName = "BreadcrumbItem";
+export { BreadcrumbItem };
+
+//# sourceMappingURL=BreadcrumbItem.js.map

package/dist/esm/src/components/Breadcrumbs/BreadcrumbItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Ref,\n  forwardRef,\n  ReactNode,\n  ReactElement,\n  cloneElement,\n  Children,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Box } from \"../Box\";\n\nexport type BreadcrumbItemElementType = HTMLLIElement;\n\nexport interface BreadcrumbItemProps extends DOMProps {\n  \"aria-current\"?:\n    | \"page\"\n    | \"step\"\n    | \"location\"\n    | \"date\"\n    | \"time\"\n    | boolean\n    | \"true\"\n    | \"false\";\n  isDisabled?: boolean;\n  isCurrent?: boolean;\n  separator?: ReactNode;\n  className?: string;\n  children: ReactNode;\n}\n\nexport type BreadcrumbItemRef = Ref<BreadcrumbItemElementType>;\n\nconst BreadcrumbItem: ForwardedRefComponent<\n  BreadcrumbItemProps,\n  BreadcrumbItemElementType\n> = forwardRef((props: BreadcrumbItemProps, ref: BreadcrumbItemRef) => {\n  const {\n    isDisabled = false,\n    isCurrent = false,\n    \"aria-current\": ariaCurrent = \"page\",\n    children,\n    separator = (\n      <Box className=\"mobius/BreadcrumbSeparator\" aria-hidden=\"true\">\n        {\">\"}\n      </Box>\n    ),\n    ...otherProps\n  } = props;\n  const { itemProps } = {\n    itemProps: {\n      \"aria-current\": isCurrent ? ariaCurrent : undefined,\n      \"aria-disabled\": isDisabled || isCurrent,\n      ...otherProps,\n    },\n  };\n\n  // Reshape class name and apply to outer element\n  const classes = classNames(\n    \"mobius\",\n    \"mobius/BreadcrumbItem\",\n    props.className,\n  );\n\n  const child =\n    typeof children === \"string\" ? (\n      <span {...itemProps}>{children}</span>\n    ) : (\n      (Children.only(children) as ReactElement)\n    );\n\n  return (\n    <li className={classes}>\n      {cloneElement(child, { ...child.props, ...itemProps, ref })}\n      {!props.isCurrent && separator}\n    </li>\n  );\n});\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\";\nexport { BreadcrumbItem };\n"],"names":["forwardRef","cloneElement","Children","classNames","Box","BreadcrumbItem","props","ref","isDisabled","isCurrent","ariaCurrent","children","separator","className","aria-hidden","otherProps","itemProps","undefined","classes","child","span","only","li","displayName"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EAGVC,YAAY,EACZC,QAAQ,QACH,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,GAAG,QAAQ,SAAS;AAuB7B,MAAMC,+BAGFL,WAAW,CAACM,OAA4BC;IAC1C,MAAM,EACJC,aAAa,KAAK,EAClBC,YAAY,KAAK,EACjB,gBAAgBC,cAAc,MAAM,EACpCC,QAAQ,EACRC,0BACE,KAACR;QAAIS,WAAU;QAA6BC,eAAY;kBACrD;MAEJ,EACD,GAAGC,YACJ,GAAGT;IACJ,MAAM,EAAEU,SAAS,EAAE,GAAG;QACpBA,WAAW;YACT,gBAAgBP,YAAYC,cAAcO;YAC1C,iBAAiBT,cAAcC;YAC/B,GAAGM,UAAU;QACf;IACF;IAEA,gDAAgD;IAChD,MAAMG,UAAUf,WACd,UACA,yBACAG,MAAMO,SAAS;IAGjB,MAAMM,QACJ,OAAOR,aAAa,yBAClB,KAACS;QAAM,GAAGJ,SAAS;kBAAGL;SAErBT,SAASmB,IAAI,CAACV;IAGnB,qBACE,MAACW;QAAGT,WAAWK;;0BACZjB,aAAakB,OAAO;gBAAE,GAAGA,MAAMb,KAAK;gBAAE,GAAGU,SAAS;gBAAET;YAAI;YACxD,CAACD,MAAMG,SAAS,IAAIG;;;AAG3B;AAEAP,eAAekB,WAAW,GAAG;AAC7B,SAASlB,cAAc,GAAG"}