@elliemae/ds-grid 3.70.0-next.60 → 3.70.0-next.62

package/dist/cjs/Grid.js

@@ -37,10 +37,12 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_system = require("@elliemae/ds-system");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_GridItem = require("./GridItem.js");
 var import_useGrid = require("./config/useGrid.js");
 var import_DSGridDefinitions = require("./DSGridDefinitions.js");
+var import_resolveLayoutMode = require("./utils/resolveLayoutMode.js");
 const Grid = import_react.default.forwardRef((props, ref) => {
   const {
     propsWithDefaults: {
@@ -56,6 +58,7 @@ const Grid = import_react.default.forwardRef((props, ref) => {
       height,
       innerRef,
       span,
+      withLayoutMode,
       ...rest
     },
     globalProps,
@@ -63,24 +66,19 @@ const Grid = import_react.default.forwardRef((props, ref) => {
     isSpanParent,
     renderChildren
   } = (0, import_useGrid.useGrid)(props);
+  const layoutMode = (0, import_ds_system.useGetLayoutMode)();
   const correctSpan = (0, import_react.useMemo)(() => {
-    if (span && typeof span !== "number" && span.small && !span.xsmall) {
-      return { ...span, xsmall: span.small };
-    }
-    return span;
-  }, [span]);
+    const backfilled = span && typeof span !== "number" && span.small && !span.xsmall ? { ...span, xsmall: span.small } : span;
+    return withLayoutMode ? (0, import_resolveLayoutMode.resolveByLayoutMode)(backfilled, layoutMode) : backfilled;
+  }, [span, withLayoutMode, layoutMode]);
   const correctCols = (0, import_react.useMemo)(() => {
-    if (typeof cols === "object" && !Array.isArray(cols) && cols.small && !cols.xsmall) {
-      return { ...cols, xsmall: cols.small };
-    }
-    return cols;
-  }, [cols]);
+    const backfilled = typeof cols === "object" && !Array.isArray(cols) && cols.small && !cols.xsmall ? { ...cols, xsmall: cols.small } : cols;
+    return withLayoutMode ? (0, import_resolveLayoutMode.resolveByLayoutMode)(backfilled, layoutMode) : backfilled;
+  }, [cols, withLayoutMode, layoutMode]);
   const correctRows = (0, import_react.useMemo)(() => {
-    if (typeof rows === "object" && !Array.isArray(rows) && rows.small && !rows.xsmall) {
-      return { ...rows, xsmall: rows.small };
-    }
-    return rows;
-  }, [rows]);
+    const backfilled = typeof rows === "object" && !Array.isArray(rows) && rows.small && !rows.xsmall ? { ...rows, xsmall: rows.small } : rows;
+    return withLayoutMode ? (0, import_resolveLayoutMode.resolveByLayoutMode)(backfilled, layoutMode) : backfilled;
+  }, [rows, withLayoutMode, layoutMode]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_GridItem.GridItem,
     {

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, { useMemo } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from './react-desc-prop-types.js';\nimport { DSCardHeaderPropTypesSchema } 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      innerRef,\n      span,\n      ...rest\n    },\n    globalProps,\n    xstyledProps,\n    isSpanParent,\n    renderChildren,\n  } = useGrid(props);\n\n  // xsmall was added after the initial implementation, so we need to make sure it's always present\n  // to avoid breaking changes.\n\n  const correctSpan = useMemo(() => {\n    if (span && typeof span !== 'number' && span.small && !span.xsmall) {\n      return { ...span, xsmall: span.small };\n    }\n    return span;\n  }, [span]);\n\n  const correctCols = useMemo(() => {\n    if (typeof cols === 'object' && !Array.isArray(cols) && cols.small && !cols.xsmall) {\n      return { ...cols, xsmall: cols.small };\n    }\n    return cols;\n  }, [cols]);\n\n  const correctRows = useMemo(() => {\n    if (typeof rows === 'object' && !Array.isArray(rows) && rows.small && !rows.xsmall) {\n      return { ...rows, xsmall: rows.small };\n    }\n    return rows;\n  }, [rows]);\n\n  return (\n    <GridItem\n      {...rest}\n      {...globalProps}\n      {...xstyledProps}\n      span={correctSpan}\n      alignItems={alignItems}\n      cols={correctCols}\n      gutter={gutter}\n      isSpanParent={isSpanParent}\n      justify={justify}\n      rows={correctRows}\n      wrap={wrap}\n      childNumber={React.Children.count(children)}\n      innerRef={innerRef ?? ref}\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;\nconst DSGridWithSchema = describe(Grid);\nDSGridWithSchema.propTypes = DSCardHeaderPropTypesSchema;\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;ADwDnB;AAxDJ,mBAA+B;AAC/B,8BAAyB;AAEzB,mCAA4C;AAC5C,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;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,wBAAQ,KAAK;AAKjB,QAAM,kBAAc,sBAAQ,MAAM;AAChC,QAAI,QAAQ,OAAO,SAAS,YAAY,KAAK,SAAS,CAAC,KAAK,QAAQ;AAClE,aAAO,EAAE,GAAG,MAAM,QAAQ,KAAK,MAAM;AAAA,IACvC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,kBAAc,sBAAQ,MAAM;AAChC,QAAI,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI,KAAK,KAAK,SAAS,CAAC,KAAK,QAAQ;AAClF,aAAO,EAAE,GAAG,MAAM,QAAQ,KAAK,MAAM;AAAA,IACvC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,kBAAc,sBAAQ,MAAM;AAChC,QAAI,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI,KAAK,KAAK,SAAS,CAAC,KAAK,QAAQ;AAClF,aAAO,EAAE,GAAG,MAAM,QAAQ,KAAK,MAAM;AAAA,IACvC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAM;AAAA,MACN;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA,aAAa,aAAAA,QAAM,SAAS,MAAM,QAAQ;AAAA,MAC1C,UAAU,YAAY;AAAA,MACtB,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAGD,KAAK,cAAc;AACnB,MAAM,uBAAmB,kCAAS,IAAI;AACtC,iBAAiB,YAAY;AAE7B,IAAO,eAAQ;",
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport type { DSGridT } from './react-desc-prop-types.js';\nimport { DSCardHeaderPropTypesSchema } from './react-desc-prop-types.js';\nimport { GridItem } from './GridItem.js';\nimport { useGrid } from './config/useGrid.js';\nimport { DSGridName } from './DSGridDefinitions.js';\nimport { resolveByLayoutMode, type LayoutMode } from './utils/resolveLayoutMode.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      innerRef,\n      span,\n      withLayoutMode,\n      ...rest\n    },\n    globalProps,\n    xstyledProps,\n    isSpanParent,\n    renderChildren,\n  } = useGrid(props);\n\n  // When withLayoutMode is opted into, the Grid resolves its responsive definitions from the\n  // ancestor DSLayoutProvider's layoutMode instead of the viewport. resolveByLayoutMode is a\n  // no-op when there is no layoutMode in context, so this stays safe outside a provider.\n  const layoutMode = useGetLayoutMode() as LayoutMode | undefined;\n\n  // xsmall was added after the initial implementation, so we need to make sure it's always present\n  // to avoid breaking changes. The xsmall backfill runs first so layoutMode=\"xs\" can pick it up.\n\n  const correctSpan = useMemo(() => {\n    const backfilled =\n      span && typeof span !== 'number' && span.small && !span.xsmall ? { ...span, xsmall: span.small } : span;\n    return withLayoutMode ? resolveByLayoutMode(backfilled, layoutMode) : backfilled;\n  }, [span, withLayoutMode, layoutMode]);\n\n  const correctCols = useMemo(() => {\n    const backfilled =\n      typeof cols === 'object' && !Array.isArray(cols) && cols.small && !cols.xsmall\n        ? { ...cols, xsmall: cols.small }\n        : cols;\n    return withLayoutMode ? resolveByLayoutMode(backfilled, layoutMode) : backfilled;\n  }, [cols, withLayoutMode, layoutMode]);\n\n  const correctRows = useMemo(() => {\n    const backfilled =\n      typeof rows === 'object' && !Array.isArray(rows) && rows.small && !rows.xsmall\n        ? { ...rows, xsmall: rows.small }\n        : rows;\n    return withLayoutMode ? resolveByLayoutMode(backfilled, layoutMode) : backfilled;\n  }, [rows, withLayoutMode, layoutMode]);\n\n  return (\n    <GridItem\n      {...rest}\n      {...globalProps}\n      {...xstyledProps}\n      span={correctSpan}\n      alignItems={alignItems}\n      cols={correctCols}\n      gutter={gutter}\n      isSpanParent={isSpanParent}\n      justify={justify}\n      rows={correctRows}\n      wrap={wrap}\n      childNumber={React.Children.count(children)}\n      innerRef={innerRef ?? ref}\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;\nconst DSGridWithSchema = describe(Grid);\nDSGridWithSchema.propTypes = DSCardHeaderPropTypesSchema;\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;ADiEnB;AAjEJ,mBAA+B;AAC/B,8BAAyB;AACzB,uBAAiC;AAEjC,mCAA4C;AAC5C,sBAAyB;AACzB,qBAAwB;AACxB,+BAA2B;AAC3B,+BAAqD;AAErD,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;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,wBAAQ,KAAK;AAKjB,QAAM,iBAAa,mCAAiB;AAKpC,QAAM,kBAAc,sBAAQ,MAAM;AAChC,UAAM,aACJ,QAAQ,OAAO,SAAS,YAAY,KAAK,SAAS,CAAC,KAAK,SAAS,EAAE,GAAG,MAAM,QAAQ,KAAK,MAAM,IAAI;AACrG,WAAO,qBAAiB,8CAAoB,YAAY,UAAU,IAAI;AAAA,EACxE,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,kBAAc,sBAAQ,MAAM;AAChC,UAAM,aACJ,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI,KAAK,KAAK,SAAS,CAAC,KAAK,SACpE,EAAE,GAAG,MAAM,QAAQ,KAAK,MAAM,IAC9B;AACN,WAAO,qBAAiB,8CAAoB,YAAY,UAAU,IAAI;AAAA,EACxE,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,kBAAc,sBAAQ,MAAM;AAChC,UAAM,aACJ,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI,KAAK,KAAK,SAAS,CAAC,KAAK,SACpE,EAAE,GAAG,MAAM,QAAQ,KAAK,MAAM,IAC9B;AACN,WAAO,qBAAiB,8CAAoB,YAAY,UAAU,IAAI;AAAA,EACxE,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAM;AAAA,MACN;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA,aAAa,aAAAA,QAAM,SAAS,MAAM,QAAQ;AAAA,MAC1C,UAAU,YAAY;AAAA,MACtB,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAGD,KAAK,cAAc;AACnB,MAAM,uBAAmB,kCAAS,IAAI;AACtC,iBAAiB,YAAY;AAE7B,IAAO,eAAQ;",
   "names": ["React"]
 }

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

