@simplybusiness/mobius 4.4.4 → 4.4.6

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

@@ -0,0 +1,2 @@
+import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
+export type ForwardedRefComponent<T, RT> = ForwardRefExoticComponent<PropsWithoutRef<T> & RefAttributes<RT>>;

package/dist/cjs/types/dom.d.ts

@@ -0,0 +1,3 @@
+export interface DOMProps {
+    id?: string | undefined;
+}

package/dist/cjs/types/events.d.ts

@@ -0,0 +1,45 @@
+import type { ClipboardEvent, CompositionEvent, FocusEvent, KeyboardEvent } from "react";
+export interface KeyboardEvents {
+    /** Event called when the value changes (mandatory for controlled components) */
+    onKeyUp?: (e: KeyboardEvent) => void;
+    /** Event called when the value changes (mandatory for controlled components) */
+    onKeyDown?: (e: KeyboardEvent) => void;
+}
+export interface ClipboardEvents {
+    /** Fired when the user initiates a copy action through the browser's user interface. */
+    onCopy?: (e: ClipboardEvent) => void;
+    /** Fired when the user initiates a cut action through the browser's user interface. */
+    onCut?: (e: ClipboardEvent) => void;
+    /** Fired when the user initiates a paste action through the browser's user interface. */
+    onPaste?: (e: ClipboardEvent) => void;
+}
+export interface CompositionEvents {
+    /** Fired when a text composition system such as an input method editor completes or cancels the current composition session. */
+    onCompositionEnd?: (e: CompositionEvent) => void;
+    /** Fired when a text composition system such as an input method editor starts a new composition session. */
+    onCompositionStart?: (e: CompositionEvent) => void;
+    /** Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an input method editor. */
+    onCompositionUpdate?: (e: CompositionEvent) => void;
+}
+export interface FocusEvents {
+    /** Fired when an element has lost focus. */
+    onBlur?: (e: FocusEvent) => void;
+    /** Fired when an element has gained focus. */
+    onFocus?: (e: FocusEvent) => void;
+}
+export interface InputEvents {
+    /** Event called when the value changes (mandatory for controlled components) */
+    onChange?: (value: string) => void;
+}
+export type HTMLElementEvent<T extends HTMLElement> = Event & {
+    target: T;
+};
+export type ValidationState = "valid" | "invalid";
+export interface Validation {
+    /** Whether user input is required on the input before form submission. */
+    isRequired?: boolean;
+    /** Whether the input value is invalid. */
+    isInvalid?: boolean;
+    /** @deprecated Use `isInvalid` instead. */
+    validationState?: ValidationState;
+}

package/dist/cjs/types/icon.d.ts

@@ -0,0 +1,9 @@
+export type IconDefinition = {
+    iconName: string;
+    width: number;
+    height: number;
+    svgPathData: string;
+    iconType: "stroke" | "fill";
+    strokeWidth?: number;
+    fill?: string | undefined;
+};

package/dist/cjs/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./components";
+export * from "./dom";
+export * from "./events";
+export * from "./icon";
+export * from "./size";

package/dist/cjs/types/size.d.ts

@@ -0,0 +1 @@
+export type SizeType = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";

package/dist/cjs/utils/StoryContainer.d.ts

@@ -0,0 +1 @@
+export declare const StoryContainer: (props: Record<string, unknown>) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/utils/StoryContainer.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "StoryContainer", {
+    enumerable: true,
+    get: function() {
+        return StoryContainer;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const css = `
+  :root {
+    --story-container-width: auto;
+  }
+
+  @media (min-width: 641px) {
+    :root {
+      --story-container-width: var(--size-inner-container);
+    }
+  }
+
+  .story-container {
+    width: var(--story-container-width);
+  }
+`;
+const StoryContainer = (props)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
+                children: css
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "story-container",
+                ...props
+            })
+        ]
+    });
+
+//# sourceMappingURL=StoryContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/StoryContainer.tsx"],"sourcesContent":["const css = `\n  :root {\n    --story-container-width: auto;\n  }\n\n  @media (min-width: 641px) {\n    :root {\n      --story-container-width: var(--size-inner-container);\n    }\n  }\n\n  .story-container {\n    width: var(--story-container-width);\n  }\n`;\n\nexport const StoryContainer = (props: Record<string, unknown>) => (\n  <>\n    <style>{css}</style>\n    <div className=\"story-container\" {...props} />\n  </>\n);\n"],"names":["StoryContainer","css","props","style","div","className"],"mappings":";;;;+BAgBaA;;;eAAAA;;;;AAhBb,MAAMC,MAAM,CAAC;;;;;;;;;;;;;;AAcb,CAAC;AAEM,MAAMD,iBAAiB,CAACE,sBAC7B;;0BACE,qBAACC;0BAAOF;;0BACR,qBAACG;gBAAIC,WAAU;gBAAmB,GAAGH,KAAK"}

