@elliemae/ds-grid 2.2.0-alpha.4 → 3.0.0-next.2

package/cjs/utils/styles.js

@@ -1,171 +1,129 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var styles_exports = {};
-__export(styles_exports, {
-  manageCols: () => manageCols,
-  manageRows: () => manageRows,
-  manageSpan: () => manageSpan
-});
-var React = __toESM(require("react"));
-var import_ds_system = require("@elliemae/ds-system");
-const manageSpan = import_ds_system.css`
-  ${({ isSpanParent, span, theme }) => {
-  if (!isSpanParent)
-    return "";
-  if (typeof span === "object") {
-    let data = "";
-    Object.keys(theme.media).forEach((key) => {
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var dsSystem = require('@elliemae/ds-system');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+
+var _templateObject, _templateObject2, _templateObject3;
+const manageSpan = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  ", "\n"])), _ref => {
+  let {
+    isSpanParent,
+    span,
+    theme
+  } = _ref;
+  if (!isSpanParent) return '';
+
+  if (typeof span === 'object') {
+    let data = '';
+    Object.keys(theme.media).forEach(key => {
       if (span[key] && theme.breakpoints[key]) {
-        if (key === "small") {
-          data += `
-          -ms-grid-column: auto / span ${span[key]};
-          grid-column: auto / span ${span[key]};
-          `;
+        if (key === 'small') {
+          data += "\n          -ms-grid-column: auto / span ".concat(span[key], ";\n          grid-column: auto / span ").concat(span[key], ";\n          ");
         } else {
-          data += `@media (min-width: ${theme.breakpoints[key]}) {
-            -ms-grid-column: auto / span ${span[key]};
-            grid-column: auto / span ${span[key]};
-          }`;
+          data += "@media (min-width: ".concat(theme.breakpoints[key], ") {\n            -ms-grid-column: auto / span ").concat(span[key], ";\n            grid-column: auto / span ").concat(span[key], ";\n          }");
         }
       }
     });
     return data;
   }
-  return `
-  -ms-grid-column: auto / span ${span};
-  grid-column: auto / span ${span};`;
-}}
-`;
-const manageCols = import_ds_system.css`
-  ${({ cols, theme, isSpanParent }) => {
-  if (typeof cols === "object" && !Array.isArray(cols)) {
-    let data = "";
-    Object.keys(theme.media).forEach((key) => {
+
+  return "\n  -ms-grid-column: auto / span ".concat(span, ";\n  grid-column: auto / span ").concat(span, ";");
+});
+const manageCols = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  ", "\n"])), _ref2 => {
+  let {
+    cols,
+    theme,
+    isSpanParent
+  } = _ref2;
+
+  if (typeof cols === 'object' && !Array.isArray(cols)) {
+    let data = '';
+    Object.keys(theme.media).forEach(key => {
       if (cols[key] && Array.isArray(cols[key])) {
-        const mtg = (0, import_ds_system.mapTemplateGrid)(cols[key]).join(" ");
-        const mtgs = (0, import_ds_system.mapTemplateGrid)(cols[key]).map((c) => `minmax(0, ${c})`).join(" ");
-        if (key === "small") {
-          data += `-ms-grid-columns: ${mtg || "minmax(0px, 1fr)"};
-          grid-template-columns: ${mtg || "auto"};
-          -ms-grid-columns: ${mtgs || "minmax(0px, 1fr)"};
-          grid-template-columns: ${mtgs || "auto"};`;
+        const mtg = dsSystem.mapTemplateGrid(cols[key]).join(' ');
+        const mtgs = dsSystem.mapTemplateGrid(cols[key]).map(c => "minmax(0, ".concat(c, ")")).join(' ');
+
+        if (key === 'small') {
+          data += "-ms-grid-columns: ".concat(mtg || 'minmax(0px, 1fr)', ";\n          grid-template-columns: ").concat(mtg || 'auto', ";\n          -ms-grid-columns: ").concat(mtgs || 'minmax(0px, 1fr)', ";\n          grid-template-columns: ").concat(mtgs || 'auto', ";");
         } else {
-          data += `@media (min-width: ${theme.breakpoints[key]}) {
-              -ms-grid-columns: ${mtg || "minmax(0px, 1fr)"};
-              grid-template-columns: ${mtg || "auto"};
-              -ms-grid-columns: ${mtgs || "minmax(0px, 1fr)"};
-              grid-template-columns: ${mtgs || "auto"};
-            }`;
+          data += "@media (min-width: ".concat(theme.breakpoints[key], ") {\n              -ms-grid-columns: ").concat(mtg || 'minmax(0px, 1fr)', ";\n              grid-template-columns: ").concat(mtg || 'auto', ";\n              -ms-grid-columns: ").concat(mtgs || 'minmax(0px, 1fr)', ";\n              grid-template-columns: ").concat(mtgs || 'auto', ";\n            }");
         }
       } else if (isSpanParent) {
-        if (key === "small") {
-          data += `-ms-grid-columns: repeat(${cols[key]}, 1fr);
-          grid-template-columns: repeat(${cols[key]}, 1fr);`;
+        if (key === 'small') {
+          data += "-ms-grid-columns: repeat(".concat(cols[key], ", 1fr);\n          grid-template-columns: repeat(").concat(cols[key], ", 1fr);");
         } else {
-          data += `@media (min-width: ${theme.breakpoints[key]}) {
-            -ms-grid-columns: repeat(${cols[key]}, 1fr);
-            grid-template-columns: repeat(${cols[key]}, 1fr);
-          }`;
+          data += "@media (min-width: ".concat(theme.breakpoints[key], ") {\n            -ms-grid-columns: repeat(").concat(cols[key], ", 1fr);\n            grid-template-columns: repeat(").concat(cols[key], ", 1fr);\n          }");
         }
       }
     });
     return data;
   }
+
   if (Array.isArray(cols)) {
-    const mtg = (0, import_ds_system.mapTemplateGrid)(cols).join(" ");
-    const mtgs = (0, import_ds_system.mapTemplateGrid)(cols).map((c) => `minmax(0, ${c})`).join(" ");
-    return `
-    -ms-grid-columns: ${mtg || "minmax(0px, 1fr)"};
-    grid-template-columns: ${mtg || "auto"};
-    -ms-grid-columns: ${mtgs || "minmax(0px, 1fr)"};
-    grid-template-columns: ${mtgs || "auto"};
-    `;
+    const mtg = dsSystem.mapTemplateGrid(cols).join(' ');
+    const mtgs = dsSystem.mapTemplateGrid(cols).map(c => "minmax(0, ".concat(c, ")")).join(' ');
+    return "\n    -ms-grid-columns: ".concat(mtg || 'minmax(0px, 1fr)', ";\n    grid-template-columns: ").concat(mtg || 'auto', ";\n    -ms-grid-columns: ").concat(mtgs || 'minmax(0px, 1fr)', ";\n    grid-template-columns: ").concat(mtgs || 'auto', ";\n    ");
   }
+
   if (isSpanParent) {
-    return `
-    -ms-grid-columns: repeat(${cols}, 1fr);
-    grid-template-columns: repeat(${cols}, 1fr);`;
+    return "\n    -ms-grid-columns: repeat(".concat(cols, ", 1fr);\n    grid-template-columns: repeat(").concat(cols, ", 1fr);");
   }
-  return "";
-}}
-`;
-const manageRows = import_ds_system.css`
-  ${({ rows, theme, isSpanParent }) => {
-  if (typeof rows === "object" && !Array.isArray(rows)) {
-    let data = "";
-    Object.keys(theme.media).forEach((key) => {
+
+  return '';
+});
+const manageRows = dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  ", "\n"])), _ref3 => {
+  let {
+    rows,
+    theme,
+    isSpanParent
+  } = _ref3;
+
+  if (typeof rows === 'object' && !Array.isArray(rows)) {
+    let data = '';
+    Object.keys(theme.media).forEach(key => {
       if (rows[key] && Array.isArray(rows[key])) {
-        const mtg = (0, import_ds_system.mapTemplateGrid)(rows[key]).join(" ");
-        const mtgs = (0, import_ds_system.mapTemplateGrid)(rows[key]).map((c) => `minmax(0, ${c})`).join(" ");
-        if (key === "small") {
-          data += `-ms-grid-rows: ${mtg || "minmax(0px, 1fr)"};
-            grid-template-rows: ${mtg || "auto"};
-            -ms-grid-rows: ${mtgs || "minmax(0px, 1fr)"};
-            grid-template-rows: ${mtgs || "auto"};`;
+        const mtg = dsSystem.mapTemplateGrid(rows[key]).join(' ');
+        const mtgs = dsSystem.mapTemplateGrid(rows[key]).map(c => "minmax(0, ".concat(c, ")")).join(' ');
+
+        if (key === 'small') {
+          data += "-ms-grid-rows: ".concat(mtg || 'minmax(0px, 1fr)', ";\n            grid-template-rows: ").concat(mtg || 'auto', ";\n            -ms-grid-rows: ").concat(mtgs || 'minmax(0px, 1fr)', ";\n            grid-template-rows: ").concat(mtgs || 'auto', ";");
         } else {
-          data += `@media (min-width: ${theme.breakpoints[key]}) {
-                -ms-grid-rows: ${mtg || "minmax(0px, 1fr)"};
-                grid-template-rows: ${mtg || "auto"};
-                -ms-grid-rows: ${mtgs || "minmax(0px, 1fr)"};
-                grid-template-rows: ${mtgs || "auto"};
-              }`;
+          data += "@media (min-width: ".concat(theme.breakpoints[key], ") {\n                -ms-grid-rows: ").concat(mtg || 'minmax(0px, 1fr)', ";\n                grid-template-rows: ").concat(mtg || 'auto', ";\n                -ms-grid-rows: ").concat(mtgs || 'minmax(0px, 1fr)', ";\n                grid-template-rows: ").concat(mtgs || 'auto', ";\n              }");
         }
       } else if (isSpanParent) {
-        if (key === "small") {
-          data += `-ms-grid-rows: repeat(${rows[key]}, 1fr);
-            grid-template-rows: repeat(${rows[key]}, 1fr);`;
+        if (key === 'small') {
+          data += "-ms-grid-rows: repeat(".concat(rows[key], ", 1fr);\n            grid-template-rows: repeat(").concat(rows[key], ", 1fr);");
         } else {
-          data += `@media (min-width: ${theme.breakpoints[key]}) {
-              -ms-grid-rows: repeat(${rows[key]}, 1fr);
-              grid-template-rows: repeat(${rows[key]}, 1fr);
-            }`;
+          data += "@media (min-width: ".concat(theme.breakpoints[key], ") {\n              -ms-grid-rows: repeat(").concat(rows[key], ", 1fr);\n              grid-template-rows: repeat(").concat(rows[key], ", 1fr);\n            }");
         }
       }
     });
     return data;
   }
+
   if (Array.isArray(rows)) {
-    const mtg = (0, import_ds_system.mapTemplateGrid)(rows).join(" ");
-    const mtgs = (0, import_ds_system.mapTemplateGrid)(rows).map((c) => `minmax(0, ${c})`).join(" ");
-    return `
-    -ms-grid-rows: ${mtg || "minmax(0px, 1fr)"};
-    grid-template-rows: ${mtg || "auto"};
-    -ms-grid-rows: ${mtgs || "minmax(0px, 1fr)"};
-    grid-template-rows: ${mtgs || "auto"};
-    `;
+    const mtg = dsSystem.mapTemplateGrid(rows).join(' ');
+    const mtgs = dsSystem.mapTemplateGrid(rows).map(c => "minmax(0, ".concat(c, ")")).join(' ');
+    return "\n    -ms-grid-rows: ".concat(mtg || 'minmax(0px, 1fr)', ";\n    grid-template-rows: ").concat(mtg || 'auto', ";\n    -ms-grid-rows: ").concat(mtgs || 'minmax(0px, 1fr)', ";\n    grid-template-rows: ").concat(mtgs || 'auto', ";\n    ");
   }
+
   if (isSpanParent) {
-    return `
-    -ms-grid-rows: repeat(${rows}, 1fr);
-    grid-template-rows: repeat(${rows}, 1fr);`;
+    return "\n    -ms-grid-rows: repeat(".concat(rows, ", 1fr);\n    grid-template-rows: repeat(").concat(rows, ", 1fr);");
   }
-  return "";
-}}
-`;
-module.exports = __toCommonJS(styles_exports);
-//# sourceMappingURL=styles.js.map
+
+  return '';
+});
+
+exports.manageCols = manageCols;
+exports.manageRows = manageRows;
+exports.manageSpan = manageSpan;