@@ -86,6 +86,7 @@ const DSGridPropTypes = {
   innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.func, import_ds_props_helpers.PropTypes.object]).description("Ref to the grid"),
   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),
+  withLayoutMode: import_ds_props_helpers.PropTypes.bool.description("Resolve responsive cols/rows/span from the ancestor DSLayoutProvider mode.").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 { GlobalAttributesT, XstyledProps, DSPropTypesSchema } 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  export type RowOrColsSyntaxSugar = string | number | (string | number)[];\n\n  export interface RowColBreakpoints {\n    xsmall?: RowOrColsSyntaxSugar[];\n    small?: RowOrColsSyntaxSugar[];\n    medium?: RowOrColsSyntaxSugar[];\n    large?: RowOrColsSyntaxSugar[];\n  }\n\n  export type RowOrColsValidValues = RowOrColsSyntaxSugar | RowColBreakpoints;\n\n  export interface SpanBreakpoints {\n    xsmall?: number;\n    small?: number;\n    medium?: number;\n    large?: number;\n  }\n\n  export type JustifyPlacement =\n    | 'flex-start'\n    | 'center'\n    | 'flex-end'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly';\n  export type AlignItemsPlacement = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'space-between';\n  export type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';\n  export type BoxShadow = 'xs' | 's' | 'm' | 'l' | 'xl';\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    rows: RowOrColsValidValues;\n    cols: RowOrColsValidValues;\n    className: string;\n    justify: JustifyPlacement;\n    wrap: Wrap;\n    span: number | SpanBreakpoints;\n    justifyItems: string;\n  }\n\n  export interface OptionalProps {\n    height?: string | number;\n    width?: string | number;\n    justifyContent?: JustifyPlacement;\n    alignItems?: AlignItemsPlacement;\n    alignContent?: AlignItemsPlacement;\n    children?: React.ReactNode;\n    withMaxWidthBreakpoints?: boolean;\n    rowGap?: string | number;\n    gutter?: string | number;\n    innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n  }\n\n  // Grid components override some of the global attributes,\n  //   components inheriting from Grid needs a way to exclude these attributes from GlobalAttributesT\n  //   in such scenario, they would do\n  // Omit<\n  //    GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps\n  //                                                ^ their's namespace own DefaultProps | OptionalProps | ...\n  //          | keyof GridSpecificGlobalAttributes\n  //                            ^ Grid's overrides\n  // >\n  // This way, the component will have all the global attributes except the ones that are overridden by Grid and by the component itself\n  // in one line:  Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps [ | ... ] | keyof GridSpecificGlobalAttributes>\n  export type GridSpecificGlobalAttributes = Omit<\n    GlobalAttributesT<HTMLDivElement>,\n    keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n  >;\n  export type GridSpecificGlobalAttributesGeneric<ElementType = HTMLDivElement> = Omit<\n    GlobalAttributesT<ElementType>,\n    keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n  >;\n\n  export interface Props extends Partial<DefaultProps>, OptionalProps, GridSpecificGlobalAttributes, XstyledProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, GridSpecificGlobalAttributes, XstyledProps {}\n\n  export interface ItemProps {\n    rows: RowOrColsValidValues;\n    cols: RowOrColsValidValues;\n    alignItems?: AlignItemsPlacement;\n    alignContent?: 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    withMaxWidthBreakpoints?: boolean;\n  }\n}\n\nexport const defaultProps: DSGridT.DefaultProps = {\n  rows: [],\n  cols: [],\n  className: '',\n  justify: 'flex-start',\n  wrap: 'wrap',\n  span: 1,\n  justifyItems: 'normal',\n};\n\n// =============================================================================\n// PropTypes\n// =============================================================================\nconst rowColBreakpoints = PropTypes.shape({\n  xsmall: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\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  xsmall: PropTypes.number,\n  small: PropTypes.number,\n  medium: PropTypes.number,\n  large: PropTypes.number,\n});\n\nexport const DSGridPropTypes: DSPropTypesSchema<DSGridT.Props> = {\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  justify: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n  justifyItems: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n  alignContent: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n  rowGap: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Ref to the grid'),\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};\n\nexport const DSCardHeaderPropTypesSchema = DSGridPropTypes as unknown as WeakValidationMap<DSGridT.Props>;\n\nexport const getGridProps = (props: unknown): Partial<DSGridT.Props> => {\n  if (typeof props !== 'object' || props === null) return {};\n  const innerProps = props as Record<string, unknown>;\n  const innerGridPropTypes = props as Record<keyof DSGridT.Props, unknown>;\n  const filteredProps: Partial<DSGridT.Props> = {};\n\n  Object.keys(innerProps).forEach((key) => {\n    const innerKey = key as keyof DSGridT.Props;\n    if (innerGridPropTypes[innerKey] && innerProps[innerKey] !== undefined) {\n      filteredProps[innerKey] = innerProps[innerKey];\n    }\n  });\n  return filteredProps;\n};\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 { GlobalAttributesT, XstyledProps, DSPropTypesSchema } 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  export type RowOrColsSyntaxSugar = string | number | (string | number)[];\n\n  export interface RowColBreakpoints {\n    xsmall?: RowOrColsSyntaxSugar[];\n    small?: RowOrColsSyntaxSugar[];\n    medium?: RowOrColsSyntaxSugar[];\n    large?: RowOrColsSyntaxSugar[];\n  }\n\n  export type RowOrColsValidValues = RowOrColsSyntaxSugar | RowColBreakpoints;\n\n  export interface SpanBreakpoints {\n    xsmall?: number;\n    small?: number;\n    medium?: number;\n    large?: number;\n  }\n\n  export type JustifyPlacement =\n    | 'flex-start'\n    | 'center'\n    | 'flex-end'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly';\n  export type AlignItemsPlacement = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'space-between';\n  export type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';\n  export type BoxShadow = 'xs' | 's' | 'm' | 'l' | 'xl';\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    rows: RowOrColsValidValues;\n    cols: RowOrColsValidValues;\n    className: string;\n    justify: JustifyPlacement;\n    wrap: Wrap;\n    span: number | SpanBreakpoints;\n    justifyItems: string;\n  }\n\n  export interface OptionalProps {\n    height?: string | number;\n    width?: string | number;\n    justifyContent?: JustifyPlacement;\n    alignItems?: AlignItemsPlacement;\n    alignContent?: AlignItemsPlacement;\n    children?: React.ReactNode;\n    withMaxWidthBreakpoints?: boolean;\n    withLayoutMode?: boolean;\n    rowGap?: string | number;\n    gutter?: string | number;\n    innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n  }\n\n  // Grid components override some of the global attributes,\n  //   components inheriting from Grid needs a way to exclude these attributes from GlobalAttributesT\n  //   in such scenario, they would do\n  // Omit<\n  //    GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps\n  //                                                ^ their's namespace own DefaultProps | OptionalProps | ...\n  //          | keyof GridSpecificGlobalAttributes\n  //                            ^ Grid's overrides\n  // >\n  // This way, the component will have all the global attributes except the ones that are overridden by Grid and by the component itself\n  // in one line:  Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps [ | ... ] | keyof GridSpecificGlobalAttributes>\n  export type GridSpecificGlobalAttributes = Omit<\n    GlobalAttributesT<HTMLDivElement>,\n    keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n  >;\n  export type GridSpecificGlobalAttributesGeneric<ElementType = HTMLDivElement> = Omit<\n    GlobalAttributesT<ElementType>,\n    keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n  >;\n\n  export interface Props extends Partial<DefaultProps>, OptionalProps, GridSpecificGlobalAttributes, XstyledProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, GridSpecificGlobalAttributes, XstyledProps {}\n\n  export interface ItemProps {\n    rows: RowOrColsValidValues;\n    cols: RowOrColsValidValues;\n    alignItems?: AlignItemsPlacement;\n    alignContent?: 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    withMaxWidthBreakpoints?: boolean;\n  }\n}\n\nexport const defaultProps: DSGridT.DefaultProps = {\n  rows: [],\n  cols: [],\n  className: '',\n  justify: 'flex-start',\n  wrap: 'wrap',\n  span: 1,\n  justifyItems: 'normal',\n};\n\n// =============================================================================\n// PropTypes\n// =============================================================================\nconst rowColBreakpoints = PropTypes.shape({\n  xsmall: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\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  xsmall: PropTypes.number,\n  small: PropTypes.number,\n  medium: PropTypes.number,\n  large: PropTypes.number,\n});\n\nexport const DSGridPropTypes: DSPropTypesSchema<DSGridT.Props> = {\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  justify: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n  justifyItems: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n  alignContent: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n  rowGap: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Ref to the grid'),\n  wrap: PropTypes.oneOf(wrap).description('Wrap type').defaultValue(wrap[0]),\n  withMaxWidthBreakpoints: PropTypes.bool.description('weather use max width').defaultValue(undefined),\n  withLayoutMode: PropTypes.bool\n    .description('Resolve responsive cols/rows/span from the ancestor DSLayoutProvider mode.')\n    .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};\n\nexport const DSCardHeaderPropTypesSchema = DSGridPropTypes as unknown as WeakValidationMap<DSGridT.Props>;\n\nexport const getGridProps = (props: unknown): Partial<DSGridT.Props> => {\n  if (typeof props !== 'object' || props === null) return {};\n  const innerProps = props as Record<string, unknown>;\n  const innerGridPropTypes = props as Record<keyof DSGridT.Props, unknown>;\n  const filteredProps: Partial<DSGridT.Props> = {};\n\n  Object.keys(innerProps).forEach((key) => {\n    const innerKey = key as keyof DSGridT.Props;\n    if (innerGridPropTypes[innerKey] && innerProps[innerKey] !== undefined) {\n      filteredProps[innerKey] = innerProps[innerKey];\n    }\n  });\n  return filteredProps;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/typescript-testing/typescript-grid-valid.js