package/dist/cjs/utils/changeCSS.d.ts

@@ -0,0 +1 @@
+export declare const changeCSS: (cssUrl: string) => void;

package/dist/cjs/utils/excludeControls.d.ts

@@ -0,0 +1 @@
+export declare const excludeControls: (...args: string[]) => {};

package/dist/cjs/utils/excludeControls.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/utils/excludeControls.test.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const excludeControls_1 = require("./excludeControls");
+describe("excludeControls", () => {
+    describe("given a list of props", () => {
+        it("returns an object where each prop has an entry with disabled params", () => {
+            const props = ["className", "elementType"];
+            const actual = (0, excludeControls_1.excludeControls)(...props);
+            const expected = {
+                elementType: {
+                    table: {
+                        disable: true,
+                    },
+                },
+                className: {
+                    table: {
+                        disable: true,
+                    },
+                },
+            };
+            expect(actual).toEqual(expected);
+        });
+    });
+});
+//# sourceMappingURL=excludeControls.test.js.map

package/dist/cjs/utils/excludeControls.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"excludeControls.test.js","sourceRoot":"","sources":["../../../src/utils/excludeControls.test.ts"],"names":[],"mappings":";;AAAA,uDAAoD;AAEpD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;QACrC,EAAE,CAAC,qEAAqE,EAAE,GAAG,EAAE;YAC7E,MAAM,KAAK,GAAG,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;YAE3C,MAAM,MAAM,GAAG,IAAA,iCAAe,EAAC,GAAG,KAAK,CAAC,CAAC;YAEzC,MAAM,QAAQ,GAAG;gBACf,WAAW,EAAE;oBACX,KAAK,EAAE;wBACL,OAAO,EAAE,IAAI;qBACd;iBACF;gBACD,SAAS,EAAE;oBACT,KAAK,EAAE;wBACL,OAAO,EAAE,IAAI;qBACd;iBACF;aACF,CAAC;YAEF,MAAM,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/cjs/utils/getPaddingValue.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getPaddingValue", {
+    enumerable: true,
+    get: function() {
+        return getPaddingValue;
+    }
+});
+const getPaddingValue = (padding)=>{
+    if (typeof padding === "string") {
+        return `var(--size-${padding})`;
+    }
+    if (typeof padding === "number") {
+        return `${padding}px`;
+    }
+    return undefined;
+};
+
+//# sourceMappingURL=getPaddingValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/getPaddingValue.ts"],"sourcesContent":["import { BoxPaddingType } from \"../components/Box/types\";\n\nexport const getPaddingValue = (\n  padding: BoxPaddingType | undefined,\n): string | undefined => {\n  if (typeof padding === \"string\") {\n    return `var(--size-${padding})`;\n  }\n\n  if (typeof padding === \"number\") {\n    return `${padding}px`;\n  }\n\n  return undefined;\n};\n"],"names":["getPaddingValue","padding","undefined"],"mappings":";;;;+BAEaA;;;eAAAA;;;AAAN,MAAMA,kBAAkB,CAC7BC;IAEA,IAAI,OAAOA,YAAY,UAAU;QAC/B,OAAO,CAAC,WAAW,EAAEA,QAAQ,CAAC,CAAC;IACjC;IAEA,IAAI,OAAOA,YAAY,UAAU;QAC/B,OAAO,CAAC,EAAEA,QAAQ,EAAE,CAAC;IACvB;IAEA,OAAOC;AACT"}

