@simplybusiness/mobius 4.3.6 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 4.4.0
+
+### Minor Changes
+
+- 9cff6ac: Add new props to `<Box>`: padding, min/max width/height to make the component more flexible when building layouts
+
 ## 4.3.6
 
 ### Patch Changes

package/dist/cjs/components/Box/Box.js

@@ -11,16 +11,34 @@ Object.defineProperty(exports, "Box", {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
+const _utils = require("../../utils");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const Box = /*#__PURE__*/ (0, _react.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 = (0, _dedupe.default)("mobius", "mobius/Box", otherProps.className);
+    const styleProps = (0, _utils.filterUndefinedProps)({
+        padding: (0, _utils.getSpacingValue)(padding),
+        paddingInline: (0, _utils.getSpacingValue)(paddingInline || paddingX),
+        paddingBlock: (0, _utils.getSpacingValue)(paddingBlock || paddingY),
+        paddingTop: (0, _utils.getSpacingValue)(paddingTop || paddingBlockStart),
+        paddingRight: (0, _utils.getSpacingValue)(paddingRight || paddingInlineEnd),
+        paddingBottom: (0, _utils.getSpacingValue)(paddingBottom || paddingBlockEnd),
+        paddingLeft: (0, _utils.getSpacingValue)(paddingLeft || paddingInlineStart),
+        minWidth,
+        minHeight,
+        maxWidth,
+        maxHeight,
+        width,
+        height,
+        ...style
+    });
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, {
         ref: ref,
+        style: styleProps,
         ...otherProps,
         className: classes
     });

package/dist/cjs/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":["Box","forwardRef","props","ref","elementType","Element","otherProps","classes","classNames","className","displayName"],"mappings":";;;;+BA6BSA;;;eAAAA;;;;uBA7BiD;+DACnC;;;;;;AAiBvB,MAAMA,oBAAuDC,IAAAA,iBAAU,EACrE,CAACC,OAAiBC;IAChB,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAE,GAAGC,YAAY,GAAGJ;IAExD,MAAMK,UAAUC,IAAAA,eAAU,EAAC,UAAU,cAAcF,WAAWG,SAAS;IAEvE,qBAAO,qBAACJ;QAAQF,KAAKA;QAAM,GAAGG,UAAU;QAAEG,WAAWF;;AACvD;AAGFP,IAAIU,WAAW,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":["Box","forwardRef","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","classNames","className","styleProps","filterUndefinedProps","getSpacingValue","displayName"],"mappings":";;;;+BAkESA;;;eAAAA;;;;uBAlEuB;+DACT;uBAG+B;;;;;;AAItD,MAAMA,oBAAuDC,IAAAA,iBAAU,EACrE,CAACC,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,UAAUC,IAAAA,eAAU,EAAC,UAAU,cAAcF,WAAWG,SAAS;IAEvE,MAAMC,aAAaC,IAAAA,2BAAoB,EAAC;QACtCzB,SAAS0B,IAAAA,sBAAe,EAAC1B;QACzBE,eAAewB,IAAAA,sBAAe,EAACxB,iBAAiBD;QAChDK,cAAcoB,IAAAA,sBAAe,EAACpB,gBAAgBD;QAC9CI,YAAYiB,IAAAA,sBAAe,EAACjB,cAAcF;QAC1CG,cAAcgB,IAAAA,sBAAe,EAAChB,gBAAgBN;QAC9CO,eAAee,IAAAA,sBAAe,EAACf,iBAAiBH;QAChDI,aAAac,IAAAA,sBAAe,EAACd,eAAeT;QAC5CU;QACAC;QACAC;QACAC;QACAC;QACAC;QACA,GAAGC,KAAK;IACV;IAEA,qBACE,qBAACpB;QACCF,KAAKA;QACLsB,OAAOK;QACN,GAAGJ,UAAU;QACdG,WAAWF;;AAGjB;AAGF3B,IAAIiC,WAAW,GAAG"}

package/dist/cjs/components/Box/types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=types.js.map

package/dist/cjs/components/Box/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Box/types.ts"],"names":[],"mappings":""}

package/dist/cjs/components/Flex/propUtils.js

@@ -14,12 +14,10 @@ _export(exports, {
     },
     splitProps: function() {
         return splitProps;
-    },
-    withoutUndefinedValues: function() {
-        return withoutUndefinedValues;
     }
 });
-const withoutUndefinedValues = (obj)=>Object.fromEntries(Object.entries(obj).filter(([_, value])=>value));
+const _utils = require("../../utils");
+const _filterUndefinedProps = require("../../utils/filterUndefinedProps");
 const buildFlexStyles = (props)=>{
     const { flexDirection, flexWrap, flexGrow, flex, justifyContent, alignItems, alignContent, gap, rowGap, columnGap } = props;
     const styleProps = {
@@ -31,11 +29,11 @@ const buildFlexStyles = (props)=>{
         justifyContent,
         alignItems,
         alignContent,
-        gap,
-        rowGap,
-        columnGap
+        gap: (0, _utils.getSpacingValue)(gap),
+        columnGap: (0, _utils.getSpacingValue)(columnGap),
+        rowGap: (0, _utils.getSpacingValue)(rowGap)
     };
-    return withoutUndefinedValues(styleProps);
+    return (0, _filterUndefinedProps.filterUndefinedProps)(styleProps);
 };
 const splitProps = (props)=>{
     const { flexDirection, flexWrap, flexGrow, flex, justifyContent, alignItems, alignContent, gap, rowGap, columnGap, ...otherProps } = props;

package/dist/cjs/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":["buildFlexStyles","splitProps","withoutUndefinedValues","obj","Object","fromEntries","entries","filter","_","value","props","flexDirection","flexWrap","flexGrow","flex","justifyContent","alignItems","alignContent","gap","rowGap","columnGap","styleProps","display","otherProps"],"mappings":";;;;;;;;;;;IAKaA,eAAe;eAAfA;;IA+BAC,UAAU;eAAVA;;IAlCAC,sBAAsB;eAAtBA;;;AAAN,MAAMA,yBAAyB,CAACC,MACrCC,OAAOC,WAAW,CAACD,OAAOE,OAAO,CAACH,KAAKI,MAAM,CAAC,CAAC,CAACC,GAAGC,MAAM,GAAKA;AAEzD,MAAMT,kBAAkB,CAACU;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,OAAOlB,uBAAuBmB;AAChC;AAEO,MAAMpB,aAAa,CACxBS;IAEA,MAAM,EACJC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,UAAU,EACVC,YAAY,EACZC,GAAG,EACHC,MAAM,EACNC,SAAS,EACT,GAAGG,YACJ,GAAGb;IAEJ,OAAO;QACL;YACEC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;QACAG;KACD;AACH"}
+{"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":["buildFlexStyles","splitProps","props","flexDirection","flexWrap","flexGrow","flex","justifyContent","alignItems","alignContent","gap","rowGap","columnGap","styleProps","display","getSpacingValue","filterUndefinedProps","otherProps"],"mappings":";;;;;;;;;;;IAIaA,eAAe;eAAfA;;IA+BAC,UAAU;eAAVA;;;uBAnCmB;sCACK;AAG9B,MAAMD,kBAAkB,CAACE;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,KAAKK,IAAAA,sBAAe,EAACL;QACrBE,WAAWG,IAAAA,sBAAe,EAACH;QAC3BD,QAAQI,IAAAA,sBAAe,EAACJ;IAC1B;IAEA,OAAOK,IAAAA,0CAAoB,EAACH;AAC9B;AAEO,MAAMZ,aAAa,CACxBC;IAEA,MAAM,EACJC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,UAAU,EACVC,YAAY,EACZC,GAAG,EACHC,MAAM,EACNC,SAAS,EACT,GAAGK,YACJ,GAAGf;IAEJ,OAAO;QACL;YACEC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;QACAK;KACD;AACH"}

package/dist/cjs/components/Grid/Grid.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "Grid", {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
-const _propUtils = require("../Flex/propUtils");
+const _utils = require("../../utils");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -20,13 +20,13 @@ function _interop_require_default(obj) {
 const Grid = /*#__PURE__*/ (0, _react.forwardRef)((props, _ref)=>{
     const { columns = 12, gap, columnGap, rowGap, alignContent, alignItems, justifyContent, justifyItems, className, ...rest } = props;
     const classes = (0, _dedupe.default)("mobius", "mobius/Grid", className);
-    const styles = (0, _propUtils.withoutUndefinedValues)({
+    const styles = (0, _utils.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: (0, _utils.getSpacingValue)(gap),
+        columnGap: (0, _utils.getSpacingValue)(columnGap),
+        rowGap: (0, _utils.getSpacingValue)(rowGap),
         alignContent,
         alignItems,
         justifyContent,

package/dist/cjs/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":["Grid","forwardRef","props","_ref","columns","gap","columnGap","rowGap","alignContent","alignItems","justifyContent","justifyItems","className","rest","classes","classNames","styles","withoutUndefinedValues","boxSizing","display","gridTemplateColumns","undefined","div","style","displayName"],"mappings":";;;;+BAmFSA;;;eAAAA;;;;uBA7EF;+DACgB;2BAGgB;;;;;;AAuCvC,MAAMA,qBAA0DC,IAAAA,iBAAU,EACxE,CAACC,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,UAAUC,IAAAA,eAAU,EAAC,UAAU,eAAeH;IAEpD,MAAMI,SAAwBC,IAAAA,iCAAsB,EAAC;QACnDC,WAAW;QACXC,SAAS;QACTC,qBAAqB,CAAC,OAAO,EAAEhB,QAAQ,MAAM,CAAC;QAC9CC,KAAKA,MAAM,CAAC,MAAM,EAAEA,IAAI,CAAC,CAAC,GAAGgB;QAC7Bf,WAAWA,YAAY,CAAC,MAAM,EAAEA,UAAU,CAAC,CAAC,GAAGe;QAC/Cd,QAAQA,SAAS,CAAC,MAAM,EAAEA,OAAO,CAAC,CAAC,GAAGc;QACtCb;QACAC;QACAC;QACAC;IACF;IAEA,qBAAO,qBAACW;QAAIC,OAAOP;QAAQJ,WAAWE;QAAU,GAAGD,IAAI;;AACzD;AAGFb,KAAKwB,WAAW,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":["Grid","forwardRef","props","_ref","columns","gap","columnGap","rowGap","alignContent","alignItems","justifyContent","justifyItems","className","rest","classes","classNames","styles","filterUndefinedProps","boxSizing","display","gridTemplateColumns","getSpacingValue","div","style","displayName"],"mappings":";;;;+BAoFSA;;;eAAAA;;;;uBA9EF;+DACgB;uBAG+B;;;;;;AAwCtD,MAAMA,qBAA0DC,IAAAA,iBAAU,EACxE,CAACC,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,UAAUC,IAAAA,eAAU,EAAC,UAAU,eAAeH;IAEpD,MAAMI,SAAwBC,IAAAA,2BAAoB,EAAC;QACjDC,WAAW;QACXC,SAAS;QACTC,qBAAqB,CAAC,OAAO,EAAEhB,QAAQ,MAAM,CAAC;QAC9CC,KAAKgB,IAAAA,sBAAe,EAAChB;QACrBC,WAAWe,IAAAA,sBAAe,EAACf;QAC3BC,QAAQc,IAAAA,sBAAe,EAACd;QACxBC;QACAC;QACAC;QACAC;IACF;IAEA,qBAAO,qBAACW;QAAIC,OAAOP;QAAQJ,WAAWE;QAAU,GAAGD,IAAI;;AACzD;AAGFb,KAAKwB,WAAW,GAAG"}