@@ -32,6 +32,7 @@ const testOptionalProps = {
   alignItems: "flex-start",
   children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "hey" }),
   withMaxWidthBreakpoints: false,
+  withLayoutMode: true,
   rowGap: "xs",
   gutter: "xs"
 };

package/dist/cjs/typescript-testing/typescript-grid-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-grid-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { Grid } from '../index.js';\nimport type { DSGridT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSGridT.Props;\ntype ComponentPropsInternals = DSGridT.InternalProps;\ntype ComponentPropsDefaultProps = DSGridT.DefaultProps;\ntype ComponentPropsOptionalProps = DSGridT.OptionalProps;\ntype ComponentPropsRequiredProps = DSGridT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  height: 0,\n  width: 0,\n  justifyContent: 'flex-start',\n  alignItems: 'flex-start',\n  children: <div>hey</div>,\n  withMaxWidthBreakpoints: false,\n  rowGap: 'xs',\n  gutter: 'xs',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  rows: [],\n  cols: [],\n  span: 2,\n  justifyItems: 'flex-start',\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  rows: [],\n  cols: [],\n  span: 2,\n  justifyItems: 'flex-start',\n  className: '',\n  justify: 'flex-start',\n  wrap: 'nowrap',\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  cols: { small: ['1fr', '1fr', '1fr'], medium: ['5fr', '1fr', '1fr'], large: ['1fr', '4fr', '1fr'] },\n  rows: { small: ['1fr', '1fr', '1fr'], medium: ['5fr', '1fr', '1fr'], large: ['1fr', '4fr', '1fr'] },\n  span: { small: 2, medium: 3, large: 1 },\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  rows: [1, 2, 3],\n  justifyContent: 'center',\n  border: '1px solid black',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  alignItems: 'center',\n  gutter: 'xs',\n  bg: 'brand-100',\n  borderTopColor: 'neutral-100-a10',\n  borderLeftColor: '#141414',\n  borderRightColor: 'rgba(0,0,0,0.5)',\n  borderBottomColor: 'rgb(0,0,0)',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <Grid {...testExplicitDefinition} />\n    <Grid {...testInferedTypeCompatibility} />\n    <Grid {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <Grid rows={[1, 2, 3]} justifyContent=\"center\" border=\"1px solid black\" />\n  </>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACiBX;AAhBZ,eAAqB;AAUrB,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU,4CAAC,SAAI,iBAAG;AAAA,EAClB,yBAAyB;AAAA,EACzB,QAAQ;AAAA,EACR,QAAQ;AACV;AAIA,MAAM,sBAA2D;AAAA,EAC/D,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAChB;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAAA,EACd,WAAW;AAAA,EACX,SAAS;AAAA,EACT,MAAM;AACR;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM,EAAE,OAAO,CAAC,OAAO,OAAO,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,KAAK,GAAG,OAAO,CAAC,OAAO,OAAO,KAAK,EAAE;AAAA,EAClG,MAAM,EAAE,OAAO,CAAC,OAAO,OAAO,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,KAAK,GAAG,OAAO,CAAC,OAAO,OAAO,KAAK,EAAE;AAAA,EAClG,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,EAAE;AACxC;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM,CAAC,GAAG,GAAG,CAAC;AAAA,EACd,gBAAgB;AAAA,EAChB,QAAQ;AACV;AAEA,MAAM,wBAAwB;AAAA,EAC5B,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,mBAAmB;AACrB;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,iBAAM,GAAG,wBAAwB;AAAA,EAClC,4CAAC,iBAAM,GAAG,8BAA8B;AAAA,EACxC,4CAAC,iBAAM,GAAG,uBAAuB;AAAA,EAEjC,4CAAC,iBAAK,MAAM,CAAC,GAAG,GAAG,CAAC,GAAG,gBAAe,UAAS,QAAO,mBAAkB;AAAA,GAC1E;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { Grid } from '../index.js';\nimport type { DSGridT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSGridT.Props;\ntype ComponentPropsInternals = DSGridT.InternalProps;\ntype ComponentPropsDefaultProps = DSGridT.DefaultProps;\ntype ComponentPropsOptionalProps = DSGridT.OptionalProps;\ntype ComponentPropsRequiredProps = DSGridT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  height: 0,\n  width: 0,\n  justifyContent: 'flex-start',\n  alignItems: 'flex-start',\n  children: <div>hey</div>,\n  withMaxWidthBreakpoints: false,\n  withLayoutMode: true,\n  rowGap: 'xs',\n  gutter: 'xs',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  rows: [],\n  cols: [],\n  span: 2,\n  justifyItems: 'flex-start',\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  rows: [],\n  cols: [],\n  span: 2,\n  justifyItems: 'flex-start',\n  className: '',\n  justify: 'flex-start',\n  wrap: 'nowrap',\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  cols: { small: ['1fr', '1fr', '1fr'], medium: ['5fr', '1fr', '1fr'], large: ['1fr', '4fr', '1fr'] },\n  rows: { small: ['1fr', '1fr', '1fr'], medium: ['5fr', '1fr', '1fr'], large: ['1fr', '4fr', '1fr'] },\n  span: { small: 2, medium: 3, large: 1 },\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  rows: [1, 2, 3],\n  justifyContent: 'center',\n  border: '1px solid black',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  alignItems: 'center',\n  gutter: 'xs',\n  bg: 'brand-100',\n  borderTopColor: 'neutral-100-a10',\n  borderLeftColor: '#141414',\n  borderRightColor: 'rgba(0,0,0,0.5)',\n  borderBottomColor: 'rgb(0,0,0)',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <Grid {...testExplicitDefinition} />\n    <Grid {...testInferedTypeCompatibility} />\n    <Grid {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <Grid rows={[1, 2, 3]} justifyContent=\"center\" border=\"1px solid black\" />\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACiBX;AAhBZ,eAAqB;AAUrB,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU,4CAAC,SAAI,iBAAG;AAAA,EAClB,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,QAAQ;AACV;AAIA,MAAM,sBAA2D;AAAA,EAC/D,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAChB;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAAA,EACd,WAAW;AAAA,EACX,SAAS;AAAA,EACT,MAAM;AACR;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM,EAAE,OAAO,CAAC,OAAO,OAAO,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,KAAK,GAAG,OAAO,CAAC,OAAO,OAAO,KAAK,EAAE;AAAA,EAClG,MAAM,EAAE,OAAO,CAAC,OAAO,OAAO,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,KAAK,GAAG,OAAO,CAAC,OAAO,OAAO,KAAK,EAAE;AAAA,EAClG,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,EAAE;AACxC;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM,CAAC,GAAG,GAAG,CAAC;AAAA,EACd,gBAAgB;AAAA,EAChB,QAAQ;AACV;AAEA,MAAM,wBAAwB;AAAA,EAC5B,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,mBAAmB;AACrB;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,iBAAM,GAAG,wBAAwB;AAAA,EAClC,4CAAC,iBAAM,GAAG,8BAA8B;AAAA,EACxC,4CAAC,iBAAM,GAAG,uBAAuB;AAAA,EAEjC,4CAAC,iBAAK,MAAM,CAAC,GAAG,GAAG,CAAC,GAAG,gBAAe,UAAS,QAAO,mBAAkB;AAAA,GAC1E;",
   "names": []
 }

package/dist/cjs/utils/resolveLayoutMode.js

@@ -0,0 +1,62 @@
+"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 resolveLayoutMode_exports = {};
+__export(resolveLayoutMode_exports, {
+  BREAKPOINT_ORDER: () => BREAKPOINT_ORDER,
+  LAYOUT_MODE_TO_BREAKPOINT: () => LAYOUT_MODE_TO_BREAKPOINT,
+  resolveByLayoutMode: () => resolveByLayoutMode
+});
+module.exports = __toCommonJS(resolveLayoutMode_exports);
+var React = __toESM(require("react"));
+const LAYOUT_MODE_TO_BREAKPOINT = {
+  xs: "xsmall",
+  s: "small",
+  m: "medium",
+  l: "large"
+};
+const BREAKPOINT_ORDER = ["xsmall", "small", "medium", "large"];
+const isBreakpointObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const pickForLayoutMode = (value, layoutMode) => {
+  const targetIndex = BREAKPOINT_ORDER.indexOf(LAYOUT_MODE_TO_BREAKPOINT[layoutMode]);
+  if (targetIndex < 0) return value;
+  for (let i = targetIndex; i >= 0; i -= 1) {
+    const candidate = value[BREAKPOINT_ORDER[i]];
+    if (candidate !== void 0) return candidate;
+  }
+  for (let i = targetIndex + 1; i < BREAKPOINT_ORDER.length; i += 1) {
+    const candidate = value[BREAKPOINT_ORDER[i]];
+    if (candidate !== void 0) return candidate;
+  }
+  return value;
+};
+function resolveByLayoutMode(value, layoutMode) {
+  if (!layoutMode || !isBreakpointObject(value)) return value;
+  return pickForLayoutMode(value, layoutMode);
+}
+//# sourceMappingURL=resolveLayoutMode.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/resolveLayoutMode.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { DSGridT } from '../react-desc-prop-types.js';\n\n// The layout modes exposed by DSLayoutProvider (injected into the styled-components theme\n//   and read via useGetLayoutMode from @elliemae/ds-system). Kept as a local literal union so\n//   ds-grid does not take a (type or runtime) dependency on ds-layout-provider.\nexport type LayoutMode = 'xs' | 's' | 'm' | 'l';\n\n// The breakpoint keys a Grid cols/rows/span definition may declare.\ntype BreakpointKey = keyof DSGridT.RowColBreakpoints;\n\n// Clean 4 -> 4 mapping between a LayoutProvider mode and the Grid breakpoint it selects.\nexport const LAYOUT_MODE_TO_BREAKPOINT: Record<LayoutMode, BreakpointKey> = {\n  xs: 'xsmall',\n  s: 'small',\n  m: 'medium',\n  l: 'large',\n};\n\n// Ordered smallest -> largest. Used for the partial-definition fallback below.\nexport const BREAKPOINT_ORDER: BreakpointKey[] = ['xsmall', 'small', 'medium', 'large'];\n\n// A breakpoint definition is an object that is not an array (arrays are the \"flat\" cols/rows\n//   syntax and numbers/strings are scalar definitions - none of those are layoutMode-driven).\nconst isBreakpointObject = (value: unknown): value is Partial<Record<BreakpointKey, unknown>> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\nconst pickForLayoutMode = (value: Partial<Record<BreakpointKey, unknown>>, layoutMode: LayoutMode): unknown => {\n  const targetIndex = BREAKPOINT_ORDER.indexOf(LAYOUT_MODE_TO_BREAKPOINT[layoutMode]);\n  // Unknown / unsupported mode -> leave the definition untouched.\n  if (targetIndex < 0) return value;\n\n  // Breakpoint objects may be partial (e.g. only { small, large } defined). We resolve to a\n  //   single predictable value: the exact key if present, otherwise the nearest DEFINED key\n  //   walking down toward xsmall, and only then the nearest one walking up toward large.\n  for (let i = targetIndex; i >= 0; i -= 1) {\n    const candidate = value[BREAKPOINT_ORDER[i]];\n    if (candidate !== undefined) return candidate;\n  }\n  for (let i = targetIndex + 1; i < BREAKPOINT_ORDER.length; i += 1) {\n    const candidate = value[BREAKPOINT_ORDER[i]];\n    if (candidate !== undefined) return candidate;\n  }\n  // The object declared no usable breakpoint -> no-op.\n  return value;\n};\n\n/**\n * Collapse a responsive cols/rows/span definition down to the single value selected by the\n * ancestor DSLayoutProvider's layoutMode, so the Grid lays out for the container it lives in\n * instead of the viewport.\n *\n * Only breakpoint OBJECTS are affected: arrays, numbers and strings pass through untouched, and\n * when there is no layoutMode in context we return the value as-is so the Grid keeps its\n * existing viewport (media-query) behavior. This is what makes the feature safe and opt-in.\n */\nexport function resolveByLayoutMode(\n  value: DSGridT.RowOrColsValidValues,\n  layoutMode: LayoutMode | undefined,\n): DSGridT.RowOrColsValidValues;\nexport function resolveByLayoutMode(\n  value: number | DSGridT.SpanBreakpoints,\n  layoutMode: LayoutMode | undefined,\n): number | DSGridT.SpanBreakpoints;\nexport function resolveByLayoutMode(value: unknown, layoutMode: LayoutMode | undefined): unknown {\n  if (!layoutMode || !isBreakpointObject(value)) return value;\n  return pickForLayoutMode(value, layoutMode);\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWhB,MAAM,4BAA+D;AAAA,EAC1E,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGO,MAAM,mBAAoC,CAAC,UAAU,SAAS,UAAU,OAAO;AAItF,MAAM,qBAAqB,CAAC,UAC1B,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,KAAK;AAErE,MAAM,oBAAoB,CAAC,OAAgD,eAAoC;AAC7G,QAAM,cAAc,iBAAiB,QAAQ,0BAA0B,UAAU,CAAC;AAElF,MAAI,cAAc,EAAG,QAAO;AAK5B,WAAS,IAAI,aAAa,KAAK,GAAG,KAAK,GAAG;AACxC,UAAM,YAAY,MAAM,iBAAiB,CAAC,CAAC;AAC3C,QAAI,cAAc,OAAW,QAAO;AAAA,EACtC;AACA,WAAS,IAAI,cAAc,GAAG,IAAI,iBAAiB,QAAQ,KAAK,GAAG;AACjE,UAAM,YAAY,MAAM,iBAAiB,CAAC,CAAC;AAC3C,QAAI,cAAc,OAAW,QAAO;AAAA,EACtC;AAEA,SAAO;AACT;AAmBO,SAAS,oBAAoB,OAAgB,YAA6C;AAC/F,MAAI,CAAC,cAAc,CAAC,mBAAmB,KAAK,EAAG,QAAO;AACtD,SAAO,kBAAkB,OAAO,UAAU;AAC5C;",
+  "names": []
+}