package/dist/cjs/utils/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./changeCSS";
+export * from "./excludeControls";
+export * from "./jestHTMLDialogPolyfill";
+export * from "./mergeRefs";
+export * from "./polyfill-tests";
+export * from "./sizeClasses";
+export * from "./spaceDelimitedList";
+export * from "./StoryContainer";

package/dist/cjs/utils/jestHTMLDialogPolyfill.d.ts

@@ -0,0 +1 @@
+export declare const jestHTMLDialogPolyfill: () => void;

package/dist/cjs/utils/mergeRefs.d.ts

@@ -0,0 +1,2 @@
+import type { MutableRefObject, LegacyRef, RefCallback } from "react";
+export declare function mergeRefs<T = any>(refs: Array<MutableRefObject<T> | LegacyRef<T>>): RefCallback<T>;

package/dist/cjs/utils/polyfill-tests.d.ts

@@ -0,0 +1 @@
+export declare const supportsDialog: () => boolean;

package/dist/cjs/utils/sizeClasses.d.ts

@@ -0,0 +1,16 @@
+import { SizeType } from "../types/size";
+export declare const sizeClasses: (size: SizeType | undefined) => {
+    "--is-xs"?: undefined;
+    "--is-sm"?: undefined;
+    "--is-md"?: undefined;
+    "--is-lg"?: undefined;
+    "--is-xl"?: undefined;
+    "--is-xxl"?: undefined;
+} | {
+    "--is-xs": boolean;
+    "--is-sm": boolean;
+    "--is-md": boolean;
+    "--is-lg": boolean;
+    "--is-xl": boolean;
+    "--is-xxl": boolean;
+};

package/dist/cjs/utils/sizeClasses.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/utils/sizeClasses.test.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const sizeClasses_1 = require("./sizeClasses");
+describe("sizeClasses", () => {
+    describe("given the size is set", () => {
+        it.each(["xs", "sm", "md", "lg", "xl", "xxl"])("it should return CSS modifier-like class name --is-%s", size => {
+            const input = (0, sizeClasses_1.sizeClasses)(size);
+            expect(input).toEqual(expect.objectContaining({
+                [`--is-${size}`]: true,
+            }));
+        });
+    });
+    describe("given the size is not set", () => {
+        it("should return null", () => {
+            const input = undefined;
+            expect((0, sizeClasses_1.sizeClasses)(input)).toEqual({});
+        });
+    });
+});
+//# sourceMappingURL=sizeClasses.test.js.map

package/dist/cjs/utils/sizeClasses.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizeClasses.test.js","sourceRoot":"","sources":["../../../src/utils/sizeClasses.test.ts"],"names":[],"mappings":";;AAAA,+CAA4C;AAG5C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;QACrC,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAC5C,uDAAuD,EACvD,IAAI,CAAC,EAAE;YACL,MAAM,KAAK,GAAG,IAAA,yBAAW,EAAC,IAAgB,CAAC,CAAC;YAE5C,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CACnB,MAAM,CAAC,gBAAgB,CAAC;gBACtB,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,IAAI;aACvB,CAAC,CACH,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACzC,EAAE,CAAC,oBAAoB,EAAE,GAAG,EAAE;YAC5B,MAAM,KAAK,GAAG,SAAS,CAAC;YAExB,MAAM,CAAC,IAAA,yBAAW,EAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/cjs/utils/spaceDelimitedList.d.ts

@@ -0,0 +1 @@
+export declare function spaceDelimitedList(list: (string | null | undefined)[]): string | undefined;

