@simplybusiness/mobius 4.3.6 → 4.4.1

package/dist/cjs/utils/filterUndefinedProps.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "filterUndefinedProps", {
+    enumerable: true,
+    get: function() {
+        return filterUndefinedProps;
+    }
+});
+const filterUndefinedProps = (props)=>{
+    const filteredProps = {};
+    Object.keys(props).forEach((key)=>{
+        if (props[key] !== undefined) {
+            filteredProps[key] = props[key];
+        }
+    });
+    return filteredProps;
+};
+
+//# sourceMappingURL=filterUndefinedProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/filterUndefinedProps.ts"],"sourcesContent":["export const filterUndefinedProps = (props: Record<string, unknown>) => {\n  const filteredProps: Record<string, unknown> = {};\n  Object.keys(props).forEach(key => {\n    if (props[key] !== undefined) {\n      filteredProps[key] = props[key];\n    }\n  });\n  return filteredProps;\n};\n"],"names":["filterUndefinedProps","props","filteredProps","Object","keys","forEach","key","undefined"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,uBAAuB,CAACC;IACnC,MAAMC,gBAAyC,CAAC;IAChDC,OAAOC,IAAI,CAACH,OAAOI,OAAO,CAACC,CAAAA;QACzB,IAAIL,KAAK,CAACK,IAAI,KAAKC,WAAW;YAC5BL,aAAa,CAACI,IAAI,GAAGL,KAAK,CAACK,IAAI;QACjC;IACF;IACA,OAAOJ;AACT"}