package/dist/esm/Grid.js

@@ -2,10 +2,12 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import React2, { useMemo } from "react";
 import { describe } from "@elliemae/ds-props-helpers";
+import { useGetLayoutMode } from "@elliemae/ds-system";
 import { DSCardHeaderPropTypesSchema } from "./react-desc-prop-types.js";
 import { GridItem } from "./GridItem.js";
 import { useGrid } from "./config/useGrid.js";
 import { DSGridName } from "./DSGridDefinitions.js";
+import { resolveByLayoutMode } from "./utils/resolveLayoutMode.js";
 const Grid = React2.forwardRef((props, ref) => {
   const {
     propsWithDefaults: {
@@ -21,6 +23,7 @@ const Grid = React2.forwardRef((props, ref) => {
       height,
       innerRef,
       span,
+      withLayoutMode,
       ...rest
     },
     globalProps,
@@ -28,24 +31,19 @@ const Grid = React2.forwardRef((props, ref) => {
     isSpanParent,
     renderChildren
   } = useGrid(props);
+  const layoutMode = useGetLayoutMode();
   const correctSpan = useMemo(() => {
-    if (span && typeof span !== "number" && span.small && !span.xsmall) {
-      return { ...span, xsmall: span.small };
-    }
-    return span;
-  }, [span]);
+    const backfilled = span && typeof span !== "number" && span.small && !span.xsmall ? { ...span, xsmall: span.small } : span;
+    return withLayoutMode ? resolveByLayoutMode(backfilled, layoutMode) : backfilled;
+  }, [span, withLayoutMode, layoutMode]);
   const correctCols = useMemo(() => {
-    if (typeof cols === "object" && !Array.isArray(cols) && cols.small && !cols.xsmall) {
-      return { ...cols, xsmall: cols.small };
-    }
-    return cols;
-  }, [cols]);
+    const backfilled = typeof cols === "object" && !Array.isArray(cols) && cols.small && !cols.xsmall ? { ...cols, xsmall: cols.small } : cols;
+    return withLayoutMode ? resolveByLayoutMode(backfilled, layoutMode) : backfilled;
+  }, [cols, withLayoutMode, layoutMode]);
   const correctRows = useMemo(() => {
-    if (typeof rows === "object" && !Array.isArray(rows) && rows.small && !rows.xsmall) {
-      return { ...rows, xsmall: rows.small };
-    }
-    return rows;
-  }, [rows]);
+    const backfilled = typeof rows === "object" && !Array.isArray(rows) && rows.small && !rows.xsmall ? { ...rows, xsmall: rows.small } : rows;
+    return withLayoutMode ? resolveByLayoutMode(backfilled, layoutMode) : backfilled;
+  }, [rows, withLayoutMode, layoutMode]);
   return /* @__PURE__ */ jsx(
     GridItem,
     {

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, { useMemo } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from './react-desc-prop-types.js';\nimport { DSCardHeaderPropTypesSchema } 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      innerRef,\n      span,\n      ...rest\n    },\n    globalProps,\n    xstyledProps,\n    isSpanParent,\n    renderChildren,\n  } = useGrid(props);\n\n  // xsmall was added after the initial implementation, so we need to make sure it's always present\n  // to avoid breaking changes.\n\n  const correctSpan = useMemo(() => {\n    if (span && typeof span !== 'number' && span.small && !span.xsmall) {\n      return { ...span, xsmall: span.small };\n    }\n    return span;\n  }, [span]);\n\n  const correctCols = useMemo(() => {\n    if (typeof cols === 'object' && !Array.isArray(cols) && cols.small && !cols.xsmall) {\n      return { ...cols, xsmall: cols.small };\n    }\n    return cols;\n  }, [cols]);\n\n  const correctRows = useMemo(() => {\n    if (typeof rows === 'object' && !Array.isArray(rows) && rows.small && !rows.xsmall) {\n      return { ...rows, xsmall: rows.small };\n    }\n    return rows;\n  }, [rows]);\n\n  return (\n    <GridItem\n      {...rest}\n      {...globalProps}\n      {...xstyledProps}\n      span={correctSpan}\n      alignItems={alignItems}\n      cols={correctCols}\n      gutter={gutter}\n      isSpanParent={isSpanParent}\n      justify={justify}\n      rows={correctRows}\n      wrap={wrap}\n      childNumber={React.Children.count(children)}\n      innerRef={innerRef ?? ref}\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;\nconst DSGridWithSchema = describe(Grid);\nDSGridWithSchema.propTypes = DSCardHeaderPropTypesSchema;\n\nexport default Grid;\nexport { DSGridWithSchema, Grid };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACwDnB;AAxDJ,OAAOA,UAAS,eAAe;AAC/B,SAAS,gBAAgB;AAEzB,SAAS,mCAAmC;AAC5C,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;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,QAAQ,KAAK;AAKjB,QAAM,cAAc,QAAQ,MAAM;AAChC,QAAI,QAAQ,OAAO,SAAS,YAAY,KAAK,SAAS,CAAC,KAAK,QAAQ;AAClE,aAAO,EAAE,GAAG,MAAM,QAAQ,KAAK,MAAM;AAAA,IACvC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,cAAc,QAAQ,MAAM;AAChC,QAAI,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI,KAAK,KAAK,SAAS,CAAC,KAAK,QAAQ;AAClF,aAAO,EAAE,GAAG,MAAM,QAAQ,KAAK,MAAM;AAAA,IACvC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,cAAc,QAAQ,MAAM;AAChC,QAAI,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI,KAAK,KAAK,SAAS,CAAC,KAAK,QAAQ;AAClF,aAAO,EAAE,GAAG,MAAM,QAAQ,KAAK,MAAM;AAAA,IACvC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAM;AAAA,MACN;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA,aAAaA,OAAM,SAAS,MAAM,QAAQ;AAAA,MAC1C,UAAU,YAAY;AAAA,MACtB,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAGD,KAAK,cAAc;AACnB,MAAM,mBAAmB,SAAS,IAAI;AACtC,iBAAiB,YAAY;AAE7B,IAAO,eAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport type { DSGridT } from './react-desc-prop-types.js';\nimport { DSCardHeaderPropTypesSchema } from './react-desc-prop-types.js';\nimport { GridItem } from './GridItem.js';\nimport { useGrid } from './config/useGrid.js';\nimport { DSGridName } from './DSGridDefinitions.js';\nimport { resolveByLayoutMode, type LayoutMode } from './utils/resolveLayoutMode.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      innerRef,\n      span,\n      withLayoutMode,\n      ...rest\n    },\n    globalProps,\n    xstyledProps,\n    isSpanParent,\n    renderChildren,\n  } = useGrid(props);\n\n  // When withLayoutMode is opted into, the Grid resolves its responsive definitions from the\n  // ancestor DSLayoutProvider's layoutMode instead of the viewport. resolveByLayoutMode is a\n  // no-op when there is no layoutMode in context, so this stays safe outside a provider.\n  const layoutMode = useGetLayoutMode() as LayoutMode | undefined;\n\n  // xsmall was added after the initial implementation, so we need to make sure it's always present\n  // to avoid breaking changes. The xsmall backfill runs first so layoutMode=\"xs\" can pick it up.\n\n  const correctSpan = useMemo(() => {\n    const backfilled =\n      span && typeof span !== 'number' && span.small && !span.xsmall ? { ...span, xsmall: span.small } : span;\n    return withLayoutMode ? resolveByLayoutMode(backfilled, layoutMode) : backfilled;\n  }, [span, withLayoutMode, layoutMode]);\n\n  const correctCols = useMemo(() => {\n    const backfilled =\n      typeof cols === 'object' && !Array.isArray(cols) && cols.small && !cols.xsmall\n        ? { ...cols, xsmall: cols.small }\n        : cols;\n    return withLayoutMode ? resolveByLayoutMode(backfilled, layoutMode) : backfilled;\n  }, [cols, withLayoutMode, layoutMode]);\n\n  const correctRows = useMemo(() => {\n    const backfilled =\n      typeof rows === 'object' && !Array.isArray(rows) && rows.small && !rows.xsmall\n        ? { ...rows, xsmall: rows.small }\n        : rows;\n    return withLayoutMode ? resolveByLayoutMode(backfilled, layoutMode) : backfilled;\n  }, [rows, withLayoutMode, layoutMode]);\n\n  return (\n    <GridItem\n      {...rest}\n      {...globalProps}\n      {...xstyledProps}\n      span={correctSpan}\n      alignItems={alignItems}\n      cols={correctCols}\n      gutter={gutter}\n      isSpanParent={isSpanParent}\n      justify={justify}\n      rows={correctRows}\n      wrap={wrap}\n      childNumber={React.Children.count(children)}\n      innerRef={innerRef ?? ref}\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;\nconst DSGridWithSchema = describe(Grid);\nDSGridWithSchema.propTypes = DSCardHeaderPropTypesSchema;\n\nexport default Grid;\nexport { DSGridWithSchema, Grid };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiEnB;AAjEJ,OAAOA,UAAS,eAAe;AAC/B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAEjC,SAAS,mCAAmC;AAC5C,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,2BAA4C;AAErD,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;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,QAAQ,KAAK;AAKjB,QAAM,aAAa,iBAAiB;AAKpC,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,aACJ,QAAQ,OAAO,SAAS,YAAY,KAAK,SAAS,CAAC,KAAK,SAAS,EAAE,GAAG,MAAM,QAAQ,KAAK,MAAM,IAAI;AACrG,WAAO,iBAAiB,oBAAoB,YAAY,UAAU,IAAI;AAAA,EACxE,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,aACJ,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI,KAAK,KAAK,SAAS,CAAC,KAAK,SACpE,EAAE,GAAG,MAAM,QAAQ,KAAK,MAAM,IAC9B;AACN,WAAO,iBAAiB,oBAAoB,YAAY,UAAU,IAAI;AAAA,EACxE,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,aACJ,OAAO,SAAS,YAAY,CAAC,MAAM,QAAQ,IAAI,KAAK,KAAK,SAAS,CAAC,KAAK,SACpE,EAAE,GAAG,MAAM,QAAQ,KAAK,MAAM,IAC9B;AACN,WAAO,iBAAiB,oBAAoB,YAAY,UAAU,IAAI;AAAA,EACxE,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAM;AAAA,MACN;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA,aAAaA,OAAM,SAAS,MAAM,QAAQ;AAAA,MAC1C,UAAU,YAAY;AAAA,MACtB,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAGD,KAAK,cAAc;AACnB,MAAM,mBAAmB,SAAS,IAAI;AACtC,iBAAiB,YAAY;AAE7B,IAAO,eAAQ;",
   "names": ["React"]
 }

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