package/dist/cjs/utils/spaceDelimitedList.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/utils/spaceDelimitedList.test.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const spaceDelimitedList_1 = require("./spaceDelimitedList");
+describe("spaceDelimitedList", () => {
+    it("returns undefined when given an empty list", () => {
+        expect((0, spaceDelimitedList_1.spaceDelimitedList)([])).toBeUndefined();
+    });
+    it("returns a string when given a non-empty list", () => {
+        expect((0, spaceDelimitedList_1.spaceDelimitedList)(["a", "b", "c"])).toBe("a b c");
+    });
+    it("returns a string when given a list with a single element", () => {
+        expect((0, spaceDelimitedList_1.spaceDelimitedList)(["a"])).toBe("a");
+    });
+    it("returns a undefined when given a list with a single null element", () => {
+        expect((0, spaceDelimitedList_1.spaceDelimitedList)([null])).toBeUndefined();
+    });
+    it("returns a undefined when given a list with a single undefined element", () => {
+        expect((0, spaceDelimitedList_1.spaceDelimitedList)([undefined])).toBeUndefined();
+    });
+    it("returns a undefined when given a list with a single empty string element", () => {
+        expect((0, spaceDelimitedList_1.spaceDelimitedList)([""])).toBeUndefined();
+    });
+    it("Removes any null or undefined values", () => {
+        expect((0, spaceDelimitedList_1.spaceDelimitedList)(["a", null, "b", undefined, "c"])).toBe("a b c");
+    });
+});
+//# sourceMappingURL=spaceDelimitedList.test.js.map

