@elliemae/ds-grid 2.2.1 → 2.3.0-alpha.4

package/esm/propTypes.js

@@ -1,6 +1,6 @@
-import { PropTypes } from 'react-desc';
-import { alignItemsPlacement, justifyPlacement, wrap } from './utils/constants.js';
-
+import * as React from "react";
+import { PropTypes } from "react-desc";
+import { alignItemsPlacement, justifyPlacement, wrap } from "./utils/constants";
 const rowColBreakpoints = PropTypes.shape({
   small: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
   medium: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
@@ -12,31 +12,39 @@ 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 };
+export {
+  propTypes
+};
+//# sourceMappingURL=propTypes.js.map

package/esm/propTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\nimport { alignItemsPlacement, justifyPlacement, wrap } from './utils/constants';\n\nconst rowColBreakpoints = PropTypes.shape({\n  small: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n  medium: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n  large: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n});\n\nconst spanBreakpoints = PropTypes.shape({\n  small: PropTypes.number,\n  medium: PropTypes.number,\n  large: PropTypes.number,\n});\n\nexport const propTypes = {\n  rows: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n    rowColBreakpoints,\n  ])\n    .description('Row layout cells')\n    .defaultValue([]),\n  cols: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n    rowColBreakpoints,\n  ])\n    .description('Column layout cells')\n    .defaultValue([]),\n  span: PropTypes.oneOfType([PropTypes.number, spanBreakpoints]).description(\n    'Expands the grid element within columns.',\n  ),\n  alignItems: PropTypes.oneOf(alignItemsPlacement).description('flex-like align items prop'),\n  children: PropTypes.node.description('Children node inside grid cell'),\n  className: PropTypes.string.description('CSS class').defaultValue(''),\n  justifyContent: PropTypes.oneOf(justifyPlacement)\n    .description('flex-like justify prop')\n    .defaultValue(justifyPlacement[0]),\n  gutter: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n    .description('Space between cells prop')\n    .defaultValue(0),\n  wrap: PropTypes.oneOf(wrap).description('Wrap type').defaultValue(wrap[0]),\n  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid height.'),\n  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid width.'),\n  p: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid padding in all sides.'),\n  m: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid margin in all sides.'),\n  px: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid padding in left and right sides.'),\n  mx: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid margin in left and right sides.'),\n  py: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid padding in top and bottom sides.'),\n  my: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid margin in top and bottom sides.'),\n  ml: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid left margin.'),\n  mr: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid right margin'),\n  mt: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid top margin'),\n  mb: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid bottom margin'),\n  pl: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid left padding.'),\n  pr: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid right padding'),\n  pt: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid top padding'),\n  pb: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid bottom padding'),\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA,MAAM,oBAAoB,UAAU,MAAM;AAAA,EACxC,OAAO,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,EAC1E,QAAQ,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,EAC3E,OAAO,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA;AAG5E,MAAM,kBAAkB,UAAU,MAAM;AAAA,EACtC,OAAO,UAAU;AAAA,EACjB,QAAQ,UAAU;AAAA,EAClB,OAAO,UAAU;AAAA;AAGZ,MAAM,YAAY;AAAA,EACvB,MAAM,UAAU,UAAU;AAAA,IACxB,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,IACnE;AAAA,KAEC,YAAY,oBACZ,aAAa;AAAA,EAChB,MAAM,UAAU,UAAU;AAAA,IACxB,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,IACnE;AAAA,KAEC,YAAY,uBACZ,aAAa;AAAA,EAChB,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,kBAAkB,YAC7D;AAAA,EAEF,YAAY,UAAU,MAAM,qBAAqB,YAAY;AAAA,EAC7D,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,WAAW,UAAU,OAAO,YAAY,aAAa,aAAa;AAAA,EAClE,gBAAgB,UAAU,MAAM,kBAC7B,YAAY,0BACZ,aAAa,iBAAiB;AAAA,EACjC,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SACtD,YAAY,4BACZ,aAAa;AAAA,EAChB,MAAM,UAAU,MAAM,MAAM,YAAY,aAAa,aAAa,KAAK;AAAA,EACvE,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAC9E,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAC7E,GAAG,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EACzE,GAAG,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EACzE,IAAI,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAC1E,IAAI,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAC1E,IAAI,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAC1E,IAAI,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAC1E,IAAI,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAC1E,IAAI,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAC1E,IAAI,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAC1E,IAAI,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAC1E,IAAI,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAC1E,IAAI,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAC1E,IAAI,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAC1E,IAAI,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA;",
+  "names": []
+}

