@elliemae/ds-grid 3.16.0 → 3.16.1

package/dist/cjs/DSGridDefinitions.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/DSGridDefinitions.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/DSGridDefinitions.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export const DSGridName = 'DSGrid';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,aAAa;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,aAAa;",
   "names": []
 }

package/dist/cjs/Grid.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -33,10 +37,10 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_react_desc_prop_types = require("./react-desc-prop-types");
-var import_GridItem = require("./GridItem");
-var import_useGrid = require("./config/useGrid");
-var import_DSGridDefinitions = require("./DSGridDefinitions");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_GridItem = require("./GridItem.js");
+var import_useGrid = require("./config/useGrid.js");
+var import_DSGridDefinitions = require("./DSGridDefinitions.js");
 const Grid = import_react.default.forwardRef((props, ref) => {
   const {
     propsWithDefaults: { alignItems, cols, children, rows, gutter, justify, wrap, width, height, ...rest },

package/dist/cjs/Grid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Grid.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from './react-desc-prop-types';\nimport { DSGridPropTypes } from './react-desc-prop-types';\nimport { GridItem } from './GridItem';\nimport { useGrid } from './config/useGrid';\nimport { DSGridName } from './DSGridDefinitions';\n\nconst Grid = React.forwardRef<HTMLDivElement, DSGridT.Props>((props, ref) => {\n  const {\n    propsWithDefaults: { alignItems, cols, children, rows, gutter, justify, wrap, width, height, ...rest },\n    globalProps,\n    xstyledProps,\n    isSpanParent,\n    renderChildren,\n  } = useGrid(props);\n\n  return (\n    <GridItem\n      alignItems={alignItems}\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      {...rest}\n      {...globalProps}\n      {...xstyledProps}\n      w={width}\n      h={height}\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 = DSGridName;\n\nGrid.propTypes = DSGridPropTypes;\nconst DSGridWithSchema = describe(Grid);\nDSGridWithSchema.propTypes = DSGridPropTypes;\n\nexport default Grid;\nexport { DSGridWithSchema, Grid };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAlBJ,mBAAkB;AAClB,8BAAyB;AAEzB,mCAAgC;AAChC,sBAAyB;AACzB,qBAAwB;AACxB,+BAA2B;AAE3B,MAAM,OAAO,aAAAA,QAAM,WAA0C,CAAC,OAAO,QAAQ;AAC3E,QAAM;AAAA,IACJ,mBAAmB,EAAE,YAAY,MAAM,UAAU,MAAM,QAAQ,SAAS,MAAM,OAAO,WAAW,KAAK;AAAA,IACrG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,wBAAQ,KAAK;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,aAAAA,QAAM,SAAS,MAAM,QAAQ;AAAA,MAC1C;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEF;AAAA;AAAA,EACH;AAEJ,CAAC;AAGD,KAAK,cAAc;AAEnB,KAAK,YAAY;AACjB,MAAM,uBAAmB,kCAAS,IAAI;AACtC,iBAAiB,YAAY;AAE7B,IAAO,eAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from './react-desc-prop-types.js';\nimport { DSGridPropTypes } from './react-desc-prop-types.js';\nimport { GridItem } from './GridItem.js';\nimport { useGrid } from './config/useGrid.js';\nimport { DSGridName } from './DSGridDefinitions.js';\n\nconst Grid = React.forwardRef<HTMLDivElement, DSGridT.Props>((props, ref) => {\n  const {\n    propsWithDefaults: { alignItems, cols, children, rows, gutter, justify, wrap, width, height, ...rest },\n    globalProps,\n    xstyledProps,\n    isSpanParent,\n    renderChildren,\n  } = useGrid(props);\n\n  return (\n    <GridItem\n      alignItems={alignItems}\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      {...rest}\n      {...globalProps}\n      {...xstyledProps}\n      w={width}\n      h={height}\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 = DSGridName;\n\nGrid.propTypes = DSGridPropTypes;\nconst DSGridWithSchema = describe(Grid);\nDSGridWithSchema.propTypes = DSGridPropTypes;\n\nexport default Grid;\nexport { DSGridWithSchema, Grid };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAlBJ,mBAAkB;AAClB,8BAAyB;AAEzB,mCAAgC;AAChC,sBAAyB;AACzB,qBAAwB;AACxB,+BAA2B;AAE3B,MAAM,OAAO,aAAAA,QAAM,WAA0C,CAAC,OAAO,QAAQ;AAC3E,QAAM;AAAA,IACJ,mBAAmB,EAAE,YAAY,MAAM,UAAU,MAAM,QAAQ,SAAS,MAAM,OAAO,QAAQ,GAAG,KAAK;AAAA,IACrG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,wBAAQ,KAAK;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,aAAAA,QAAM,SAAS,MAAM,QAAQ;AAAA,MAC1C;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEF;AAAA;AAAA,EACH;AAEJ,CAAC;AAGD,KAAK,cAAc;AAEnB,KAAK,YAAY;AACjB,MAAM,uBAAmB,kCAAS,IAAI;AACtC,iBAAiB,YAAY;AAE7B,IAAO,eAAQ;",
   "names": ["React"]
 }

package/dist/cjs/GridItem.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -29,7 +33,7 @@ __export(GridItem_exports, {
 module.exports = __toCommonJS(GridItem_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_styles = require("./utils/styles");
+var import_styles = require("./utils/styles.js");
 const GridItem = import_ds_system.styled.div`
   display: grid;
   display: -ms-grid;
@@ -45,5 +49,6 @@ const GridItem = import_ds_system.styled.div`
   ${import_ds_system.boxShadows}
   ${import_ds_system.borders}
   ${import_ds_system.background}
+  ${import_ds_system.layout}
 `;
 //# sourceMappingURL=GridItem.js.map

package/dist/cjs/GridItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/GridItem.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport {\n  styled,\n  mapGap,\n  background,\n  borders,\n  sizing,\n  space,\n  boxShadows,\n  flexboxes,\n  grids,\n  type LayoutProps,\n  type SpaceProps,\n  type SizingProps,\n} from '@elliemae/ds-system';\nimport { manageCols, manageRows, manageSpan } from './utils/styles';\nimport { type DSGridT } from './react-desc-prop-types';\n\nexport const GridItem = styled.div<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\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  ${manageCols}\n  ${manageRows}\n  ${manageSpan}\n  ${boxShadows}\n  ${borders}\n  ${background}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAaO;AACP,oBAAmD;AAG5C,MAAM,WAAW,wBAAO;AAAA;AAAA;AAAA,gBAGf,CAAC,EAAE,OAAO,UAAM,yBAAO,MAAM;AAAA,aAChC,CAAC,EAAE,OAAO,UAAM,yBAAO,MAAM;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport {\n  styled,\n  mapGap,\n  background,\n  borders,\n  sizing,\n  space,\n  boxShadows,\n  flexboxes,\n  grids,\n  layout,\n  type LayoutProps,\n  type SpaceProps,\n  type SizingProps,\n} from '@elliemae/ds-system';\nimport { manageCols, manageRows, manageSpan } from './utils/styles.js';\nimport { type DSGridT } from './react-desc-prop-types.js';\n\nexport const GridItem = styled.div<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\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  ${manageCols}\n  ${manageRows}\n  ${manageSpan}\n  ${boxShadows}\n  ${borders}\n  ${background}\n  ${layout}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAcO;AACP,oBAAmD;AAG5C,MAAM,WAAW,wBAAO;AAAA;AAAA;AAAA,gBAGf,CAAC,EAAE,OAAO,UAAM,yBAAO,MAAM;AAAA,aAChC,CAAC,EAAE,OAAO,UAAM,yBAAO,MAAM;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
   "names": []
 }

package/dist/cjs/config/useGrid.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -29,8 +33,8 @@ __export(useGrid_exports, {
 module.exports = __toCommonJS(useGrid_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_react_desc_prop_types = require("../react-desc-prop-types");
-var import_useRenderChildren = require("./useRenderChildren");
+var import_react_desc_prop_types = require("../react-desc-prop-types.js");
+var import_useRenderChildren = require("./useRenderChildren.js");
 const useGrid = (props) => {
   const { children, ...propsWithoutChildren } = props;
   const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsWithoutChildren, import_react_desc_prop_types.defaultProps);

package/dist/cjs/config/useGrid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useGrid.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '../react-desc-prop-types';\nimport { DSGridPropTypes, defaultProps } from '../react-desc-prop-types';\nimport { useRenderChildren } from './useRenderChildren';\nimport { useValidateProps } from './useValidateProps';\n\nexport const useGrid = (props: DSGridT.Props) => {\n  const { children, ...propsWithoutChildren } = props;\n\n  // =========================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =========================================================================\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSGridT.InternalProps>(propsWithoutChildren, defaultProps);\n  // children prop create the Maximum call stack size exceeded inside useMemoMergePropsWithDefault\n  propsWithDefaults.children = children;\n  // useValidateProps(propsWithDefaults, DSGridPropTypes); // TODO @carusox: Uncomment this line when we have the safety\n  // ===========================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // ===========================================================================\n  const globalProps = useGetGlobalAttributes<DSGridT.InternalProps>(propsWithDefaults);\n  const xstyledProps = useGetXstyledProps(propsWithDefaults);\n\n  const { isSpanParent, renderChildren } = useRenderChildren(propsWithDefaults);\n\n  return { propsWithDefaults, globalProps, xstyledProps, isSpanParent, renderChildren };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAyF;AAEzF,mCAA8C;AAC9C,+BAAkC;AAG3B,MAAM,UAAU,CAAC,UAAyB;AAC/C,QAAM,EAAE,aAAa,qBAAqB,IAAI;AAK9C,QAAM,wBAAoB,sDAAoD,sBAAsB,yCAAY;AAEhH,oBAAkB,WAAW;AAK7B,QAAM,kBAAc,gDAA8C,iBAAiB;AACnF,QAAM,mBAAe,4CAAmB,iBAAiB;AAEzD,QAAM,EAAE,cAAc,eAAe,QAAI,4CAAkB,iBAAiB;AAE5E,SAAO,EAAE,mBAAmB,aAAa,cAAc,cAAc,eAAe;AACtF;",
+  "sourcesContent": ["import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n// eslint-disable-next-line no-unused-vars\nimport { DSGridPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useRenderChildren } from './useRenderChildren.js';\n// eslint-disable-next-line no-unused-vars\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useGrid = (props: DSGridT.Props) => {\n  const { children, ...propsWithoutChildren } = props;\n\n  // =========================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =========================================================================\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSGridT.InternalProps>(propsWithoutChildren, defaultProps);\n  // children prop create the Maximum call stack size exceeded inside useMemoMergePropsWithDefault\n  propsWithDefaults.children = children;\n  // useValidateProps(propsWithDefaults, DSGridPropTypes); // TODO @carusox: Uncomment this line when we have the safety\n  // ===========================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // ===========================================================================\n  const globalProps = useGetGlobalAttributes<DSGridT.InternalProps>(propsWithDefaults);\n  const xstyledProps = useGetXstyledProps(propsWithDefaults);\n\n  const { isSpanParent, renderChildren } = useRenderChildren(propsWithDefaults);\n\n  return { propsWithDefaults, globalProps, xstyledProps, isSpanParent, renderChildren };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAyF;AAGzF,mCAA8C;AAC9C,+BAAkC;AAI3B,MAAM,UAAU,CAAC,UAAyB;AAC/C,QAAM,EAAE,UAAU,GAAG,qBAAqB,IAAI;AAK9C,QAAM,wBAAoB,sDAAoD,sBAAsB,yCAAY;AAEhH,oBAAkB,WAAW;AAK7B,QAAM,kBAAc,gDAA8C,iBAAiB;AACnF,QAAM,mBAAe,4CAAmB,iBAAiB;AAEzD,QAAM,EAAE,cAAc,eAAe,QAAI,4CAAkB,iBAAiB;AAE5E,SAAO,EAAE,mBAAmB,aAAa,cAAc,cAAc,eAAe;AACtF;",
   "names": []
 }

package/dist/cjs/config/useRenderChildren.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/config/useRenderChildren.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useRenderChildren.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { get } from 'lodash';\nimport { fixSpaceGutter } from '@elliemae/ds-system';\nimport type { DSGridT } from '../react-desc-prop-types';\n\nexport const useRenderChildren = (props: DSGridT.InternalProps) => {\n  const { children } = props;\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') as string, 10) > 0\n    ) {\n      const { width: wc, height: hc, span } = (child as React.ReactElement).props as Required<DSGridT.Props>;\n      if (!span) isSpanParent = false;\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n      return React.cloneElement(child as React.ReactElement, {\n        ...(child as React.ReactElement).props,\n        width: fixSpaceGutter(wc),\n        height: fixSpaceGutter(hc),\n      });\n    }\n    return child;\n  });\n\n  return { isSpanParent, renderChildren };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAoB;AACpB,uBAA+B;AAGxB,MAAM,oBAAoB,CAAC,UAAiC;AACjE,QAAM,EAAE,SAAS,IAAI;AACrB,MAAI,eAAe;AAEnB,QAAM,iBAAiB,aAAAA,QAAM,SAAS,IAAI,UAAU,CAAC,UAA2B;AAC9E,YACE,mBAAI,OAAO,iBAAiB,MAAM,cAClC,mBAAI,OAAO,kBAAkB,MAAM,UACnC,aAAS,mBAAI,OAAO,cAAc,GAAG,GAAa,EAAE,IAAI,GACxD;AACA,YAAM,EAAE,OAAO,IAAI,QAAQ,IAAI,KAAK,IAAK,MAA6B;AACtE,UAAI,CAAC;AAAM,uBAAe;AAE1B,aAAO,aAAAA,QAAM,aAAa,OAA6B;AAAA,QACrD,GAAI,MAA6B;AAAA,QACjC,WAAO,iCAAe,EAAE;AAAA,QACxB,YAAQ,iCAAe,EAAE;AAAA,MAC3B,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,cAAc,eAAe;AACxC;",
+  "sourcesContent": ["import React from 'react';\nimport { get } from 'lodash';\nimport { fixSpaceGutter } from '@elliemae/ds-system';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n\nexport const useRenderChildren = (props: DSGridT.InternalProps) => {\n  const { children } = props;\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') as string, 10) > 0\n    ) {\n      const { width: wc, height: hc, span } = (child as React.ReactElement).props as Required<DSGridT.Props>;\n      if (!span) isSpanParent = false;\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n      return React.cloneElement(child as React.ReactElement, {\n        ...(child as React.ReactElement).props,\n        width: fixSpaceGutter(wc),\n        height: fixSpaceGutter(hc),\n      });\n    }\n    return child;\n  });\n\n  return { isSpanParent, renderChildren };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAoB;AACpB,uBAA+B;AAGxB,MAAM,oBAAoB,CAAC,UAAiC;AACjE,QAAM,EAAE,SAAS,IAAI;AACrB,MAAI,eAAe;AAEnB,QAAM,iBAAiB,aAAAA,QAAM,SAAS,IAAI,UAAU,CAAC,UAA2B;AAC9E,YACE,mBAAI,OAAO,iBAAiB,MAAM,cAClC,mBAAI,OAAO,kBAAkB,MAAM,UACnC,aAAS,mBAAI,OAAO,cAAc,GAAG,GAAa,EAAE,IAAI,GACxD;AACA,YAAM,EAAE,OAAO,IAAI,QAAQ,IAAI,KAAK,IAAK,MAA6B;AACtE,UAAI,CAAC;AAAM,uBAAe;AAE1B,aAAO,aAAAA,QAAM,aAAa,OAA6B;AAAA,QACrD,GAAI,MAA6B;AAAA,QACjC,WAAO,iCAAe,EAAE;AAAA,QACxB,YAAQ,iCAAe,EAAE;AAAA,MAC3B,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,cAAc,eAAe;AACxC;",
   "names": ["React"]
 }

package/dist/cjs/config/useValidateProps.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -29,7 +33,7 @@ __export(useValidateProps_exports, {
 module.exports = __toCommonJS(useValidateProps_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_DSGridDefinitions = require("../DSGridDefinitions");
+var import_DSGridDefinitions = require("../DSGridDefinitions.js");
 const useValidateProps = (props, propTypes) => {
   (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, propTypes, import_DSGridDefinitions.DSGridName);
 };

package/dist/cjs/config/useValidateProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useValidateProps.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '../react-desc-prop-types';\nimport { DSGridName } from '../DSGridDefinitions';\n\nexport const useValidateProps = (props: DSGridT.InternalProps, propTypes: WeakValidationMap<unknown>) => {\n  useValidateTypescriptPropTypes(props, propTypes, DSGridName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAA+C;AAE/C,+BAA2B;AAEpB,MAAM,mBAAmB,CAAC,OAA8B,cAA0C;AACvG,8DAA+B,OAAO,WAAW,mCAAU;AAC7D;",
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '../react-desc-prop-types.js';\nimport { DSGridName } from '../DSGridDefinitions.js';\n\nexport const useValidateProps = (props: DSGridT.InternalProps, propTypes: WeakValidationMap<unknown>) => {\n  useValidateTypescriptPropTypes(props, propTypes, DSGridName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAA+C;AAE/C,+BAA2B;AAEpB,MAAM,mBAAmB,CAAC,OAA8B,cAA0C;AACvG,8DAA+B,OAAO,WAAW,mCAAU;AAC7D;",
   "names": []
 }

package/dist/cjs/index.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -32,6 +36,6 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-var import_Grid = __toESM(require("./Grid"));
+var import_Grid = __toESM(require("./Grid.js"));
 var src_default = import_Grid.default;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type {} from '@xstyled/system';\nimport Grid, { DSGridWithSchema } from './Grid';\n\nexport default Grid;\nexport { Grid, Grid as GridContainer, Grid as GridItem, DSGridWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,0BAAAA;AAAA,EAAA,iCAAAA;AAAA,EAAA,4BAAAA;AAAA,EAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,kBAAuC;AAEvC,IAAO,cAAQ,YAAAC;",
+  "sourcesContent": ["import type {} from '@xstyled/system';\nimport Grid, { DSGridWithSchema } from './Grid.js';\n\nexport default Grid;\nexport { Grid, Grid as GridContainer, Grid as GridItem, DSGridWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,0BAAAA;AAAA,EAAA,iCAAAA;AAAA,EAAA,4BAAAA;AAAA,EAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,kBAAuC;AAEvC,IAAO,cAAQ,YAAAC;",
   "names": ["Grid", "Grid"]
 }

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/cjs/react-desc-prop-types.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -30,7 +34,7 @@ __export(react_desc_prop_types_exports, {
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_constants = require("./utils/constants");
+var import_constants = require("./utils/constants.js");
 const defaultProps = {
   rows: [],
   cols: [],

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { alignItemsPlacement, justifyPlacement, wrap, boxShadow } from './utils/constants';\n\nexport declare namespace DSGridT {\n  interface RowColBreakpoints {\n    small?: string | number[];\n    medium?: string | number[];\n    large?: string | number[];\n  }\n\n  interface SpanBreakpoints {\n    small?: number;\n    medium?: number;\n    large?: number;\n  }\n\n  type JustifyPlacement = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';\n  type AlignItemsPlacement = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';\n  type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';\n  type BoxShadow = 'xs' | 's' | 'm' | 'l' | 'xl';\n\n  export interface DefaultProps {\n    rows: string[] | string | number[] | RowColBreakpoints;\n    cols: string[] | string | number[] | RowColBreakpoints;\n    className: string;\n    justify: JustifyPlacement;\n    gutter: string | number;\n    wrap: Wrap;\n    span: number;\n  }\n\n  export interface OptionalProps {\n    height?: string | number;\n    width?: string | number;\n    justifyContent?: JustifyPlacement;\n    alignItems?: AlignItemsPlacement;\n    children?: React.ReactNode;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface ItemProps {\n    rows: string[] | string | number[] | RowColBreakpoints;\n    cols: string[] | string | number[] | RowColBreakpoints;\n    alignItems: AlignItemsPlacement;\n    children: React.ReactNode;\n    className: string;\n    justify: JustifyPlacement;\n    gutter: string | number;\n    wrap: Wrap;\n    childNumber: number;\n    isSpanParent: boolean;\n    span?: number | SpanBreakpoints;\n    ref: React.ForwardedRef<HTMLDivElement>;\n    boxShadow?: BoxShadow;\n    backgroundColor?: string;\n    bg?: string;\n  }\n}\n\nexport const defaultProps: DSGridT.DefaultProps = {\n  rows: [],\n  cols: [],\n  className: '',\n  justify: 'flex-start',\n  gutter: 0,\n  wrap: 'wrap',\n  span: 1,\n};\n\n// =============================================================================\n// PropTypes\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 DSGridPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  rows: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n    PropTypes.number,\n    rowColBreakpoints,\n  ])\n    .description('Row layout cells')\n    .defaultValue([]),\n  cols: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n    PropTypes.number,\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  backgroundColor: PropTypes.string.description('Sets background color.'),\n  bg: PropTypes.string.description('Sets background color.'),\n  boxShadow: PropTypes.oneOf(boxShadow).description('Sets background color.'),\n  border: PropTypes.string.description('Sets border.'),\n  borderRadius: PropTypes.string.description('Sets border radius.'),\n  borderWidth: PropTypes.string.description('Sets border width.'),\n  borderStyle: PropTypes.string.description('Sets border style.'),\n  borderColor: PropTypes.string.description('Sets border color.'),\n  borderTop: PropTypes.string.description('Sets top border.'),\n  borderBottom: PropTypes.string.description('Sets bottom border.'),\n  borderLeft: PropTypes.string.description('Sets left border.'),\n  borderRight: PropTypes.string.description('Sets right border.'),\n  borderTopWidth: PropTypes.string.description('Sets border top width.'),\n  borderTopStyle: PropTypes.string.description('Sets border top style.'),\n  borderTopColor: PropTypes.string.description('Sets border top color.'),\n  borderBottomWidth: PropTypes.string.description('Sets border bottom width.'),\n  borderBottomStyle: PropTypes.string.description('Sets border bottom style.'),\n  borderBottomColor: PropTypes.string.description('Sets border bottom color.'),\n  borderRightWidth: PropTypes.string.description('Sets border right width.'),\n  borderRightStyle: PropTypes.string.description('Sets border right style.'),\n  borderRightColor: PropTypes.string.description('Sets border right color.'),\n  borderLeftWidth: PropTypes.string.description('Sets border left width.'),\n  borderLeftStyle: PropTypes.string.description('Sets border left style.'),\n  borderLeftColor: PropTypes.string.description('Sets border left color.'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { alignItemsPlacement, justifyPlacement, wrap, boxShadow } from './utils/constants.js';\n\nexport declare namespace DSGridT {\n  interface RowColBreakpoints {\n    small?: string | number[];\n    medium?: string | number[];\n    large?: string | number[];\n  }\n\n  interface SpanBreakpoints {\n    small?: number;\n    medium?: number;\n    large?: number;\n  }\n\n  type JustifyPlacement = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';\n  type AlignItemsPlacement = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';\n  type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';\n  type BoxShadow = 'xs' | 's' | 'm' | 'l' | 'xl';\n\n  export interface DefaultProps {\n    rows: string[] | string | number[] | RowColBreakpoints;\n    cols: string[] | string | number[] | RowColBreakpoints;\n    className: string;\n    justify: JustifyPlacement;\n    gutter: string | number;\n    wrap: Wrap;\n    span: number;\n  }\n\n  export interface OptionalProps {\n    height?: string | number;\n    width?: string | number;\n    justifyContent?: JustifyPlacement;\n    alignItems?: AlignItemsPlacement;\n    children?: React.ReactNode;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface ItemProps {\n    rows: string[] | string | number[] | RowColBreakpoints;\n    cols: string[] | string | number[] | RowColBreakpoints;\n    alignItems: AlignItemsPlacement;\n    children: React.ReactNode;\n    className: string;\n    justify: JustifyPlacement;\n    gutter: string | number;\n    wrap: Wrap;\n    childNumber: number;\n    isSpanParent: boolean;\n    span?: number | SpanBreakpoints;\n    ref: React.ForwardedRef<HTMLDivElement>;\n    boxShadow?: BoxShadow;\n    backgroundColor?: string;\n    bg?: string;\n  }\n}\n\nexport const defaultProps: DSGridT.DefaultProps = {\n  rows: [],\n  cols: [],\n  className: '',\n  justify: 'flex-start',\n  gutter: 0,\n  wrap: 'wrap',\n  span: 1,\n};\n\n// =============================================================================\n// PropTypes\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 DSGridPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  rows: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n    PropTypes.number,\n    rowColBreakpoints,\n  ])\n    .description('Row layout cells')\n    .defaultValue([]),\n  cols: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n    PropTypes.number,\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  backgroundColor: PropTypes.string.description('Sets background color.'),\n  bg: PropTypes.string.description('Sets background color.'),\n  boxShadow: PropTypes.oneOf(boxShadow).description('Sets background color.'),\n  border: PropTypes.string.description('Sets border.'),\n  borderRadius: PropTypes.string.description('Sets border radius.'),\n  borderWidth: PropTypes.string.description('Sets border width.'),\n  borderStyle: PropTypes.string.description('Sets border style.'),\n  borderColor: PropTypes.string.description('Sets border color.'),\n  borderTop: PropTypes.string.description('Sets top border.'),\n  borderBottom: PropTypes.string.description('Sets bottom border.'),\n  borderLeft: PropTypes.string.description('Sets left border.'),\n  borderRight: PropTypes.string.description('Sets right border.'),\n  borderTopWidth: PropTypes.string.description('Sets border top width.'),\n  borderTopStyle: PropTypes.string.description('Sets border top style.'),\n  borderTopColor: PropTypes.string.description('Sets border top color.'),\n  borderBottomWidth: PropTypes.string.description('Sets border bottom width.'),\n  borderBottomStyle: PropTypes.string.description('Sets border bottom style.'),\n  borderBottomColor: PropTypes.string.description('Sets border bottom color.'),\n  borderRightWidth: PropTypes.string.description('Sets border right width.'),\n  borderRightStyle: PropTypes.string.description('Sets border right style.'),\n  borderRightColor: PropTypes.string.description('Sets border right color.'),\n  borderLeftWidth: PropTypes.string.description('Sets border left width.'),\n  borderLeftStyle: PropTypes.string.description('Sets border left style.'),\n  borderLeftColor: PropTypes.string.description('Sets border left color.'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/utils/constants.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/utils/constants.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export const justifyPlacement = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];\n\nexport const alignItemsPlacement = ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'];\n\nexport const wrap = ['wrap', 'nowrap', 'wrap-reverse'];\n\nexport const boxShadow = ['xs', 's', 'm', 'l', 'xl'];\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB,CAAC,cAAc,UAAU,YAAY,iBAAiB,gBAAgB,cAAc;AAE7G,MAAM,sBAAsB,CAAC,cAAc,UAAU,YAAY,WAAW,UAAU;AAEtF,MAAM,OAAO,CAAC,QAAQ,UAAU,cAAc;AAE9C,MAAM,YAAY,CAAC,MAAM,KAAK,KAAK,KAAK,IAAI;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB,CAAC,cAAc,UAAU,YAAY,iBAAiB,gBAAgB,cAAc;AAE7G,MAAM,sBAAsB,CAAC,cAAc,UAAU,YAAY,WAAW,UAAU;AAEtF,MAAM,OAAO,CAAC,QAAQ,UAAU,cAAc;AAE9C,MAAM,YAAY,CAAC,MAAM,KAAK,KAAK,KAAK,IAAI;",
   "names": []
 }

package/dist/cjs/utils/styles.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

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

@@ -1,7 +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';\nimport type { DSGridT } from '../react-desc-prop-types';\n\nexport const manageSpan = css<DSGridT.ItemProps>`\n  ${({ isSpanParent, span, theme }) => {\n    if (!isSpanParent) return '';\n\n    if (typeof span === 'number') {\n      return `\n        -ms-grid-column: auto / span ${span};\n        grid-column: auto / span ${span};`;\n    }\n\n    if (typeof span !== 'object') return ``;\n\n    // Span object\n\n    let data = '';\n    Object.keys(theme.media).forEach((key) => {\n      // Type castings\n      const theKey = key as keyof typeof span & keyof typeof theme.breakpoints;\n      const spanValue = span[theKey];\n\n      if (!!spanValue && theme.breakpoints[theKey]) {\n        if (theKey === 'small') {\n          data += `\n            -ms-grid-column: auto / span ${spanValue};\n            grid-column: auto / span ${spanValue};\n          `;\n        } else {\n          data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n                    -ms-grid-column: auto / span ${spanValue};\n                    grid-column: auto / span ${spanValue};\n                  }`;\n        }\n      }\n    });\n    return data;\n  }}\n`;\n\nexport const manageCols = css<DSGridT.ItemProps>`\n  ${({ cols, theme, isSpanParent }) => {\n    if (typeof cols === 'object' && !Array.isArray(cols)) {\n      let data = '';\n      Object.keys(theme.media).forEach((key) => {\n        const theKey = key as keyof typeof cols;\n        const colValue = cols[theKey];\n        if (!!colValue && Array.isArray(colValue)) {\n          const mtg = (mapTemplateGrid(colValue) as string[]).join(' ');\n          const mtgs = (mapTemplateGrid(colValue) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n          if (theKey === '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[theKey]}) {\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 (!!colValue && isSpanParent) {\n          if (theKey === 'small') {\n            data += `-ms-grid-columns: repeat(${colValue}, 1fr);\n                     grid-template-columns: repeat(${colValue}, 1fr);`;\n          } else {\n            data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n                      -ms-grid-columns: repeat(${colValue}, 1fr);\n                      grid-template-columns: repeat(${colValue}, 1fr);\n                    }`;\n          }\n        }\n      });\n      return data;\n    }\n    if (Array.isArray(cols)) {\n      const mtg = (mapTemplateGrid(cols) as string[]).join(' ');\n      const mtgs = (mapTemplateGrid(cols) as string[]).map((c) => `minmax(0, ${c})`).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    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<DSGridT.ItemProps>`\n  ${({ rows, theme, isSpanParent }) => {\n    if (typeof rows === 'object' && !Array.isArray(rows)) {\n      let data = '';\n      Object.keys(theme.media).forEach((key) => {\n        const theKey = key as keyof typeof rows & keyof typeof theme.breakpoints;\n        const rowValue = rows[theKey];\n        if (rowValue && Array.isArray(rowValue)) {\n          const mtg = (mapTemplateGrid(rowValue) as string[]).join(' ');\n          const mtgs = (mapTemplateGrid(rowValue) as string[]).map((c) => `minmax(0, ${c})`).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[theKey]}) {\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 (!!rowValue && isSpanParent) {\n          if (theKey === 'small') {\n            data += `-ms-grid-rows: repeat(${rowValue}, 1fr);\n                     grid-template-rows: repeat(${rowValue}, 1fr);`;\n          } else {\n            data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n                      -ms-grid-rows: repeat(${rowValue}, 1fr);\n                      grid-template-rows: repeat(${rowValue}, 1fr);\n                    }`;\n          }\n        }\n      });\n      return data;\n    }\n    if (Array.isArray(rows)) {\n      const mtg = (mapTemplateGrid(rows) as string[]).join(' ');\n      const mtgs = (mapTemplateGrid(rows) as string[]).map((c) => `minmax(0, ${c})`).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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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n\nexport const manageSpan = css<DSGridT.ItemProps>`\n  ${({ isSpanParent, span, theme }) => {\n    if (!isSpanParent) return '';\n\n    if (typeof span === 'number') {\n      return `\n        -ms-grid-column: auto / span ${span};\n        grid-column: auto / span ${span};`;\n    }\n\n    if (typeof span !== 'object') return ``;\n\n    // Span object\n\n    let data = '';\n    Object.keys(theme.media).forEach((key) => {\n      // Type castings\n      const theKey = key as keyof typeof span & keyof typeof theme.breakpoints;\n      const spanValue = span[theKey];\n\n      if (!!spanValue && theme.breakpoints[theKey]) {\n        if (theKey === 'small') {\n          data += `\n            -ms-grid-column: auto / span ${spanValue};\n            grid-column: auto / span ${spanValue};\n          `;\n        } else {\n          data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n                    -ms-grid-column: auto / span ${spanValue};\n                    grid-column: auto / span ${spanValue};\n                  }`;\n        }\n      }\n    });\n    return data;\n  }}\n`;\n\nexport const manageCols = css<DSGridT.ItemProps>`\n  ${({ cols, theme, isSpanParent }) => {\n    if (typeof cols === 'object' && !Array.isArray(cols)) {\n      let data = '';\n      Object.keys(theme.media).forEach((key) => {\n        const theKey = key as keyof typeof cols;\n        const colValue = cols[theKey];\n        if (!!colValue && Array.isArray(colValue)) {\n          const mtg = (mapTemplateGrid(colValue) as string[]).join(' ');\n          const mtgs = (mapTemplateGrid(colValue) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n          if (theKey === '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[theKey]}) {\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 (!!colValue && isSpanParent) {\n          if (theKey === 'small') {\n            data += `-ms-grid-columns: repeat(${colValue}, 1fr);\n                     grid-template-columns: repeat(${colValue}, 1fr);`;\n          } else {\n            data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n                      -ms-grid-columns: repeat(${colValue}, 1fr);\n                      grid-template-columns: repeat(${colValue}, 1fr);\n                    }`;\n          }\n        }\n      });\n      return data;\n    }\n    if (Array.isArray(cols)) {\n      const mtg = (mapTemplateGrid(cols) as string[]).join(' ');\n      const mtgs = (mapTemplateGrid(cols) as string[]).map((c) => `minmax(0, ${c})`).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    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<DSGridT.ItemProps>`\n  ${({ rows, theme, isSpanParent }) => {\n    if (typeof rows === 'object' && !Array.isArray(rows)) {\n      let data = '';\n      Object.keys(theme.media).forEach((key) => {\n        const theKey = key as keyof typeof rows & keyof typeof theme.breakpoints;\n        const rowValue = rows[theKey];\n        if (rowValue && Array.isArray(rowValue)) {\n          const mtg = (mapTemplateGrid(rowValue) as string[]).join(' ');\n          const mtgs = (mapTemplateGrid(rowValue) as string[]).map((c) => `minmax(0, ${c})`).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[theKey]}) {\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 (!!rowValue && isSpanParent) {\n          if (theKey === 'small') {\n            data += `-ms-grid-rows: repeat(${rowValue}, 1fr);\n                     grid-template-rows: repeat(${rowValue}, 1fr);`;\n          } else {\n            data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n                      -ms-grid-rows: repeat(${rowValue}, 1fr);\n                      grid-template-rows: repeat(${rowValue}, 1fr);\n                    }`;\n          }\n        }\n      });\n      return data;\n    }\n    if (Array.isArray(rows)) {\n      const mtg = (mapTemplateGrid(rows) as string[]).join(' ');\n      const mtgs = (mapTemplateGrid(rows) as string[]).map((c) => `minmax(0, ${c})`).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

@@ -2,10 +2,10 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import React2 from "react";
 import { describe } from "@elliemae/ds-props-helpers";
-import { DSGridPropTypes } from "./react-desc-prop-types";
-import { GridItem } from "./GridItem";
-import { useGrid } from "./config/useGrid";
-import { DSGridName } from "./DSGridDefinitions";
+import { DSGridPropTypes } from "./react-desc-prop-types.js";
+import { GridItem } from "./GridItem.js";
+import { useGrid } from "./config/useGrid.js";
+import { DSGridName } from "./DSGridDefinitions.js";
 const Grid = React2.forwardRef((props, ref) => {
   const {
     propsWithDefaults: { alignItems, cols, children, rows, gutter, justify, wrap, width, height, ...rest },

package/dist/esm/Grid.js.map

@@ -1,7 +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 '@elliemae/ds-props-helpers';\nimport type { DSGridT } from './react-desc-prop-types';\nimport { DSGridPropTypes } from './react-desc-prop-types';\nimport { GridItem } from './GridItem';\nimport { useGrid } from './config/useGrid';\nimport { DSGridName } from './DSGridDefinitions';\n\nconst Grid = React.forwardRef<HTMLDivElement, DSGridT.Props>((props, ref) => {\n  const {\n    propsWithDefaults: { alignItems, cols, children, rows, gutter, justify, wrap, width, height, ...rest },\n    globalProps,\n    xstyledProps,\n    isSpanParent,\n    renderChildren,\n  } = useGrid(props);\n\n  return (\n    <GridItem\n      alignItems={alignItems}\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      {...rest}\n      {...globalProps}\n      {...xstyledProps}\n      w={width}\n      h={height}\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 = DSGridName;\n\nGrid.propTypes = DSGridPropTypes;\nconst DSGridWithSchema = describe(Grid);\nDSGridWithSchema.propTypes = DSGridPropTypes;\n\nexport default Grid;\nexport { DSGridWithSchema, Grid };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkBnB;AAlBJ,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AAEzB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAE3B,MAAM,OAAOA,OAAM,WAA0C,CAAC,OAAO,QAAQ;AAC3E,QAAM;AAAA,IACJ,mBAAmB,EAAE,YAAY,MAAM,UAAU,MAAM,QAAQ,SAAS,MAAM,OAAO,WAAW,KAAK;AAAA,IACrG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,QAAQ,KAAK;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAaA,OAAM,SAAS,MAAM,QAAQ;AAAA,MAC1C;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEF;AAAA;AAAA,EACH;AAEJ,CAAC;AAGD,KAAK,cAAc;AAEnB,KAAK,YAAY;AACjB,MAAM,mBAAmB,SAAS,IAAI;AACtC,iBAAiB,YAAY;AAE7B,IAAO,eAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from './react-desc-prop-types.js';\nimport { DSGridPropTypes } from './react-desc-prop-types.js';\nimport { GridItem } from './GridItem.js';\nimport { useGrid } from './config/useGrid.js';\nimport { DSGridName } from './DSGridDefinitions.js';\n\nconst Grid = React.forwardRef<HTMLDivElement, DSGridT.Props>((props, ref) => {\n  const {\n    propsWithDefaults: { alignItems, cols, children, rows, gutter, justify, wrap, width, height, ...rest },\n    globalProps,\n    xstyledProps,\n    isSpanParent,\n    renderChildren,\n  } = useGrid(props);\n\n  return (\n    <GridItem\n      alignItems={alignItems}\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      {...rest}\n      {...globalProps}\n      {...xstyledProps}\n      w={width}\n      h={height}\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 = DSGridName;\n\nGrid.propTypes = DSGridPropTypes;\nconst DSGridWithSchema = describe(Grid);\nDSGridWithSchema.propTypes = DSGridPropTypes;\n\nexport default Grid;\nexport { DSGridWithSchema, Grid };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkBnB;AAlBJ,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AAEzB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAE3B,MAAM,OAAOA,OAAM,WAA0C,CAAC,OAAO,QAAQ;AAC3E,QAAM;AAAA,IACJ,mBAAmB,EAAE,YAAY,MAAM,UAAU,MAAM,QAAQ,SAAS,MAAM,OAAO,QAAQ,GAAG,KAAK;AAAA,IACrG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,QAAQ,KAAK;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAaA,OAAM,SAAS,MAAM,QAAQ;AAAA,MAC1C;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEF;AAAA;AAAA,EACH;AAEJ,CAAC;AAGD,KAAK,cAAc;AAEnB,KAAK,YAAY;AACjB,MAAM,mBAAmB,SAAS,IAAI;AACtC,iBAAiB,YAAY;AAE7B,IAAO,eAAQ;",
   "names": ["React"]
 }

package/dist/esm/GridItem.js

@@ -8,9 +8,10 @@ import {
   space,
   boxShadows,
   flexboxes,
-  grids
+  grids,
+  layout
 } from "@elliemae/ds-system";
-import { manageCols, manageRows, manageSpan } from "./utils/styles";
+import { manageCols, manageRows, manageSpan } from "./utils/styles.js";
 const GridItem = styled.div`
   display: grid;
   display: -ms-grid;
@@ -26,6 +27,7 @@ const GridItem = styled.div`
   ${boxShadows}
   ${borders}
   ${background}
+  ${layout}
 `;
 export {
   GridItem

package/dist/esm/GridItem.js.map

@@ -1,7 +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 {\n  styled,\n  mapGap,\n  background,\n  borders,\n  sizing,\n  space,\n  boxShadows,\n  flexboxes,\n  grids,\n  type LayoutProps,\n  type SpaceProps,\n  type SizingProps,\n} from '@elliemae/ds-system';\nimport { manageCols, manageRows, manageSpan } from './utils/styles';\nimport { type DSGridT } from './react-desc-prop-types';\n\nexport const GridItem = styled.div<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\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  ${manageCols}\n  ${manageRows}\n  ${manageSpan}\n  ${boxShadows}\n  ${borders}\n  ${background}\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,YAAY,YAAY,kBAAkB;AAG5C,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA,gBAGf,CAAC,EAAE,OAAO,MAAM,OAAO,MAAM;AAAA,aAChC,CAAC,EAAE,OAAO,MAAM,OAAO,MAAM;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport {\n  styled,\n  mapGap,\n  background,\n  borders,\n  sizing,\n  space,\n  boxShadows,\n  flexboxes,\n  grids,\n  layout,\n  type LayoutProps,\n  type SpaceProps,\n  type SizingProps,\n} from '@elliemae/ds-system';\nimport { manageCols, manageRows, manageSpan } from './utils/styles.js';\nimport { type DSGridT } from './react-desc-prop-types.js';\n\nexport const GridItem = styled.div<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\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  ${manageCols}\n  ${manageRows}\n  ${manageSpan}\n  ${boxShadows}\n  ${borders}\n  ${background}\n  ${layout}\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,YAAY,YAAY,kBAAkB;AAG5C,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA,gBAGf,CAAC,EAAE,OAAO,MAAM,OAAO,MAAM;AAAA,aAChC,CAAC,EAAE,OAAO,MAAM,OAAO,MAAM;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
   "names": []
 }

package/dist/esm/config/useGrid.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
-import { defaultProps } from "../react-desc-prop-types";
-import { useRenderChildren } from "./useRenderChildren";
+import { defaultProps } from "../react-desc-prop-types.js";
+import { useRenderChildren } from "./useRenderChildren.js";
 const useGrid = (props) => {
   const { children, ...propsWithoutChildren } = props;
   const propsWithDefaults = useMemoMergePropsWithDefault(propsWithoutChildren, defaultProps);

package/dist/esm/config/useGrid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useGrid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '../react-desc-prop-types';\nimport { DSGridPropTypes, defaultProps } from '../react-desc-prop-types';\nimport { useRenderChildren } from './useRenderChildren';\nimport { useValidateProps } from './useValidateProps';\n\nexport const useGrid = (props: DSGridT.Props) => {\n  const { children, ...propsWithoutChildren } = props;\n\n  // =========================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =========================================================================\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSGridT.InternalProps>(propsWithoutChildren, defaultProps);\n  // children prop create the Maximum call stack size exceeded inside useMemoMergePropsWithDefault\n  propsWithDefaults.children = children;\n  // useValidateProps(propsWithDefaults, DSGridPropTypes); // TODO @carusox: Uncomment this line when we have the safety\n  // ===========================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // ===========================================================================\n  const globalProps = useGetGlobalAttributes<DSGridT.InternalProps>(propsWithDefaults);\n  const xstyledProps = useGetXstyledProps(propsWithDefaults);\n\n  const { isSpanParent, renderChildren } = useRenderChildren(propsWithDefaults);\n\n  return { propsWithDefaults, globalProps, xstyledProps, isSpanParent, renderChildren };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,wBAAwB,oBAAoB,oCAAoC;AAEzF,SAA0B,oBAAoB;AAC9C,SAAS,yBAAyB;AAG3B,MAAM,UAAU,CAAC,UAAyB;AAC/C,QAAM,EAAE,aAAa,qBAAqB,IAAI;AAK9C,QAAM,oBAAoB,6BAAoD,sBAAsB,YAAY;AAEhH,oBAAkB,WAAW;AAK7B,QAAM,cAAc,uBAA8C,iBAAiB;AACnF,QAAM,eAAe,mBAAmB,iBAAiB;AAEzD,QAAM,EAAE,cAAc,eAAe,IAAI,kBAAkB,iBAAiB;AAE5E,SAAO,EAAE,mBAAmB,aAAa,cAAc,cAAc,eAAe;AACtF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n// eslint-disable-next-line no-unused-vars\nimport { DSGridPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useRenderChildren } from './useRenderChildren.js';\n// eslint-disable-next-line no-unused-vars\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useGrid = (props: DSGridT.Props) => {\n  const { children, ...propsWithoutChildren } = props;\n\n  // =========================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =========================================================================\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSGridT.InternalProps>(propsWithoutChildren, defaultProps);\n  // children prop create the Maximum call stack size exceeded inside useMemoMergePropsWithDefault\n  propsWithDefaults.children = children;\n  // useValidateProps(propsWithDefaults, DSGridPropTypes); // TODO @carusox: Uncomment this line when we have the safety\n  // ===========================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // ===========================================================================\n  const globalProps = useGetGlobalAttributes<DSGridT.InternalProps>(propsWithDefaults);\n  const xstyledProps = useGetXstyledProps(propsWithDefaults);\n\n  const { isSpanParent, renderChildren } = useRenderChildren(propsWithDefaults);\n\n  return { propsWithDefaults, globalProps, xstyledProps, isSpanParent, renderChildren };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,wBAAwB,oBAAoB,oCAAoC;AAGzF,SAA0B,oBAAoB;AAC9C,SAAS,yBAAyB;AAI3B,MAAM,UAAU,CAAC,UAAyB;AAC/C,QAAM,EAAE,UAAU,GAAG,qBAAqB,IAAI;AAK9C,QAAM,oBAAoB,6BAAoD,sBAAsB,YAAY;AAEhH,oBAAkB,WAAW;AAK7B,QAAM,cAAc,uBAA8C,iBAAiB;AACnF,QAAM,eAAe,mBAAmB,iBAAiB;AAEzD,QAAM,EAAE,cAAc,eAAe,IAAI,kBAAkB,iBAAiB;AAE5E,SAAO,EAAE,mBAAmB,aAAa,cAAc,cAAc,eAAe;AACtF;",
   "names": []
 }

package/dist/esm/config/useRenderChildren.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useRenderChildren.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { get } from 'lodash';\nimport { fixSpaceGutter } from '@elliemae/ds-system';\nimport type { DSGridT } from '../react-desc-prop-types';\n\nexport const useRenderChildren = (props: DSGridT.InternalProps) => {\n  const { children } = props;\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') as string, 10) > 0\n    ) {\n      const { width: wc, height: hc, span } = (child as React.ReactElement).props as Required<DSGridT.Props>;\n      if (!span) isSpanParent = false;\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n      return React.cloneElement(child as React.ReactElement, {\n        ...(child as React.ReactElement).props,\n        width: fixSpaceGutter(wc),\n        height: fixSpaceGutter(hc),\n      });\n    }\n    return child;\n  });\n\n  return { isSpanParent, renderChildren };\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { get } from 'lodash';\nimport { fixSpaceGutter } from '@elliemae/ds-system';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n\nexport const useRenderChildren = (props: DSGridT.InternalProps) => {\n  const { children } = props;\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') as string, 10) > 0\n    ) {\n      const { width: wc, height: hc, span } = (child as React.ReactElement).props as Required<DSGridT.Props>;\n      if (!span) isSpanParent = false;\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n      return React.cloneElement(child as React.ReactElement, {\n        ...(child as React.ReactElement).props,\n        width: fixSpaceGutter(wc),\n        height: fixSpaceGutter(hc),\n      });\n    }\n    return child;\n  });\n\n  return { isSpanParent, renderChildren };\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB,SAAS,sBAAsB;AAGxB,MAAM,oBAAoB,CAAC,UAAiC;AACjE,QAAM,EAAE,SAAS,IAAI;AACrB,MAAI,eAAe;AAEnB,QAAM,iBAAiBA,OAAM,SAAS,IAAI,UAAU,CAAC,UAA2B;AAC9E,QACE,IAAI,OAAO,iBAAiB,MAAM,UAClC,IAAI,OAAO,kBAAkB,MAAM,UACnC,SAAS,IAAI,OAAO,cAAc,GAAG,GAAa,EAAE,IAAI,GACxD;AACA,YAAM,EAAE,OAAO,IAAI,QAAQ,IAAI,KAAK,IAAK,MAA6B;AACtE,UAAI,CAAC;AAAM,uBAAe;AAE1B,aAAOA,OAAM,aAAa,OAA6B;AAAA,QACrD,GAAI,MAA6B;AAAA,QACjC,OAAO,eAAe,EAAE;AAAA,QACxB,QAAQ,eAAe,EAAE;AAAA,MAC3B,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,cAAc,eAAe;AACxC;",
   "names": ["React"]
 }

package/dist/esm/config/useValidateProps.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
-import { DSGridName } from "../DSGridDefinitions";
+import { DSGridName } from "../DSGridDefinitions.js";
 const useValidateProps = (props, propTypes) => {
   useValidateTypescriptPropTypes(props, propTypes, DSGridName);
 };

package/dist/esm/config/useValidateProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '../react-desc-prop-types';\nimport { DSGridName } from '../DSGridDefinitions';\n\nexport const useValidateProps = (props: DSGridT.InternalProps, propTypes: WeakValidationMap<unknown>) => {\n  useValidateTypescriptPropTypes(props, propTypes, DSGridName);\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '../react-desc-prop-types.js';\nimport { DSGridName } from '../DSGridDefinitions.js';\n\nexport const useValidateProps = (props: DSGridT.InternalProps, propTypes: WeakValidationMap<unknown>) => {\n  useValidateTypescriptPropTypes(props, propTypes, DSGridName);\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,sCAAsC;AAE/C,SAAS,kBAAkB;AAEpB,MAAM,mBAAmB,CAAC,OAA8B,cAA0C;AACvG,iCAA+B,OAAO,WAAW,UAAU;AAC7D;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Grid, { DSGridWithSchema } from "./Grid";
+import Grid, { DSGridWithSchema } from "./Grid.js";
 var src_default = Grid;
 export {
   DSGridWithSchema,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@xstyled/system';\nimport Grid, { DSGridWithSchema } from './Grid';\n\nexport default Grid;\nexport { Grid, Grid as GridContainer, Grid as GridItem, DSGridWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@xstyled/system';\nimport Grid, { DSGridWithSchema } from './Grid.js';\n\nexport default Grid;\nexport { Grid, Grid as GridContainer, Grid as GridItem, DSGridWithSchema };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACCvB,OAAO,QAAQ,wBAAwB;AAEvC,IAAO,cAAQ;",
   "names": []
 }

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/react-desc-prop-types.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
-import { alignItemsPlacement, justifyPlacement, wrap, boxShadow } from "./utils/constants";
+import { alignItemsPlacement, justifyPlacement, wrap, boxShadow } from "./utils/constants.js";
 const defaultProps = {
   rows: [],
   cols: [],

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { alignItemsPlacement, justifyPlacement, wrap, boxShadow } from './utils/constants';\n\nexport declare namespace DSGridT {\n  interface RowColBreakpoints {\n    small?: string | number[];\n    medium?: string | number[];\n    large?: string | number[];\n  }\n\n  interface SpanBreakpoints {\n    small?: number;\n    medium?: number;\n    large?: number;\n  }\n\n  type JustifyPlacement = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';\n  type AlignItemsPlacement = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';\n  type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';\n  type BoxShadow = 'xs' | 's' | 'm' | 'l' | 'xl';\n\n  export interface DefaultProps {\n    rows: string[] | string | number[] | RowColBreakpoints;\n    cols: string[] | string | number[] | RowColBreakpoints;\n    className: string;\n    justify: JustifyPlacement;\n    gutter: string | number;\n    wrap: Wrap;\n    span: number;\n  }\n\n  export interface OptionalProps {\n    height?: string | number;\n    width?: string | number;\n    justifyContent?: JustifyPlacement;\n    alignItems?: AlignItemsPlacement;\n    children?: React.ReactNode;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface ItemProps {\n    rows: string[] | string | number[] | RowColBreakpoints;\n    cols: string[] | string | number[] | RowColBreakpoints;\n    alignItems: AlignItemsPlacement;\n    children: React.ReactNode;\n    className: string;\n    justify: JustifyPlacement;\n    gutter: string | number;\n    wrap: Wrap;\n    childNumber: number;\n    isSpanParent: boolean;\n    span?: number | SpanBreakpoints;\n    ref: React.ForwardedRef<HTMLDivElement>;\n    boxShadow?: BoxShadow;\n    backgroundColor?: string;\n    bg?: string;\n  }\n}\n\nexport const defaultProps: DSGridT.DefaultProps = {\n  rows: [],\n  cols: [],\n  className: '',\n  justify: 'flex-start',\n  gutter: 0,\n  wrap: 'wrap',\n  span: 1,\n};\n\n// =============================================================================\n// PropTypes\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 DSGridPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  rows: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n    PropTypes.number,\n    rowColBreakpoints,\n  ])\n    .description('Row layout cells')\n    .defaultValue([]),\n  cols: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n    PropTypes.number,\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  backgroundColor: PropTypes.string.description('Sets background color.'),\n  bg: PropTypes.string.description('Sets background color.'),\n  boxShadow: PropTypes.oneOf(boxShadow).description('Sets background color.'),\n  border: PropTypes.string.description('Sets border.'),\n  borderRadius: PropTypes.string.description('Sets border radius.'),\n  borderWidth: PropTypes.string.description('Sets border width.'),\n  borderStyle: PropTypes.string.description('Sets border style.'),\n  borderColor: PropTypes.string.description('Sets border color.'),\n  borderTop: PropTypes.string.description('Sets top border.'),\n  borderBottom: PropTypes.string.description('Sets bottom border.'),\n  borderLeft: PropTypes.string.description('Sets left border.'),\n  borderRight: PropTypes.string.description('Sets right border.'),\n  borderTopWidth: PropTypes.string.description('Sets border top width.'),\n  borderTopStyle: PropTypes.string.description('Sets border top style.'),\n  borderTopColor: PropTypes.string.description('Sets border top color.'),\n  borderBottomWidth: PropTypes.string.description('Sets border bottom width.'),\n  borderBottomStyle: PropTypes.string.description('Sets border bottom style.'),\n  borderBottomColor: PropTypes.string.description('Sets border bottom color.'),\n  borderRightWidth: PropTypes.string.description('Sets border right width.'),\n  borderRightStyle: PropTypes.string.description('Sets border right style.'),\n  borderRightColor: PropTypes.string.description('Sets border right color.'),\n  borderLeftWidth: PropTypes.string.description('Sets border left width.'),\n  borderLeftStyle: PropTypes.string.description('Sets border left style.'),\n  borderLeftColor: PropTypes.string.description('Sets border left color.'),\n} as WeakValidationMap<unknown>;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { alignItemsPlacement, justifyPlacement, wrap, boxShadow } from './utils/constants.js';\n\nexport declare namespace DSGridT {\n  interface RowColBreakpoints {\n    small?: string | number[];\n    medium?: string | number[];\n    large?: string | number[];\n  }\n\n  interface SpanBreakpoints {\n    small?: number;\n    medium?: number;\n    large?: number;\n  }\n\n  type JustifyPlacement = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';\n  type AlignItemsPlacement = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';\n  type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';\n  type BoxShadow = 'xs' | 's' | 'm' | 'l' | 'xl';\n\n  export interface DefaultProps {\n    rows: string[] | string | number[] | RowColBreakpoints;\n    cols: string[] | string | number[] | RowColBreakpoints;\n    className: string;\n    justify: JustifyPlacement;\n    gutter: string | number;\n    wrap: Wrap;\n    span: number;\n  }\n\n  export interface OptionalProps {\n    height?: string | number;\n    width?: string | number;\n    justifyContent?: JustifyPlacement;\n    alignItems?: AlignItemsPlacement;\n    children?: React.ReactNode;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface ItemProps {\n    rows: string[] | string | number[] | RowColBreakpoints;\n    cols: string[] | string | number[] | RowColBreakpoints;\n    alignItems: AlignItemsPlacement;\n    children: React.ReactNode;\n    className: string;\n    justify: JustifyPlacement;\n    gutter: string | number;\n    wrap: Wrap;\n    childNumber: number;\n    isSpanParent: boolean;\n    span?: number | SpanBreakpoints;\n    ref: React.ForwardedRef<HTMLDivElement>;\n    boxShadow?: BoxShadow;\n    backgroundColor?: string;\n    bg?: string;\n  }\n}\n\nexport const defaultProps: DSGridT.DefaultProps = {\n  rows: [],\n  cols: [],\n  className: '',\n  justify: 'flex-start',\n  gutter: 0,\n  wrap: 'wrap',\n  span: 1,\n};\n\n// =============================================================================\n// PropTypes\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 DSGridPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  rows: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n    PropTypes.number,\n    rowColBreakpoints,\n  ])\n    .description('Row layout cells')\n    .defaultValue([]),\n  cols: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n    PropTypes.number,\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  backgroundColor: PropTypes.string.description('Sets background color.'),\n  bg: PropTypes.string.description('Sets background color.'),\n  boxShadow: PropTypes.oneOf(boxShadow).description('Sets background color.'),\n  border: PropTypes.string.description('Sets border.'),\n  borderRadius: PropTypes.string.description('Sets border radius.'),\n  borderWidth: PropTypes.string.description('Sets border width.'),\n  borderStyle: PropTypes.string.description('Sets border style.'),\n  borderColor: PropTypes.string.description('Sets border color.'),\n  borderTop: PropTypes.string.description('Sets top border.'),\n  borderBottom: PropTypes.string.description('Sets bottom border.'),\n  borderLeft: PropTypes.string.description('Sets left border.'),\n  borderRight: PropTypes.string.description('Sets right border.'),\n  borderTopWidth: PropTypes.string.description('Sets border top width.'),\n  borderTopStyle: PropTypes.string.description('Sets border top style.'),\n  borderTopColor: PropTypes.string.description('Sets border top color.'),\n  borderBottomWidth: PropTypes.string.description('Sets border bottom width.'),\n  borderBottomStyle: PropTypes.string.description('Sets border bottom style.'),\n  borderBottomColor: PropTypes.string.description('Sets border bottom color.'),\n  borderRightWidth: PropTypes.string.description('Sets border right width.'),\n  borderRightStyle: PropTypes.string.description('Sets border right style.'),\n  borderRightColor: PropTypes.string.description('Sets border right color.'),\n  borderLeftWidth: PropTypes.string.description('Sets border left width.'),\n  borderLeftStyle: PropTypes.string.description('Sets border left style.'),\n  borderLeftColor: PropTypes.string.description('Sets border left color.'),\n} as WeakValidationMap<unknown>;\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,7 +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';\nimport type { DSGridT } from '../react-desc-prop-types';\n\nexport const manageSpan = css<DSGridT.ItemProps>`\n  ${({ isSpanParent, span, theme }) => {\n    if (!isSpanParent) return '';\n\n    if (typeof span === 'number') {\n      return `\n        -ms-grid-column: auto / span ${span};\n        grid-column: auto / span ${span};`;\n    }\n\n    if (typeof span !== 'object') return ``;\n\n    // Span object\n\n    let data = '';\n    Object.keys(theme.media).forEach((key) => {\n      // Type castings\n      const theKey = key as keyof typeof span & keyof typeof theme.breakpoints;\n      const spanValue = span[theKey];\n\n      if (!!spanValue && theme.breakpoints[theKey]) {\n        if (theKey === 'small') {\n          data += `\n            -ms-grid-column: auto / span ${spanValue};\n            grid-column: auto / span ${spanValue};\n          `;\n        } else {\n          data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n                    -ms-grid-column: auto / span ${spanValue};\n                    grid-column: auto / span ${spanValue};\n                  }`;\n        }\n      }\n    });\n    return data;\n  }}\n`;\n\nexport const manageCols = css<DSGridT.ItemProps>`\n  ${({ cols, theme, isSpanParent }) => {\n    if (typeof cols === 'object' && !Array.isArray(cols)) {\n      let data = '';\n      Object.keys(theme.media).forEach((key) => {\n        const theKey = key as keyof typeof cols;\n        const colValue = cols[theKey];\n        if (!!colValue && Array.isArray(colValue)) {\n          const mtg = (mapTemplateGrid(colValue) as string[]).join(' ');\n          const mtgs = (mapTemplateGrid(colValue) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n          if (theKey === '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[theKey]}) {\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 (!!colValue && isSpanParent) {\n          if (theKey === 'small') {\n            data += `-ms-grid-columns: repeat(${colValue}, 1fr);\n                     grid-template-columns: repeat(${colValue}, 1fr);`;\n          } else {\n            data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n                      -ms-grid-columns: repeat(${colValue}, 1fr);\n                      grid-template-columns: repeat(${colValue}, 1fr);\n                    }`;\n          }\n        }\n      });\n      return data;\n    }\n    if (Array.isArray(cols)) {\n      const mtg = (mapTemplateGrid(cols) as string[]).join(' ');\n      const mtgs = (mapTemplateGrid(cols) as string[]).map((c) => `minmax(0, ${c})`).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    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<DSGridT.ItemProps>`\n  ${({ rows, theme, isSpanParent }) => {\n    if (typeof rows === 'object' && !Array.isArray(rows)) {\n      let data = '';\n      Object.keys(theme.media).forEach((key) => {\n        const theKey = key as keyof typeof rows & keyof typeof theme.breakpoints;\n        const rowValue = rows[theKey];\n        if (rowValue && Array.isArray(rowValue)) {\n          const mtg = (mapTemplateGrid(rowValue) as string[]).join(' ');\n          const mtgs = (mapTemplateGrid(rowValue) as string[]).map((c) => `minmax(0, ${c})`).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[theKey]}) {\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 (!!rowValue && isSpanParent) {\n          if (theKey === 'small') {\n            data += `-ms-grid-rows: repeat(${rowValue}, 1fr);\n                     grid-template-rows: repeat(${rowValue}, 1fr);`;\n          } else {\n            data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n                      -ms-grid-rows: repeat(${rowValue}, 1fr);\n                      grid-template-rows: repeat(${rowValue}, 1fr);\n                    }`;\n          }\n        }\n      });\n      return data;\n    }\n    if (Array.isArray(rows)) {\n      const mtg = (mapTemplateGrid(rows) as string[]).join(' ');\n      const mtgs = (mapTemplateGrid(rows) as string[]).map((c) => `minmax(0, ${c})`).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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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n\nexport const manageSpan = css<DSGridT.ItemProps>`\n  ${({ isSpanParent, span, theme }) => {\n    if (!isSpanParent) return '';\n\n    if (typeof span === 'number') {\n      return `\n        -ms-grid-column: auto / span ${span};\n        grid-column: auto / span ${span};`;\n    }\n\n    if (typeof span !== 'object') return ``;\n\n    // Span object\n\n    let data = '';\n    Object.keys(theme.media).forEach((key) => {\n      // Type castings\n      const theKey = key as keyof typeof span & keyof typeof theme.breakpoints;\n      const spanValue = span[theKey];\n\n      if (!!spanValue && theme.breakpoints[theKey]) {\n        if (theKey === 'small') {\n          data += `\n            -ms-grid-column: auto / span ${spanValue};\n            grid-column: auto / span ${spanValue};\n          `;\n        } else {\n          data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n                    -ms-grid-column: auto / span ${spanValue};\n                    grid-column: auto / span ${spanValue};\n                  }`;\n        }\n      }\n    });\n    return data;\n  }}\n`;\n\nexport const manageCols = css<DSGridT.ItemProps>`\n  ${({ cols, theme, isSpanParent }) => {\n    if (typeof cols === 'object' && !Array.isArray(cols)) {\n      let data = '';\n      Object.keys(theme.media).forEach((key) => {\n        const theKey = key as keyof typeof cols;\n        const colValue = cols[theKey];\n        if (!!colValue && Array.isArray(colValue)) {\n          const mtg = (mapTemplateGrid(colValue) as string[]).join(' ');\n          const mtgs = (mapTemplateGrid(colValue) as string[]).map((c) => `minmax(0, ${c})`).join(' ');\n          if (theKey === '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[theKey]}) {\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 (!!colValue && isSpanParent) {\n          if (theKey === 'small') {\n            data += `-ms-grid-columns: repeat(${colValue}, 1fr);\n                     grid-template-columns: repeat(${colValue}, 1fr);`;\n          } else {\n            data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n                      -ms-grid-columns: repeat(${colValue}, 1fr);\n                      grid-template-columns: repeat(${colValue}, 1fr);\n                    }`;\n          }\n        }\n      });\n      return data;\n    }\n    if (Array.isArray(cols)) {\n      const mtg = (mapTemplateGrid(cols) as string[]).join(' ');\n      const mtgs = (mapTemplateGrid(cols) as string[]).map((c) => `minmax(0, ${c})`).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    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<DSGridT.ItemProps>`\n  ${({ rows, theme, isSpanParent }) => {\n    if (typeof rows === 'object' && !Array.isArray(rows)) {\n      let data = '';\n      Object.keys(theme.media).forEach((key) => {\n        const theKey = key as keyof typeof rows & keyof typeof theme.breakpoints;\n        const rowValue = rows[theKey];\n        if (rowValue && Array.isArray(rowValue)) {\n          const mtg = (mapTemplateGrid(rowValue) as string[]).join(' ');\n          const mtgs = (mapTemplateGrid(rowValue) as string[]).map((c) => `minmax(0, ${c})`).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[theKey]}) {\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 (!!rowValue && isSpanParent) {\n          if (theKey === 'small') {\n            data += `-ms-grid-rows: repeat(${rowValue}, 1fr);\n                     grid-template-rows: repeat(${rowValue}, 1fr);`;\n          } else {\n            data += `@media (min-width: ${theme.breakpoints[theKey]}) {\n                      -ms-grid-rows: repeat(${rowValue}, 1fr);\n                      grid-template-rows: repeat(${rowValue}, 1fr);\n                    }`;\n          }\n        }\n      });\n      return data;\n    }\n    if (Array.isArray(rows)) {\n      const mtg = (mapTemplateGrid(rows) as string[]).join(' ');\n      const mtgs = (mapTemplateGrid(rows) as string[]).map((c) => `minmax(0, ${c})`).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/dist/types/Grid.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { DSGridT } from './react-desc-prop-types';
+import type { DSGridT } from './react-desc-prop-types.js';
 declare const Grid: React.ForwardRefExoticComponent<DSGridT.Props & React.RefAttributes<HTMLDivElement>>;
-declare const DSGridWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<DSGridT.Props & React.RefAttributes<HTMLDivElement>>;
+declare const DSGridWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSGridT.Props & React.RefAttributes<HTMLDivElement>>;
 export default Grid;
 export { DSGridWithSchema, Grid };

package/dist/types/GridItem.d.ts

@@ -1,3 +1,3 @@
 import { type LayoutProps, type SpaceProps, type SizingProps } from '@elliemae/ds-system';
-import { type DSGridT } from './react-desc-prop-types';
+import { type DSGridT } from './react-desc-prop-types.js';
 export declare const GridItem: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & DSGridT.ItemProps & LayoutProps<import("@xstyled/system").Theme> & SpaceProps & SizingProps<import("@xstyled/system").Theme>, never>;

package/dist/types/config/useGrid.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { DSGridT } from '../react-desc-prop-types';
+import type { DSGridT } from '../react-desc-prop-types.js';
 export declare const useGrid: (props: DSGridT.Props) => {
     propsWithDefaults: DSGridT.InternalProps;
     globalProps: import("@elliemae/ds-props-helpers").GlobalAttributesT<Element>;

package/dist/types/config/useRenderChildren.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { DSGridT } from '../react-desc-prop-types';
+import type { DSGridT } from '../react-desc-prop-types.js';
 export declare const useRenderChildren: (props: DSGridT.InternalProps) => {
     isSpanParent: boolean;
     renderChildren: (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal)[] | null | undefined;

package/dist/types/config/useValidateProps.d.ts

@@ -1,3 +1,3 @@
 import type { WeakValidationMap } from 'react';
-import type { DSGridT } from '../react-desc-prop-types';
+import type { DSGridT } from '../react-desc-prop-types.js';
 export declare const useValidateProps: (props: DSGridT.InternalProps, propTypes: WeakValidationMap<unknown>) => void;

package/dist/types/index.d.ts

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

package/dist/types/utils/styles.d.ts

@@ -1,4 +1,4 @@
-import type { DSGridT } from '../react-desc-prop-types';
+import type { DSGridT } from '../react-desc-prop-types.js';
 export declare const manageSpan: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<DSGridT.ItemProps, import("@xstyled/system").Theme>>;
 export declare const manageCols: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<DSGridT.ItemProps, import("@xstyled/system").Theme>>;
 export declare const manageRows: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<DSGridT.ItemProps, import("@xstyled/system").Theme>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-grid",
-  "version": "3.16.0",
+  "version": "3.16.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Grid",
   "files": [
@@ -63,17 +63,17 @@
     "indent": 4
   },
   "dependencies": {
-    "@xstyled/system": "~3.7.0",
-    "@elliemae/ds-props-helpers": "3.16.0",
-    "@elliemae/ds-system": "3.16.0",
-    "@elliemae/ds-utilities": "3.16.0"
+    "@xstyled/system": "~3.7.3",
+    "@elliemae/ds-props-helpers": "3.16.1",
+    "@elliemae/ds-system": "3.16.1",
+    "@elliemae/ds-utilities": "3.16.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.16.4",
+    "@testing-library/jest-dom": "~5.16.5",
     "@testing-library/react": "~12.1.3",
     "@testing-library/user-event": "~13.5.0",
     "react-test-renderer": "~17.0.2",
-    "styled-components": "~5.3.6"
+    "styled-components": "~5.3.9"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",