package/dist/cjs/utils/spaceDelimitedList.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spaceDelimitedList.test.js","sourceRoot":"","sources":["../../../src/utils/spaceDelimitedList.test.ts"],"names":[],"mappings":";;AAAA,6DAA0D;AAE1D,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,4CAA4C,EAAE,GAAG,EAAE;QACpD,MAAM,CAAC,IAAA,uCAAkB,EAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACtD,MAAM,CAAC,IAAA,uCAAkB,EAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0DAA0D,EAAE,GAAG,EAAE;QAClE,MAAM,CAAC,IAAA,uCAAkB,EAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kEAAkE,EAAE,GAAG,EAAE;QAC1E,MAAM,CAAC,IAAA,uCAAkB,EAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uEAAuE,EAAE,GAAG,EAAE;QAC/E,MAAM,CAAC,IAAA,uCAAkB,EAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0EAA0E,EAAE,GAAG,EAAE;QAClF,MAAM,CAAC,IAAA,uCAAkB,EAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,CAAC,IAAA,uCAAkB,EAAC,CAAC,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC7E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -22,6 +22,9 @@ const Drawer = /*#__PURE__*/ forwardRef((props, ref)=>{
     });
     // Add close handler, to enable closing transitions
     const handleClose = useCallback((event)=>{
+        // `transitionend` may be called from another component but `event` may be undefined.
+        // This fixes an issue where closing `<Accordion>` inside `<Drawer>` will close both
+        if (!event) return;
         if (event) {
             event.preventDefault();
             event.stopPropagation();

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 TRANSITION_CLASS_NAME = \"--transition\";\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>(null);\n  const hasDialogSupport = supportsDialog();\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 transitions\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      // Name the callback function, so we can add and remove event listener\n      const transitionCallback = (e: Event) => {\n        // Close drawer only if the transition is on the dialog element\n        // As it can be on a child element (ie `<Button>` inside the drawer)\n        if (e.target === modalRef.current) {\n          // eslint-disable-next-line @typescript-eslint/no-use-before-define\n          doClose();\n        }\n      };\n\n      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\n        modalRef.current?.removeEventListener(\n          \"transitionend\",\n          transitionCallback,\n        );\n      };\n\n      // Delay close to allow backdrop exit transition\n      if (hasDialogSupport) {\n        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);\n        modalRef.current?.addEventListener(\"transitionend\", transitionCallback);\n      } else {\n        doClose();\n      }\n    },\n    [onClose, hasDialogSupport],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Drawer\",\n    `--${direction}`,\n    className,\n    {\n      \"--should-transition\": hasDialogSupport,\n    },\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        modalRef.current !== null\n      ) {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n        try {\n          dialogPolyfill.registerDialog(modalRef.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      if (isOpen && !modalRef.current?.open) {\n        modalRef.current?.showModal();\n        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);\n        onOpen?.();\n      } else if (!isOpen && modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose, hasDialogSupport]);\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","TRANSITION_CLASS_NAME","Drawer","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","modalRef","hasDialogSupport","current","enabled","handleClose","event","preventDefault","stopPropagation","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","error","console","open","showModal","add","dialog","onCancel","aria-describedby","div","id","map","child","displayName"],"mappings":"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"}
+{"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 TRANSITION_CLASS_NAME = \"--transition\";\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>(null);\n  const hasDialogSupport = supportsDialog();\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 transitions\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      // `transitionend` may be called from another component but `event` may be undefined.\n      // This fixes an issue where closing `<Accordion>` inside `<Drawer>` will close both\n      if (!event) return;\n\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      // Name the callback function, so we can add and remove event listener\n      const transitionCallback = (e: Event) => {\n        // Close drawer only if the transition is on the dialog element\n        // As it can be on a child element (ie `<Button>` inside the drawer)\n        if (e.target === modalRef.current) {\n          // eslint-disable-next-line @typescript-eslint/no-use-before-define\n          doClose();\n        }\n      };\n\n      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\n        modalRef.current?.removeEventListener(\n          \"transitionend\",\n          transitionCallback,\n        );\n      };\n\n      // Delay close to allow backdrop exit transition\n      if (hasDialogSupport) {\n        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);\n        modalRef.current?.addEventListener(\"transitionend\", transitionCallback);\n      } else {\n        doClose();\n      }\n    },\n    [onClose, hasDialogSupport],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Drawer\",\n    `--${direction}`,\n    className,\n    {\n      \"--should-transition\": hasDialogSupport,\n    },\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        modalRef.current !== null\n      ) {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n        try {\n          dialogPolyfill.registerDialog(modalRef.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      if (isOpen && !modalRef.current?.open) {\n        modalRef.current?.showModal();\n        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);\n        onOpen?.();\n      } else if (!isOpen && modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose, hasDialogSupport]);\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","TRANSITION_CLASS_NAME","Drawer","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","modalRef","hasDialogSupport","current","enabled","handleClose","event","preventDefault","stopPropagation","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","error","console","open","showModal","add","dialog","onCancel","aria-describedby","div","id","map","child","displayName"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+export const DrawerContext = /*#__PURE__*/ createContext({
+    closeDrawer: ()=>{},
+    closeLabel: ""
+});
+
+//# sourceMappingURL=DrawerContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Drawer/DrawerContext.tsx"],"sourcesContent":["import { SyntheticEvent, createContext } from \"react\";\nimport { DrawerProps } from \"./types\";\n\nexport interface DrawerContextProps extends Pick<DrawerProps, \"closeLabel\"> {\n  closeDrawer: (event?: SyntheticEvent<HTMLElement, Event>) => void;\n}\n\nexport const DrawerContext = createContext<DrawerContextProps>({\n  closeDrawer: () => {},\n  closeLabel: \"\",\n});\n"],"names":["createContext","DrawerContext","closeDrawer","closeLabel"],"mappings":"AAAA,SAAyBA,aAAa,QAAQ,QAAQ;AAOtD,OAAO,MAAMC,8BAAgBD,cAAkC;IAC7DE,aAAa,KAAO;IACpBC,YAAY;AACd,GAAG"}

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

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { DrawerContext } from "./DrawerContext";
+export const useDrawer = ()=>{
+    const { closeDrawer, closeLabel } = useContext(DrawerContext);
+    return {
+        closeDrawer,
+        closeLabel
+    };
+};
+
+//# sourceMappingURL=useDrawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Drawer/useDrawer.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { DrawerContext } from \"./DrawerContext\";\n\nexport const useDrawer = () => {\n  const { closeDrawer, closeLabel } = useContext(DrawerContext);\n\n  return {\n    closeDrawer,\n    closeLabel,\n  };\n};\n"],"names":["useContext","DrawerContext","useDrawer","closeDrawer","closeLabel"],"mappings":"AAAA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,aAAa,QAAQ,kBAAkB;AAEhD,OAAO,MAAMC,YAAY;IACvB,MAAM,EAAEC,WAAW,EAAEC,UAAU,EAAE,GAAGJ,WAAWC;IAE/C,OAAO;QACLE;QACAC;IACF;AACF,EAAE"}

package/dist/esm/components/Flex/Flex.js

@@ -3,15 +3,18 @@ import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
 import { buildFlexStyles, splitProps } from "./propUtils";
 const Flex = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { elementType: Element = "div", ...otherProps } = props;
-    const classes = classNames("mobius", "mobius/Flex", props.className);
+    const { elementType: Element = "div", style, className, ...otherProps } = props;
+    const classes = classNames("mobius", "mobius/Flex", className);
     const [styleProps, restProps] = splitProps(otherProps);
     const flexStyles = buildFlexStyles(styleProps);
     return /*#__PURE__*/ _jsx(Element, {
         ref: ref,
-        style: flexStyles,
-        ...restProps,
-        className: classes
+        style: {
+            ...flexStyles,
+            ...style
+        },
+        className: classes,
+        ...restProps
     });
 });
 Flex.displayName = "Flex";

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { FlexElementType, FlexProps, FlexRef } from \"./types\";\nimport { buildFlexStyles, splitProps } from \"./propUtils\";\n\nconst Flex: ForwardedRefComponent<FlexProps, FlexElementType> = forwardRef(\n  (props: FlexProps, ref: FlexRef) => {\n    const { elementType: Element = \"div\", ...otherProps } = props;\n    const classes = classNames(\"mobius\", \"mobius/Flex\", props.className);\n\n    const [styleProps, restProps] = splitProps(otherProps);\n    const flexStyles = buildFlexStyles(styleProps);\n\n    return (\n      <Element\n        ref={ref}\n        style={flexStyles}\n        {...restProps}\n        className={classes}\n      />\n    );\n  },\n);\n\nFlex.displayName = \"Flex\";\nexport { Flex };\n"],"names":["forwardRef","classNames","buildFlexStyles","splitProps","Flex","props","ref","elementType","Element","otherProps","classes","className","styleProps","restProps","flexStyles","style","displayName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AACnC,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,eAAe,EAAEC,UAAU,QAAQ,cAAc;AAE1D,MAAMC,qBAA0DJ,WAC9D,CAACK,OAAkBC;IACjB,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAE,GAAGC,YAAY,GAAGJ;IACxD,MAAMK,UAAUT,WAAW,UAAU,eAAeI,MAAMM,SAAS;IAEnE,MAAM,CAACC,YAAYC,UAAU,GAAGV,WAAWM;IAC3C,MAAMK,aAAaZ,gBAAgBU;IAEnC,qBACE,KAACJ;QACCF,KAAKA;QACLS,OAAOD;QACN,GAAGD,SAAS;QACbF,WAAWD;;AAGjB;AAGFN,KAAKY,WAAW,GAAG;AACnB,SAASZ,IAAI,GAAG"}
+{"version":3,"sources":["../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { FlexElementType, FlexProps, FlexRef } from \"./types\";\nimport { buildFlexStyles, splitProps } from \"./propUtils\";\n\nconst Flex: ForwardedRefComponent<FlexProps, FlexElementType> = forwardRef(\n  (props: FlexProps, ref: FlexRef) => {\n    const {\n      elementType: Element = \"div\",\n      style,\n      className,\n      ...otherProps\n    } = props;\n    const classes = classNames(\"mobius\", \"mobius/Flex\", className);\n\n    const [styleProps, restProps] = splitProps(otherProps);\n    const flexStyles = buildFlexStyles(styleProps);\n\n    return (\n      <Element\n        ref={ref}\n        style={{\n          ...flexStyles,\n          ...style,\n        }}\n        className={classes}\n        {...restProps}\n      />\n    );\n  },\n);\n\nFlex.displayName = \"Flex\";\nexport { Flex };\n"],"names":["forwardRef","classNames","buildFlexStyles","splitProps","Flex","props","ref","elementType","Element","style","className","otherProps","classes","styleProps","restProps","flexStyles","displayName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AACnC,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,eAAe,EAAEC,UAAU,QAAQ,cAAc;AAE1D,MAAMC,qBAA0DJ,WAC9D,CAACK,OAAkBC;IACjB,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,KAAK,EACLC,SAAS,EACT,GAAGC,YACJ,GAAGN;IACJ,MAAMO,UAAUX,WAAW,UAAU,eAAeS;IAEpD,MAAM,CAACG,YAAYC,UAAU,GAAGX,WAAWQ;IAC3C,MAAMI,aAAab,gBAAgBW;IAEnC,qBACE,KAACL;QACCF,KAAKA;QACLG,OAAO;YACL,GAAGM,UAAU;YACb,GAAGN,KAAK;QACV;QACAC,WAAWE;QACV,GAAGE,SAAS;;AAGnB;AAGFV,KAAKY,WAAW,GAAG;AACnB,SAASZ,IAAI,GAAG"}

package/dist/esm/components/Flex/propUtils.test.js

@@ -0,0 +1,97 @@
+import { withoutUndefinedValues, buildFlexStyles, splitProps, } from "./propUtils";
+describe("withoutUndefinedValues", () => {
+    it("returns object without undefined values", () => {
+        const props = {
+            a: 1,
+            b: "Two",
+            c: [],
+            d: {},
+            e: undefined,
+            f: undefined,
+        };
+        const actual = withoutUndefinedValues(props);
+        const expected = {
+            a: 1,
+            b: "Two",
+            c: [],
+            d: {},
+        };
+        expect(actual).toStrictEqual(expected);
+    });
+});
+describe("buildFlexStyles", () => {
+    describe("given a list of props", () => {
+        it("returns a specified list of flex props", () => {
+            const props = {
+                flexDirection: "row",
+                flexWrap: "wrap",
+                flexGrow: "1",
+                flex: "1 1 0px",
+                justifyContent: "start",
+                alignItems: "stretch",
+                alignContent: "center",
+                gap: "10px",
+                rowGap: "20px",
+                columnGap: "30px",
+            };
+            const expectedProps = Object.assign(Object.assign({}, props), { display: "flex" });
+            const actual = buildFlexStyles(props);
+            expect(actual).toStrictEqual(expectedProps);
+        });
+    });
+    describe("given a list of partially defined props", () => {
+        it("returns flex props that are defined", () => {
+            const props = {
+                flexDirection: "row",
+                flexWrap: undefined,
+                flexGrow: "1",
+                flex: undefined,
+                justifyContent: "start",
+                alignItems: undefined,
+                alignContent: "center",
+                gap: undefined,
+                rowGap: "20px",
+                columnGap: undefined,
+            };
+            const expectedProps = {
+                flexDirection: "row",
+                flexGrow: "1",
+                justifyContent: "start",
+                alignContent: "center",
+                rowGap: "20px",
+                display: "flex",
+            };
+            const actual = buildFlexStyles(props);
+            expect(actual).toStrictEqual(expectedProps);
+        });
+    });
+});
+describe("splitProps", () => {
+    describe("given a list of props", () => {
+        it("returns an array with two items: 1) specified flex props; 2) all other props", () => {
+            const flexProps = {
+                flexDirection: "row",
+                flexWrap: "wrap",
+                flexGrow: "1",
+                flex: "1 1 0px",
+                justifyContent: "start",
+                alignItems: "stretch",
+                alignContent: "center",
+                gap: "10px",
+                rowGap: "20px",
+                columnGap: "30px",
+            };
+            const otherProps = {
+                a: 1,
+                b: "Two",
+                c: [],
+                d: {},
+            };
+            const props = Object.assign(Object.assign({}, flexProps), otherProps);
+            const actual = splitProps(props);
+            const expected = [flexProps, otherProps];
+            expect(actual).toStrictEqual(expected);
+        });
+    });
+});
+//# sourceMappingURL=propUtils.test.js.map

package/dist/esm/components/Flex/propUtils.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"propUtils.test.js","sourceRoot":"","sources":["../../../../src/components/Flex/propUtils.test.ts"],"names":[],"mappings":"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"}