@elliemae/ds-grid 3.51.0-rc.8 → 3.51.1

package/dist/cjs/Grid.js

@@ -55,6 +55,7 @@ const Grid = import_react.default.forwardRef((props, ref) => {
       width,
       height,
       innerRef,
+      span,
       ...rest
     },
     globalProps,
@@ -62,18 +63,37 @@ const Grid = import_react.default.forwardRef((props, ref) => {
     isSpanParent,
     renderChildren
   } = (0, import_useGrid.useGrid)(props);
+  const correctSpan = (0, import_react.useMemo)(() => {
+    if (span && typeof span !== "number" && span.small && !span.xsmall) {
+      return { ...span, xsmall: span.small };
+    }
+    return span;
+  }, [span]);
+  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 correctRows = (0, import_react.useMemo)(() => {
+    if (typeof rows === "object" && !Array.isArray(rows) && rows.small && !rows.xsmall) {
+      return { ...rows, xsmall: rows.small };
+    }
+    return rows;
+  }, [rows]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_GridItem.GridItem,
     {
       ...rest,
       ...globalProps,
       ...xstyledProps,
+      span: correctSpan,
       alignItems,
-      cols,
+      cols: correctCols,
       gutter,
       isSpanParent,
       justify,
-      rows,
+      rows: correctRows,
       wrap,
       childNumber: import_react.default.Children.count(children),
       innerRef: innerRef ?? ref,

package/dist/cjs/Grid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Grid.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from './react-desc-prop-types.js';\nimport { 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      ...rest\n    },\n    globalProps,\n    xstyledProps,\n    isSpanParent,\n    renderChildren,\n  } = useGrid(props);\n\n  return (\n    <GridItem\n      {...rest}\n      {...globalProps}\n      {...xstyledProps}\n      alignItems={alignItems}\n      cols={cols}\n      gutter={gutter}\n      isSpanParent={isSpanParent}\n      justify={justify}\n      rows={rows}\n      wrap={wrap}\n      childNumber={React.Children.count(children)}\n      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;AD+BnB;AA/BJ,mBAAkB;AAClB,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,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,wBAAQ,KAAK;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;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 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;",
   "names": ["React"]
 }

package/dist/cjs/index.js

@@ -26,21 +26,21 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   DSCardHeaderPropTypesSchema: () => import_react_desc_prop_types2.DSCardHeaderPropTypesSchema,
   DSGridPropTypes: () => import_react_desc_prop_types2.DSGridPropTypes,
   DSGridWithSchema: () => import_Grid.DSGridWithSchema,
   Grid: () => import_Grid.default,
   GridContainer: () => import_Grid.default,
   GridItem: () => import_Grid.default,
-  default: () => src_default,
+  default: () => index_default,
   defaultProps: () => import_react_desc_prop_types2.defaultProps,
   getGridProps: () => import_react_desc_prop_types2.getGridProps
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 var React = __toESM(require("react"));
 var import_Grid = __toESM(require("./Grid.js"));
 var import_react_desc_prop_types2 = require("./react-desc-prop-types.js");
-var src_default = import_Grid.default;
+var index_default = import_Grid.default;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import type {} from '@xstyled/system';\nimport Grid, { DSGridWithSchema } from './Grid.js';\nexport { type DSGridT } from './react-desc-prop-types.js';\nexport { defaultProps, DSGridPropTypes, DSCardHeaderPropTypesSchema, getGridProps } from './react-desc-prop-types.js';\nexport default Grid;\nexport { Grid, Grid as GridContainer, Grid as GridItem, DSGridWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAAA;AAAA,EAAA,iCAAAA;AAAA,EAAA,4BAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,kBAAuC;AAEvC,IAAAC,gCAAyF;AACzF,IAAO,cAAQ,YAAAC;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAAA;AAAA,EAAA,iCAAAA;AAAA,EAAA,4BAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,kBAAuC;AAEvC,IAAAC,gCAAyF;AACzF,IAAO,gBAAQ,YAAAC;",
   "names": ["Grid", "import_react_desc_prop_types", "Grid"]
 }

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

@@ -47,11 +47,13 @@ const defaultProps = {
   justifyItems: "normal"
 };
 const rowColBreakpoints = import_ds_props_helpers.PropTypes.shape({
+  xsmall: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.string])),
   small: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.string])),
   medium: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.string])),
   large: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.string]))
 });
 const spanBreakpoints = import_ds_props_helpers.PropTypes.shape({
+  xsmall: import_ds_props_helpers.PropTypes.number,
   small: import_ds_props_helpers.PropTypes.number,
   medium: import_ds_props_helpers.PropTypes.number,
   large: import_ds_props_helpers.PropTypes.number

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    small?: RowOrColsSyntaxSugar[];\n    medium?: RowOrColsSyntaxSugar[];\n    large?: RowOrColsSyntaxSugar[];\n  }\n\n  export type RowOrColsValidValues = RowOrColsSyntaxSugar | RowColBreakpoints;\n\n  export interface SpanBreakpoints {\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  small: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n  medium: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n  large: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n});\n\nconst spanBreakpoints = PropTypes.shape({\n  small: PropTypes.number,\n  medium: PropTypes.number,\n  large: PropTypes.number,\n});\n\nexport const DSGridPropTypes: 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    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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",
   "names": []
 }

