@elliemae/ds-grid 3.17.0-next.9 → 3.17.0

package/dist/cjs/Grid.js

@@ -43,7 +43,19 @@ 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 },
+    propsWithDefaults: {
+      withMaxWidthBreakpoints,
+      alignItems,
+      cols,
+      children,
+      rows,
+      gutter,
+      justify,
+      wrap,
+      width,
+      height,
+      ...rest
+    },
     globalProps,
     xstyledProps,
     isSpanParent,
@@ -66,6 +78,7 @@ const Grid = import_react.default.forwardRef((props, ref) => {
       ...xstyledProps,
       w: width,
       h: height,
+      withMaxWidthBreakpoints,
       children: renderChildren
     }
   );

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.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;",
+  "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: {\n      withMaxWidthBreakpoints,\n      alignItems,\n      cols,\n      children,\n      rows,\n      gutter,\n      justify,\n      wrap,\n      width,\n      height,\n      ...rest\n    },\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      withMaxWidthBreakpoints={withMaxWidthBreakpoints}\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;AD8BnB;AA9BJ,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;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;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,MACH;AAAA,MAEC;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

@@ -33,7 +33,20 @@ __export(GridItem_exports, {
 module.exports = __toCommonJS(GridItem_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
+var import_manageSpanParent = require("./utils/manageSpanParent.js");
+var import_manageCols = require("./utils/manageCols.js");
+var import_manageRows = require("./utils/manageRows.js");
 var import_styles = require("./utils/styles.js");
+const gridV2 = import_ds_system.css`
+  ${import_manageCols.manageColsV2}
+  ${import_manageRows.manageRowsV2}
+  ${import_manageSpanParent.manageSpanParent}
+`;
+const gridV1 = import_ds_system.css`
+  ${import_styles.manageCols}
+  ${import_styles.manageRows}
+  ${import_styles.manageSpan}
+`;
 const GridItem = import_ds_system.styled.div`
   display: grid;
   display: -ms-grid;
@@ -43,9 +56,7 @@ const GridItem = import_ds_system.styled.div`
   ${import_ds_system.flexboxes}
   ${import_ds_system.sizing}
   ${import_ds_system.space}
-  ${import_styles.manageCols}
-  ${import_styles.manageRows}
-  ${import_styles.manageSpan}
+  ${({ withMaxWidthBreakpoints }) => withMaxWidthBreakpoints ? gridV2 : gridV1}
   ${import_ds_system.boxShadows}
   ${import_ds_system.borders}
   ${import_ds_system.background}

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  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;",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport {\n  styled,\n  css,\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 { manageSpanParent } from './utils/manageSpanParent.js';\nimport { manageColsV2 } from './utils/manageCols.js';\nimport { manageRowsV2 } from './utils/manageRows.js';\nimport { type DSGridT } from './react-desc-prop-types.js';\nimport { manageCols, manageRows, manageSpan } from './utils/styles.js';\n\nconst gridV2 = css<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\n  ${manageColsV2}\n  ${manageRowsV2}\n  ${manageSpanParent}\n`;\n\nconst gridV1 = css`\n  ${manageCols}\n  ${manageRows}\n  ${manageSpan}\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  ${({ withMaxWidthBreakpoints }) => (withMaxWidthBreakpoints ? gridV2 : gridV1)}\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,uBAeO;AACP,8BAAiC;AACjC,wBAA6B;AAC7B,wBAA6B;AAE7B,oBAAmD;AAEnD,MAAM,SAAS;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;AAGJ,MAAM,SAAS;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;AAEG,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,CAAC,EAAE,wBAAwB,MAAO,0BAA0B,SAAS;AAAA,IACrE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
   "names": []
 }

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

@@ -76,6 +76,7 @@ const DSGridPropTypes = {
   justifyContent: import_ds_props_helpers.PropTypes.oneOf(import_constants.justifyPlacement).description("flex-like justify prop").defaultValue(import_constants.justifyPlacement[0]),
   gutter: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.string]).description("Space between cells prop").defaultValue(0),
   wrap: import_ds_props_helpers.PropTypes.oneOf(import_constants.wrap).description("Wrap type").defaultValue(import_constants.wrap[0]),
+  withMaxWidthBreakpoints: import_ds_props_helpers.PropTypes.bool.description("weather use max width").defaultValue(void 0),
   height: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.string]).description("Grid height."),
   width: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.string]).description("Grid width."),
   backgroundColor: import_ds_props_helpers.PropTypes.string.description("Sets background color."),

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.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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",
+  "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 | (string | number)[];\n    medium?: string | number | (string | number)[];\n    large?: string | number | (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    withMaxWidthBreakpoints?: boolean;\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    withMaxWidthBreakpoints?: boolean;\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  withMaxWidthBreakpoints: PropTypes.bool.description('weather use max width').defaultValue(undefined),\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/manageCols.js