package/esm/types.js

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

package/esm/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/esm/utils/constants.js

@@ -1,5 +1,17 @@
-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 };
+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

package/esm/utils/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/constants.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const justifyPlacement = [\n  'flex-start',\n  'center',\n  'flex-end',\n  'space-between',\n  'space-around',\n  'space-evenly',\n] as const;\n\nexport const alignItemsPlacement = ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'] as const;\n\nexport const wrap = ['wrap', 'nowrap', 'wrap-reverse'] as const;\n"],
+  "mappings": "AAAA;ACAO,MAAM,mBAAmB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAGK,MAAM,sBAAsB,CAAC,cAAc,UAAU,YAAY,WAAW;AAE5E,MAAM,OAAO,CAAC,QAAQ,UAAU;",
+  "names": []
+}

package/esm/utils/styles.js

@@ -1,119 +1,142 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import { css, mapTemplateGrid } from '@elliemae/ds-system';
-
-var _templateObject, _templateObject2, _templateObject3;
-const manageSpan = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), _ref => {
-  let {
-    isSpanParent,
-    span,
-    theme
-  } = _ref;
-  if (!isSpanParent) return '';
-
-  if (typeof span === 'object') {
-    let data = '';
-    Object.keys(theme.media).forEach(key => {
+import * as React from "react";
+import { css, mapTemplateGrid } from "@elliemae/ds-system";
+const manageSpan = css`
+  ${({ isSpanParent, span, theme }) => {
+  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 += "\n          -ms-grid-column: auto / span ".concat(span[key], ";\n          grid-column: auto / span ").concat(span[key], ";\n          ");
+        if (key === "small") {
+          data += `
+          -ms-grid-column: auto / span ${span[key]};
+          grid-column: auto / span ${span[key]};
+          `;
         } else {
-          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          }");
+          data += `@media (min-width: ${theme.breakpoints[key]}) {
+            -ms-grid-column: auto / span ${span[key]};
+            grid-column: auto / span ${span[key]};
+          }`;
         }
       }
     });
     return data;
   }
-
-  return "\n  -ms-grid-column: auto / span ".concat(span, ";\n  grid-column: auto / span ").concat(span, ";");
-});
-const manageCols = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), _ref2 => {
-  let {
-    cols,
-    theme,
-    isSpanParent
-  } = _ref2;
-
-  if (typeof cols === 'object' && !Array.isArray(cols)) {
-    let data = '';
-    Object.keys(theme.media).forEach(key => {
+  return `
+  -ms-grid-column: auto / span ${span};
+  grid-column: auto / span ${span};`;
+}}
+`;
+const manageCols = css`
+  ${({ cols, theme, isSpanParent }) => {
+  if (typeof cols === "object" && !Array.isArray(cols)) {
+    let data = "";
+    Object.keys(theme.media).forEach((key) => {
       if (cols[key] && Array.isArray(cols[key])) {
-        const mtg = mapTemplateGrid(cols[key]).join(' ');
-        const mtgs = 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', ";");
+        const mtg = mapTemplateGrid(cols[key]).join(" ");
+        const mtgs = 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"};`;
         } else {
-          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            }");
+          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"};
+            }`;
         }
       } else if (isSpanParent) {
-        if (key === 'small') {
-          data += "-ms-grid-columns: repeat(".concat(cols[key], ", 1fr);\n          grid-template-columns: repeat(").concat(cols[key], ", 1fr);");
+        if (key === "small") {
+          data += `-ms-grid-columns: repeat(${cols[key]}, 1fr);
+          grid-template-columns: repeat(${cols[key]}, 1fr);`;
         } else {
-          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          }");
+          data += `@media (min-width: ${theme.breakpoints[key]}) {
+            -ms-grid-columns: repeat(${cols[key]}, 1fr);
+            grid-template-columns: repeat(${cols[key]}, 1fr);
+          }`;
         }
       }
     });
     return data;
   }
-
   if (Array.isArray(cols)) {
-    const mtg = mapTemplateGrid(cols).join(' ');
-    const mtgs = 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    ");
+    const mtg = mapTemplateGrid(cols).join(" ");
+    const mtgs = 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"};
+    `;
   }
-
   if (isSpanParent) {
-    return "\n    -ms-grid-columns: repeat(".concat(cols, ", 1fr);\n    grid-template-columns: repeat(").concat(cols, ", 1fr);");
+    return `
+    -ms-grid-columns: repeat(${cols}, 1fr);
+    grid-template-columns: repeat(${cols}, 1fr);`;
   }
-
-  return '';
-});
-const manageRows = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), _ref3 => {
-  let {
-    rows,
-    theme,
-    isSpanParent
-  } = _ref3;
-
-  if (typeof rows === 'object' && !Array.isArray(rows)) {
-    let data = '';
-    Object.keys(theme.media).forEach(key => {
+  return "";
+}}
+`;
+const manageRows = css`
+  ${({ rows, theme, isSpanParent }) => {
+  if (typeof rows === "object" && !Array.isArray(rows)) {
+    let data = "";
+    Object.keys(theme.media).forEach((key) => {
       if (rows[key] && Array.isArray(rows[key])) {
-        const mtg = mapTemplateGrid(rows[key]).join(' ');
-        const mtgs = 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', ";");
+        const mtg = mapTemplateGrid(rows[key]).join(" ");
+        const mtgs = 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"};`;
         } else {
-          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              }");
+          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"};
+              }`;
         }
       } else if (isSpanParent) {
-        if (key === 'small') {
-          data += "-ms-grid-rows: repeat(".concat(rows[key], ", 1fr);\n            grid-template-rows: repeat(").concat(rows[key], ", 1fr);");
+        if (key === "small") {
+          data += `-ms-grid-rows: repeat(${rows[key]}, 1fr);
+            grid-template-rows: repeat(${rows[key]}, 1fr);`;
         } else {
-          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            }");
+          data += `@media (min-width: ${theme.breakpoints[key]}) {
+              -ms-grid-rows: repeat(${rows[key]}, 1fr);
+              grid-template-rows: repeat(${rows[key]}, 1fr);
+            }`;
         }
       }
     });
     return data;
   }
-
   if (Array.isArray(rows)) {
-    const mtg = mapTemplateGrid(rows).join(' ');
-    const mtgs = 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    ");
+    const mtg = mapTemplateGrid(rows).join(" ");
+    const mtgs = 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"};
+    `;
   }
-
   if (isSpanParent) {
-    return "\n    -ms-grid-rows: repeat(".concat(rows, ", 1fr);\n    grid-template-rows: repeat(").concat(rows, ", 1fr);");
+    return `
+    -ms-grid-rows: repeat(${rows}, 1fr);
+    grid-template-rows: repeat(${rows}, 1fr);`;
   }
-
-  return '';
-});
-
-export { manageCols, manageRows, manageSpan };
+  return "";
+}}
+`;
+export {
+  manageCols,
+  manageRows,
+  manageSpan
+};
+//# sourceMappingURL=styles.js.map

package/esm/utils/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\n\nexport const manageSpan = css`\n  ${({ isSpanParent, span, theme }) => {\n    if (!isSpanParent) return '';\n    if (typeof span === 'object') {\n      let data = '';\n      Object.keys(theme.media).forEach((key) => {\n        if (span[key] && theme.breakpoints[key]) {\n          if (key === 'small') {\n            data += `\n          -ms-grid-column: auto / span ${span[key]};\n          grid-column: auto / span ${span[key]};\n          `;\n          } else {\n            data += `@media (min-width: ${theme.breakpoints[key]}) {\n            -ms-grid-column: auto / span ${span[key]};\n            grid-column: auto / span ${span[key]};\n          }`;\n          }\n        }\n      });\n      return data;\n    }\n    return `\n  -ms-grid-column: auto / span ${span};\n  grid-column: auto / span ${span};`;\n  }}\n`;\n\nexport const manageCols = css`\n  ${({ cols, theme, isSpanParent }) => {\n    if (typeof cols === 'object' && !Array.isArray(cols)) {\n      let data = '';\n      Object.keys(theme.media).forEach((key) => {\n        if (cols[key] && Array.isArray(cols[key])) {\n          const mtg = mapTemplateGrid(cols[key]).join(' ');\n          const mtgs = mapTemplateGrid(cols[key])\n            .map((c) => `minmax(0, ${c})`)\n            .join(' ');\n          if (key === 'small') {\n            data += `-ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n          grid-template-columns: ${mtg || 'auto'};\n          -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n          grid-template-columns: ${mtgs || 'auto'};`;\n          } else {\n            data += `@media (min-width: ${theme.breakpoints[key]}) {\n              -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n              grid-template-columns: ${mtg || 'auto'};\n              -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n              grid-template-columns: ${mtgs || 'auto'};\n            }`;\n          }\n        } else if (isSpanParent) {\n          if (key === 'small') {\n            data += `-ms-grid-columns: repeat(${cols[key]}, 1fr);\n          grid-template-columns: repeat(${cols[key]}, 1fr);`;\n          } else {\n            data += `@media (min-width: ${theme.breakpoints[key]}) {\n            -ms-grid-columns: repeat(${cols[key]}, 1fr);\n            grid-template-columns: repeat(${cols[key]}, 1fr);\n          }`;\n          }\n        }\n      });\n      return data;\n    }\n    if (Array.isArray(cols)) {\n      const mtg = mapTemplateGrid(cols).join(' ');\n      const mtgs = mapTemplateGrid(cols)\n        .map((c) => `minmax(0, ${c})`)\n        .join(' ');\n      return `\n    -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};\n    grid-template-columns: ${mtg || 'auto'};\n    -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};\n    grid-template-columns: ${mtgs || 'auto'};\n    `;\n    }\n    if (isSpanParent) {\n      return `\n    -ms-grid-columns: repeat(${cols}, 1fr);\n    grid-template-columns: repeat(${cols}, 1fr);`;\n    }\n    return '';\n  }}\n`;\n\nexport const manageRows = css`\n  ${({ rows, theme, isSpanParent }) => {\n    if (typeof rows === 'object' && !Array.isArray(rows)) {\n      let data = '';\n      Object.keys(theme.media).forEach((key) => {\n        if (rows[key] && Array.isArray(rows[key])) {\n          const mtg = mapTemplateGrid(rows[key]).join(' ');\n          const mtgs = mapTemplateGrid(rows[key])\n            .map((c) => `minmax(0, ${c})`)\n            .join(' ');\n          if (key === 'small') {\n            data += `-ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n            grid-template-rows: ${mtg || 'auto'};\n            -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n            grid-template-rows: ${mtgs || 'auto'};`;\n          } else {\n            data += `@media (min-width: ${theme.breakpoints[key]}) {\n                -ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n                grid-template-rows: ${mtg || 'auto'};\n                -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n                grid-template-rows: ${mtgs || 'auto'};\n              }`;\n          }\n        } else if (isSpanParent) {\n          if (key === 'small') {\n            data += `-ms-grid-rows: repeat(${rows[key]}, 1fr);\n            grid-template-rows: repeat(${rows[key]}, 1fr);`;\n          } else {\n            data += `@media (min-width: ${theme.breakpoints[key]}) {\n              -ms-grid-rows: repeat(${rows[key]}, 1fr);\n              grid-template-rows: repeat(${rows[key]}, 1fr);\n            }`;\n          }\n        }\n      });\n      return data;\n    }\n    if (Array.isArray(rows)) {\n      const mtg = mapTemplateGrid(rows).join(' ');\n      const mtgs = mapTemplateGrid(rows)\n        .map((c) => `minmax(0, ${c})`)\n        .join(' ');\n      return `\n    -ms-grid-rows: ${mtg || 'minmax(0px, 1fr)'};\n    grid-template-rows: ${mtg || 'auto'};\n    -ms-grid-rows: ${mtgs || 'minmax(0px, 1fr)'};\n    grid-template-rows: ${mtgs || 'auto'};\n    `;\n    }\n    if (isSpanParent) {\n      return `\n    -ms-grid-rows: repeat(${rows}, 1fr);\n    grid-template-rows: repeat(${rows}, 1fr);`;\n    }\n    return '';\n  }}\n`;\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-grid",
-  "version": "2.2.1",
+  "version": "2.3.0-alpha.4",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Grid",
   "module": "./esm/index.js",
@@ -60,7 +60,7 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-system": "2.2.1",
+    "@elliemae/ds-system": "2.3.0-alpha.4",
     "@xstyled/styled-components": "~3.1.1",
     "react-desc": "~4.1.3"
   },

package/types/Grid.d.ts

@@ -8,4 +8,4 @@ declare const DSGridWithSchema: {
     toTypescript: () => import("react-desc").TypescriptSchema;
 };
 export default Grid;
-export { DSGridWithSchema };
+export { DSGridWithSchema, Grid };

package/types/index.d.ts

@@ -1,5 +1 @@
-export { default as Grid } from './Grid';
-export { default as GridContainer } from './Grid';
-export { default as GridItem } from './Grid';
-export { DSGridWithSchema } from './Grid';
-export { default } from './Grid';
+export { default, Grid, default as GridContainer, default as GridItem, DSGridWithSchema } from './Grid';