package/esm/Grid.js

@@ -1,52 +1,80 @@
-import * as React from "react";
-import React2 from "react";
-import { describe } from "react-desc";
-import { get } from "lodash";
-import { fixSpaceGutter } from "@elliemae/ds-system";
-import { propTypes } from "./propTypes";
-import { GridItem } from "./GridItem";
-import { defaultProps } from "./defaultProps";
-const Grid = React2.forwardRef((props, ref) => {
-  const { rows, cols, alignItems, children, className, justify, gutter, wrap, width, height, ...rest } = props;
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import React from 'react';
+import { describe } from 'react-desc';
+import { get } from 'lodash';
+import { fixSpaceGutter } from '@elliemae/ds-system';
+import { propTypes } from './propTypes.js';
+import { GridItem } from './GridItem.js';
+import { defaultProps } from './defaultProps.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["rows", "cols", "alignItems", "children", "className", "justify", "gutter", "wrap", "width", "height"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    rows,
+    cols,
+    alignItems,
+    children,
+    className,
+    justify,
+    gutter,
+    wrap,
+    width,
+    height
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded);
+
   let isSpanParent = true;
-  const renderChildren = React2.Children.map(children, (child) => {
-    if (get(child, "child.type.name") === "Grid" || get(child, "type.displayName") === "Grid" || parseInt(get(child, "props.span", 0), 10) > 0) {
-      const { width: wc, height: hc, span } = child.props;
-      if (!span)
-        isSpanParent = false;
-      return React2.cloneElement(child, {
-        ...child.props,
+  const renderChildren = React.Children.map(children, child => {
+    if (get(child, 'child.type.name') === 'Grid' || get(child, 'type.displayName') === 'Grid' || parseInt(get(child, 'props.span', 0), 10) > 0) {
+      const {
+        width: wc,
+        height: hc,
+        span
+      } = child.props;
+      if (!span) isSpanParent = false;
+      return /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
         width: fixSpaceGutter(wc),
         height: fixSpaceGutter(hc)
-      });
+      }));
     }
+
     return child;
   });
-  return /* @__PURE__ */ React2.createElement(GridItem, {
-    alignItems,
-    className,
-    cols,
-    gutter,
-    isSpanParent,
-    justify,
-    rows,
-    wrap,
-    childNumber: React2.Children.count(children),
-    ref,
+  return /*#__PURE__*/jsx(GridItem, _objectSpread(_objectSpread({
+    alignItems: alignItems,
+    className: className,
+    cols: cols,
+    gutter: gutter,
+    isSpanParent: isSpanParent,
+    justify: justify,
+    rows: rows,
+    wrap: wrap,
+    childNumber: React.Children.count(children),
+    ref: ref,
     w: width,
-    h: height,
-    ...rest
-  }, renderChildren);
-});
-Grid.displayName = "Grid";
+    h: height
+  }, rest), {}, {
+    children: renderChildren
+  }));
+}); // Since this component is using ForwardRef, we must provide a displayName to avoid 'undefined' name in propsTable.
+
+Grid.displayName = 'Grid'; // We should use props helpers to merge default props in the future, right now it causes many issues within Dimsum
+
 Grid.defaultProps = defaultProps;