@@ -0,0 +1,122 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var manageCols_exports = {};
+__export(manageCols_exports, {
+  manageColsV2: () => manageColsV2
+});
+module.exports = __toCommonJS(manageCols_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+const colsIsBreakpointDefinition = (cols) => typeof cols === "object" && !Array.isArray(cols);
+const generateColsCssStringForArray = (colsVal) => {
+  const mtg = (0, import_ds_system.mapTemplateGrid)(colsVal).join(" ");
+  const mtgs = (0, import_ds_system.mapTemplateGrid)(colsVal).map((c) => `minmax(0, ${c})`).join(" ");
+  return `
+      -ms-grid-columns: ${mtg || "minmax(0px, 1fr)"};
+      grid-template-columns: ${mtg || "auto"};
+      -ms-grid-columns: ${mtgs || "minmax(0px, 1fr)"};
+      grid-template-columns: ${mtgs || "auto"};
+    `;
+};
+const generateColsCssStringForBootstrapLikeishScenario = (colsVal) => `
+      -ms-grid-columns: repeat(${colsVal}, 1fr);
+      grid-template-columns: repeat(${colsVal}, 1fr);
+    `;
+const generateColsWithMediaQueries = (cols, theme, isSpanParent) => {
+  const finalMediaDeclaration = [];
+  if (cols.large) {
+    let cssString = "";
+    if (Array.isArray(cols.large)) {
+      cssString = generateColsCssStringForArray(cols.large);
+    } else if (isSpanParent) {
+      cssString = generateColsCssStringForBootstrapLikeishScenario(cols.large);
+    }
+    finalMediaDeclaration.push(theme.media.large`${cssString}`);
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        import_ds_system.css`
+          ${cssString}
+        `
+      );
+  }
+  if (cols.medium) {
+    let cssString = "";
+    if (Array.isArray(cols.medium)) {
+      cssString = generateColsCssStringForArray(cols.medium);
+    } else if (isSpanParent) {
+      cssString = generateColsCssStringForBootstrapLikeishScenario(cols.medium);
+    }
+    finalMediaDeclaration.push(theme.media.medium`${cssString}`);
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        import_ds_system.css`
+          ${cssString}
+        `
+      );
+  }
+  if (cols.small) {
+    let cssString = "";
+    if (Array.isArray(cols.small)) {
+      cssString = generateColsCssStringForArray(cols.small);
+    } else if (isSpanParent) {
+      cssString = generateColsCssStringForBootstrapLikeishScenario(cols.small);
+    }
+    finalMediaDeclaration.push(theme.media.small`${cssString}`);
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        import_ds_system.css`
+          ${cssString}
+        `
+      );
+  }
+  return finalMediaDeclaration;
+};
+const manageColsV2 = ({ cols, theme, isSpanParent }) => {
+  if (colsIsBreakpointDefinition(cols)) {
+    return generateColsWithMediaQueries(cols, theme, isSpanParent);
+  }
+  if (Array.isArray(cols)) {
+    const cssString = generateColsCssStringForArray(cols);
+    return [
+      import_ds_system.css`
+        ${cssString}
+      `
+    ];
+  }
+  if (isSpanParent) {
+    const cssString = generateColsCssStringForBootstrapLikeishScenario(cols);
+    return [
+      import_ds_system.css`
+        ${cssString}
+      `
+    ];
+  }
+  return [import_ds_system.css``];
+};
+//# sourceMappingURL=manageCols.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/manageCols.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type { DSGridT } from '../react-desc-prop-types.js';\nimport type { Theme } from '@elliemae/pui-theme';\n\ntype BreakPointObject = {\n  large?: string | number | (string | number)[];\n  medium?: string | number | (string | number)[];\n  small?: string | number | (string | number)[];\n};\n// this typeguard is not extremely accurate but it has historically been like this and we need to avoid breaking changes\nconst colsIsBreakpointDefinition = (cols: unknown): cols is BreakPointObject =>\n  typeof cols === 'object' && !Array.isArray(cols);\ntype InterpolatedFunctionProps = {\n  theme: Theme;\n} & DSGridT.ItemProps;\n\nconst generateColsCssStringForArray = (colsVal: (string | number)[]): string => {\n  // mtg and mtgs are used to support mapping different ways of defining the cols\n  // when mtg produces valid css, mtgs will produce invalid css and vice-versa\n  // only one of them will be effectively applied by the browser\n  const mtg = (mapTemplateGrid(colsVal) as string[]).join(' ');\n  const mtgs = (mapTemplateGrid(colsVal) 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};\nconst generateColsCssStringForBootstrapLikeishScenario = (colsVal: string | number): string => `\n      -ms-grid-columns: repeat(${colsVal}, 1fr);\n      grid-template-columns: repeat(${colsVal}, 1fr);\n    `;\nconst generateColsWithMediaQueries = (\n  cols: BreakPointObject,\n  theme: Theme,\n  isSpanParent: boolean,\n): ReturnType<typeof css>[] => {\n  const finalMediaDeclaration: ReturnType<typeof css>[] = [];\n  // we conditionally push into the array the media queries because grid cols definitions supports partial definitions\n  //  meaning that you can define cols only for small and medium and not for large\n  //  in such case we want to avoid generating media queries for large\n  //  we also need to make sure that the largest definition is used as the default one\n  if (cols.large) {\n    // we apply different styles for defintions that are arrays and definitions that are not\n    //  specifically when the definition are NOT arrays we check if the parent is a span tag\n    //    if it is we try to copy bootstrap's behavior and use repeat css grid function\n    let cssString = '';\n    if (Array.isArray(cols.large)) {\n      cssString = generateColsCssStringForArray(cols.large);\n    } else if (isSpanParent) {\n      cssString = generateColsCssStringForBootstrapLikeishScenario(cols.large);\n    }\n    finalMediaDeclaration.push(theme.media.large`${cssString}`);\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n  }\n  if (cols.medium) {\n    // we apply different styles for defintions that are arrays and definitions that are not\n    //  specifically when the definition are NOT arrays we check if the parent is a span tag\n    //    if it is we try to copy bootstrap's behavior and use repeat css grid function\n    let cssString = '';\n    if (Array.isArray(cols.medium)) {\n      cssString = generateColsCssStringForArray(cols.medium);\n    } else if (isSpanParent) {\n      cssString = generateColsCssStringForBootstrapLikeishScenario(cols.medium);\n    }\n    finalMediaDeclaration.push(theme.media.medium`${cssString}`);\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n  }\n  if (cols.small) {\n    // we apply different styles for defintions that are arrays and definitions that are not\n    //  specifically when the definition are NOT arrays we check if the parent is a span tag\n    //    if it is we try to copy bootstrap's behavior and use repeat css grid function\n    let cssString = '';\n    if (Array.isArray(cols.small)) {\n      cssString = generateColsCssStringForArray(cols.small);\n    } else if (isSpanParent) {\n      cssString = generateColsCssStringForBootstrapLikeishScenario(cols.small);\n    }\n    finalMediaDeclaration.push(theme.media.small`${cssString}`);\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n  }\n  return finalMediaDeclaration;\n};\n\nexport const manageColsV2 = ({ cols, theme, isSpanParent }: InterpolatedFunctionProps): ReturnType<typeof css>[] => {\n  // we want to be extremely explicit with how we handle the different use-cases\n  // the component is quite old and has been tailored to fit the needs of the different use-cases\n  // even ones that should have not been supported in the first place (isSpanParent to simulate bootstrap, different kind of cols definitions, etc)\n  // support for\n  //  cols:{small: 1, medium: 2, large: 3}\n  //     AND\n  //  cols: {small: ['1fr'], medium: ['160px'], large: ['400px'] }\n  if (colsIsBreakpointDefinition(cols)) {\n    // there is no way to guarantee dynamic co-relation between pui-theme and the grid component\n    //  any change in the theme will break the co-relation and we would need to update the component\n    //  for such reason we are optimizing for maintainability and not scalability\n    return generateColsWithMediaQueries(cols, theme, isSpanParent);\n  }\n\n  // support for cols: ['1fr', '1fr', '1fr'] && cols: [1, 1, 1]\n  if (Array.isArray(cols)) {\n    const cssString = generateColsCssStringForArray(cols);\n    return [\n      css`\n        ${cssString}\n      `,\n    ];\n  }\n  // support for parent is span and  is like cols: 3\n  if (isSpanParent) {\n    const cssString = generateColsCssStringForBootstrapLikeishScenario(cols);\n    return [\n      css`\n        ${cssString}\n      `,\n    ];\n  }\n  // fallback is not doing anything\n  return [css``];\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAAqC;AAUrC,MAAM,6BAA6B,CAAC,SAClC,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI;AAKjD,MAAM,gCAAgC,CAAC,YAAyC;AAI9E,QAAM,UAAO,kCAAgB,OAAO,EAAe,KAAK,GAAG;AAC3D,QAAM,WAAQ,kCAAgB,OAAO,EAAe,IAAI,CAAC,MAAM,aAAa,IAAI,EAAE,KAAK,GAAG;AAC1F,SAAO;AAAA,0BACiB,OAAO;AAAA,+BACF,OAAO;AAAA,0BACZ,QAAQ;AAAA,+BACH,QAAQ;AAAA;AAEvC;AACA,MAAM,mDAAmD,CAAC,YAAqC;AAAA,iCAC9D;AAAA,sCACK;AAAA;AAEtC,MAAM,+BAA+B,CACnC,MACA,OACA,iBAC6B;AAC7B,QAAM,wBAAkD,CAAC;AAKzD,MAAI,KAAK,OAAO;AAId,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,KAAK,GAAG;AAC7B,kBAAY,8BAA8B,KAAK,KAAK;AAAA,IACtD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,KAAK;AAAA,IACzE;AACA,0BAAsB,KAAK,MAAM,MAAM,QAAQ,WAAW;AAC1D,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AAAA,EACJ;AACA,MAAI,KAAK,QAAQ;AAIf,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,MAAM,GAAG;AAC9B,kBAAY,8BAA8B,KAAK,MAAM;AAAA,IACvD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,MAAM;AAAA,IAC1E;AACA,0BAAsB,KAAK,MAAM,MAAM,SAAS,WAAW;AAC3D,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AAAA,EACJ;AACA,MAAI,KAAK,OAAO;AAId,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,KAAK,GAAG;AAC7B,kBAAY,8BAA8B,KAAK,KAAK;AAAA,IACtD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,KAAK;AAAA,IACzE;AACA,0BAAsB,KAAK,MAAM,MAAM,QAAQ,WAAW;AAC1D,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AAAA,EACJ;AACA,SAAO;AACT;AAEO,MAAM,eAAe,CAAC,EAAE,MAAM,OAAO,aAAa,MAA2D;AAQlH,MAAI,2BAA2B,IAAI,GAAG;AAIpC,WAAO,6BAA6B,MAAM,OAAO,YAAY;AAAA,EAC/D;AAGA,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,UAAM,YAAY,8BAA8B,IAAI;AACpD,WAAO;AAAA,MACL;AAAA,UACI;AAAA;AAAA,IAEN;AAAA,EACF;AAEA,MAAI,cAAc;AAChB,UAAM,YAAY,iDAAiD,IAAI;AACvE,WAAO;AAAA,MACL;AAAA,UACI;AAAA;AAAA,IAEN;AAAA,EACF;AAEA,SAAO,CAAC,sBAAK;AACf;",
+  "names": []
+}

package/dist/cjs/utils/manageRows.js