@@ -50,6 +50,7 @@ const DSGridPropTypes = {
   innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description("Ref to the grid"),
   wrap: PropTypes.oneOf(wrap).description("Wrap type").defaultValue(wrap[0]),
   withMaxWidthBreakpoints: PropTypes.bool.description("weather use max width").defaultValue(void 0),
+  withLayoutMode: PropTypes.bool.description("Resolve responsive cols/rows/span from the ancestor DSLayoutProvider mode.").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 { GlobalAttributesT, XstyledProps, DSPropTypesSchema } 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  export type RowOrColsSyntaxSugar = string | number | (string | number)[];\n\n  export interface RowColBreakpoints {\n    xsmall?: RowOrColsSyntaxSugar[];\n    small?: RowOrColsSyntaxSugar[];\n    medium?: RowOrColsSyntaxSugar[];\n    large?: RowOrColsSyntaxSugar[];\n  }\n\n  export type RowOrColsValidValues = RowOrColsSyntaxSugar | RowColBreakpoints;\n\n  export interface SpanBreakpoints {\n    xsmall?: number;\n    small?: number;\n    medium?: number;\n    large?: number;\n  }\n\n  export type JustifyPlacement =\n    | 'flex-start'\n    | 'center'\n    | 'flex-end'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly';\n  export type AlignItemsPlacement = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'space-between';\n  export type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';\n  export type BoxShadow = 'xs' | 's' | 'm' | 'l' | 'xl';\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    rows: RowOrColsValidValues;\n    cols: RowOrColsValidValues;\n    className: string;\n    justify: JustifyPlacement;\n    wrap: Wrap;\n    span: number | SpanBreakpoints;\n    justifyItems: string;\n  }\n\n  export interface OptionalProps {\n    height?: string | number;\n    width?: string | number;\n    justifyContent?: JustifyPlacement;\n    alignItems?: AlignItemsPlacement;\n    alignContent?: AlignItemsPlacement;\n    children?: React.ReactNode;\n    withMaxWidthBreakpoints?: boolean;\n    rowGap?: string | number;\n    gutter?: string | number;\n    innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n  }\n\n  // Grid components override some of the global attributes,\n  //   components inheriting from Grid needs a way to exclude these attributes from GlobalAttributesT\n  //   in such scenario, they would do\n  // Omit<\n  //    GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps\n  //                                                ^ their's namespace own DefaultProps | OptionalProps | ...\n  //          | keyof GridSpecificGlobalAttributes\n  //                            ^ Grid's overrides\n  // >\n  // This way, the component will have all the global attributes except the ones that are overridden by Grid and by the component itself\n  // in one line:  Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps [ | ... ] | keyof GridSpecificGlobalAttributes>\n  export type GridSpecificGlobalAttributes = Omit<\n    GlobalAttributesT<HTMLDivElement>,\n    keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n  >;\n  export type GridSpecificGlobalAttributesGeneric<ElementType = HTMLDivElement> = Omit<\n    GlobalAttributesT<ElementType>,\n    keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n  >;\n\n  export interface Props extends Partial<DefaultProps>, OptionalProps, GridSpecificGlobalAttributes, XstyledProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, GridSpecificGlobalAttributes, XstyledProps {}\n\n  export interface ItemProps {\n    rows: RowOrColsValidValues;\n    cols: RowOrColsValidValues;\n    alignItems?: AlignItemsPlacement;\n    alignContent?: 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    withMaxWidthBreakpoints?: boolean;\n  }\n}\n\nexport const defaultProps: DSGridT.DefaultProps = {\n  rows: [],\n  cols: [],\n  className: '',\n  justify: 'flex-start',\n  wrap: 'wrap',\n  span: 1,\n  justifyItems: 'normal',\n};\n\n// =============================================================================\n// PropTypes\n// =============================================================================\nconst rowColBreakpoints = PropTypes.shape({\n  xsmall: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\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  xsmall: PropTypes.number,\n  small: PropTypes.number,\n  medium: PropTypes.number,\n  large: PropTypes.number,\n});\n\nexport const DSGridPropTypes: DSPropTypesSchema<DSGridT.Props> = {\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  justify: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n  justifyItems: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n  alignContent: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n  rowGap: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Ref to the grid'),\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};\n\nexport const DSCardHeaderPropTypesSchema = DSGridPropTypes as unknown as WeakValidationMap<DSGridT.Props>;\n\nexport const getGridProps = (props: unknown): Partial<DSGridT.Props> => {\n  if (typeof props !== 'object' || props === null) return {};\n  const innerProps = props as Record<string, unknown>;\n  const innerGridPropTypes = props as Record<keyof DSGridT.Props, unknown>;\n  const filteredProps: Partial<DSGridT.Props> = {};\n\n  Object.keys(innerProps).forEach((key) => {\n    const innerKey = key as keyof DSGridT.Props;\n    if (innerGridPropTypes[innerKey] && innerProps[innerKey] !== undefined) {\n      filteredProps[innerKey] = innerProps[innerKey];\n    }\n  });\n  return filteredProps;\n};\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 { GlobalAttributesT, XstyledProps, DSPropTypesSchema } 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  export type RowOrColsSyntaxSugar = string | number | (string | number)[];\n\n  export interface RowColBreakpoints {\n    xsmall?: RowOrColsSyntaxSugar[];\n    small?: RowOrColsSyntaxSugar[];\n    medium?: RowOrColsSyntaxSugar[];\n    large?: RowOrColsSyntaxSugar[];\n  }\n\n  export type RowOrColsValidValues = RowOrColsSyntaxSugar | RowColBreakpoints;\n\n  export interface SpanBreakpoints {\n    xsmall?: number;\n    small?: number;\n    medium?: number;\n    large?: number;\n  }\n\n  export type JustifyPlacement =\n    | 'flex-start'\n    | 'center'\n    | 'flex-end'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly';\n  export type AlignItemsPlacement = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'space-between';\n  export type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';\n  export type BoxShadow = 'xs' | 's' | 'm' | 'l' | 'xl';\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    rows: RowOrColsValidValues;\n    cols: RowOrColsValidValues;\n    className: string;\n    justify: JustifyPlacement;\n    wrap: Wrap;\n    span: number | SpanBreakpoints;\n    justifyItems: string;\n  }\n\n  export interface OptionalProps {\n    height?: string | number;\n    width?: string | number;\n    justifyContent?: JustifyPlacement;\n    alignItems?: AlignItemsPlacement;\n    alignContent?: AlignItemsPlacement;\n    children?: React.ReactNode;\n    withMaxWidthBreakpoints?: boolean;\n    withLayoutMode?: boolean;\n    rowGap?: string | number;\n    gutter?: string | number;\n    innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n  }\n\n  // Grid components override some of the global attributes,\n  //   components inheriting from Grid needs a way to exclude these attributes from GlobalAttributesT\n  //   in such scenario, they would do\n  // Omit<\n  //    GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps\n  //                                                ^ their's namespace own DefaultProps | OptionalProps | ...\n  //          | keyof GridSpecificGlobalAttributes\n  //                            ^ Grid's overrides\n  // >\n  // This way, the component will have all the global attributes except the ones that are overridden by Grid and by the component itself\n  // in one line:  Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps [ | ... ] | keyof GridSpecificGlobalAttributes>\n  export type GridSpecificGlobalAttributes = Omit<\n    GlobalAttributesT<HTMLDivElement>,\n    keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n  >;\n  export type GridSpecificGlobalAttributesGeneric<ElementType = HTMLDivElement> = Omit<\n    GlobalAttributesT<ElementType>,\n    keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n  >;\n\n  export interface Props extends Partial<DefaultProps>, OptionalProps, GridSpecificGlobalAttributes, XstyledProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, GridSpecificGlobalAttributes, XstyledProps {}\n\n  export interface ItemProps {\n    rows: RowOrColsValidValues;\n    cols: RowOrColsValidValues;\n    alignItems?: AlignItemsPlacement;\n    alignContent?: 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    withMaxWidthBreakpoints?: boolean;\n  }\n}\n\nexport const defaultProps: DSGridT.DefaultProps = {\n  rows: [],\n  cols: [],\n  className: '',\n  justify: 'flex-start',\n  wrap: 'wrap',\n  span: 1,\n  justifyItems: 'normal',\n};\n\n// =============================================================================\n// PropTypes\n// =============================================================================\nconst rowColBreakpoints = PropTypes.shape({\n  xsmall: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\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  xsmall: PropTypes.number,\n  small: PropTypes.number,\n  medium: PropTypes.number,\n  large: PropTypes.number,\n});\n\nexport const DSGridPropTypes: DSPropTypesSchema<DSGridT.Props> = {\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  justify: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n  justifyItems: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n  alignContent: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n  rowGap: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Ref to the grid'),\n  wrap: PropTypes.oneOf(wrap).description('Wrap type').defaultValue(wrap[0]),\n  withMaxWidthBreakpoints: PropTypes.bool.description('weather use max width').defaultValue(undefined),\n  withLayoutMode: PropTypes.bool\n    .description('Resolve responsive cols/rows/span from the ancestor DSLayoutProvider mode.')\n    .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};\n\nexport const DSCardHeaderPropTypesSchema = DSGridPropTypes as unknown as WeakValidationMap<DSGridT.Props>;\n\nexport const getGridProps = (props: unknown): Partial<DSGridT.Props> => {\n  if (typeof props !== 'object' || props === null) return {};\n  const innerProps = props as Record<string, unknown>;\n  const innerGridPropTypes = props as Record<keyof DSGridT.Props, unknown>;\n  const filteredProps: Partial<DSGridT.Props> = {};\n\n  Object.keys(innerProps).forEach((key) => {\n    const innerKey = key as keyof DSGridT.Props;\n    if (innerGridPropTypes[innerKey] && innerProps[innerKey] !== undefined) {\n      filteredProps[innerKey] = innerProps[innerKey];\n    }\n  });\n  return filteredProps;\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/typescript-testing/typescript-grid-valid.js