-Grid.propTypes = propTypes;
 const DSGridWithSchema = describe(Grid);
 DSGridWithSchema.propTypes = propTypes;
-var Grid_default = Grid;
-export {
-  DSGridWithSchema,
-  Grid,
-  Grid_default as default
-};
-//# sourceMappingURL=Grid.js.map
+
+export { DSGridWithSchema, Grid as default };

package/esm/GridItem.js

@@ -1,24 +1,21 @@
-import * as React from "react";
-import styled from "styled-components";
-import { space, width, height, flexboxes, grids, sizing } from "@xstyled/styled-components";
-import { mapGap } from "@elliemae/ds-system";
-import { manageCols, manageRows, manageSpan } from "./utils/styles";
-const GridItem = styled.div`
-  display: grid;
-  display: -ms-grid;
-  column-gap: ${({ gutter }) => mapGap(gutter)};
-  row-gap: ${({ gutter }) => mapGap(gutter)};
-  ${grids}
-  ${flexboxes}
-  ${sizing}
-  ${space}
-  ${height}
-  ${width}
-  ${manageCols}
-  ${manageRows}
-  ${manageSpan}
-`;
-export {
-  GridItem
-};
-//# sourceMappingURL=GridItem.js.map
+import styled from 'styled-components';
+import { grids, flexboxes, sizing, space, height, width } from '@xstyled/styled-components';
+import { mapGap } from '@elliemae/ds-system';
+import { manageCols, manageRows, manageSpan } from './utils/styles.js';
+
+/* eslint-disable max-lines */
+const GridItem = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1ch24x4-0"
+})(["display:grid;display:-ms-grid;column-gap:", ";row-gap:", ";", " ", " ", " ", " ", " ", " ", " ", " ", ""], _ref => {
+  let {
+    gutter
+  } = _ref;
+  return mapGap(gutter);
+}, _ref2 => {
+  let {
+    gutter
+  } = _ref2;
+  return mapGap(gutter);
+}, grids, flexboxes, sizing, space, height, width, manageCols, manageRows, manageSpan);
+
+export { GridItem };