@@ -0,0 +1,122 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var manageRows_exports = {};
+__export(manageRows_exports, {
+  manageRowsV2: () => manageRowsV2
+});
+module.exports = __toCommonJS(manageRows_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+const rowsIsBreakpointDefinition = (rows) => typeof rows === "object" && !Array.isArray(rows);
+const generateRowsCssStringForArray = (rowsVal) => {
+  const mtg = (0, import_ds_system.mapTemplateGrid)(rowsVal).join(" ");
+  const mtgs = (0, import_ds_system.mapTemplateGrid)(rowsVal).map((c) => `minmax(0, ${c})`).join(" ");
+  return `
+      -ms-grid-rows: ${mtg || "minmax(0px, 1fr)"};
+      grid-template-rows: ${mtg || "auto"};
+      -ms-grid-rows: ${mtgs || "minmax(0px, 1fr)"};
+      grid-template-rows: ${mtgs || "auto"};
+    `;
+};
+const generateRowsCssStringForBootstrapLikeishScenario = (rowsVal) => `
+      -ms-grid-rows: repeat(${rowsVal}, 1fr);
+      grid-template-rows: repeat(${rowsVal}, 1fr);
+    `;
+const generateRowsWithMediaQueries = (rows, theme, isSpanParent) => {
+  const finalMediaDeclaration = [];
+  if (rows.large) {
+    let cssString = "";
+    if (Array.isArray(rows.large)) {
+      cssString = generateRowsCssStringForArray(rows.large);
+    } else if (isSpanParent) {
+      cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.large);
+    }
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        import_ds_system.css`
+          ${cssString}
+        `
+      );
+    finalMediaDeclaration.push(theme.media.large`${cssString}`);
+  }
+  if (rows.medium) {
+    let cssString = "";
+    if (Array.isArray(rows.medium)) {
+      cssString = generateRowsCssStringForArray(rows.medium);
+    } else if (isSpanParent) {
+      cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.medium);
+    }
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        import_ds_system.css`
+          ${cssString}
+        `
+      );
+    finalMediaDeclaration.push(theme.media.medium`${cssString}`);
+  }
+  if (rows.small) {
+    let cssString = "";
+    if (Array.isArray(rows.small)) {
+      cssString = generateRowsCssStringForArray(rows.small);
+    } else if (isSpanParent) {
+      cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.small);
+    }
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        import_ds_system.css`
+          ${cssString}
+        `
+      );
+    finalMediaDeclaration.push(theme.media.small`${cssString}`);
+  }
+  return finalMediaDeclaration;
+};
+const manageRowsV2 = ({ rows, theme, isSpanParent }) => {
+  if (rowsIsBreakpointDefinition(rows)) {
+    return generateRowsWithMediaQueries(rows, theme, isSpanParent);
+  }
+  if (Array.isArray(rows)) {
+    const cssString = generateRowsCssStringForArray(rows);
+    return [
+      import_ds_system.css`
+        ${cssString}
+      `
+    ];
+  }
+  if (isSpanParent) {
+    const cssString = generateRowsCssStringForBootstrapLikeishScenario(rows);
+    return [
+      import_ds_system.css`
+        ${cssString}
+      `
+    ];
+  }
+  return [import_ds_system.css``];
+};
+//# sourceMappingURL=manageRows.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/manageRows.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type { DSGridT } from '../react-desc-prop-types.js';\nimport type { Theme } from '@elliemae/pui-theme';\n\ntype BreakPointObject = {\n  large?: string | number | (string | number)[];\n  medium?: string | number | (string | number)[];\n  small?: string | number | (string | number)[];\n};\n// this typeguard is not extremely accurate but it has historically been like this and we need to avoid breaking changes\nconst rowsIsBreakpointDefinition = (rows: unknown): rows is BreakPointObject =>\n  typeof rows === 'object' && !Array.isArray(rows);\ntype InterpolatedFunctionProps = {\n  theme: Theme;\n} & DSGridT.ItemProps;\n\nconst generateRowsCssStringForArray = (rowsVal: (string | number)[]): string => {\n  // mtg and mtgs are used to support mapping different ways of defining the rows\n  // when mtg produces valid css, mtgs will produce invalid css and vice-versa\n  // only one of them will be effectively applied by the browser\n  const mtg = (mapTemplateGrid(rowsVal) as string[]).join(' ');\n  const mtgs = (mapTemplateGrid(rowsVal) 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};\nconst generateRowsCssStringForBootstrapLikeishScenario = (rowsVal: string | number): string => `\n      -ms-grid-rows: repeat(${rowsVal}, 1fr);\n      grid-template-rows: repeat(${rowsVal}, 1fr);\n    `;\nconst generateRowsWithMediaQueries = (\n  rows: BreakPointObject,\n  theme: Theme,\n  isSpanParent: boolean,\n): ReturnType<typeof css>[] => {\n  const finalMediaDeclaration: ReturnType<typeof css>[] = [];\n  // we conditionally push into the array the media queries because grid rows definitions supports partial definitions\n  //  meaning that you can define rows only for small and medium and not for large\n  //  in such case we want to avoid generating media queries for large\n  //  we also need to make sure that the largest definition is used as the default one\n  if (rows.large) {\n    // we apply different styles for defintions that are arrays and definitions that are not\n    //  specifically when the definition are NOT arrays we check if the parent is a span tag\n    //    if it is we try to copy bootstrap's behavior and use repeat css grid function\n    let cssString = '';\n    if (Array.isArray(rows.large)) {\n      cssString = generateRowsCssStringForArray(rows.large);\n    } else if (isSpanParent) {\n      cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.large);\n    }\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n    finalMediaDeclaration.push(theme.media.large`${cssString}`);\n  }\n  if (rows.medium) {\n    // we apply different styles for defintions that are arrays and definitions that are not\n    //  specifically when the definition are NOT arrays we check if the parent is a span tag\n    //    if it is we try to copy bootstrap's behavior and use repeat css grid function\n    let cssString = '';\n    if (Array.isArray(rows.medium)) {\n      cssString = generateRowsCssStringForArray(rows.medium);\n    } else if (isSpanParent) {\n      cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.medium);\n    }\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n    finalMediaDeclaration.push(theme.media.medium`${cssString}`);\n  }\n  if (rows.small) {\n    // we apply different styles for defintions that are arrays and definitions that are not\n    //  specifically when the definition are NOT arrays we check if the parent is a span tag\n    //    if it is we try to copy bootstrap's behavior and use repeat css grid function\n    let cssString = '';\n    if (Array.isArray(rows.small)) {\n      cssString = generateRowsCssStringForArray(rows.small);\n    } else if (isSpanParent) {\n      cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.small);\n    }\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n    finalMediaDeclaration.push(theme.media.small`${cssString}`);\n  }\n  return finalMediaDeclaration;\n};\n\nexport const manageRowsV2 = ({ rows, theme, isSpanParent }: InterpolatedFunctionProps): ReturnType<typeof css>[] => {\n  // we want to be extremely explicit with how we handle the different use-cases\n  // the component is quite old and has been tailored to fit the needs of the different use-cases\n  // even ones that should have not been supported in the first place (isSpanParent to simulate bootstrap, different kind of rows definitions, etc)\n  // support for\n  //  rows:{small: 1, medium: 2, large: 3}\n  //     AND\n  //  rows: {small: ['1fr'], medium: ['160px'], large: ['400px'] }\n  if (rowsIsBreakpointDefinition(rows)) {\n    // there is no way to guarantee dynamic co-relation between pui-theme and the grid component\n    //  any change in the theme will break the co-relation and we would need to update the component\n    //  for such reason we are optimizing for maintainability and not scalability\n    return generateRowsWithMediaQueries(rows, theme, isSpanParent);\n  }\n\n  // support for rows: ['1fr', '1fr', '1fr'] && rows: [1, 1, 1]\n  if (Array.isArray(rows)) {\n    const cssString = generateRowsCssStringForArray(rows);\n    return [\n      css`\n        ${cssString}\n      `,\n    ];\n  }\n  // support for parent is span and  is like rows: 3\n  if (isSpanParent) {\n    const cssString = generateRowsCssStringForBootstrapLikeishScenario(rows);\n    return [\n      css`\n        ${cssString}\n      `,\n    ];\n  }\n  // fallback is not doing anything\n  return [css``];\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAAqC;AAUrC,MAAM,6BAA6B,CAAC,SAClC,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI;AAKjD,MAAM,gCAAgC,CAAC,YAAyC;AAI9E,QAAM,UAAO,kCAAgB,OAAO,EAAe,KAAK,GAAG;AAC3D,QAAM,WAAQ,kCAAgB,OAAO,EAAe,IAAI,CAAC,MAAM,aAAa,IAAI,EAAE,KAAK,GAAG;AAC1F,SAAO;AAAA,uBACc,OAAO;AAAA,4BACF,OAAO;AAAA,uBACZ,QAAQ;AAAA,4BACH,QAAQ;AAAA;AAEpC;AACA,MAAM,mDAAmD,CAAC,YAAqC;AAAA,8BACjE;AAAA,mCACK;AAAA;AAEnC,MAAM,+BAA+B,CACnC,MACA,OACA,iBAC6B;AAC7B,QAAM,wBAAkD,CAAC;AAKzD,MAAI,KAAK,OAAO;AAId,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,KAAK,GAAG;AAC7B,kBAAY,8BAA8B,KAAK,KAAK;AAAA,IACtD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,KAAK;AAAA,IACzE;AACA,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AACF,0BAAsB,KAAK,MAAM,MAAM,QAAQ,WAAW;AAAA,EAC5D;AACA,MAAI,KAAK,QAAQ;AAIf,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,MAAM,GAAG;AAC9B,kBAAY,8BAA8B,KAAK,MAAM;AAAA,IACvD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,MAAM;AAAA,IAC1E;AACA,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AACF,0BAAsB,KAAK,MAAM,MAAM,SAAS,WAAW;AAAA,EAC7D;AACA,MAAI,KAAK,OAAO;AAId,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,KAAK,GAAG;AAC7B,kBAAY,8BAA8B,KAAK,KAAK;AAAA,IACtD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,KAAK;AAAA,IACzE;AACA,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AACF,0BAAsB,KAAK,MAAM,MAAM,QAAQ,WAAW;AAAA,EAC5D;AACA,SAAO;AACT;AAEO,MAAM,eAAe,CAAC,EAAE,MAAM,OAAO,aAAa,MAA2D;AAQlH,MAAI,2BAA2B,IAAI,GAAG;AAIpC,WAAO,6BAA6B,MAAM,OAAO,YAAY;AAAA,EAC/D;AAGA,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,UAAM,YAAY,8BAA8B,IAAI;AACpD,WAAO;AAAA,MACL;AAAA,UACI;AAAA;AAAA,IAEN;AAAA,EACF;AAEA,MAAI,cAAc;AAChB,UAAM,YAAY,iDAAiD,IAAI;AACvE,WAAO;AAAA,MACL;AAAA,UACI;AAAA;AAAA,IAEN;AAAA,EACF;AAEA,SAAO,CAAC,sBAAK;AACf;",
+  "names": []
+}

