@elliemae/ds-grid 2.3.0-next.3 → 3.0.0-alpha.0

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/Grid.js

@@ -0,0 +1,52 @@
+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;
+  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,
+        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,
+    w: width,
+    h: height,
+    ...rest
+  }, renderChildren);
+});
+Grid.displayName = "Grid";
+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

package/dist/esm/Grid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Grid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from 'react-desc';\nimport { get } from 'lodash';\nimport { fixSpaceGutter } from '@elliemae/ds-system';\nimport { propTypes } from './propTypes';\nimport { GridItem } from './GridItem';\nimport { defaultProps } from './defaultProps';\nimport type { GridPropsT } from './types';\n\nconst Grid = React.forwardRef<HTMLDivElement, GridPropsT>((props, ref) => {\n  const { rows, cols, alignItems, children, className, justify, gutter, wrap, width, height, ...rest } = props;\n\n  let isSpanParent = true;\n\n  const renderChildren = React.Children.map(children, (child: React.ReactNode) => {\n    if (\n      get(child, 'child.type.name') === 'Grid' ||\n      get(child, 'type.displayName') === 'Grid' ||\n      parseInt(get(child, 'props.span', 0), 10) > 0\n    ) {\n      const { width: wc, height: hc, span } = child.props;\n      if (!span) isSpanParent = false;\n      return React.cloneElement(child, {\n        ...child.props,\n        width: fixSpaceGutter(wc),\n        height: fixSpaceGutter(hc),\n      });\n    }\n    return child;\n  });\n\n  return (\n    <GridItem\n      alignItems={alignItems}\n      className={className}\n      cols={cols}\n      gutter={gutter}\n      isSpanParent={isSpanParent}\n      justify={justify}\n      rows={rows}\n      wrap={wrap}\n      childNumber={React.Children.count(children)}\n      ref={ref}\n      w={width}\n      h={height}\n      {...rest}\n    >\n      {renderChildren}\n    </GridItem>\n  );\n});\n\n// Since this component is using ForwardRef, we must provide a displayName to avoid 'undefined' name in propsTable.\nGrid.displayName = 'Grid';\n\n// We should use props helpers to merge default props in the future, right now it causes many issues within Dimsum\nGrid.defaultProps = defaultProps;\n\nGrid.propTypes = propTypes;\nconst DSGridWithSchema = describe(Grid);\nDSGridWithSchema.propTypes = propTypes;\n\nexport default Grid;\nexport { DSGridWithSchema, Grid };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,OAAO,OAAM,WAAuC,CAAC,OAAO,QAAQ;AACxE,QAAM,EAAE,MAAM,MAAM,YAAY,UAAU,WAAW,SAAS,QAAQ,MAAM,OAAO,WAAW,SAAS;AAEvG,MAAI,eAAe;AAEnB,QAAM,iBAAiB,OAAM,SAAS,IAAI,UAAU,CAAC,UAA2B;AAC9E,QACE,IAAI,OAAO,uBAAuB,UAClC,IAAI,OAAO,wBAAwB,UACnC,SAAS,IAAI,OAAO,cAAc,IAAI,MAAM,GAC5C;AACA,YAAM,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAS,MAAM;AAC9C,UAAI,CAAC;AAAM,uBAAe;AAC1B,aAAO,OAAM,aAAa,OAAO;AAAA,WAC5B,MAAM;AAAA,QACT,OAAO,eAAe;AAAA,QACtB,QAAQ,eAAe;AAAA;AAAA;AAG3B,WAAO;AAAA;AAGT,SACE,qCAAC,UAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,OAAM,SAAS,MAAM;AAAA,IAClC;AAAA,IACA,GAAG;AAAA,IACH,GAAG;AAAA,OACC;AAAA,KAEH;AAAA;AAMP,KAAK,cAAc;AAGnB,KAAK,eAAe;AAEpB,KAAK,YAAY;AACjB,MAAM,mBAAmB,SAAS;AAClC,iBAAiB,YAAY;AAE7B,IAAO,eAAQ;",
+  "names": []
+}

package/dist/esm/GridItem.js

@@ -0,0 +1,24 @@
+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

package/dist/esm/GridItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/GridItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport styled from 'styled-components';\nimport { space, width, height, flexboxes, grids, sizing } from '@xstyled/styled-components';\nimport { mapGap } from '@elliemae/ds-system';\nimport type { GridItemPropsT } from './types';\nimport { manageCols, manageRows, manageSpan } from './utils/styles';\n\nexport const GridItem = styled.div<GridItemPropsT>`\n  display: grid;\n  display: -ms-grid;\n  column-gap: ${({ gutter }) => mapGap(gutter)};\n  row-gap: ${({ gutter }) => mapGap(gutter)};\n  ${grids}\n  ${flexboxes}\n  ${sizing}\n  ${space}\n  ${height}\n  ${width}\n  ${manageCols}\n  ${manageRows}\n  ${manageSpan}\n`;\n"],
+  "mappings": "AAAA;ACEA;AACA;AACA;AAEA;AAEO,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA,gBAGf,CAAC,EAAE,aAAa,OAAO;AAAA,aAC1B,CAAC,EAAE,aAAa,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
+  "names": []
+}