@@ -9,6 +9,7 @@ const testOptionalProps = {
   alignItems: "flex-start",
   children: /* @__PURE__ */ jsx("div", { children: "hey" }),
   withMaxWidthBreakpoints: false,
+  withLayoutMode: true,
   rowGap: "xs",
   gutter: "xs"
 };

package/dist/esm/typescript-testing/typescript-grid-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-grid-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { Grid } from '../index.js';\nimport type { DSGridT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSGridT.Props;\ntype ComponentPropsInternals = DSGridT.InternalProps;\ntype ComponentPropsDefaultProps = DSGridT.DefaultProps;\ntype ComponentPropsOptionalProps = DSGridT.OptionalProps;\ntype ComponentPropsRequiredProps = DSGridT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  height: 0,\n  width: 0,\n  justifyContent: 'flex-start',\n  alignItems: 'flex-start',\n  children: <div>hey</div>,\n  withMaxWidthBreakpoints: false,\n  rowGap: 'xs',\n  gutter: 'xs',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  rows: [],\n  cols: [],\n  span: 2,\n  justifyItems: 'flex-start',\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  rows: [],\n  cols: [],\n  span: 2,\n  justifyItems: 'flex-start',\n  className: '',\n  justify: 'flex-start',\n  wrap: 'nowrap',\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  cols: { small: ['1fr', '1fr', '1fr'], medium: ['5fr', '1fr', '1fr'], large: ['1fr', '4fr', '1fr'] },\n  rows: { small: ['1fr', '1fr', '1fr'], medium: ['5fr', '1fr', '1fr'], large: ['1fr', '4fr', '1fr'] },\n  span: { small: 2, medium: 3, large: 1 },\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  rows: [1, 2, 3],\n  justifyContent: 'center',\n  border: '1px solid black',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  alignItems: 'center',\n  gutter: 'xs',\n  bg: 'brand-100',\n  borderTopColor: 'neutral-100-a10',\n  borderLeftColor: '#141414',\n  borderRightColor: 'rgba(0,0,0,0.5)',\n  borderBottomColor: 'rgb(0,0,0)',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <Grid {...testExplicitDefinition} />\n    <Grid {...testInferedTypeCompatibility} />\n    <Grid {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <Grid rows={[1, 2, 3]} justifyContent=\"center\" border=\"1px solid black\" />\n  </>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiBX,SAsEV,UAtEU,KAsEV,YAtEU;AAhBZ,SAAS,YAAY;AAUrB,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU,oBAAC,SAAI,iBAAG;AAAA,EAClB,yBAAyB;AAAA,EACzB,QAAQ;AAAA,EACR,QAAQ;AACV;AAIA,MAAM,sBAA2D;AAAA,EAC/D,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAChB;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAAA,EACd,WAAW;AAAA,EACX,SAAS;AAAA,EACT,MAAM;AACR;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM,EAAE,OAAO,CAAC,OAAO,OAAO,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,KAAK,GAAG,OAAO,CAAC,OAAO,OAAO,KAAK,EAAE;AAAA,EAClG,MAAM,EAAE,OAAO,CAAC,OAAO,OAAO,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,KAAK,GAAG,OAAO,CAAC,OAAO,OAAO,KAAK,EAAE;AAAA,EAClG,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,EAAE;AACxC;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM,CAAC,GAAG,GAAG,CAAC;AAAA,EACd,gBAAgB;AAAA,EAChB,QAAQ;AACV;AAEA,MAAM,wBAAwB;AAAA,EAC5B,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,mBAAmB;AACrB;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,QAAM,GAAG,wBAAwB;AAAA,EAClC,oBAAC,QAAM,GAAG,8BAA8B;AAAA,EACxC,oBAAC,QAAM,GAAG,uBAAuB;AAAA,EAEjC,oBAAC,QAAK,MAAM,CAAC,GAAG,GAAG,CAAC,GAAG,gBAAe,UAAS,QAAO,mBAAkB;AAAA,GAC1E;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { Grid } from '../index.js';\nimport type { DSGridT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSGridT.Props;\ntype ComponentPropsInternals = DSGridT.InternalProps;\ntype ComponentPropsDefaultProps = DSGridT.DefaultProps;\ntype ComponentPropsOptionalProps = DSGridT.OptionalProps;\ntype ComponentPropsRequiredProps = DSGridT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  height: 0,\n  width: 0,\n  justifyContent: 'flex-start',\n  alignItems: 'flex-start',\n  children: <div>hey</div>,\n  withMaxWidthBreakpoints: false,\n  withLayoutMode: true,\n  rowGap: 'xs',\n  gutter: 'xs',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  rows: [],\n  cols: [],\n  span: 2,\n  justifyItems: 'flex-start',\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  rows: [],\n  cols: [],\n  span: 2,\n  justifyItems: 'flex-start',\n  className: '',\n  justify: 'flex-start',\n  wrap: 'nowrap',\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  cols: { small: ['1fr', '1fr', '1fr'], medium: ['5fr', '1fr', '1fr'], large: ['1fr', '4fr', '1fr'] },\n  rows: { small: ['1fr', '1fr', '1fr'], medium: ['5fr', '1fr', '1fr'], large: ['1fr', '4fr', '1fr'] },\n  span: { small: 2, medium: 3, large: 1 },\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  rows: [1, 2, 3],\n  justifyContent: 'center',\n  border: '1px solid black',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  alignItems: 'center',\n  gutter: 'xs',\n  bg: 'brand-100',\n  borderTopColor: 'neutral-100-a10',\n  borderLeftColor: '#141414',\n  borderRightColor: 'rgba(0,0,0,0.5)',\n  borderBottomColor: 'rgb(0,0,0)',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <Grid {...testExplicitDefinition} />\n    <Grid {...testInferedTypeCompatibility} />\n    <Grid {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <Grid rows={[1, 2, 3]} justifyContent=\"center\" border=\"1px solid black\" />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiBX,SAuEV,UAvEU,KAuEV,YAvEU;AAhBZ,SAAS,YAAY;AAUrB,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU,oBAAC,SAAI,iBAAG;AAAA,EAClB,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,QAAQ;AACV;AAIA,MAAM,sBAA2D;AAAA,EAC/D,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAChB;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAAA,EACd,WAAW;AAAA,EACX,SAAS;AAAA,EACT,MAAM;AACR;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM,EAAE,OAAO,CAAC,OAAO,OAAO,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,KAAK,GAAG,OAAO,CAAC,OAAO,OAAO,KAAK,EAAE;AAAA,EAClG,MAAM,EAAE,OAAO,CAAC,OAAO,OAAO,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,KAAK,GAAG,OAAO,CAAC,OAAO,OAAO,KAAK,EAAE;AAAA,EAClG,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,EAAE;AACxC;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM,CAAC,GAAG,GAAG,CAAC;AAAA,EACd,gBAAgB;AAAA,EAChB,QAAQ;AACV;AAEA,MAAM,wBAAwB;AAAA,EAC5B,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,mBAAmB;AACrB;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,QAAM,GAAG,wBAAwB;AAAA,EAClC,oBAAC,QAAM,GAAG,8BAA8B;AAAA,EACxC,oBAAC,QAAM,GAAG,uBAAuB;AAAA,EAEjC,oBAAC,QAAK,MAAM,CAAC,GAAG,GAAG,CAAC,GAAG,gBAAe,UAAS,QAAO,mBAAkB;AAAA,GAC1E;",
   "names": []
 }

package/dist/esm/utils/resolveLayoutMode.js

@@ -0,0 +1,32 @@
+import * as React from "react";
+const LAYOUT_MODE_TO_BREAKPOINT = {
+  xs: "xsmall",
+  s: "small",
+  m: "medium",
+  l: "large"
+};
+const BREAKPOINT_ORDER = ["xsmall", "small", "medium", "large"];
+const isBreakpointObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const pickForLayoutMode = (value, layoutMode) => {
+  const targetIndex = BREAKPOINT_ORDER.indexOf(LAYOUT_MODE_TO_BREAKPOINT[layoutMode]);
+  if (targetIndex < 0) return value;
+  for (let i = targetIndex; i >= 0; i -= 1) {
+    const candidate = value[BREAKPOINT_ORDER[i]];
+    if (candidate !== void 0) return candidate;
+  }
+  for (let i = targetIndex + 1; i < BREAKPOINT_ORDER.length; i += 1) {
+    const candidate = value[BREAKPOINT_ORDER[i]];
+    if (candidate !== void 0) return candidate;
+  }
+  return value;
+};
+function resolveByLayoutMode(value, layoutMode) {
+  if (!layoutMode || !isBreakpointObject(value)) return value;
+  return pickForLayoutMode(value, layoutMode);
+}
+export {
+  BREAKPOINT_ORDER,
+  LAYOUT_MODE_TO_BREAKPOINT,
+  resolveByLayoutMode
+};
+//# sourceMappingURL=resolveLayoutMode.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/resolveLayoutMode.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSGridT } from '../react-desc-prop-types.js';\n\n// The layout modes exposed by DSLayoutProvider (injected into the styled-components theme\n//   and read via useGetLayoutMode from @elliemae/ds-system). Kept as a local literal union so\n//   ds-grid does not take a (type or runtime) dependency on ds-layout-provider.\nexport type LayoutMode = 'xs' | 's' | 'm' | 'l';\n\n// The breakpoint keys a Grid cols/rows/span definition may declare.\ntype BreakpointKey = keyof DSGridT.RowColBreakpoints;\n\n// Clean 4 -> 4 mapping between a LayoutProvider mode and the Grid breakpoint it selects.\nexport const LAYOUT_MODE_TO_BREAKPOINT: Record<LayoutMode, BreakpointKey> = {\n  xs: 'xsmall',\n  s: 'small',\n  m: 'medium',\n  l: 'large',\n};\n\n// Ordered smallest -> largest. Used for the partial-definition fallback below.\nexport const BREAKPOINT_ORDER: BreakpointKey[] = ['xsmall', 'small', 'medium', 'large'];\n\n// A breakpoint definition is an object that is not an array (arrays are the \"flat\" cols/rows\n//   syntax and numbers/strings are scalar definitions - none of those are layoutMode-driven).\nconst isBreakpointObject = (value: unknown): value is Partial<Record<BreakpointKey, unknown>> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\nconst pickForLayoutMode = (value: Partial<Record<BreakpointKey, unknown>>, layoutMode: LayoutMode): unknown => {\n  const targetIndex = BREAKPOINT_ORDER.indexOf(LAYOUT_MODE_TO_BREAKPOINT[layoutMode]);\n  // Unknown / unsupported mode -> leave the definition untouched.\n  if (targetIndex < 0) return value;\n\n  // Breakpoint objects may be partial (e.g. only { small, large } defined). We resolve to a\n  //   single predictable value: the exact key if present, otherwise the nearest DEFINED key\n  //   walking down toward xsmall, and only then the nearest one walking up toward large.\n  for (let i = targetIndex; i >= 0; i -= 1) {\n    const candidate = value[BREAKPOINT_ORDER[i]];\n    if (candidate !== undefined) return candidate;\n  }\n  for (let i = targetIndex + 1; i < BREAKPOINT_ORDER.length; i += 1) {\n    const candidate = value[BREAKPOINT_ORDER[i]];\n    if (candidate !== undefined) return candidate;\n  }\n  // The object declared no usable breakpoint -> no-op.\n  return value;\n};\n\n/**\n * Collapse a responsive cols/rows/span definition down to the single value selected by the\n * ancestor DSLayoutProvider's layoutMode, so the Grid lays out for the container it lives in\n * instead of the viewport.\n *\n * Only breakpoint OBJECTS are affected: arrays, numbers and strings pass through untouched, and\n * when there is no layoutMode in context we return the value as-is so the Grid keeps its\n * existing viewport (media-query) behavior. This is what makes the feature safe and opt-in.\n */\nexport function resolveByLayoutMode(\n  value: DSGridT.RowOrColsValidValues,\n  layoutMode: LayoutMode | undefined,\n): DSGridT.RowOrColsValidValues;\nexport function resolveByLayoutMode(\n  value: number | DSGridT.SpanBreakpoints,\n  layoutMode: LayoutMode | undefined,\n): number | DSGridT.SpanBreakpoints;\nexport function resolveByLayoutMode(value: unknown, layoutMode: LayoutMode | undefined): unknown {\n  if (!layoutMode || !isBreakpointObject(value)) return value;\n  return pickForLayoutMode(value, layoutMode);\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACWhB,MAAM,4BAA+D;AAAA,EAC1E,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGO,MAAM,mBAAoC,CAAC,UAAU,SAAS,UAAU,OAAO;AAItF,MAAM,qBAAqB,CAAC,UAC1B,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,KAAK;AAErE,MAAM,oBAAoB,CAAC,OAAgD,eAAoC;AAC7G,QAAM,cAAc,iBAAiB,QAAQ,0BAA0B,UAAU,CAAC;AAElF,MAAI,cAAc,EAAG,QAAO;AAK5B,WAAS,IAAI,aAAa,KAAK,GAAG,KAAK,GAAG;AACxC,UAAM,YAAY,MAAM,iBAAiB,CAAC,CAAC;AAC3C,QAAI,cAAc,OAAW,QAAO;AAAA,EACtC;AACA,WAAS,IAAI,cAAc,GAAG,IAAI,iBAAiB,QAAQ,KAAK,GAAG;AACjE,UAAM,YAAY,MAAM,iBAAiB,CAAC,CAAC;AAC3C,QAAI,cAAc,OAAW,QAAO;AAAA,EACtC;AAEA,SAAO;AACT;AAmBO,SAAS,oBAAoB,OAAgB,YAA6C;AAC/F,MAAI,CAAC,cAAc,CAAC,mBAAmB,KAAK,EAAG,QAAO;AACtD,SAAO,kBAAkB,OAAO,UAAU;AAC5C;",
+  "names": []
+}

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