package/dist/cjs/utils/manageSpanParent.js

@@ -0,0 +1,90 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var manageSpanParent_exports = {};
+__export(manageSpanParent_exports, {
+  manageSpanParent: () => manageSpanParent
+});
+module.exports = __toCommonJS(manageSpanParent_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+const generateCssStringForSpan = (span) => `
+  -ms-grid-column: auto / span ${span};
+  grid-column: auto / span ${span};
+`;
+const manageSpanParent = ({
+  isSpanParent,
+  span,
+  theme
+}) => {
+  if (!isSpanParent)
+    return [import_ds_system.css``];
+  if (typeof span === "number") {
+    return [
+      import_ds_system.css`
+        -ms-grid-column: auto / span ${span};
+        grid-column: auto / span ${span};
+      `
+    ];
+  }
+  if (typeof span !== "object")
+    return [import_ds_system.css``];
+  const finalMediaDeclaration = [];
+  if (span.large) {
+    const cssString = generateCssStringForSpan(span.large);
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        import_ds_system.css`
+          ${cssString}
+        `
+      );
+    finalMediaDeclaration.push(theme.media.large`${cssString}`);
+  }
+  if (span.medium) {
+    const cssString = generateCssStringForSpan(span.medium);
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        import_ds_system.css`
+          ${cssString}
+        `
+      );
+    finalMediaDeclaration.push(theme.media.medium`${cssString}`);
+  }
+  if (span.small) {
+    const cssString = generateCssStringForSpan(span.small);
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        import_ds_system.css`
+          ${cssString}
+        `
+      );
+    finalMediaDeclaration.push(theme.media.small`${cssString}`);
+  }
+  return finalMediaDeclaration;
+};
+//# sourceMappingURL=manageSpanParent.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/manageSpanParent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { css } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n\ntype InterpolatedFunctionProps = {\n  theme: Theme;\n} & DSGridT.ItemProps;\n\nconst generateCssStringForSpan = (span: number): string => `\n  -ms-grid-column: auto / span ${span};\n  grid-column: auto / span ${span};\n`;\n// This is used to support bootrap like-ish way of using the grid component\nexport const manageSpanParent = ({\n  isSpanParent,\n  span,\n  theme,\n}: InterpolatedFunctionProps): ReturnType<typeof css>[] => {\n  // If it's not a span parent, we don't need to do anything\n  if (!isSpanParent) return [css``];\n\n  // if span is a number we don't add media queries\n  if (typeof span === 'number') {\n    return [\n      css`\n        -ms-grid-column: auto / span ${span};\n        grid-column: auto / span ${span};\n      `,\n    ];\n  }\n  // the only remaining valid definition for our supported types is an object, if it's not an object we fallback to doing nothing\n  if (typeof span !== 'object') return [css``];\n\n  // Span object\n\n  const finalMediaDeclaration: ReturnType<typeof css>[] = [];\n  // we conditionally push into the array the media queries because span definitions supports partial definitions\n  //  meaning that you can define spans only for small and medium and not for large\n  //  in such case we want to avoid generating media queries for large\n  //  we also need to make sure that the largest definition is used as the default one\n  if (span.large) {\n    const cssString = generateCssStringForSpan(span.large);\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n    finalMediaDeclaration.push(theme.media.large`${cssString}`);\n  }\n  if (span.medium) {\n    const cssString = generateCssStringForSpan(span.medium);\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n    finalMediaDeclaration.push(theme.media.medium`${cssString}`);\n  }\n  if (span.small) {\n    const cssString = generateCssStringForSpan(span.small);\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n    finalMediaDeclaration.push(theme.media.small`${cssString}`);\n  }\n  return finalMediaDeclaration;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAoB;AAQpB,MAAM,2BAA2B,CAAC,SAAyB;AAAA,iCAC1B;AAAA,6BACJ;AAAA;AAGtB,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,MAA2D;AAEzD,MAAI,CAAC;AAAc,WAAO,CAAC,sBAAK;AAGhC,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO;AAAA,MACL;AAAA,uCACiC;AAAA,mCACJ;AAAA;AAAA,IAE/B;AAAA,EACF;AAEA,MAAI,OAAO,SAAS;AAAU,WAAO,CAAC,sBAAK;AAI3C,QAAM,wBAAkD,CAAC;AAKzD,MAAI,KAAK,OAAO;AACd,UAAM,YAAY,yBAAyB,KAAK,KAAK;AACrD,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AACF,0BAAsB,KAAK,MAAM,MAAM,QAAQ,WAAW;AAAA,EAC5D;AACA,MAAI,KAAK,QAAQ;AACf,UAAM,YAAY,yBAAyB,KAAK,MAAM;AACtD,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AACF,0BAAsB,KAAK,MAAM,MAAM,SAAS,WAAW;AAAA,EAC7D;AACA,MAAI,KAAK,OAAO;AACd,UAAM,YAAY,yBAAyB,KAAK,KAAK;AACrD,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AACF,0BAAsB,KAAK,MAAM,MAAM,QAAQ,WAAW;AAAA,EAC5D;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/Grid.js

@@ -8,7 +8,19 @@ 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 },
+    propsWithDefaults: {
+      withMaxWidthBreakpoints,
+      alignItems,
+      cols,
+      children,
+      rows,
+      gutter,
+      justify,
+      wrap,
+      width,
+      height,
+      ...rest
+    },
     globalProps,
     xstyledProps,
     isSpanParent,
@@ -31,6 +43,7 @@ const Grid = React2.forwardRef((props, ref) => {
       ...xstyledProps,
       w: width,
       h: height,
+      withMaxWidthBreakpoints,
       children: renderChildren
     }
   );

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.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;",
+  "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: {\n      withMaxWidthBreakpoints,\n      alignItems,\n      cols,\n      children,\n      rows,\n      gutter,\n      justify,\n      wrap,\n      width,\n      height,\n      ...rest\n    },\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      withMaxWidthBreakpoints={withMaxWidthBreakpoints}\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;AC8BnB;AA9BJ,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;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;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,MACH;AAAA,MAEC;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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import {
   styled,
+  css,
   mapGap,
   background,
   borders,
@@ -11,7 +12,20 @@ import {
   grids,
   layout
 } from "@elliemae/ds-system";
+import { manageSpanParent } from "./utils/manageSpanParent.js";
+import { manageColsV2 } from "./utils/manageCols.js";
+import { manageRowsV2 } from "./utils/manageRows.js";
 import { manageCols, manageRows, manageSpan } from "./utils/styles.js";