package/esm/defaultProps.js

@@ -1,14 +1,11 @@
-import * as React from "react";
 const defaultProps = {
   rows: [],
   cols: [],
-  className: "",
-  justify: "flex-start",
+  className: '',
+  justify: 'flex-start',
   gutter: 0,
-  wrap: "wrap",
+  wrap: 'wrap',
   span: 1
 };
-export {
-  defaultProps
-};
-//# sourceMappingURL=defaultProps.js.map
+
+export { defaultProps };

package/esm/index.js

@@ -1,10 +1 @@
-import * as React from "react";
-import { default as default2, Grid, default as default3, default as default4, DSGridWithSchema } from "./Grid";
-export {
-  DSGridWithSchema,
-  Grid,
-  default3 as GridContainer,
-  default4 as GridItem,
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export { DSGridWithSchema, default as Grid, default as GridContainer, default as GridItem, default } from './Grid.js';

package/esm/propTypes.js

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
-import { alignItemsPlacement, justifyPlacement, wrap } from "./utils/constants";
+import { PropTypes } from 'react-desc';
+import { alignItemsPlacement, justifyPlacement, wrap } from './utils/constants.js';
+
 const rowColBreakpoints = PropTypes.shape({
   small: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
   medium: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
@@ -12,39 +12,31 @@ const spanBreakpoints = PropTypes.shape({
   large: PropTypes.number
 });
 const propTypes = {
-  rows: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-    rowColBreakpoints
-  ]).description("Row layout cells").defaultValue([]),
-  cols: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-    rowColBreakpoints
-  ]).description("Column layout cells").defaultValue([]),
-  span: PropTypes.oneOfType([PropTypes.number, spanBreakpoints]).description("Expands the grid element within columns."),
-  alignItems: PropTypes.oneOf(alignItemsPlacement).description("flex-like align items prop"),
-  children: PropTypes.node.description("Children node inside grid cell"),
-  className: PropTypes.string.description("CSS class").defaultValue(""),
-  justifyContent: PropTypes.oneOf(justifyPlacement).description("flex-like justify prop").defaultValue(justifyPlacement[0]),
-  gutter: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Space between cells prop").defaultValue(0),
-  wrap: PropTypes.oneOf(wrap).description("Wrap type").defaultValue(wrap[0]),
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid height."),
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid width."),
-  p: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid padding in all sides."),
-  m: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid margin in all sides."),
-  px: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid padding in left and right sides."),
-  mx: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid margin in left and right sides."),
-  py: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid padding in top and bottom sides."),
-  my: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid margin in top and bottom sides."),
-  ml: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid left margin."),
-  mr: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid right margin"),
-  mt: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid top margin"),
-  mb: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid bottom margin"),
-  pl: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid left padding."),
-  pr: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid right padding"),
-  pt: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid top padding"),
-  pb: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid bottom padding")
+  rows: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), rowColBreakpoints]).description('Row layout cells').defaultValue([]),
+  cols: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), rowColBreakpoints]).description('Column layout cells').defaultValue([]),
+  span: PropTypes.oneOfType([PropTypes.number, spanBreakpoints]).description('Expands the grid element within columns.'),
+  alignItems: PropTypes.oneOf(alignItemsPlacement).description('flex-like align items prop'),
+  children: PropTypes.node.description('Children node inside grid cell'),
+  className: PropTypes.string.description('CSS class').defaultValue(''),
+  justifyContent: PropTypes.oneOf(justifyPlacement).description('flex-like justify prop').defaultValue(justifyPlacement[0]),
+  gutter: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop').defaultValue(0),
+  wrap: PropTypes.oneOf(wrap).description('Wrap type').defaultValue(wrap[0]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid height.'),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid width.'),
+  p: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid padding in all sides.'),
+  m: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid margin in all sides.'),
+  px: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid padding in left and right sides.'),
+  mx: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid margin in left and right sides.'),
+  py: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid padding in top and bottom sides.'),
+  my: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid margin in top and bottom sides.'),
+  ml: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid left margin.'),
+  mr: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid right margin'),
+  mt: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid top margin'),
+  mb: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid bottom margin'),
+  pl: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid left padding.'),
+  pr: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid right padding'),
+  pt: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid top padding'),
+  pb: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid bottom padding')
 };
-export {
-  propTypes
-};
-//# sourceMappingURL=propTypes.js.map
+
+export { propTypes };

package/esm/types.js

@@ -1,2 +1 @@
-import * as React from "react";
-//# sourceMappingURL=types.js.map
+

package/esm/utils/constants.js

@@ -1,17 +1,5 @@
-import * as React from "react";
-const justifyPlacement = [
-  "flex-start",
-  "center",
-  "flex-end",
-  "space-between",
-  "space-around",
-  "space-evenly"
-];
-const alignItemsPlacement = ["flex-start", "center", "flex-end", "stretch", "baseline"];
-const wrap = ["wrap", "nowrap", "wrap-reverse"];
-export {
-  alignItemsPlacement,
-  justifyPlacement,
-  wrap
-};
-//# sourceMappingURL=constants.js.map
+const justifyPlacement = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];
+const alignItemsPlacement = ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'];
+const wrap = ['wrap', 'nowrap', 'wrap-reverse'];
+
+export { alignItemsPlacement, justifyPlacement, wrap };