@@ -39,6 +39,7 @@ export declare namespace DSGridT {
         alignContent?: AlignItemsPlacement;
         children?: React.ReactNode;
         withMaxWidthBreakpoints?: boolean;
+        withLayoutMode?: boolean;
         rowGap?: string | number;
         gutter?: string | number;
         innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;

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

@@ -0,0 +1,17 @@
+import type { DSGridT } from '../react-desc-prop-types.js';
+export type LayoutMode = 'xs' | 's' | 'm' | 'l';
+type BreakpointKey = keyof DSGridT.RowColBreakpoints;
+export declare const LAYOUT_MODE_TO_BREAKPOINT: Record<LayoutMode, BreakpointKey>;
+export declare const BREAKPOINT_ORDER: BreakpointKey[];
+/**
+ * Collapse a responsive cols/rows/span definition down to the single value selected by the
+ * ancestor DSLayoutProvider's layoutMode, so the Grid lays out for the container it lives in
+ * instead of the viewport.
+ *
+ * Only breakpoint OBJECTS are affected: arrays, numbers and strings pass through untouched, and
+ * when there is no layoutMode in context we return the value as-is so the Grid keeps its
+ * existing viewport (media-query) behavior. This is what makes the feature safe and opt-in.
+ */
+export declare function resolveByLayoutMode(value: DSGridT.RowOrColsValidValues, layoutMode: LayoutMode | undefined): DSGridT.RowOrColsValidValues;
+export declare function resolveByLayoutMode(value: number | DSGridT.SpanBreakpoints, layoutMode: LayoutMode | undefined): number | DSGridT.SpanBreakpoints;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-grid",
-  "version": "3.70.0-next.60",
+  "version": "3.70.0-next.62",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Grid",
   "files": [
@@ -37,16 +37,16 @@
   },
   "dependencies": {
     "@xstyled/system": "~3.8.1",
-    "@elliemae/ds-props-helpers": "3.70.0-next.60",
-    "@elliemae/ds-system": "3.70.0-next.60"
+    "@elliemae/ds-props-helpers": "3.70.0-next.62",
+    "@elliemae/ds-system": "3.70.0-next.62"
   },
   "devDependencies": {
     "@elliemae/pui-theme": "~2.13.0",
     "jest": "^30.0.0",
     "react-test-renderer": "^18.3.1",
     "styled-components": "~5.3.11",
-    "@elliemae/ds-monorepo-devops": "3.70.0-next.60",
-    "@elliemae/ds-test-utils": "3.70.0-next.60"
+    "@elliemae/ds-test-utils": "3.70.0-next.62",
+    "@elliemae/ds-monorepo-devops": "3.70.0-next.62"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.13.0",