package/dist/cjs/utils/manageCols.js

@@ -89,6 +89,19 @@ const generateColsWithMediaQueries = (cols, theme, isSpanParent) => {
         ${cssString}
       `);
   }
+  if (cols.xsmall) {
+    let cssString = "";
+    if (Array.isArray(cols.xsmall)) {
+      cssString = generateColsCssStringForArray(cols.xsmall);
+    } else if (isSpanParent) {
+      cssString = generateColsCssStringForBootstrapLikeishScenario(cols.xsmall);
+    }
+    finalMediaDeclaration.push(theme.media.xsmall`${cssString}`);
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(import_ds_system.css`
+        ${cssString}
+      `);
+  }
   return finalMediaDeclaration;
 };
 const manageColsV2 = ({ cols, theme, isSpanParent }) => {

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

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

package/dist/cjs/utils/manageRows.js

@@ -89,6 +89,19 @@ const generateRowsWithMediaQueries = (rows, theme, isSpanParent) => {
       `);
     finalMediaDeclaration.push(theme.media.small`${cssString}`);
   }
+  if (rows.xsmall) {
+    let cssString = "";
+    if (Array.isArray(rows.xsmall)) {
+      cssString = generateRowsCssStringForArray(rows.xsmall);
+    } else if (isSpanParent) {
+      cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.xsmall);
+    }
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(import_ds_system.css`
+        ${cssString}
+      `);
+    finalMediaDeclaration.push(theme.media.xsmall`${cssString}`);
+  }
   return finalMediaDeclaration;
 };
 const manageRowsV2 = ({ rows, theme, isSpanParent }) => {

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

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

package/dist/cjs/utils/manageSpanParent.js

@@ -77,6 +77,14 @@ const manageSpanParent = ({
       `);
     finalMediaDeclaration.push(theme.media.small`${cssString}`);
   }
+  if (span.xsmall) {
+    const cssString = generateCssStringForSpan(span.xsmall);
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(import_ds_system.css`
+        ${cssString}
+      `);
+    finalMediaDeclaration.push(theme.media.xsmall`${cssString}`);
+  }
   return finalMediaDeclaration;
 };
 //# sourceMappingURL=manageSpanParent.js.map

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

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

package/dist/cjs/utils/styles.js

@@ -49,7 +49,7 @@ const manageSpan = import_ds_system.css`
     const theKey = key;
     const spanValue = span[theKey];
     if (!!spanValue && theme.breakpoints[theKey]) {
-      if (theKey === "small") {
+      if (theKey === "xsmall") {
         data += `
             -ms-grid-column: auto / span ${spanValue};
             grid-column: auto / span ${spanValue};
@@ -75,7 +75,7 @@ const manageCols = import_ds_system.css`
       if (!!colValue && Array.isArray(colValue)) {
         const mtg = (0, import_ds_system.mapTemplateGrid)(colValue).join(" ");
         const mtgs = (0, import_ds_system.mapTemplateGrid)(colValue).map((c) => `minmax(0, ${c})`).join(" ");
-        if (theKey === "small") {
+        if (theKey === "xsmall") {
           data += `-ms-grid-columns: ${mtg || "minmax(0px, 1fr)"};
                       grid-template-columns: ${mtg || "auto"};
                       -ms-grid-columns: ${mtgs || "minmax(0px, 1fr)"};
@@ -89,7 +89,7 @@ const manageCols = import_ds_system.css`
                     }`;
         }
       } else if (!!colValue && isSpanParent) {
-        if (theKey === "small") {
+        if (theKey === "xsmall") {
           data += `-ms-grid-columns: repeat(${colValue}, 1fr);
                      grid-template-columns: repeat(${colValue}, 1fr);`;
         } else {
@@ -129,7 +129,7 @@ const manageRows = import_ds_system.css`
       if (rowValue && Array.isArray(rowValue)) {
         const mtg = (0, import_ds_system.mapTemplateGrid)(rowValue).join(" ");
         const mtgs = (0, import_ds_system.mapTemplateGrid)(rowValue).map((c) => `minmax(0, ${c})`).join(" ");
-        if (key === "small") {
+        if (key === "xsmall") {
           data += `-ms-grid-rows: ${mtg || "minmax(0px, 1fr)"};
                       grid-template-rows: ${mtg || "auto"};
                       -ms-grid-rows: ${mtgs || "minmax(0px, 1fr)"};
@@ -143,7 +143,7 @@ const manageRows = import_ds_system.css`
                     }`;
         }
       } else if (!!rowValue && isSpanParent) {
-        if (theKey === "small") {
+        if (theKey === "xsmall") {
           data += `-ms-grid-rows: repeat(${rowValue}, 1fr);
                      grid-template-rows: repeat(${rowValue}, 1fr);`;
         } else {

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

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

package/dist/esm/Grid.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import React2 from "react";
+import React2, { useMemo } from "react";
 import { describe } from "@elliemae/ds-props-helpers";
 import { DSCardHeaderPropTypesSchema } from "./react-desc-prop-types.js";
 import { GridItem } from "./GridItem.js";
@@ -20,6 +20,7 @@ const Grid = React2.forwardRef((props, ref) => {
       width,
       height,
       innerRef,
+      span,
       ...rest
     },
     globalProps,
@@ -27,18 +28,37 @@ const Grid = React2.forwardRef((props, ref) => {
     isSpanParent,
     renderChildren
   } = useGrid(props);
+  const correctSpan = useMemo(() => {
+    if (span && typeof span !== "number" && span.small && !span.xsmall) {
+      return { ...span, xsmall: span.small };
+    }
+    return span;
+  }, [span]);
+  const correctCols = useMemo(() => {
+    if (typeof cols === "object" && !Array.isArray(cols) && cols.small && !cols.xsmall) {
+      return { ...cols, xsmall: cols.small };
+    }
+    return cols;
+  }, [cols]);
+  const correctRows = useMemo(() => {
+    if (typeof rows === "object" && !Array.isArray(rows) && rows.small && !rows.xsmall) {
+      return { ...rows, xsmall: rows.small };
+    }
+    return rows;
+  }, [rows]);
   return /* @__PURE__ */ jsx(
     GridItem,
     {
       ...rest,
       ...globalProps,
       ...xstyledProps,
+      span: correctSpan,
       alignItems,
-      cols,
+      cols: correctCols,
       gutter,
       isSpanParent,
       justify,
-      rows,
+      rows: correctRows,
       wrap,
       childNumber: React2.Children.count(children),
       innerRef: innerRef ?? ref,

package/dist/esm/Grid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/Grid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from './react-desc-prop-types.js';\nimport { 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      ...rest\n    },\n    globalProps,\n    xstyledProps,\n    isSpanParent,\n    renderChildren,\n  } = useGrid(props);\n\n  return (\n    <GridItem\n      {...rest}\n      {...globalProps}\n      {...xstyledProps}\n      alignItems={alignItems}\n      cols={cols}\n      gutter={gutter}\n      isSpanParent={isSpanParent}\n      justify={justify}\n      rows={rows}\n      wrap={wrap}\n      childNumber={React.Children.count(children)}\n      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;AC+BnB;AA/BJ,OAAOA,YAAW;AAClB,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,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,QAAQ,KAAK;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;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 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;",
   "names": ["React"]
 }

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import Grid, { DSGridWithSchema } from "./Grid.js";
 import { defaultProps, DSGridPropTypes, DSCardHeaderPropTypesSchema, getGridProps } from "./react-desc-prop-types.js";
-var src_default = Grid;
+var index_default = Grid;
 export {
   DSCardHeaderPropTypesSchema,
   DSGridPropTypes,
@@ -9,7 +9,7 @@ export {
   Grid,
   Grid as GridContainer,
   Grid as GridItem,
-  src_default as default,
+  index_default as default,
   defaultProps,
   getGridProps
 };

package/dist/esm/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@xstyled/system';\nimport Grid, { DSGridWithSchema } from './Grid.js';\nexport { type DSGridT } from './react-desc-prop-types.js';\nexport { defaultProps, DSGridPropTypes, DSCardHeaderPropTypesSchema, getGridProps } from './react-desc-prop-types.js';\nexport default Grid;\nexport { Grid, Grid as GridContainer, Grid as GridItem, DSGridWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,OAAO,QAAQ,wBAAwB;AAEvC,SAAS,cAAc,iBAAiB,6BAA6B,oBAAoB;AACzF,IAAO,cAAQ;",
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,OAAO,QAAQ,wBAAwB;AAEvC,SAAS,cAAc,iBAAiB,6BAA6B,oBAAoB;AACzF,IAAO,gBAAQ;",
   "names": []
 }

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

@@ -11,11 +11,13 @@ const defaultProps = {
   justifyItems: "normal"
 };
 const rowColBreakpoints = PropTypes.shape({
+  xsmall: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
   small: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
   medium: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
   large: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))
 });
 const spanBreakpoints = PropTypes.shape({
+  xsmall: PropTypes.number,
   small: PropTypes.number,
   medium: PropTypes.number,
   large: PropTypes.number

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    small?: RowOrColsSyntaxSugar[];\n    medium?: RowOrColsSyntaxSugar[];\n    large?: RowOrColsSyntaxSugar[];\n  }\n\n  export type RowOrColsValidValues = RowOrColsSyntaxSugar | RowColBreakpoints;\n\n  export interface SpanBreakpoints {\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  small: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n  medium: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n  large: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),\n});\n\nconst spanBreakpoints = PropTypes.shape({\n  small: PropTypes.number,\n  medium: PropTypes.number,\n  large: PropTypes.number,\n});\n\nexport const DSGridPropTypes: 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    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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",
   "names": []
 }

package/dist/esm/utils/manageCols.js

@@ -56,6 +56,19 @@ const generateColsWithMediaQueries = (cols, theme, isSpanParent) => {
         ${cssString}
       `);
   }
+  if (cols.xsmall) {
+    let cssString = "";
+    if (Array.isArray(cols.xsmall)) {
+      cssString = generateColsCssStringForArray(cols.xsmall);
+    } else if (isSpanParent) {
+      cssString = generateColsCssStringForBootstrapLikeishScenario(cols.xsmall);
+    }
+    finalMediaDeclaration.push(theme.media.xsmall`${cssString}`);
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(css`
+        ${cssString}
+      `);
+  }
   return finalMediaDeclaration;
 };
 const manageColsV2 = ({ cols, theme, isSpanParent }) => {

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

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

package/dist/esm/utils/manageRows.js

@@ -56,6 +56,19 @@ const generateRowsWithMediaQueries = (rows, theme, isSpanParent) => {
       `);
     finalMediaDeclaration.push(theme.media.small`${cssString}`);
   }
+  if (rows.xsmall) {
+    let cssString = "";
+    if (Array.isArray(rows.xsmall)) {
+      cssString = generateRowsCssStringForArray(rows.xsmall);
+    } else if (isSpanParent) {
+      cssString = generateRowsCssStringForBootstrapLikeishScenario(rows.xsmall);
+    }
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(css`
+        ${cssString}
+      `);
+    finalMediaDeclaration.push(theme.media.xsmall`${cssString}`);
+  }
   return finalMediaDeclaration;
 };
 const manageRowsV2 = ({ rows, theme, isSpanParent }) => {

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

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

package/dist/esm/utils/manageSpanParent.js

@@ -44,6 +44,14 @@ const manageSpanParent = ({
       `);
     finalMediaDeclaration.push(theme.media.small`${cssString}`);
   }
+  if (span.xsmall) {
+    const cssString = generateCssStringForSpan(span.xsmall);
+    if (finalMediaDeclaration.length === 0)
+      finalMediaDeclaration.push(css`
+        ${cssString}
+      `);
+    finalMediaDeclaration.push(theme.media.xsmall`${cssString}`);
+  }
   return finalMediaDeclaration;
 };
 export {

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

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

package/dist/esm/utils/styles.js

@@ -14,7 +14,7 @@ const manageSpan = css`
     const theKey = key;
     const spanValue = span[theKey];
     if (!!spanValue && theme.breakpoints[theKey]) {
-      if (theKey === "small") {
+      if (theKey === "xsmall") {
         data += `
             -ms-grid-column: auto / span ${spanValue};
             grid-column: auto / span ${spanValue};
@@ -40,7 +40,7 @@ const manageCols = css`
       if (!!colValue && Array.isArray(colValue)) {
         const mtg = mapTemplateGrid(colValue).join(" ");
         const mtgs = mapTemplateGrid(colValue).map((c) => `minmax(0, ${c})`).join(" ");
-        if (theKey === "small") {
+        if (theKey === "xsmall") {
           data += `-ms-grid-columns: ${mtg || "minmax(0px, 1fr)"};
                       grid-template-columns: ${mtg || "auto"};
                       -ms-grid-columns: ${mtgs || "minmax(0px, 1fr)"};
@@ -54,7 +54,7 @@ const manageCols = css`
                     }`;
         }
       } else if (!!colValue && isSpanParent) {
-        if (theKey === "small") {
+        if (theKey === "xsmall") {
           data += `-ms-grid-columns: repeat(${colValue}, 1fr);
                      grid-template-columns: repeat(${colValue}, 1fr);`;
         } else {
@@ -94,7 +94,7 @@ const manageRows = css`
       if (rowValue && Array.isArray(rowValue)) {
         const mtg = mapTemplateGrid(rowValue).join(" ");
         const mtgs = mapTemplateGrid(rowValue).map((c) => `minmax(0, ${c})`).join(" ");
-        if (key === "small") {
+        if (key === "xsmall") {
           data += `-ms-grid-rows: ${mtg || "minmax(0px, 1fr)"};
                       grid-template-rows: ${mtg || "auto"};
                       -ms-grid-rows: ${mtgs || "minmax(0px, 1fr)"};
@@ -108,7 +108,7 @@ const manageRows = css`
                     }`;
         }
       } else if (!!rowValue && isSpanParent) {
-        if (theKey === "small") {
+        if (theKey === "xsmall") {
           data += `-ms-grid-rows: repeat(${rowValue}, 1fr);
                      grid-template-rows: repeat(${rowValue}, 1fr);`;
         } else {

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

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

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

@@ -2,7 +2,7 @@
 import type { DSGridT } from '../react-desc-prop-types.js';
 export declare const useGrid: (props: DSGridT.Props) => {
     propsWithDefaults: DSGridT.InternalProps;
-    globalProps: Partial<Pick<object, "wrap" | "form" | "list" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode"> & Omit<{
+    globalProps: Partial<Pick<object, "wrap" | "form" | "list" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode"> & Omit<{
         wrap?: string | undefined;
         form?: string | undefined;
         list?: string | undefined;
@@ -269,6 +269,8 @@ export declare const useGrid: (props: DSGridT.Props) => {
         unselectable?: "off" | "on" | undefined;
         inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
         accept?: string | undefined;
         acceptCharset?: string | undefined;
         action?: string | undefined;

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

@@ -4,12 +4,14 @@ import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliem
 export declare namespace DSGridT {
     type RowOrColsSyntaxSugar = string | number | (string | number)[];
     interface RowColBreakpoints {
+        xsmall?: RowOrColsSyntaxSugar[];
         small?: RowOrColsSyntaxSugar[];
         medium?: RowOrColsSyntaxSugar[];
         large?: RowOrColsSyntaxSugar[];
     }
     type RowOrColsValidValues = RowOrColsSyntaxSugar | RowColBreakpoints;
     interface SpanBreakpoints {
+        xsmall?: number;
         small?: number;
         medium?: number;
         large?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-grid",
-  "version": "3.51.0-rc.8",
+  "version": "3.51.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Grid",
   "files": [
@@ -37,19 +37,19 @@
   },
   "dependencies": {
     "@xstyled/system": "~3.7.3",
-    "@elliemae/ds-props-helpers": "3.51.0-rc.8",
-    "@elliemae/ds-system": "3.51.0-rc.8"
+    "@elliemae/ds-props-helpers": "3.51.1",
+    "@elliemae/ds-system": "3.51.1"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.55",
-    "@elliemae/pui-theme": "~2.10.0",
+    "@elliemae/pui-theme": "~2.11.0",
     "jest": "~29.7.0",
     "react-test-renderer": "^18.3.1",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.51.0-rc.8"
+    "@elliemae/ds-monorepo-devops": "3.51.1"
   },
   "peerDependencies": {
-    "@elliemae/pui-theme": "~2.10.0",
+    "@elliemae/pui-theme": "~2.11.0",
     "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",