package/dist/cjs/utils/getSpacingValue.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/getSpacingValue.ts"],"sourcesContent":["import { SpacingType } from \"../types\";\n\nexport const getSpacingValue = (\n  padding: SpacingType | 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":["getSpacingValue","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.js

@@ -4,10 +4,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 _export_star(require("./changeCSS"), exports);
 _export_star(require("./excludeControls"), exports);
+_export_star(require("./filterUndefinedProps"), exports);
+_export_star(require("./getSpacingValue"), exports);
 _export_star(require("./jestHTMLDialogPolyfill"), exports);
 _export_star(require("./mergeRefs"), exports);
 _export_star(require("./polyfill-tests"), exports);
 _export_star(require("./sizeClasses"), exports);
+_export_star(require("./sizeOptions"), exports);
 _export_star(require("./spaceDelimitedList"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(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\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA"}
+{"version":3,"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from \"./changeCSS\";\nexport * from \"./excludeControls\";\nexport * from \"./filterUndefinedProps\";\nexport * from \"./getSpacingValue\";\nexport * from \"./jestHTMLDialogPolyfill\";\nexport * from \"./mergeRefs\";\nexport * from \"./polyfill-tests\";\nexport * from \"./sizeClasses\";\nexport * from \"./sizeOptions\";\nexport * from \"./spaceDelimitedList\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA"}

package/dist/cjs/utils/sizeClasses.js

@@ -13,6 +13,7 @@ const sizeClasses = (size)=>{
         return {};
     }
     return {
+        "--is-xxs": size === "xxs",
         "--is-xs": size === "xs",
         "--is-sm": size === "sm",
         "--is-md": size === "md",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/sizeClasses.ts"],"sourcesContent":["import { SizeType } from \"../types/size\";\n\nexport const sizeClasses = (size: SizeType | undefined) => {\n  if (!size) {\n    return {};\n  }\n\n  return {\n    \"--is-xs\": size === \"xs\",\n    \"--is-sm\": size === \"sm\",\n    \"--is-md\": size === \"md\",\n    \"--is-lg\": size === \"lg\",\n    \"--is-xl\": size === \"xl\",\n    \"--is-xxl\": size === \"xxl\",\n  };\n};\n"],"names":["sizeClasses","size"],"mappings":";;;;+BAEaA;;;eAAAA;;;AAAN,MAAMA,cAAc,CAACC;IAC1B,IAAI,CAACA,MAAM;QACT,OAAO,CAAC;IACV;IAEA,OAAO;QACL,WAAWA,SAAS;QACpB,WAAWA,SAAS;QACpB,WAAWA,SAAS;QACpB,WAAWA,SAAS;QACpB,WAAWA,SAAS;QACpB,YAAYA,SAAS;IACvB;AACF"}
+{"version":3,"sources":["../../../src/utils/sizeClasses.ts"],"sourcesContent":["import { SizeType } from \"../types/size\";\n\nexport const sizeClasses = (size: SizeType | undefined) => {\n  if (!size) {\n    return {};\n  }\n\n  return {\n    \"--is-xxs\": size === \"xxs\",\n    \"--is-xs\": size === \"xs\",\n    \"--is-sm\": size === \"sm\",\n    \"--is-md\": size === \"md\",\n    \"--is-lg\": size === \"lg\",\n    \"--is-xl\": size === \"xl\",\n    \"--is-xxl\": size === \"xxl\",\n  };\n};\n"],"names":["sizeClasses","size"],"mappings":";;;;+BAEaA;;;eAAAA;;;AAAN,MAAMA,cAAc,CAACC;IAC1B,IAAI,CAACA,MAAM;QACT,OAAO,CAAC;IACV;IAEA,OAAO;QACL,YAAYA,SAAS;QACrB,WAAWA,SAAS;QACpB,WAAWA,SAAS;QACpB,WAAWA,SAAS;QACpB,WAAWA,SAAS;QACpB,WAAWA,SAAS;QACpB,YAAYA,SAAS;IACvB;AACF"}

package/dist/cjs/utils/sizeOptions.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "sizeOptions", {
+    enumerable: true,
+    get: function() {
+        return sizeOptions;
+    }
+});
+const sizeOptions = [
+    "",
+    "xxs",
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "xxl"
+];
+
+//# sourceMappingURL=sizeOptions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/sizeOptions.ts"],"sourcesContent":["import { SizeType } from \"../types\";\n\nexport const sizeOptions: Array<SizeType | \"\"> = [\n  \"\",\n  \"xxs\",\n  \"xs\",\n  \"sm\",\n  \"md\",\n  \"lg\",\n  \"xl\",\n  \"xxl\",\n];\n"],"names":["sizeOptions"],"mappings":";;;;+BAEaA;;;eAAAA;;;AAAN,MAAMA,cAAoC;IAC/C;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD"}

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

@@ -1,11 +1,29 @@
 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", ...otherProps } = props;
+    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
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type BoxElementType = HTMLDivElement;\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}\n\nexport type BoxRef = Ref<BoxElementType>;\n\nconst Box: ForwardedRefComponent<BoxProps, BoxElementType> = forwardRef(\n  (props: BoxProps, ref: BoxRef) => {\n    const { elementType: Element = \"div\", ...otherProps } = props;\n\n    const classes = classNames(\"mobius\", \"mobius/Box\", otherProps.className);\n\n    return <Element ref={ref} {...otherProps} className={classes} />;\n  },\n);\n\nBox.displayName = \"Box\";\nexport { Box };\n"],"names":["forwardRef","classNames","Box","props","ref","elementType","Element","otherProps","classes","className","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAiB3C,MAAMC,oBAAuDF,WAC3D,CAACG,OAAiBC;IAChB,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAE,GAAGC,YAAY,GAAGJ;IAExD,MAAMK,UAAUP,WAAW,UAAU,cAAcM,WAAWE,SAAS;IAEvE,qBAAO,KAACH;QAAQF,KAAKA;QAAM,GAAGG,UAAU;QAAEE,WAAWD;;AACvD;AAGFN,IAAIQ,WAAW,GAAG;AAClB,SAASR,GAAG,GAAG"}
+{"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/components/Box/types.js

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

package/dist/esm/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/components/Drawer/Drawer.js

@@ -26,20 +26,26 @@ const Drawer = /*#__PURE__*/ forwardRef((props, ref)=>{
             event.preventDefault();
             event.stopPropagation();
         }
+        // Name the callback function, so we can add and remove event listener
+        const transitionCallback = (e)=>{
+            // Close drawer only if the transition is on the dialog element
+            // As it can be on a child element (ie `<Button>` inside the drawer)
+            if (e.target === modalRef.current) {
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                doClose();
+            }
+        };
         const doClose = ()=>{
-            var _modalRef_current;
+            var _modalRef_current, _modalRef_current1;
             (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.close();
             onClose === null || onClose === void 0 ? void 0 : onClose();
+            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.removeEventListener("transitionend", transitionCallback);
         };
         // Delay close to allow backdrop exit transition
         if (hasDialogSupport) {
             var _modalRef_current, _modalRef_current1;
             (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.classList.remove(TRANSITION_CLASS_NAME);
-            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.addEventListener("transitionend", ()=>{
-                doClose();
-            }, {
-                once: true
-            });
+            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.addEventListener("transitionend", transitionCallback);
         } else {
             doClose();
         }

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      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\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(\n          \"transitionend\",\n          () => {\n            doClose();\n          },\n          { once: true },\n        );\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","doClose","close","classList","remove","addEventListener","once","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      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/Flex/propUtils.js

@@ -1,4 +1,5 @@
-export const withoutUndefinedValues = (obj)=>Object.fromEntries(Object.entries(obj).filter(([_, value])=>value));
+import { getSpacingValue } from "../../utils";
+import { filterUndefinedProps } from "../../utils/filterUndefinedProps";
 export const buildFlexStyles = (props)=>{
     const { flexDirection, flexWrap, flexGrow, flex, justifyContent, alignItems, alignContent, gap, rowGap, columnGap } = props;
     const styleProps = {
@@ -10,11 +11,11 @@ export const buildFlexStyles = (props)=>{
         justifyContent,
         alignItems,
         alignContent,
-        gap,
-        rowGap,
-        columnGap
+        gap: getSpacingValue(gap),
+        columnGap: getSpacingValue(columnGap),
+        rowGap: getSpacingValue(rowGap)
     };
-    return withoutUndefinedValues(styleProps);
+    return filterUndefinedProps(styleProps);
 };
 export const splitProps = (props)=>{
     const { flexDirection, flexWrap, flexGrow, flex, justifyContent, alignItems, alignContent, gap, rowGap, columnGap, ...otherProps } = props;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Flex/propUtils.ts"],"sourcesContent":["import { FlexNonStyleProps, FlexProps, FlexStyleProps } from \"./types\";\n\nexport const withoutUndefinedValues = (obj: Record<string, unknown>) =>\n  Object.fromEntries(Object.entries(obj).filter(([_, value]) => value));\n\nexport const buildFlexStyles = (props: FlexStyleProps) => {\n  const {\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap,\n    rowGap,\n    columnGap,\n  } = props;\n\n  const styleProps = {\n    display: \"flex\",\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap,\n    rowGap,\n    columnGap,\n  };\n\n  return withoutUndefinedValues(styleProps);\n};\n\nexport const splitProps = (\n  props: FlexProps,\n): [FlexStyleProps, FlexNonStyleProps] => {\n  const {\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap,\n    rowGap,\n    columnGap,\n    ...otherProps\n  } = props;\n\n  return [\n    {\n      flexDirection,\n      flexWrap,\n      flexGrow,\n      flex,\n      justifyContent,\n      alignItems,\n      alignContent,\n      gap,\n      rowGap,\n      columnGap,\n    },\n    otherProps,\n  ];\n};\n"],"names":["withoutUndefinedValues","obj","Object","fromEntries","entries","filter","_","value","buildFlexStyles","props","flexDirection","flexWrap","flexGrow","flex","justifyContent","alignItems","alignContent","gap","rowGap","columnGap","styleProps","display","splitProps","otherProps"],"mappings":"AAEA,OAAO,MAAMA,yBAAyB,CAACC,MACrCC,OAAOC,WAAW,CAACD,OAAOE,OAAO,CAACH,KAAKI,MAAM,CAAC,CAAC,CAACC,GAAGC,MAAM,GAAKA,QAAQ;AAExE,OAAO,MAAMC,kBAAkB,CAACC;IAC9B,MAAM,EACJC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,UAAU,EACVC,YAAY,EACZC,GAAG,EACHC,MAAM,EACNC,SAAS,EACV,GAAGV;IAEJ,MAAMW,aAAa;QACjBC,SAAS;QACTX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAOnB,uBAAuBoB;AAChC,EAAE;AAEF,OAAO,MAAME,aAAa,CACxBb;IAEA,MAAM,EACJC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,UAAU,EACVC,YAAY,EACZC,GAAG,EACHC,MAAM,EACNC,SAAS,EACT,GAAGI,YACJ,GAAGd;IAEJ,OAAO;QACL;YACEC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;QACAI;KACD;AACH,EAAE"}
+{"version":3,"sources":["../../../../src/components/Flex/propUtils.ts"],"sourcesContent":["import { getSpacingValue } from \"../../utils\";\nimport { filterUndefinedProps } from \"../../utils/filterUndefinedProps\";\nimport { FlexNonStyleProps, FlexProps, FlexStyleProps } from \"./types\";\n\nexport const buildFlexStyles = (props: FlexStyleProps) => {\n  const {\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap,\n    rowGap,\n    columnGap,\n  } = props;\n\n  const styleProps = {\n    display: \"flex\",\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap: getSpacingValue(gap),\n    columnGap: getSpacingValue(columnGap),\n    rowGap: getSpacingValue(rowGap),\n  };\n\n  return filterUndefinedProps(styleProps);\n};\n\nexport const splitProps = (\n  props: FlexProps,\n): [FlexStyleProps, FlexNonStyleProps] => {\n  const {\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap,\n    rowGap,\n    columnGap,\n    ...otherProps\n  } = props;\n\n  return [\n    {\n      flexDirection,\n      flexWrap,\n      flexGrow,\n      flex,\n      justifyContent,\n      alignItems,\n      alignContent,\n      gap,\n      rowGap,\n      columnGap,\n    },\n    otherProps,\n  ];\n};\n"],"names":["getSpacingValue","filterUndefinedProps","buildFlexStyles","props","flexDirection","flexWrap","flexGrow","flex","justifyContent","alignItems","alignContent","gap","rowGap","columnGap","styleProps","display","splitProps","otherProps"],"mappings":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,SAASC,oBAAoB,QAAQ,mCAAmC;AAGxE,OAAO,MAAMC,kBAAkB,CAACC;IAC9B,MAAM,EACJC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,UAAU,EACVC,YAAY,EACZC,GAAG,EACHC,MAAM,EACNC,SAAS,EACV,GAAGV;IAEJ,MAAMW,aAAa;QACjBC,SAAS;QACTX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC,KAAKX,gBAAgBW;QACrBE,WAAWb,gBAAgBa;QAC3BD,QAAQZ,gBAAgBY;IAC1B;IAEA,OAAOX,qBAAqBa;AAC9B,EAAE;AAEF,OAAO,MAAME,aAAa,CACxBb;IAEA,MAAM,EACJC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,UAAU,EACVC,YAAY,EACZC,GAAG,EACHC,MAAM,EACNC,SAAS,EACT,GAAGI,YACJ,GAAGd;IAEJ,OAAO;QACL;YACEC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;QACAI;KACD;AACH,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Flex/types.ts"],"sourcesContent":["import { Ref, ReactNode, RefAttributes, AriaRole } from \"react\";\nimport type { Property } from \"csstype\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport type FlexElementType = HTMLDivElement;\n\nexport interface FlexStyleProps {\n  elementType?: string | React.ElementType;\n  flexDirection?: Property.FlexDirection;\n  flexWrap?: Property.FlexWrap;\n  flexGrow?: Property.FlexGrow;\n  flex?: Property.Flex;\n  /** Aligns grid items along the block (column) axis  */\n  alignItems?: Property.AlignItems;\n  /** Aligns the grid along the inline (row) axis */\n  alignContent?: Property.AlignContent;\n  /** Aligns the grid along the inline (row) axis */\n  justifyContent?: Property.JustifyContent;\n  /** How big a gap between the columns and rows */\n  gap?: Property.Gap;\n  /** How big a gap between the rows */\n  rowGap?: Property.RowGap;\n  /** How big a gap between the columns */\n  columnGap?: Property.ColumnGap;\n  style?: React.CSSProperties;\n  role?: AriaRole;\n}\n\nexport interface FlexNonStyleProps\n  extends DOMProps,\n    RefAttributes<FlexElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport interface FlexProps extends FlexStyleProps, FlexNonStyleProps {}\n\nexport type FlexRef = Ref<FlexElementType>;\n"],"names":[],"mappings":"AAsCA,WAA2C"}
+{"version":3,"sources":["../../../../src/components/Flex/types.ts"],"sourcesContent":["import { Ref, ReactNode, RefAttributes, AriaRole } from \"react\";\nimport type { Property } from \"csstype\";\nimport { DOMProps } from \"../../types/dom\";\nimport { SpacingType } from \"../../types\";\n\nexport type FlexElementType = HTMLDivElement;\n\nexport interface FlexStyleProps {\n  elementType?: string | React.ElementType;\n  flexDirection?: Property.FlexDirection;\n  flexWrap?: Property.FlexWrap;\n  flexGrow?: Property.FlexGrow;\n  flex?: Property.Flex;\n  /** Aligns grid items along the block (column) axis  */\n  alignItems?: Property.AlignItems;\n  /** Aligns the grid along the inline (row) axis */\n  alignContent?: Property.AlignContent;\n  /** Aligns the grid along the inline (row) axis */\n  justifyContent?: Property.JustifyContent;\n  /** How big a gap between the columns and rows */\n  gap?: SpacingType;\n  /** How big a gap between the rows */\n  rowGap?: SpacingType;\n  /** How big a gap between the columns */\n  columnGap?: SpacingType;\n  style?: React.CSSProperties;\n  role?: AriaRole;\n}\n\nexport interface FlexNonStyleProps\n  extends DOMProps,\n    RefAttributes<FlexElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport interface FlexProps extends FlexStyleProps, FlexNonStyleProps {}\n\nexport type FlexRef = Ref<FlexElementType>;\n"],"names":[],"mappings":"AAuCA,WAA2C"}

package/dist/esm/components/Grid/Grid.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
-import { withoutUndefinedValues } from "../Flex/propUtils";
+import { filterUndefinedProps, getSpacingValue } from "../../utils";
 const Grid = /*#__PURE__*/ forwardRef((props, _ref)=>{
     const { columns = 12, gap, columnGap, rowGap, alignContent, alignItems, justifyContent, justifyItems, className, ...rest } = props;
     const classes = classNames("mobius", "mobius/Grid", className);
-    const styles = withoutUndefinedValues({
+    const styles = filterUndefinedProps({
         boxSizing: "border-box",
         display: "grid",
         gridTemplateColumns: `repeat(${columns}, 1fr)`,
-        gap: gap ? `var(--${gap})` : undefined,
-        columnGap: columnGap ? `var(--${columnGap})` : undefined,
-        rowGap: rowGap ? `var(--${rowGap})` : undefined,
+        gap: getSpacingValue(gap),
+        columnGap: getSpacingValue(columnGap),
+        rowGap: getSpacingValue(rowGap),
         alignContent,
         alignItems,
         justifyContent,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import {\n  Ref,\n  forwardRef,\n  ReactNode,\n  RefAttributes,\n  CSSProperties,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { withoutUndefinedValues } from \"../Flex/propUtils\";\n\nexport type GridElementType = HTMLDivElement;\n\nexport interface GridProps extends RefAttributes<GridElementType>, DOMProps {\n  children?: ReactNode;\n  /** The number of columns */\n  columns?: number;\n  /** How big a gap between the columns and rows */\n  gap?: string;\n  /** How big a gap between the columns */\n  columnGap?: string;\n  /** How big a gap between the rows */\n  rowGap?: string;\n  /** Aligns the grid along the block (column) axis */\n  alignContent?:\n    | \"center\"\n    | \"space-around\"\n    | \"space-between\"\n    | \"space-evenly\"\n    | \"stretch\";\n  /** Aligns the grid along the inline (row) axis */\n  justifyContent?:\n    | \"center\"\n    | \"start\"\n    | \"end\"\n    | \"space-around\"\n    | \"space-between\"\n    | \"space-evenly\";\n  /** Aligns grid items along the block (column) axis  */\n  alignItems?: \"center\" | \"start\" | \"end\" | \"stretch\" | \"baseline\";\n  /** Aligns grid items along the inline (row) axis  */\n  justifyItems?: \"start\" | \"end\" | \"center\" | \"stretch\";\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport type GridRef = Ref<GridElementType>;\n\nconst Grid: ForwardedRefComponent<GridProps, GridElementType> = forwardRef(\n  (props: GridProps, _ref: GridRef) => {\n    const {\n      columns = 12,\n      gap,\n      columnGap,\n      rowGap,\n      alignContent,\n      alignItems,\n      justifyContent,\n      justifyItems,\n      className,\n      ...rest\n    } = props;\n    const classes = classNames(\"mobius\", \"mobius/Grid\", className);\n\n    const styles: CSSProperties = withoutUndefinedValues({\n      boxSizing: \"border-box\",\n      display: \"grid\",\n      gridTemplateColumns: `repeat(${columns}, 1fr)`,\n      gap: gap ? `var(--${gap})` : undefined,\n      columnGap: columnGap ? `var(--${columnGap})` : undefined,\n      rowGap: rowGap ? `var(--${rowGap})` : undefined,\n      alignContent,\n      alignItems,\n      justifyContent,\n      justifyItems,\n    });\n\n    return <div style={styles} className={classes} {...rest} />;\n  },\n);\n\nGrid.displayName = \"Grid\";\nexport { Grid };\n"],"names":["forwardRef","classNames","withoutUndefinedValues","Grid","props","_ref","columns","gap","columnGap","rowGap","alignContent","alignItems","justifyContent","justifyItems","className","rest","classes","styles","boxSizing","display","gridTemplateColumns","undefined","div","style","displayName"],"mappings":";AAAA,SAEEA,UAAU,QAIL,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,sBAAsB,QAAQ,oBAAoB;AAuC3D,MAAMC,qBAA0DH,WAC9D,CAACI,OAAkBC;IACjB,MAAM,EACJC,UAAU,EAAE,EACZC,GAAG,EACHC,SAAS,EACTC,MAAM,EACNC,YAAY,EACZC,UAAU,EACVC,cAAc,EACdC,YAAY,EACZC,SAAS,EACT,GAAGC,MACJ,GAAGX;IACJ,MAAMY,UAAUf,WAAW,UAAU,eAAea;IAEpD,MAAMG,SAAwBf,uBAAuB;QACnDgB,WAAW;QACXC,SAAS;QACTC,qBAAqB,CAAC,OAAO,EAAEd,QAAQ,MAAM,CAAC;QAC9CC,KAAKA,MAAM,CAAC,MAAM,EAAEA,IAAI,CAAC,CAAC,GAAGc;QAC7Bb,WAAWA,YAAY,CAAC,MAAM,EAAEA,UAAU,CAAC,CAAC,GAAGa;QAC/CZ,QAAQA,SAAS,CAAC,MAAM,EAAEA,OAAO,CAAC,CAAC,GAAGY;QACtCX;QACAC;QACAC;QACAC;IACF;IAEA,qBAAO,KAACS;QAAIC,OAAON;QAAQH,WAAWE;QAAU,GAAGD,IAAI;;AACzD;AAGFZ,KAAKqB,WAAW,GAAG;AACnB,SAASrB,IAAI,GAAG"}
+{"version":3,"sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import {\n  Ref,\n  forwardRef,\n  ReactNode,\n  RefAttributes,\n  CSSProperties,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { filterUndefinedProps, getSpacingValue } from \"../../utils\";\nimport { SpacingType } from \"../../types\";\n\nexport type GridElementType = HTMLDivElement;\n\nexport interface GridProps extends RefAttributes<GridElementType>, DOMProps {\n  children?: ReactNode;\n  /** The number of columns */\n  columns?: number;\n  /** How big a gap between the columns and rows */\n  gap?: SpacingType;\n  /** How big a gap between the columns */\n  columnGap?: SpacingType;\n  /** How big a gap between the rows */\n  rowGap?: SpacingType;\n  /** Aligns the grid along the block (column) axis */\n  alignContent?:\n    | \"center\"\n    | \"space-around\"\n    | \"space-between\"\n    | \"space-evenly\"\n    | \"stretch\";\n  /** Aligns the grid along the inline (row) axis */\n  justifyContent?:\n    | \"center\"\n    | \"start\"\n    | \"end\"\n    | \"space-around\"\n    | \"space-between\"\n    | \"space-evenly\";\n  /** Aligns grid items along the block (column) axis  */\n  alignItems?: \"center\" | \"start\" | \"end\" | \"stretch\" | \"baseline\";\n  /** Aligns grid items along the inline (row) axis  */\n  justifyItems?: \"start\" | \"end\" | \"center\" | \"stretch\";\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport type GridRef = Ref<GridElementType>;\n\nconst Grid: ForwardedRefComponent<GridProps, GridElementType> = forwardRef(\n  (props: GridProps, _ref: GridRef) => {\n    const {\n      columns = 12,\n      gap,\n      columnGap,\n      rowGap,\n      alignContent,\n      alignItems,\n      justifyContent,\n      justifyItems,\n      className,\n      ...rest\n    } = props;\n    const classes = classNames(\"mobius\", \"mobius/Grid\", className);\n\n    const styles: CSSProperties = filterUndefinedProps({\n      boxSizing: \"border-box\",\n      display: \"grid\",\n      gridTemplateColumns: `repeat(${columns}, 1fr)`,\n      gap: getSpacingValue(gap),\n      columnGap: getSpacingValue(columnGap),\n      rowGap: getSpacingValue(rowGap),\n      alignContent,\n      alignItems,\n      justifyContent,\n      justifyItems,\n    });\n\n    return <div style={styles} className={classes} {...rest} />;\n  },\n);\n\nGrid.displayName = \"Grid\";\nexport { Grid };\n"],"names":["forwardRef","classNames","filterUndefinedProps","getSpacingValue","Grid","props","_ref","columns","gap","columnGap","rowGap","alignContent","alignItems","justifyContent","justifyItems","className","rest","classes","styles","boxSizing","display","gridTemplateColumns","div","style","displayName"],"mappings":";AAAA,SAEEA,UAAU,QAIL,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,oBAAoB,EAAEC,eAAe,QAAQ,cAAc;AAwCpE,MAAMC,qBAA0DJ,WAC9D,CAACK,OAAkBC;IACjB,MAAM,EACJC,UAAU,EAAE,EACZC,GAAG,EACHC,SAAS,EACTC,MAAM,EACNC,YAAY,EACZC,UAAU,EACVC,cAAc,EACdC,YAAY,EACZC,SAAS,EACT,GAAGC,MACJ,GAAGX;IACJ,MAAMY,UAAUhB,WAAW,UAAU,eAAec;IAEpD,MAAMG,SAAwBhB,qBAAqB;QACjDiB,WAAW;QACXC,SAAS;QACTC,qBAAqB,CAAC,OAAO,EAAEd,QAAQ,MAAM,CAAC;QAC9CC,KAAKL,gBAAgBK;QACrBC,WAAWN,gBAAgBM;QAC3BC,QAAQP,gBAAgBO;QACxBC;QACAC;QACAC;QACAC;IACF;IAEA,qBAAO,KAACQ;QAAIC,OAAOL;QAAQH,WAAWE;QAAU,GAAGD,IAAI;;AACzD;AAGFZ,KAAKoB,WAAW,GAAG;AACnB,SAASpB,IAAI,GAAG"}

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

@@ -34,20 +34,26 @@ const Modal = /*#__PURE__*/ forwardRef((props, ref)=>{
             event.preventDefault();
             event.stopPropagation();
         }
+        // Name the callback function, so we can add and remove event listener
+        const transitionCallback = (e)=>{
+            // Close modal only if the transition is on the dialog element
+            // As it can be on a child element (ie `<Button>` inside the drawer)
+            if (e.target === modalRef.current) {
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                doClose();
+            }
+        };
         const doClose = ()=>{
-            var _modalRef_current;
+            var _modalRef_current, _modalRef_current1;
             (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.close();
             onClose === null || onClose === void 0 ? void 0 : onClose();
+            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.removeEventListener("transitionend", transitionCallback);
         };
         // Delay close to allow backdrop exit transition
         if (hasDialogSupport && animation) {
             var _modalRef_current, _modalRef_current1;
             (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.classList.remove(TRANSITION_CLASS_NAME);
-            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.addEventListener("transitionend", ()=>{
-                doClose();
-            }, {
-                once: true
-            });
+            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.addEventListener("transitionend", transitionCallback);
         } else {
             doClose();
         }

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

@@ -1 +1 @@
-{"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 TRANSITION_CLASS_NAME = \"--transition\";\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>(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 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        modalRef.current?.close();\n        onClose?.();\n      };\n\n      // Delay close to allow backdrop exit transition\n      if (hasDialogSupport && animation) {\n        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);\n        modalRef.current?.addEventListener(\n          \"transitionend\",\n          () => {\n            doClose();\n          },\n          { once: true },\n        );\n      } else {\n        doClose();\n      }\n    },\n    [onClose, hasDialogSupport, animation],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      \"--no-dialog-support\": !hasDialogSupport, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": hasDialogSupport && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\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 (\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\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    >\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","TRANSITION_CLASS_NAME","Modal","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","current","console","warn","hasOpened","modalRef","hasDialogSupport","enabled","handleClose","event","preventDefault","stopPropagation","doClose","close","classList","remove","addEventListener","once","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","error","open","showModal","add","dialog","onCancel","map","child","displayName"],"mappings":"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"}
+{"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 TRANSITION_CLASS_NAME = \"--transition\";\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>(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 animations\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 modal 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 && animation) {\n        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);\n        modalRef.current?.addEventListener(\"transitionend\", transitionCallback);\n      } else {\n        doClose();\n      }\n    },\n    [onClose, hasDialogSupport, animation],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      \"--no-dialog-support\": !hasDialogSupport, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": hasDialogSupport && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\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 (\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\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    >\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","TRANSITION_CLASS_NAME","Modal","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","current","console","warn","hasOpened","modalRef","hasDialogSupport","enabled","handleClose","event","preventDefault","stopPropagation","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","error","open","showModal","add","dialog","onCancel","map","child","displayName"],"mappings":"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"}

package/dist/esm/types/size.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/types/size.ts"],"sourcesContent":["export type SizeType = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\n"],"names":[],"mappings":"AAAA,WAAgE"}
+{"version":3,"sources":["../../../src/types/size.ts"],"sourcesContent":["export type SizeType = \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\n\nexport type SpacingType = SizeType | number;\n"],"names":[],"mappings":"AAEA,WAA4C"}

package/dist/esm/utils/filterUndefinedProps.js

@@ -0,0 +1,11 @@
+export const filterUndefinedProps = (props)=>{
+    const filteredProps = {};
+    Object.keys(props).forEach((key)=>{
+        if (props[key] !== undefined) {
+            filteredProps[key] = props[key];
+        }
+    });
+    return filteredProps;
+};
+
+//# sourceMappingURL=filterUndefinedProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/filterUndefinedProps.ts"],"sourcesContent":["export const filterUndefinedProps = (props: Record<string, unknown>) => {\n  const filteredProps: Record<string, unknown> = {};\n  Object.keys(props).forEach(key => {\n    if (props[key] !== undefined) {\n      filteredProps[key] = props[key];\n    }\n  });\n  return filteredProps;\n};\n"],"names":["filterUndefinedProps","props","filteredProps","Object","keys","forEach","key","undefined"],"mappings":"AAAA,OAAO,MAAMA,uBAAuB,CAACC;IACnC,MAAMC,gBAAyC,CAAC;IAChDC,OAAOC,IAAI,CAACH,OAAOI,OAAO,CAACC,CAAAA;QACzB,IAAIL,KAAK,CAACK,IAAI,KAAKC,WAAW;YAC5BL,aAAa,CAACI,IAAI,GAAGL,KAAK,CAACK,IAAI;QACjC;IACF;IACA,OAAOJ;AACT,EAAE"}

package/dist/esm/utils/getSpacingValue.js

@@ -0,0 +1,11 @@
+export const getSpacingValue = (padding)=>{
+    if (typeof padding === "string") {
+        return `var(--size-${padding})`;
+    }
+    if (typeof padding === "number") {
+        return `${padding}px`;
+    }
+    return undefined;
+};
+
+//# sourceMappingURL=getSpacingValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/getSpacingValue.ts"],"sourcesContent":["import { SpacingType } from \"../types\";\n\nexport const getSpacingValue = (\n  padding: SpacingType | 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":["getSpacingValue","padding","undefined"],"mappings":"AAEA,OAAO,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,EAAE"}

package/dist/esm/utils/index.js

@@ -1,9 +1,12 @@
 export * from "./changeCSS";
 export * from "./excludeControls";
+export * from "./filterUndefinedProps";
+export * from "./getSpacingValue";
 export * from "./jestHTMLDialogPolyfill";
 export * from "./mergeRefs";
 export * from "./polyfill-tests";
 export * from "./sizeClasses";
+export * from "./sizeOptions";
 export * from "./spaceDelimitedList";
 
 //# 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\";\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,oBAAoB;AAClC,cAAc,2BAA2B;AACzC,cAAc,cAAc;AAC5B,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,uBAAuB"}
+{"version":3,"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from \"./changeCSS\";\nexport * from \"./excludeControls\";\nexport * from \"./filterUndefinedProps\";\nexport * from \"./getSpacingValue\";\nexport * from \"./jestHTMLDialogPolyfill\";\nexport * from \"./mergeRefs\";\nexport * from \"./polyfill-tests\";\nexport * from \"./sizeClasses\";\nexport * from \"./sizeOptions\";\nexport * from \"./spaceDelimitedList\";\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,oBAAoB;AAClC,cAAc,yBAAyB;AACvC,cAAc,oBAAoB;AAClC,cAAc,2BAA2B;AACzC,cAAc,cAAc;AAC5B,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,gBAAgB;AAC9B,cAAc,uBAAuB"}

package/dist/esm/utils/sizeClasses.js

@@ -3,6 +3,7 @@ export const sizeClasses = (size)=>{
         return {};
     }
     return {
+        "--is-xxs": size === "xxs",
         "--is-xs": size === "xs",
         "--is-sm": size === "sm",
         "--is-md": size === "md",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/sizeClasses.ts"],"sourcesContent":["import { SizeType } from \"../types/size\";\n\nexport const sizeClasses = (size: SizeType | undefined) => {\n  if (!size) {\n    return {};\n  }\n\n  return {\n    \"--is-xs\": size === \"xs\",\n    \"--is-sm\": size === \"sm\",\n    \"--is-md\": size === \"md\",\n    \"--is-lg\": size === \"lg\",\n    \"--is-xl\": size === \"xl\",\n    \"--is-xxl\": size === \"xxl\",\n  };\n};\n"],"names":["sizeClasses","size"],"mappings":"AAEA,OAAO,MAAMA,cAAc,CAACC;IAC1B,IAAI,CAACA,MAAM;QACT,OAAO,CAAC;IACV;IAEA,OAAO;QACL,WAAWA,SAAS;QACpB,WAAWA,SAAS;QACpB,WAAWA,SAAS;QACpB,WAAWA,SAAS;QACpB,WAAWA,SAAS;QACpB,YAAYA,SAAS;IACvB;AACF,EAAE"}
+{"version":3,"sources":["../../../src/utils/sizeClasses.ts"],"sourcesContent":["import { SizeType } from \"../types/size\";\n\nexport const sizeClasses = (size: SizeType | undefined) => {\n  if (!size) {\n    return {};\n  }\n\n  return {\n    \"--is-xxs\": size === \"xxs\",\n    \"--is-xs\": size === \"xs\",\n    \"--is-sm\": size === \"sm\",\n    \"--is-md\": size === \"md\",\n    \"--is-lg\": size === \"lg\",\n    \"--is-xl\": size === \"xl\",\n    \"--is-xxl\": size === \"xxl\",\n  };\n};\n"],"names":["sizeClasses","size"],"mappings":"AAEA,OAAO,MAAMA,cAAc,CAACC;IAC1B,IAAI,CAACA,MAAM;QACT,OAAO,CAAC;IACV;IAEA,OAAO;QACL,YAAYA,SAAS;QACrB,WAAWA,SAAS;QACpB,WAAWA,SAAS;QACpB,WAAWA,SAAS;QACpB,WAAWA,SAAS;QACpB,WAAWA,SAAS;QACpB,YAAYA,SAAS;IACvB;AACF,EAAE"}

package/dist/esm/utils/sizeOptions.js

@@ -0,0 +1,12 @@
+export const sizeOptions = [
+    "",
+    "xxs",
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "xxl"
+];
+
+//# sourceMappingURL=sizeOptions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/sizeOptions.ts"],"sourcesContent":["import { SizeType } from \"../types\";\n\nexport const sizeOptions: Array<SizeType | \"\"> = [\n  \"\",\n  \"xxs\",\n  \"xs\",\n  \"sm\",\n  \"md\",\n  \"lg\",\n  \"xl\",\n  \"xxl\",\n];\n"],"names":["sizeOptions"],"mappings":"AAEA,OAAO,MAAMA,cAAoC;IAC/C;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD,CAAC"}

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

@@ -1,15 +1,6 @@
-import { Ref, RefAttributes, ReactNode } from "react";
-import { DOMProps } from "../../types/dom";
+import { Ref } from "react";
 import { ForwardedRefComponent } from "../../types/components";
-export type BoxElementType = HTMLDivElement;
-export interface BoxProps extends DOMProps, RefAttributes<BoxElementType> {
-    children?: ReactNode;
-    /** Custom class name for setting specific CSS */
-    className?: string;
-    /** HTML element for the Box */
-    elementType?: "div" | "span";
-    style?: React.CSSProperties;
-}
+import { BoxElementType, BoxProps } from "./types";
 export type BoxRef = Ref<BoxElementType>;
 declare const Box: ForwardedRefComponent<BoxProps, BoxElementType>;
 export { Box };

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

@@ -0,0 +1,31 @@
+import { ReactNode, RefAttributes } from "react";
+import { DOMProps, SpacingType } from "../../types";
+export type BoxElementType = HTMLDivElement;
+export type BoxDimensionsType = string | number;
+export interface BoxProps extends DOMProps, RefAttributes<BoxElementType> {
+    children?: ReactNode;
+    /** Custom class name for setting specific CSS */
+    className?: string;
+    /** HTML element for the Box */
+    elementType?: "div" | "span";
+    style?: React.CSSProperties;
+    padding?: SpacingType;
+    paddingX?: SpacingType;
+    paddingInline?: SpacingType;
+    paddingInlineStart?: SpacingType;
+    paddingInlineEnd?: SpacingType;
+    paddingY?: SpacingType;
+    paddingBlock?: SpacingType;
+    paddingBlockStart?: SpacingType;
+    paddingBlockEnd?: SpacingType;
+    paddingTop?: SpacingType;
+    paddingRight?: SpacingType;
+    paddingBottom?: SpacingType;
+    paddingLeft?: SpacingType;
+    minWidth?: BoxDimensionsType;
+    minHeight?: BoxDimensionsType;
+    maxWidth?: BoxDimensionsType;
+    maxHeight?: BoxDimensionsType;
+    width?: BoxDimensionsType;
+    height?: BoxDimensionsType;
+}

package/dist/types/components/Flex/propUtils.d.ts

@@ -1,8 +1,3 @@
 import { FlexNonStyleProps, FlexProps, FlexStyleProps } from "./types";
-export declare const withoutUndefinedValues: (obj: Record<string, unknown>) => {
-    [k: string]: unknown;
-};
-export declare const buildFlexStyles: (props: FlexStyleProps) => {
-    [k: string]: unknown;
-};
+export declare const buildFlexStyles: (props: FlexStyleProps) => Record<string, unknown>;
 export declare const splitProps: (props: FlexProps) => [FlexStyleProps, FlexNonStyleProps];