package/dist/esm/defaultProps.js

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

package/dist/esm/defaultProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const defaultProps = {\n  rows: [],\n  cols: [],\n  className: '',\n  justify: 'flex-start' as const,\n  gutter: 0,\n  wrap: 'wrap' as const,\n  span: 1,\n};\n"],
+  "mappings": "AAAA;ACAO,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,10 @@
+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

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default, Grid, default as GridContainer, default as GridItem, DSGridWithSchema } from './Grid';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

package/dist/esm/propTypes.js

@@ -0,0 +1,50 @@
+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])),
+  large: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))
+});
+const spanBreakpoints = PropTypes.shape({
+  small: PropTypes.number,
+  medium: PropTypes.number,
+  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")
+};
+export {
+  propTypes
+};
+//# sourceMappingURL=propTypes.js.map

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

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

package/dist/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/dist/esm/utils/constants.js

@@ -0,0 +1,17 @@
+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/dist/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/dist/esm/utils/styles.js

@@ -0,0 +1,142 @@
+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 += `
+          -ms-grid-column: auto / span ${span[key]};
+          grid-column: auto / span ${span[key]};
+          `;
+        } else {
+          data += `@media (min-width: ${theme.breakpoints[key]}) {
+            -ms-grid-column: auto / span ${span[key]};
+            grid-column: auto / span ${span[key]};
+          }`;
+        }
+      }
+    });
+    return data;
+  }
+  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, ${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: ${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(${cols[key]}, 1fr);
+          grid-template-columns: repeat(${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);
+          }`;
+        }
+      }
+    });
+    return data;
+  }
+  if (Array.isArray(cols)) {
+    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 `
+    -ms-grid-columns: repeat(${cols}, 1fr);
+    grid-template-columns: repeat(${cols}, 1fr);`;
+  }
+  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, ${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: ${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(${rows[key]}, 1fr);
+            grid-template-rows: repeat(${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);
+            }`;
+        }
+      }
+    });
+    return data;
+  }
+  if (Array.isArray(rows)) {
+    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 `
+    -ms-grid-rows: repeat(${rows}, 1fr);
+    grid-template-rows: repeat(${rows}, 1fr);`;
+  }
+  return "";
+}}
+`;
+export {
+  manageCols,
+  manageRows,
+  manageSpan
+};
+//# sourceMappingURL=styles.js.map

package/dist/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/{types → dist/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/dist/types/index.d.ts

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

package/package.json

@@ -1,43 +1,46 @@
 {
   "name": "@elliemae/ds-grid",
-  "version": "2.3.0-next.3",
+  "version": "3.0.0-alpha.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Grid",
-  "module": "./esm/index.js",
-  "main": "./cjs/index.js",
-  "types": "./types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./utils/styles": {
-      "import": "./esm/utils/styles.js",
-      "require": "./cjs/utils/styles.js"
+      "import": "./dist/esm/utils/styles.js",
+      "require": "./dist/cjs/utils/styles.js"
     },
     "./utils/constants": {
-      "import": "./esm/utils/constants.js",
-      "require": "./cjs/utils/constants.js"
+      "import": "./dist/esm/utils/constants.js",
+      "require": "./dist/cjs/utils/constants.js"
     },
     "./types": {
-      "import": "./esm/types.js",
-      "require": "./cjs/types.js"
+      "import": "./dist/esm/types.js",
+      "require": "./dist/cjs/types.js"
     },
     "./propTypes": {
-      "import": "./esm/propTypes.js",
-      "require": "./cjs/propTypes.js"
+      "import": "./dist/esm/propTypes.js",
+      "require": "./dist/cjs/propTypes.js"
     },
     "./GridItem": {
-      "import": "./esm/GridItem.js",
-      "require": "./cjs/GridItem.js"
+      "import": "./dist/esm/GridItem.js",
+      "require": "./dist/cjs/GridItem.js"
     },
     "./Grid": {
-      "import": "./esm/Grid.js",
-      "require": "./cjs/Grid.js"
+      "import": "./dist/esm/Grid.js",
+      "require": "./dist/cjs/Grid.js"
     },
     "./defaultProps": {
-      "import": "./esm/defaultProps.js",
-      "require": "./cjs/defaultProps.js"
+      "import": "./dist/esm/defaultProps.js",
+      "require": "./dist/cjs/defaultProps.js"
     }
   },
   "sideEffects": [
@@ -49,23 +52,23 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "npm": ">=7",
-    "node": ">=14"
+    "pnpm": ">=6",
+    "node": ">=16"
   },
   "author": "ICE MT",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-system": "2.3.0-next.1",
-    "@xstyled/styled-components": "~3.1.1",
+    "@elliemae/ds-system": "3.0.0-alpha.0",
+    "@xstyled/styled-components": "~3.1.2",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/jest-dom": "~5.15.1",
     "@testing-library/react": "~12.1.2",
     "@testing-library/user-event": "~13.5.0",
     "styled-components": "~5.3.3",
@@ -80,7 +83,12 @@
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist",
-    "generateSubmodules": true
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   }
 }