+const gridV2 = css`
+  ${manageColsV2}
+  ${manageRowsV2}
+  ${manageSpanParent}
+`;
+const gridV1 = css`
+  ${manageCols}
+  ${manageRows}
+  ${manageSpan}
+`;
 const GridItem = styled.div`
   display: grid;
   display: -ms-grid;
@@ -21,9 +35,7 @@ const GridItem = styled.div`
   ${flexboxes}
   ${sizing}
   ${space}
-  ${manageCols}
-  ${manageRows}
-  ${manageSpan}
+  ${({ withMaxWidthBreakpoints }) => withMaxWidthBreakpoints ? gridV2 : gridV1}
   ${boxShadows}
   ${borders}
   ${background}

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  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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport {\n  styled,\n  css,\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 { manageSpanParent } from './utils/manageSpanParent.js';\nimport { manageColsV2 } from './utils/manageCols.js';\nimport { manageRowsV2 } from './utils/manageRows.js';\nimport { type DSGridT } from './react-desc-prop-types.js';\nimport { manageCols, manageRows, manageSpan } from './utils/styles.js';\n\nconst gridV2 = css<DSGridT.ItemProps & LayoutProps & SpaceProps & SizingProps>`\n  ${manageColsV2}\n  ${manageRowsV2}\n  ${manageSpanParent}\n`;\n\nconst gridV1 = css`\n  ${manageCols}\n  ${manageRows}\n  ${manageSpan}\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  ${({ withMaxWidthBreakpoints }) => (withMaxWidthBreakpoints ? gridV2 : gridV1)}\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,EACA;AAAA,OAIK;AACP,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAE7B,SAAS,YAAY,YAAY,kBAAkB;AAEnD,MAAM,SAAS;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;AAGJ,MAAM,SAAS;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;AAEG,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,CAAC,EAAE,wBAAwB,MAAO,0BAA0B,SAAS;AAAA,IACrE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;",
   "names": []
 }

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

@@ -42,6 +42,7 @@ const DSGridPropTypes = {
   justifyContent: PropTypes.oneOf(justifyPlacement).description("flex-like justify prop").defaultValue(justifyPlacement[0]),
   gutter: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Space between cells prop").defaultValue(0),
   wrap: PropTypes.oneOf(wrap).description("Wrap type").defaultValue(wrap[0]),
+  withMaxWidthBreakpoints: PropTypes.bool.description("weather use max width").defaultValue(void 0),
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid height."),
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Grid width."),
   backgroundColor: PropTypes.string.description("Sets background color."),

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.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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",
+  "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 | (string | number)[];\n    medium?: string | number | (string | number)[];\n    large?: string | number | (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    withMaxWidthBreakpoints?: boolean;\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    withMaxWidthBreakpoints?: boolean;\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  withMaxWidthBreakpoints: PropTypes.bool.description('weather use max width').defaultValue(undefined),\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/manageCols.js

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { css, mapTemplateGrid } from "@elliemae/ds-system";
+const colsIsBreakpointDefinition = (cols) => typeof cols === "object" && !Array.isArray(cols);
+const generateColsCssStringForArray = (colsVal) => {
+  const mtg = mapTemplateGrid(colsVal).join(" ");
+  const mtgs = mapTemplateGrid(colsVal).map((c) => `minmax(0, ${c})`).join(" ");
+  return `
+      -ms-grid-columns: ${mtg || "minmax(0px, 1fr)"};
+      grid-template-columns: ${mtg || "auto"};
+      -ms-grid-columns: ${mtgs || "minmax(0px, 1fr)"};
+      grid-template-columns: ${mtgs || "auto"};
+    `;
+};
+const generateColsCssStringForBootstrapLikeishScenario = (colsVal) => `
+      -ms-grid-columns: repeat(${colsVal}, 1fr);
+      grid-template-columns: repeat(${colsVal}, 1fr);
+    `;
+const generateColsWithMediaQueries = (cols, theme, isSpanParent) => {
+  const finalMediaDeclaration = [];
+  if (cols.large) {
+    let cssString = "";
+    if (Array.isArray(cols.large)) {
+      cssString = generateColsCssStringForArray(cols.large);
+    } else if (isSpanParent) {
+      cssString = generateColsCssStringForBootstrapLikeishScenario(cols.large);
+    }
+    finalMediaDeclaration.push(theme.media.large`${cssString}`);
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        css`
+          ${cssString}
+        `
+      );
+  }
+  if (cols.medium) {
+    let cssString = "";
+    if (Array.isArray(cols.medium)) {
+      cssString = generateColsCssStringForArray(cols.medium);
+    } else if (isSpanParent) {
+      cssString = generateColsCssStringForBootstrapLikeishScenario(cols.medium);
+    }
+    finalMediaDeclaration.push(theme.media.medium`${cssString}`);
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        css`
+          ${cssString}
+        `
+      );
+  }
+  if (cols.small) {
+    let cssString = "";
+    if (Array.isArray(cols.small)) {
+      cssString = generateColsCssStringForArray(cols.small);
+    } else if (isSpanParent) {
+      cssString = generateColsCssStringForBootstrapLikeishScenario(cols.small);
+    }
+    finalMediaDeclaration.push(theme.media.small`${cssString}`);
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        css`
+          ${cssString}
+        `
+      );
+  }
+  return finalMediaDeclaration;
+};
+const manageColsV2 = ({ cols, theme, isSpanParent }) => {
+  if (colsIsBreakpointDefinition(cols)) {
+    return generateColsWithMediaQueries(cols, theme, isSpanParent);
+  }
+  if (Array.isArray(cols)) {
+    const cssString = generateColsCssStringForArray(cols);
+    return [
+      css`
+        ${cssString}
+      `
+    ];
+  }
+  if (isSpanParent) {
+    const cssString = generateColsCssStringForBootstrapLikeishScenario(cols);
+    return [
+      css`
+        ${cssString}
+      `
+    ];
+  }
+  return [css``];
+};
+export {
+  manageColsV2
+};
+//# sourceMappingURL=manageCols.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/manageCols.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type { DSGridT } from '../react-desc-prop-types.js';\nimport type { Theme } from '@elliemae/pui-theme';\n\ntype BreakPointObject = {\n  large?: string | number | (string | number)[];\n  medium?: string | number | (string | number)[];\n  small?: string | number | (string | number)[];\n};\n// this typeguard is not extremely accurate but it has historically been like this and we need to avoid breaking changes\nconst colsIsBreakpointDefinition = (cols: unknown): cols is BreakPointObject =>\n  typeof cols === 'object' && !Array.isArray(cols);\ntype InterpolatedFunctionProps = {\n  theme: Theme;\n} & DSGridT.ItemProps;\n\nconst generateColsCssStringForArray = (colsVal: (string | number)[]): string => {\n  // mtg and mtgs are used to support mapping different ways of defining the cols\n  // when mtg produces valid css, mtgs will produce invalid css and vice-versa\n  // only one of them will be effectively applied by the browser\n  const mtg = (mapTemplateGrid(colsVal) as string[]).join(' ');\n  const mtgs = (mapTemplateGrid(colsVal) 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};\nconst generateColsCssStringForBootstrapLikeishScenario = (colsVal: string | number): string => `\n      -ms-grid-columns: repeat(${colsVal}, 1fr);\n      grid-template-columns: repeat(${colsVal}, 1fr);\n    `;\nconst generateColsWithMediaQueries = (\n  cols: BreakPointObject,\n  theme: Theme,\n  isSpanParent: boolean,\n): ReturnType<typeof css>[] => {\n  const finalMediaDeclaration: ReturnType<typeof css>[] = [];\n  // we conditionally push into the array the media queries because grid cols definitions supports partial definitions\n  //  meaning that you can define cols only for small and medium and not for large\n  //  in such case we want to avoid generating media queries for large\n  //  we also need to make sure that the largest definition is used as the default one\n  if (cols.large) {\n    // we apply different styles for defintions that are arrays and definitions that are not\n    //  specifically when the definition are NOT arrays we check if the parent is a span tag\n    //    if it is we try to copy bootstrap's behavior and use repeat css grid function\n    let cssString = '';\n    if (Array.isArray(cols.large)) {\n      cssString = generateColsCssStringForArray(cols.large);\n    } else if (isSpanParent) {\n      cssString = generateColsCssStringForBootstrapLikeishScenario(cols.large);\n    }\n    finalMediaDeclaration.push(theme.media.large`${cssString}`);\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n  }\n  if (cols.medium) {\n    // we apply different styles for defintions that are arrays and definitions that are not\n    //  specifically when the definition are NOT arrays we check if the parent is a span tag\n    //    if it is we try to copy bootstrap's behavior and use repeat css grid function\n    let cssString = '';\n    if (Array.isArray(cols.medium)) {\n      cssString = generateColsCssStringForArray(cols.medium);\n    } else if (isSpanParent) {\n      cssString = generateColsCssStringForBootstrapLikeishScenario(cols.medium);\n    }\n    finalMediaDeclaration.push(theme.media.medium`${cssString}`);\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n  }\n  if (cols.small) {\n    // we apply different styles for defintions that are arrays and definitions that are not\n    //  specifically when the definition are NOT arrays we check if the parent is a span tag\n    //    if it is we try to copy bootstrap's behavior and use repeat css grid function\n    let cssString = '';\n    if (Array.isArray(cols.small)) {\n      cssString = generateColsCssStringForArray(cols.small);\n    } else if (isSpanParent) {\n      cssString = generateColsCssStringForBootstrapLikeishScenario(cols.small);\n    }\n    finalMediaDeclaration.push(theme.media.small`${cssString}`);\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n  }\n  return finalMediaDeclaration;\n};\n\nexport const manageColsV2 = ({ cols, theme, isSpanParent }: InterpolatedFunctionProps): ReturnType<typeof css>[] => {\n  // we want to be extremely explicit with how we handle the different use-cases\n  // the component is quite old and has been tailored to fit the needs of the different use-cases\n  // even ones that should have not been supported in the first place (isSpanParent to simulate bootstrap, different kind of cols definitions, etc)\n  // support for\n  //  cols:{small: 1, medium: 2, large: 3}\n  //     AND\n  //  cols: {small: ['1fr'], medium: ['160px'], large: ['400px'] }\n  if (colsIsBreakpointDefinition(cols)) {\n    // there is no way to guarantee dynamic co-relation between pui-theme and the grid component\n    //  any change in the theme will break the co-relation and we would need to update the component\n    //  for such reason we are optimizing for maintainability and not scalability\n    return generateColsWithMediaQueries(cols, theme, isSpanParent);\n  }\n\n  // support for cols: ['1fr', '1fr', '1fr'] && cols: [1, 1, 1]\n  if (Array.isArray(cols)) {\n    const cssString = generateColsCssStringForArray(cols);\n    return [\n      css`\n        ${cssString}\n      `,\n    ];\n  }\n  // support for parent is span and  is like cols: 3\n  if (isSpanParent) {\n    const cssString = generateColsCssStringForBootstrapLikeishScenario(cols);\n    return [\n      css`\n        ${cssString}\n      `,\n    ];\n  }\n  // fallback is not doing anything\n  return [css``];\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,KAAK,uBAAuB;AAUrC,MAAM,6BAA6B,CAAC,SAClC,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI;AAKjD,MAAM,gCAAgC,CAAC,YAAyC;AAI9E,QAAM,MAAO,gBAAgB,OAAO,EAAe,KAAK,GAAG;AAC3D,QAAM,OAAQ,gBAAgB,OAAO,EAAe,IAAI,CAAC,MAAM,aAAa,IAAI,EAAE,KAAK,GAAG;AAC1F,SAAO;AAAA,0BACiB,OAAO;AAAA,+BACF,OAAO;AAAA,0BACZ,QAAQ;AAAA,+BACH,QAAQ;AAAA;AAEvC;AACA,MAAM,mDAAmD,CAAC,YAAqC;AAAA,iCAC9D;AAAA,sCACK;AAAA;AAEtC,MAAM,+BAA+B,CACnC,MACA,OACA,iBAC6B;AAC7B,QAAM,wBAAkD,CAAC;AAKzD,MAAI,KAAK,OAAO;AAId,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,KAAK,GAAG;AAC7B,kBAAY,8BAA8B,KAAK,KAAK;AAAA,IACtD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,KAAK;AAAA,IACzE;AACA,0BAAsB,KAAK,MAAM,MAAM,QAAQ,WAAW;AAC1D,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AAAA,EACJ;AACA,MAAI,KAAK,QAAQ;AAIf,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,MAAM,GAAG;AAC9B,kBAAY,8BAA8B,KAAK,MAAM;AAAA,IACvD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,MAAM;AAAA,IAC1E;AACA,0BAAsB,KAAK,MAAM,MAAM,SAAS,WAAW;AAC3D,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AAAA,EACJ;AACA,MAAI,KAAK,OAAO;AAId,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,KAAK,GAAG;AAC7B,kBAAY,8BAA8B,KAAK,KAAK;AAAA,IACtD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,KAAK;AAAA,IACzE;AACA,0BAAsB,KAAK,MAAM,MAAM,QAAQ,WAAW;AAC1D,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AAAA,EACJ;AACA,SAAO;AACT;AAEO,MAAM,eAAe,CAAC,EAAE,MAAM,OAAO,aAAa,MAA2D;AAQlH,MAAI,2BAA2B,IAAI,GAAG;AAIpC,WAAO,6BAA6B,MAAM,OAAO,YAAY;AAAA,EAC/D;AAGA,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,UAAM,YAAY,8BAA8B,IAAI;AACpD,WAAO;AAAA,MACL;AAAA,UACI;AAAA;AAAA,IAEN;AAAA,EACF;AAEA,MAAI,cAAc;AAChB,UAAM,YAAY,iDAAiD,IAAI;AACvE,WAAO;AAAA,MACL;AAAA,UACI;AAAA;AAAA,IAEN;AAAA,EACF;AAEA,SAAO,CAAC,KAAK;AACf;",
+  "names": []
+}

package/dist/esm/utils/manageRows.js

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { css, mapTemplateGrid } from "@elliemae/ds-system";
+const rowsIsBreakpointDefinition = (rows) => typeof rows === "object" && !Array.isArray(rows);
+const generateRowsCssStringForArray = (rowsVal) => {
+  const mtg = mapTemplateGrid(rowsVal).join(" ");
+  const mtgs = mapTemplateGrid(rowsVal).map((c) => `minmax(0, ${c})`).join(" ");
+  return `
+      -ms-grid-rows: ${mtg || "minmax(0px, 1fr)"};
+      grid-template-rows: ${mtg || "auto"};
+      -ms-grid-rows: ${mtgs || "minmax(0px, 1fr)"};
+      grid-template-rows: ${mtgs || "auto"};
+    `;
+};
+const generateRowsCssStringForBootstrapLikeishScenario = (rowsVal) => `
+      -ms-grid-rows: repeat(${rowsVal}, 1fr);
+      grid-template-rows: repeat(${rowsVal}, 1fr);
+    `;
+const generateRowsWithMediaQueries = (rows, theme, isSpanParent) => {
+  const finalMediaDeclaration = [];
+  if (rows.large) {
+    let cssString = "";
+    if (Array.isArray(rows.large)) {
+      cssString = generateRowsCssStringForArray(rows.large);
+    } else if (isSpanParent) {
+      cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.large);
+    }
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        css`
+          ${cssString}
+        `
+      );
+    finalMediaDeclaration.push(theme.media.large`${cssString}`);
+  }
+  if (rows.medium) {
+    let cssString = "";
+    if (Array.isArray(rows.medium)) {
+      cssString = generateRowsCssStringForArray(rows.medium);
+    } else if (isSpanParent) {
+      cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.medium);
+    }
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        css`
+          ${cssString}
+        `
+      );
+    finalMediaDeclaration.push(theme.media.medium`${cssString}`);
+  }
+  if (rows.small) {
+    let cssString = "";
+    if (Array.isArray(rows.small)) {
+      cssString = generateRowsCssStringForArray(rows.small);
+    } else if (isSpanParent) {
+      cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.small);
+    }
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        css`
+          ${cssString}
+        `
+      );
+    finalMediaDeclaration.push(theme.media.small`${cssString}`);
+  }
+  return finalMediaDeclaration;
+};
+const manageRowsV2 = ({ rows, theme, isSpanParent }) => {
+  if (rowsIsBreakpointDefinition(rows)) {
+    return generateRowsWithMediaQueries(rows, theme, isSpanParent);
+  }
+  if (Array.isArray(rows)) {
+    const cssString = generateRowsCssStringForArray(rows);
+    return [
+      css`
+        ${cssString}
+      `
+    ];
+  }
+  if (isSpanParent) {
+    const cssString = generateRowsCssStringForBootstrapLikeishScenario(rows);
+    return [
+      css`
+        ${cssString}
+      `
+    ];
+  }
+  return [css``];
+};
+export {
+  manageRowsV2
+};
+//# sourceMappingURL=manageRows.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/manageRows.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { css, mapTemplateGrid } from '@elliemae/ds-system';\nimport type { DSGridT } from '../react-desc-prop-types.js';\nimport type { Theme } from '@elliemae/pui-theme';\n\ntype BreakPointObject = {\n  large?: string | number | (string | number)[];\n  medium?: string | number | (string | number)[];\n  small?: string | number | (string | number)[];\n};\n// this typeguard is not extremely accurate but it has historically been like this and we need to avoid breaking changes\nconst rowsIsBreakpointDefinition = (rows: unknown): rows is BreakPointObject =>\n  typeof rows === 'object' && !Array.isArray(rows);\ntype InterpolatedFunctionProps = {\n  theme: Theme;\n} & DSGridT.ItemProps;\n\nconst generateRowsCssStringForArray = (rowsVal: (string | number)[]): string => {\n  // mtg and mtgs are used to support mapping different ways of defining the rows\n  // when mtg produces valid css, mtgs will produce invalid css and vice-versa\n  // only one of them will be effectively applied by the browser\n  const mtg = (mapTemplateGrid(rowsVal) as string[]).join(' ');\n  const mtgs = (mapTemplateGrid(rowsVal) 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};\nconst generateRowsCssStringForBootstrapLikeishScenario = (rowsVal: string | number): string => `\n      -ms-grid-rows: repeat(${rowsVal}, 1fr);\n      grid-template-rows: repeat(${rowsVal}, 1fr);\n    `;\nconst generateRowsWithMediaQueries = (\n  rows: BreakPointObject,\n  theme: Theme,\n  isSpanParent: boolean,\n): ReturnType<typeof css>[] => {\n  const finalMediaDeclaration: ReturnType<typeof css>[] = [];\n  // we conditionally push into the array the media queries because grid rows definitions supports partial definitions\n  //  meaning that you can define rows only for small and medium and not for large\n  //  in such case we want to avoid generating media queries for large\n  //  we also need to make sure that the largest definition is used as the default one\n  if (rows.large) {\n    // we apply different styles for defintions that are arrays and definitions that are not\n    //  specifically when the definition are NOT arrays we check if the parent is a span tag\n    //    if it is we try to copy bootstrap's behavior and use repeat css grid function\n    let cssString = '';\n    if (Array.isArray(rows.large)) {\n      cssString = generateRowsCssStringForArray(rows.large);\n    } else if (isSpanParent) {\n      cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.large);\n    }\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n    finalMediaDeclaration.push(theme.media.large`${cssString}`);\n  }\n  if (rows.medium) {\n    // we apply different styles for defintions that are arrays and definitions that are not\n    //  specifically when the definition are NOT arrays we check if the parent is a span tag\n    //    if it is we try to copy bootstrap's behavior and use repeat css grid function\n    let cssString = '';\n    if (Array.isArray(rows.medium)) {\n      cssString = generateRowsCssStringForArray(rows.medium);\n    } else if (isSpanParent) {\n      cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.medium);\n    }\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n    finalMediaDeclaration.push(theme.media.medium`${cssString}`);\n  }\n  if (rows.small) {\n    // we apply different styles for defintions that are arrays and definitions that are not\n    //  specifically when the definition are NOT arrays we check if the parent is a span tag\n    //    if it is we try to copy bootstrap's behavior and use repeat css grid function\n    let cssString = '';\n    if (Array.isArray(rows.small)) {\n      cssString = generateRowsCssStringForArray(rows.small);\n    } else if (isSpanParent) {\n      cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.small);\n    }\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n    finalMediaDeclaration.push(theme.media.small`${cssString}`);\n  }\n  return finalMediaDeclaration;\n};\n\nexport const manageRowsV2 = ({ rows, theme, isSpanParent }: InterpolatedFunctionProps): ReturnType<typeof css>[] => {\n  // we want to be extremely explicit with how we handle the different use-cases\n  // the component is quite old and has been tailored to fit the needs of the different use-cases\n  // even ones that should have not been supported in the first place (isSpanParent to simulate bootstrap, different kind of rows definitions, etc)\n  // support for\n  //  rows:{small: 1, medium: 2, large: 3}\n  //     AND\n  //  rows: {small: ['1fr'], medium: ['160px'], large: ['400px'] }\n  if (rowsIsBreakpointDefinition(rows)) {\n    // there is no way to guarantee dynamic co-relation between pui-theme and the grid component\n    //  any change in the theme will break the co-relation and we would need to update the component\n    //  for such reason we are optimizing for maintainability and not scalability\n    return generateRowsWithMediaQueries(rows, theme, isSpanParent);\n  }\n\n  // support for rows: ['1fr', '1fr', '1fr'] && rows: [1, 1, 1]\n  if (Array.isArray(rows)) {\n    const cssString = generateRowsCssStringForArray(rows);\n    return [\n      css`\n        ${cssString}\n      `,\n    ];\n  }\n  // support for parent is span and  is like rows: 3\n  if (isSpanParent) {\n    const cssString = generateRowsCssStringForBootstrapLikeishScenario(rows);\n    return [\n      css`\n        ${cssString}\n      `,\n    ];\n  }\n  // fallback is not doing anything\n  return [css``];\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,KAAK,uBAAuB;AAUrC,MAAM,6BAA6B,CAAC,SAClC,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI;AAKjD,MAAM,gCAAgC,CAAC,YAAyC;AAI9E,QAAM,MAAO,gBAAgB,OAAO,EAAe,KAAK,GAAG;AAC3D,QAAM,OAAQ,gBAAgB,OAAO,EAAe,IAAI,CAAC,MAAM,aAAa,IAAI,EAAE,KAAK,GAAG;AAC1F,SAAO;AAAA,uBACc,OAAO;AAAA,4BACF,OAAO;AAAA,uBACZ,QAAQ;AAAA,4BACH,QAAQ;AAAA;AAEpC;AACA,MAAM,mDAAmD,CAAC,YAAqC;AAAA,8BACjE;AAAA,mCACK;AAAA;AAEnC,MAAM,+BAA+B,CACnC,MACA,OACA,iBAC6B;AAC7B,QAAM,wBAAkD,CAAC;AAKzD,MAAI,KAAK,OAAO;AAId,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,KAAK,GAAG;AAC7B,kBAAY,8BAA8B,KAAK,KAAK;AAAA,IACtD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,KAAK;AAAA,IACzE;AACA,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AACF,0BAAsB,KAAK,MAAM,MAAM,QAAQ,WAAW;AAAA,EAC5D;AACA,MAAI,KAAK,QAAQ;AAIf,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,MAAM,GAAG;AAC9B,kBAAY,8BAA8B,KAAK,MAAM;AAAA,IACvD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,MAAM;AAAA,IAC1E;AACA,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AACF,0BAAsB,KAAK,MAAM,MAAM,SAAS,WAAW;AAAA,EAC7D;AACA,MAAI,KAAK,OAAO;AAId,QAAI,YAAY;AAChB,QAAI,MAAM,QAAQ,KAAK,KAAK,GAAG;AAC7B,kBAAY,8BAA8B,KAAK,KAAK;AAAA,IACtD,WAAW,cAAc;AACvB,kBAAY,iDAAiD,KAAK,KAAK;AAAA,IACzE;AACA,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AACF,0BAAsB,KAAK,MAAM,MAAM,QAAQ,WAAW;AAAA,EAC5D;AACA,SAAO;AACT;AAEO,MAAM,eAAe,CAAC,EAAE,MAAM,OAAO,aAAa,MAA2D;AAQlH,MAAI,2BAA2B,IAAI,GAAG;AAIpC,WAAO,6BAA6B,MAAM,OAAO,YAAY;AAAA,EAC/D;AAGA,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,UAAM,YAAY,8BAA8B,IAAI;AACpD,WAAO;AAAA,MACL;AAAA,UACI;AAAA;AAAA,IAEN;AAAA,EACF;AAEA,MAAI,cAAc;AAChB,UAAM,YAAY,iDAAiD,IAAI;AACvE,WAAO;AAAA,MACL;AAAA,UACI;AAAA;AAAA,IAEN;AAAA,EACF;AAEA,SAAO,CAAC,KAAK;AACf;",
+  "names": []
+}

package/dist/esm/utils/manageSpanParent.js

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { css } from "@elliemae/ds-system";
+const generateCssStringForSpan = (span) => `
+  -ms-grid-column: auto / span ${span};
+  grid-column: auto / span ${span};
+`;
+const manageSpanParent = ({
+  isSpanParent,
+  span,
+  theme
+}) => {
+  if (!isSpanParent)
+    return [css``];
+  if (typeof span === "number") {
+    return [
+      css`
+        -ms-grid-column: auto / span ${span};
+        grid-column: auto / span ${span};
+      `
+    ];
+  }
+  if (typeof span !== "object")
+    return [css``];
+  const finalMediaDeclaration = [];
+  if (span.large) {
+    const cssString = generateCssStringForSpan(span.large);
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        css`
+          ${cssString}
+        `
+      );
+    finalMediaDeclaration.push(theme.media.large`${cssString}`);
+  }
+  if (span.medium) {
+    const cssString = generateCssStringForSpan(span.medium);
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        css`
+          ${cssString}
+        `
+      );
+    finalMediaDeclaration.push(theme.media.medium`${cssString}`);
+  }
+  if (span.small) {
+    const cssString = generateCssStringForSpan(span.small);
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(
+        css`
+          ${cssString}
+        `
+      );
+    finalMediaDeclaration.push(theme.media.small`${cssString}`);
+  }
+  return finalMediaDeclaration;
+};
+export {
+  manageSpanParent
+};
+//# sourceMappingURL=manageSpanParent.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/manageSpanParent.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { css } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { DSGridT } from '../react-desc-prop-types.js';\n\ntype InterpolatedFunctionProps = {\n  theme: Theme;\n} & DSGridT.ItemProps;\n\nconst generateCssStringForSpan = (span: number): string => `\n  -ms-grid-column: auto / span ${span};\n  grid-column: auto / span ${span};\n`;\n// This is used to support bootrap like-ish way of using the grid component\nexport const manageSpanParent = ({\n  isSpanParent,\n  span,\n  theme,\n}: InterpolatedFunctionProps): ReturnType<typeof css>[] => {\n  // If it's not a span parent, we don't need to do anything\n  if (!isSpanParent) return [css``];\n\n  // if span is a number we don't add media queries\n  if (typeof span === 'number') {\n    return [\n      css`\n        -ms-grid-column: auto / span ${span};\n        grid-column: auto / span ${span};\n      `,\n    ];\n  }\n  // the only remaining valid definition for our supported types is an object, if it's not an object we fallback to doing nothing\n  if (typeof span !== 'object') return [css``];\n\n  // Span object\n\n  const finalMediaDeclaration: ReturnType<typeof css>[] = [];\n  // we conditionally push into the array the media queries because span definitions supports partial definitions\n  //  meaning that you can define spans only for small and medium and not for large\n  //  in such case we want to avoid generating media queries for large\n  //  we also need to make sure that the largest definition is used as the default one\n  if (span.large) {\n    const cssString = generateCssStringForSpan(span.large);\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n    finalMediaDeclaration.push(theme.media.large`${cssString}`);\n  }\n  if (span.medium) {\n    const cssString = generateCssStringForSpan(span.medium);\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n    finalMediaDeclaration.push(theme.media.medium`${cssString}`);\n  }\n  if (span.small) {\n    const cssString = generateCssStringForSpan(span.small);\n    if (finalMediaDeclaration.length === 0)\n      finalMediaDeclaration.push(\n        css`\n          ${cssString}\n        `,\n      );\n    finalMediaDeclaration.push(theme.media.small`${cssString}`);\n  }\n  return finalMediaDeclaration;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW;AAQpB,MAAM,2BAA2B,CAAC,SAAyB;AAAA,iCAC1B;AAAA,6BACJ;AAAA;AAGtB,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,MAA2D;AAEzD,MAAI,CAAC;AAAc,WAAO,CAAC,KAAK;AAGhC,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO;AAAA,MACL;AAAA,uCACiC;AAAA,mCACJ;AAAA;AAAA,IAE/B;AAAA,EACF;AAEA,MAAI,OAAO,SAAS;AAAU,WAAO,CAAC,KAAK;AAI3C,QAAM,wBAAkD,CAAC;AAKzD,MAAI,KAAK,OAAO;AACd,UAAM,YAAY,yBAAyB,KAAK,KAAK;AACrD,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AACF,0BAAsB,KAAK,MAAM,MAAM,QAAQ,WAAW;AAAA,EAC5D;AACA,MAAI,KAAK,QAAQ;AACf,UAAM,YAAY,yBAAyB,KAAK,MAAM;AACtD,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AACF,0BAAsB,KAAK,MAAM,MAAM,SAAS,WAAW;AAAA,EAC7D;AACA,MAAI,KAAK,OAAO;AACd,UAAM,YAAY,yBAAyB,KAAK,KAAK;AACrD,QAAI,sBAAsB,WAAW;AACnC,4BAAsB;AAAA,QACpB;AAAA,YACI;AAAA;AAAA,MAEN;AACF,0BAAsB,KAAK,MAAM,MAAM,QAAQ,WAAW;AAAA,EAC5D;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/types/react-desc-prop-types.d.ts

@@ -3,9 +3,9 @@ import type React from 'react';
 import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
 export declare namespace DSGridT {
     interface RowColBreakpoints {
-        small?: string | number[];
-        medium?: string | number[];
-        large?: string | number[];
+        small?: string | number | (string | number)[];
+        medium?: string | number | (string | number)[];
+        large?: string | number | (string | number)[];
     }
     interface SpanBreakpoints {
         small?: number;
@@ -31,6 +31,7 @@ export declare namespace DSGridT {
         justifyContent?: JustifyPlacement;
         alignItems?: AlignItemsPlacement;
         children?: React.ReactNode;
+        withMaxWidthBreakpoints?: boolean;
     }
     interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps {
     }
@@ -52,6 +53,7 @@ export declare namespace DSGridT {
         boxShadow?: BoxShadow;
         backgroundColor?: string;
         bg?: string;
+        withMaxWidthBreakpoints?: boolean;
     }
 }
 export declare const defaultProps: DSGridT.DefaultProps;

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

@@ -0,0 +1,8 @@
+import { css } from '@elliemae/ds-system';
+import type { DSGridT } from '../react-desc-prop-types.js';
+import type { Theme } from '@elliemae/pui-theme';
+type InterpolatedFunctionProps = {
+    theme: Theme;
+} & DSGridT.ItemProps;
+export declare const manageColsV2: ({ cols, theme, isSpanParent }: InterpolatedFunctionProps) => ReturnType<typeof css>[];
+export {};

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

@@ -0,0 +1,8 @@
+import { css } from '@elliemae/ds-system';
+import type { DSGridT } from '../react-desc-prop-types.js';
+import type { Theme } from '@elliemae/pui-theme';
+type InterpolatedFunctionProps = {
+    theme: Theme;
+} & DSGridT.ItemProps;
+export declare const manageRowsV2: ({ rows, theme, isSpanParent }: InterpolatedFunctionProps) => ReturnType<typeof css>[];
+export {};

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

@@ -0,0 +1,8 @@
+import { css } from '@elliemae/ds-system';
+import type { Theme } from '@elliemae/pui-theme';
+import type { DSGridT } from '../react-desc-prop-types.js';
+type InterpolatedFunctionProps = {
+    theme: Theme;
+} & DSGridT.ItemProps;
+export declare const manageSpanParent: ({ isSpanParent, span, theme, }: InterpolatedFunctionProps) => ReturnType<typeof css>[];
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-grid",
-  "version": "3.17.0-next.9",
+  "version": "3.17.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Grid",
   "files": [
@@ -64,11 +64,12 @@
   },
   "dependencies": {
     "@xstyled/system": "~3.7.3",
-    "@elliemae/ds-props-helpers": "3.17.0-next.9",
-    "@elliemae/ds-system": "3.17.0-next.9",
-    "@elliemae/ds-utilities": "3.17.0-next.9"
+    "@elliemae/ds-props-helpers": "3.17.0",
+    "@elliemae/ds-system": "3.17.0",
+    "@elliemae/ds-utilities": "3.17.0"
   },
   "devDependencies": {
+    "@elliemae/pui-theme": "~2.7.0",
     "@testing-library/jest-dom": "~5.16.5",
     "@testing-library/react": "~12.1.3",
     "@testing-library/user-event": "~13.5.0",
@@ -76,6 +77,7 @@
     "styled-components": "~5.3.9"
   },
   "peerDependencies": {
+    "@elliemae/pui-theme": "^2.6.0",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",