@sproutsocial/seeds-react-grid 0.2.13 → 0.2.15

package/dist/esm/index.js

@@ -125,7 +125,14 @@ GridTailwind.displayName = "GridTailwind";
 // src/GridHybrid.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var GridHybrid = (props) => {
-  const { columns = 1, gap = 400, rowGap, columnGap, children, className } = props;
+  const {
+    columns = 1,
+    gap = 400,
+    rowGap,
+    columnGap,
+    children,
+    className
+  } = props;
   if (needsStyledComponents(props)) {
     return /* @__PURE__ */ jsx2(
       styles_default,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Grid.tsx","../../src/GridHybrid.tsx","../../src/styles.ts","../../src/utils.ts","../../src/GridTailwind.tsx","../../src/GridTypes.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport type { GridProps } from \"./GridTypes\";\nimport GridHybrid from \"./GridHybrid\";\n\n/**\n * Grid component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using a\n * styled() extension or styled-system props).\n */\nconst Grid: React.FC<GridProps> = (props) => <GridHybrid {...props} />;\n\nGrid.displayName = \"Grid\";\nexport default Grid;\n","/**\n * Hybrid Grid component.\n * Automatically chooses between the Tailwind implementation (preferred) and the\n * styled-components implementation. Grid never exposed styled-system props on its\n * public API, so the realistic styled-components trigger is a styled(Grid)\n * extension — routing on needsStyledComponents preserves that backward\n * compatibility (and any accidental styled-system prop spread).\n */\n\nimport React from \"react\";\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\nimport Container from \"./styles\"; // Styled-components version\nimport { GridTailwind } from \"./GridTailwind\"; // Tailwind version\nimport { toResponsiveGapObject } from \"./utils\";\nimport type { GridProps } from \"./GridTypes\";\n\nconst GridHybrid: React.FC<GridProps> = (props) => {\n  const { columns = 1, gap = 400, rowGap, columnGap, children, className } =\n    props;\n\n  if (needsStyledComponents(props)) {\n    return (\n      <Container\n        display=\"grid\"\n        rowGap={toResponsiveGapObject(rowGap ?? gap)}\n        columnGap={toResponsiveGapObject(columnGap ?? gap)}\n        $columns={columns}\n        className={className}\n      >\n        {children}\n      </Container>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <GridTailwind {...props} />;\n};\n\nGridHybrid.displayName = \"Grid\";\nexport default GridHybrid;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps } from \"./GridTypes\";\nimport { getResponsiveStyles } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n  ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nexport default Container;\n","import type {\n  GapValue,\n  ResponsiveGapValue,\n  ResponsiveValue,\n} from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nconst { breakpoints } = theme;\n\nexport const toResponsiveGapObject = (\n  value: ResponsiveGapValue\n):\n  | GapValue\n  | { sm?: GapValue; md?: GapValue; lg?: GapValue; xl?: GapValue } => {\n  if (typeof value !== \"object\") return value;\n  return value;\n};\n\nexport const getResponsiveStyles = (columns: ResponsiveValue = 1) => {\n  if (typeof columns === \"number\") {\n    return css`\n      grid-template-columns: repeat(${columns}, 1fr);\n    `;\n  }\n\n  return css`\n    grid-template-columns: repeat(1, 1fr);\n\n    @media (min-width: ${breakpoints.sm}) {\n      grid-template-columns: repeat(${columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n      grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n      grid-template-columns: repeat(\n        ${columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n\n    @media (min-width: ${breakpoints.xl}) {\n      grid-template-columns: repeat(\n        ${columns.xl || columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n  `;\n};\n","/**\n * Tailwind/CSS implementation of the Grid component.\n *\n * Dependency-free: renders a plain <div class=\"seeds-grid\"> and drives layout\n * with a mix of inline styles and CSS custom properties consumed by grid.css.\n *\n * jsdom-safe rule (mirrors Icon/Avatar/Skeleton):\n * - Scalar values (a number of columns, or a scalar gap) are written as literal\n *   resolved inline styles (e.g. row-gap: 24px) so window.getComputedStyle sees\n *   them in tests. Do NOT use var(--space-N) here — jsdom cannot resolve it.\n * - Responsive values (an object) are emitted as inline CSS custom properties;\n *   the concrete property is set only by the media queries in grid.css so the\n *   overrides are not blocked by inline specificity.\n */\n\nimport React from \"react\";\nimport type { GapValue, GridProps } from \"./GridTypes\";\n\n// Space scale → px, matching seeds-design-tokens/seeds-space/tokens.json and the\n// mapping Box's styled-system applies on the styled-components path.\nconst SPACE_SCALE: Record<number, number> = {\n  0: 0,\n  100: 2,\n  200: 4,\n  300: 8,\n  350: 12,\n  400: 16,\n  450: 24,\n  500: 32,\n  600: 40,\n};\n\n// Loose bag of CSS declarations + custom properties. Cast to React.CSSProperties\n// at the JSX site (same approach as IconTailwind), since custom properties are\n// not part of the CSSProperties type.\ntype GridStyle = Record<string, string>;\n\ntype ResponsiveGapObject = {\n  sm?: GapValue;\n  md?: GapValue;\n  lg?: GapValue;\n  xl?: GapValue;\n};\n\ntype ResponsiveColumnsObject = {\n  sm?: number;\n  md?: number;\n  lg?: number;\n  xl?: number;\n};\n\n// Resolve a scalar gap value to a concrete CSS length. Space-scale keys map to\n// px; pixel/arbitrary strings (\"20px\", \"1em\") pass through unchanged.\nconst toGap = (value: GapValue): string =>\n  typeof value === \"number\" ? `${SPACE_SCALE[value] ?? 0}px` : value;\n\nconst isResponsive = (value: unknown): boolean =>\n  typeof value === \"object\" && value !== null;\n\n// Set the responsive column custom properties, resolving the breakpoint cascade\n// in JS (md falls back to sm, lg to md/sm, xl to lg/md/sm) exactly like\n// getResponsiveStyles on the styled-components path.\nconst applyResponsiveColumns = (\n  style: GridStyle,\n  columns: ResponsiveColumnsObject\n): void => {\n  const { sm, md, lg, xl } = columns;\n  style[\"--sg-cols\"] = \"repeat(1, 1fr)\";\n  style[\"--sg-cols-sm\"] = `repeat(${sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-md\"] = `repeat(${md ?? sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-lg\"] = `repeat(${lg ?? md ?? sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-xl\"] = `repeat(${xl ?? lg ?? md ?? sm ?? 1}, 1fr)`;\n};\n\n// Apply a single gap axis. Scalar → concrete inline property (jsdom-safe).\n// Responsive → custom properties only, driven by grid.css media queries.\nconst applyGap = (\n  style: GridStyle,\n  axis: \"row\" | \"column\",\n  value: GapValue | ResponsiveGapObject\n): void => {\n  const prefix = axis === \"row\" ? \"--sg-row-gap\" : \"--sg-col-gap\";\n\n  if (isResponsive(value)) {\n    const { sm, md, lg, xl } = value as ResponsiveGapObject;\n    style[prefix] = \"0\";\n    if (sm !== undefined) style[`${prefix}-sm`] = toGap(sm);\n    const mdVal = md ?? sm;\n    if (mdVal !== undefined) style[`${prefix}-md`] = toGap(mdVal);\n    const lgVal = lg ?? md ?? sm;\n    if (lgVal !== undefined) style[`${prefix}-lg`] = toGap(lgVal);\n    const xlVal = xl ?? lg ?? md ?? sm;\n    if (xlVal !== undefined) style[`${prefix}-xl`] = toGap(xlVal);\n    return;\n  }\n\n  const resolved = toGap(value as GapValue);\n  if (axis === \"row\") {\n    style.rowGap = resolved;\n  } else {\n    style.columnGap = resolved;\n  }\n};\n\nexport const GridTailwind: React.FC<GridProps> = ({\n  columns = 1,\n  gap = 400,\n  rowGap,\n  columnGap,\n  children,\n  className,\n}) => {\n  const style: GridStyle = { display: \"grid\" };\n\n  if (isResponsive(columns)) {\n    applyResponsiveColumns(style, columns as ResponsiveColumnsObject);\n  } else {\n    style.gridTemplateColumns = `repeat(${columns as number}, 1fr)`;\n  }\n\n  applyGap(style, \"row\", rowGap ?? gap);\n  applyGap(style, \"column\", columnGap ?? gap);\n\n  const classes = [\"seeds-grid\", className].filter(Boolean).join(\" \");\n\n  return (\n    <div className={classes} style={style as React.CSSProperties}>\n      {children}\n    </div>\n  );\n};\n\nGridTailwind.displayName = \"GridTailwind\";\n","import type { TypeSpace } from \"@sproutsocial/seeds-react-theme\";\nimport * as React from \"react\";\n\nexport type ResponsiveValue =\n  | number\n  | {\n      sm?: number;\n      md?: number;\n      lg?: number;\n      xl?: number;\n    };\n\n/**\n * Gap value that can be either:\n * - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)\n * - A pixel string value (e.g., \"16px\", \"20px\")\n */\nexport type GapValue = keyof TypeSpace | (string & {});\n\n/**\n * Responsive gap value that can be either:\n * - A single GapValue applied at all breakpoints\n * - An object with optional breakpoint keys (sm, md, lg, xl) for responsive values\n */\nexport type ResponsiveGapValue =\n  | GapValue\n  | {\n      sm?: GapValue;\n      md?: GapValue;\n      lg?: GapValue;\n      xl?: GapValue;\n    };\n\nexport interface ContainerProps {\n  $columns?: ResponsiveValue;\n}\n\nexport interface GridProps {\n  /** Number of columns (can be responsive) */\n  columns?: ResponsiveValue;\n  /** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  gap?: ResponsiveGapValue;\n  /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  rowGap?: ResponsiveGapValue;\n  /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  columnGap?: ResponsiveGapValue;\n  /** Children elements to display in the grid */\n  children?: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n","import Grid from \"./Grid\";\n\nexport default Grid;\nexport { Grid };\nexport * from \"./GridTypes\";\n"],"mappings":"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","names":["jsx","jsx"]}
+{"version":3,"sources":["../../src/Grid.tsx","../../src/GridHybrid.tsx","../../src/styles.ts","../../src/utils.ts","../../src/GridTailwind.tsx","../../src/GridTypes.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport type { GridProps } from \"./GridTypes\";\nimport GridHybrid from \"./GridHybrid\";\n\n/**\n * Grid component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using a\n * styled() extension or styled-system props).\n */\nconst Grid: React.FC<GridProps> = (props) => <GridHybrid {...props} />;\n\nGrid.displayName = \"Grid\";\nexport default Grid;\n","/**\n * Hybrid Grid component.\n * Automatically chooses between the Tailwind implementation (preferred) and the\n * styled-components implementation. Grid never exposed styled-system props on its\n * public API, so the realistic styled-components trigger is a styled(Grid)\n * extension — routing on needsStyledComponents preserves that backward\n * compatibility (and any accidental styled-system prop spread).\n */\n\nimport React from \"react\";\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\nimport Container from \"./styles\"; // Styled-components version\nimport { GridTailwind } from \"./GridTailwind\"; // Tailwind version\nimport { toResponsiveGapObject } from \"./utils\";\nimport type { GridProps } from \"./GridTypes\";\n\nconst GridHybrid: React.FC<GridProps> = (props) => {\n  const {\n    columns = 1,\n    gap = 400,\n    rowGap,\n    columnGap,\n    children,\n    className,\n  } = props;\n\n  if (needsStyledComponents(props)) {\n    return (\n      <Container\n        display=\"grid\"\n        rowGap={toResponsiveGapObject(rowGap ?? gap)}\n        columnGap={toResponsiveGapObject(columnGap ?? gap)}\n        $columns={columns}\n        className={className}\n      >\n        {children}\n      </Container>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <GridTailwind {...props} />;\n};\n\nGridHybrid.displayName = \"Grid\";\nexport default GridHybrid;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps } from \"./GridTypes\";\nimport { getResponsiveStyles } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n  ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nexport default Container;\n","import type {\n  GapValue,\n  ResponsiveGapValue,\n  ResponsiveValue,\n} from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nconst { breakpoints } = theme;\n\nexport const toResponsiveGapObject = (\n  value: ResponsiveGapValue\n):\n  | GapValue\n  | { sm?: GapValue; md?: GapValue; lg?: GapValue; xl?: GapValue } => {\n  if (typeof value !== \"object\") return value;\n  return value;\n};\n\nexport const getResponsiveStyles = (columns: ResponsiveValue = 1) => {\n  if (typeof columns === \"number\") {\n    return css`\n      grid-template-columns: repeat(${columns}, 1fr);\n    `;\n  }\n\n  return css`\n    grid-template-columns: repeat(1, 1fr);\n\n    @media (min-width: ${breakpoints.sm}) {\n      grid-template-columns: repeat(${columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n      grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n      grid-template-columns: repeat(\n        ${columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n\n    @media (min-width: ${breakpoints.xl}) {\n      grid-template-columns: repeat(\n        ${columns.xl || columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n  `;\n};\n","/**\n * Tailwind/CSS implementation of the Grid component.\n *\n * Dependency-free: renders a plain <div class=\"seeds-grid\"> and drives layout\n * with a mix of inline styles and CSS custom properties consumed by grid.css.\n *\n * jsdom-safe rule (mirrors Icon/Avatar/Skeleton):\n * - Scalar values (a number of columns, or a scalar gap) are written as literal\n *   resolved inline styles (e.g. row-gap: 24px) so window.getComputedStyle sees\n *   them in tests. Do NOT use var(--space-N) here — jsdom cannot resolve it.\n * - Responsive values (an object) are emitted as inline CSS custom properties;\n *   the concrete property is set only by the media queries in grid.css so the\n *   overrides are not blocked by inline specificity.\n */\n\nimport React from \"react\";\nimport type { GapValue, GridProps } from \"./GridTypes\";\n\n// Space scale → px, matching seeds-design-tokens/seeds-space/tokens.json and the\n// mapping Box's styled-system applies on the styled-components path.\nconst SPACE_SCALE: Record<number, number> = {\n  0: 0,\n  100: 2,\n  200: 4,\n  300: 8,\n  350: 12,\n  400: 16,\n  450: 24,\n  500: 32,\n  600: 40,\n};\n\n// Loose bag of CSS declarations + custom properties. Cast to React.CSSProperties\n// at the JSX site (same approach as IconTailwind), since custom properties are\n// not part of the CSSProperties type.\ntype GridStyle = Record<string, string>;\n\ntype ResponsiveGapObject = {\n  sm?: GapValue;\n  md?: GapValue;\n  lg?: GapValue;\n  xl?: GapValue;\n};\n\ntype ResponsiveColumnsObject = {\n  sm?: number;\n  md?: number;\n  lg?: number;\n  xl?: number;\n};\n\n// Resolve a scalar gap value to a concrete CSS length. Space-scale keys map to\n// px; pixel/arbitrary strings (\"20px\", \"1em\") pass through unchanged.\nconst toGap = (value: GapValue): string =>\n  typeof value === \"number\" ? `${SPACE_SCALE[value] ?? 0}px` : value;\n\nconst isResponsive = (value: unknown): boolean =>\n  typeof value === \"object\" && value !== null;\n\n// Set the responsive column custom properties, resolving the breakpoint cascade\n// in JS (md falls back to sm, lg to md/sm, xl to lg/md/sm) exactly like\n// getResponsiveStyles on the styled-components path.\nconst applyResponsiveColumns = (\n  style: GridStyle,\n  columns: ResponsiveColumnsObject\n): void => {\n  const { sm, md, lg, xl } = columns;\n  style[\"--sg-cols\"] = \"repeat(1, 1fr)\";\n  style[\"--sg-cols-sm\"] = `repeat(${sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-md\"] = `repeat(${md ?? sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-lg\"] = `repeat(${lg ?? md ?? sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-xl\"] = `repeat(${xl ?? lg ?? md ?? sm ?? 1}, 1fr)`;\n};\n\n// Apply a single gap axis. Scalar → concrete inline property (jsdom-safe).\n// Responsive → custom properties only, driven by grid.css media queries.\nconst applyGap = (\n  style: GridStyle,\n  axis: \"row\" | \"column\",\n  value: GapValue | ResponsiveGapObject\n): void => {\n  const prefix = axis === \"row\" ? \"--sg-row-gap\" : \"--sg-col-gap\";\n\n  if (isResponsive(value)) {\n    const { sm, md, lg, xl } = value as ResponsiveGapObject;\n    style[prefix] = \"0\";\n    if (sm !== undefined) style[`${prefix}-sm`] = toGap(sm);\n    const mdVal = md ?? sm;\n    if (mdVal !== undefined) style[`${prefix}-md`] = toGap(mdVal);\n    const lgVal = lg ?? md ?? sm;\n    if (lgVal !== undefined) style[`${prefix}-lg`] = toGap(lgVal);\n    const xlVal = xl ?? lg ?? md ?? sm;\n    if (xlVal !== undefined) style[`${prefix}-xl`] = toGap(xlVal);\n    return;\n  }\n\n  const resolved = toGap(value as GapValue);\n  if (axis === \"row\") {\n    style.rowGap = resolved;\n  } else {\n    style.columnGap = resolved;\n  }\n};\n\nexport const GridTailwind: React.FC<GridProps> = ({\n  columns = 1,\n  gap = 400,\n  rowGap,\n  columnGap,\n  children,\n  className,\n}) => {\n  const style: GridStyle = { display: \"grid\" };\n\n  if (isResponsive(columns)) {\n    applyResponsiveColumns(style, columns as ResponsiveColumnsObject);\n  } else {\n    style.gridTemplateColumns = `repeat(${columns as number}, 1fr)`;\n  }\n\n  applyGap(style, \"row\", rowGap ?? gap);\n  applyGap(style, \"column\", columnGap ?? gap);\n\n  const classes = [\"seeds-grid\", className].filter(Boolean).join(\" \");\n\n  return (\n    <div className={classes} style={style as React.CSSProperties}>\n      {children}\n    </div>\n  );\n};\n\nGridTailwind.displayName = \"GridTailwind\";\n","import type { TypeSpace } from \"@sproutsocial/seeds-react-theme\";\nimport * as React from \"react\";\n\nexport type ResponsiveValue =\n  | number\n  | {\n      sm?: number;\n      md?: number;\n      lg?: number;\n      xl?: number;\n    };\n\n/**\n * Gap value that can be either:\n * - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)\n * - A pixel string value (e.g., \"16px\", \"20px\")\n */\nexport type GapValue = keyof TypeSpace | (string & {});\n\n/**\n * Responsive gap value that can be either:\n * - A single GapValue applied at all breakpoints\n * - An object with optional breakpoint keys (sm, md, lg, xl) for responsive values\n */\nexport type ResponsiveGapValue =\n  | GapValue\n  | {\n      sm?: GapValue;\n      md?: GapValue;\n      lg?: GapValue;\n      xl?: GapValue;\n    };\n\nexport interface ContainerProps {\n  $columns?: ResponsiveValue;\n}\n\nexport interface GridProps {\n  /** Number of columns (can be responsive) */\n  columns?: ResponsiveValue;\n  /** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  gap?: ResponsiveGapValue;\n  /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  rowGap?: ResponsiveGapValue;\n  /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  columnGap?: ResponsiveGapValue;\n  /** Children elements to display in the grid */\n  children?: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n","import Grid from \"./Grid\";\n\nexport default Grid;\nexport { Grid };\nexport * from \"./GridTypes\";\n"],"mappings":"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","names":["jsx","jsx"]}

package/dist/index.js

@@ -162,7 +162,14 @@ GridTailwind.displayName = "GridTailwind";
 // src/GridHybrid.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var GridHybrid = (props) => {
-  const { columns = 1, gap = 400, rowGap, columnGap, children, className } = props;
+  const {
+    columns = 1,
+    gap = 400,
+    rowGap,
+    columnGap,
+    children,
+    className
+  } = props;
   if ((0, import_seeds_react_system_props.needsStyledComponents)(props)) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       styles_default,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Grid.tsx","../src/GridHybrid.tsx","../src/styles.ts","../src/utils.ts","../src/GridTailwind.tsx","../src/GridTypes.ts"],"sourcesContent":["import Grid from \"./Grid\";\n\nexport default Grid;\nexport { Grid };\nexport * from \"./GridTypes\";\n","import React from \"react\";\nimport type { GridProps } from \"./GridTypes\";\nimport GridHybrid from \"./GridHybrid\";\n\n/**\n * Grid component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using a\n * styled() extension or styled-system props).\n */\nconst Grid: React.FC<GridProps> = (props) => <GridHybrid {...props} />;\n\nGrid.displayName = \"Grid\";\nexport default Grid;\n","/**\n * Hybrid Grid component.\n * Automatically chooses between the Tailwind implementation (preferred) and the\n * styled-components implementation. Grid never exposed styled-system props on its\n * public API, so the realistic styled-components trigger is a styled(Grid)\n * extension — routing on needsStyledComponents preserves that backward\n * compatibility (and any accidental styled-system prop spread).\n */\n\nimport React from \"react\";\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\nimport Container from \"./styles\"; // Styled-components version\nimport { GridTailwind } from \"./GridTailwind\"; // Tailwind version\nimport { toResponsiveGapObject } from \"./utils\";\nimport type { GridProps } from \"./GridTypes\";\n\nconst GridHybrid: React.FC<GridProps> = (props) => {\n  const { columns = 1, gap = 400, rowGap, columnGap, children, className } =\n    props;\n\n  if (needsStyledComponents(props)) {\n    return (\n      <Container\n        display=\"grid\"\n        rowGap={toResponsiveGapObject(rowGap ?? gap)}\n        columnGap={toResponsiveGapObject(columnGap ?? gap)}\n        $columns={columns}\n        className={className}\n      >\n        {children}\n      </Container>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <GridTailwind {...props} />;\n};\n\nGridHybrid.displayName = \"Grid\";\nexport default GridHybrid;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps } from \"./GridTypes\";\nimport { getResponsiveStyles } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n  ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nexport default Container;\n","import type {\n  GapValue,\n  ResponsiveGapValue,\n  ResponsiveValue,\n} from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nconst { breakpoints } = theme;\n\nexport const toResponsiveGapObject = (\n  value: ResponsiveGapValue\n):\n  | GapValue\n  | { sm?: GapValue; md?: GapValue; lg?: GapValue; xl?: GapValue } => {\n  if (typeof value !== \"object\") return value;\n  return value;\n};\n\nexport const getResponsiveStyles = (columns: ResponsiveValue = 1) => {\n  if (typeof columns === \"number\") {\n    return css`\n      grid-template-columns: repeat(${columns}, 1fr);\n    `;\n  }\n\n  return css`\n    grid-template-columns: repeat(1, 1fr);\n\n    @media (min-width: ${breakpoints.sm}) {\n      grid-template-columns: repeat(${columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n      grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n      grid-template-columns: repeat(\n        ${columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n\n    @media (min-width: ${breakpoints.xl}) {\n      grid-template-columns: repeat(\n        ${columns.xl || columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n  `;\n};\n","/**\n * Tailwind/CSS implementation of the Grid component.\n *\n * Dependency-free: renders a plain <div class=\"seeds-grid\"> and drives layout\n * with a mix of inline styles and CSS custom properties consumed by grid.css.\n *\n * jsdom-safe rule (mirrors Icon/Avatar/Skeleton):\n * - Scalar values (a number of columns, or a scalar gap) are written as literal\n *   resolved inline styles (e.g. row-gap: 24px) so window.getComputedStyle sees\n *   them in tests. Do NOT use var(--space-N) here — jsdom cannot resolve it.\n * - Responsive values (an object) are emitted as inline CSS custom properties;\n *   the concrete property is set only by the media queries in grid.css so the\n *   overrides are not blocked by inline specificity.\n */\n\nimport React from \"react\";\nimport type { GapValue, GridProps } from \"./GridTypes\";\n\n// Space scale → px, matching seeds-design-tokens/seeds-space/tokens.json and the\n// mapping Box's styled-system applies on the styled-components path.\nconst SPACE_SCALE: Record<number, number> = {\n  0: 0,\n  100: 2,\n  200: 4,\n  300: 8,\n  350: 12,\n  400: 16,\n  450: 24,\n  500: 32,\n  600: 40,\n};\n\n// Loose bag of CSS declarations + custom properties. Cast to React.CSSProperties\n// at the JSX site (same approach as IconTailwind), since custom properties are\n// not part of the CSSProperties type.\ntype GridStyle = Record<string, string>;\n\ntype ResponsiveGapObject = {\n  sm?: GapValue;\n  md?: GapValue;\n  lg?: GapValue;\n  xl?: GapValue;\n};\n\ntype ResponsiveColumnsObject = {\n  sm?: number;\n  md?: number;\n  lg?: number;\n  xl?: number;\n};\n\n// Resolve a scalar gap value to a concrete CSS length. Space-scale keys map to\n// px; pixel/arbitrary strings (\"20px\", \"1em\") pass through unchanged.\nconst toGap = (value: GapValue): string =>\n  typeof value === \"number\" ? `${SPACE_SCALE[value] ?? 0}px` : value;\n\nconst isResponsive = (value: unknown): boolean =>\n  typeof value === \"object\" && value !== null;\n\n// Set the responsive column custom properties, resolving the breakpoint cascade\n// in JS (md falls back to sm, lg to md/sm, xl to lg/md/sm) exactly like\n// getResponsiveStyles on the styled-components path.\nconst applyResponsiveColumns = (\n  style: GridStyle,\n  columns: ResponsiveColumnsObject\n): void => {\n  const { sm, md, lg, xl } = columns;\n  style[\"--sg-cols\"] = \"repeat(1, 1fr)\";\n  style[\"--sg-cols-sm\"] = `repeat(${sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-md\"] = `repeat(${md ?? sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-lg\"] = `repeat(${lg ?? md ?? sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-xl\"] = `repeat(${xl ?? lg ?? md ?? sm ?? 1}, 1fr)`;\n};\n\n// Apply a single gap axis. Scalar → concrete inline property (jsdom-safe).\n// Responsive → custom properties only, driven by grid.css media queries.\nconst applyGap = (\n  style: GridStyle,\n  axis: \"row\" | \"column\",\n  value: GapValue | ResponsiveGapObject\n): void => {\n  const prefix = axis === \"row\" ? \"--sg-row-gap\" : \"--sg-col-gap\";\n\n  if (isResponsive(value)) {\n    const { sm, md, lg, xl } = value as ResponsiveGapObject;\n    style[prefix] = \"0\";\n    if (sm !== undefined) style[`${prefix}-sm`] = toGap(sm);\n    const mdVal = md ?? sm;\n    if (mdVal !== undefined) style[`${prefix}-md`] = toGap(mdVal);\n    const lgVal = lg ?? md ?? sm;\n    if (lgVal !== undefined) style[`${prefix}-lg`] = toGap(lgVal);\n    const xlVal = xl ?? lg ?? md ?? sm;\n    if (xlVal !== undefined) style[`${prefix}-xl`] = toGap(xlVal);\n    return;\n  }\n\n  const resolved = toGap(value as GapValue);\n  if (axis === \"row\") {\n    style.rowGap = resolved;\n  } else {\n    style.columnGap = resolved;\n  }\n};\n\nexport const GridTailwind: React.FC<GridProps> = ({\n  columns = 1,\n  gap = 400,\n  rowGap,\n  columnGap,\n  children,\n  className,\n}) => {\n  const style: GridStyle = { display: \"grid\" };\n\n  if (isResponsive(columns)) {\n    applyResponsiveColumns(style, columns as ResponsiveColumnsObject);\n  } else {\n    style.gridTemplateColumns = `repeat(${columns as number}, 1fr)`;\n  }\n\n  applyGap(style, \"row\", rowGap ?? gap);\n  applyGap(style, \"column\", columnGap ?? gap);\n\n  const classes = [\"seeds-grid\", className].filter(Boolean).join(\" \");\n\n  return (\n    <div className={classes} style={style as React.CSSProperties}>\n      {children}\n    </div>\n  );\n};\n\nGridTailwind.displayName = \"GridTailwind\";\n","import type { TypeSpace } from \"@sproutsocial/seeds-react-theme\";\nimport * as React from \"react\";\n\nexport type ResponsiveValue =\n  | number\n  | {\n      sm?: number;\n      md?: number;\n      lg?: number;\n      xl?: number;\n    };\n\n/**\n * Gap value that can be either:\n * - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)\n * - A pixel string value (e.g., \"16px\", \"20px\")\n */\nexport type GapValue = keyof TypeSpace | (string & {});\n\n/**\n * Responsive gap value that can be either:\n * - A single GapValue applied at all breakpoints\n * - An object with optional breakpoint keys (sm, md, lg, xl) for responsive values\n */\nexport type ResponsiveGapValue =\n  | GapValue\n  | {\n      sm?: GapValue;\n      md?: GapValue;\n      lg?: GapValue;\n      xl?: GapValue;\n    };\n\nexport interface ContainerProps {\n  $columns?: ResponsiveValue;\n}\n\nexport interface GridProps {\n  /** Number of columns (can be responsive) */\n  columns?: ResponsiveValue;\n  /** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  gap?: ResponsiveGapValue;\n  /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  rowGap?: ResponsiveGapValue;\n  /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  columnGap?: ResponsiveGapValue;\n  /** Children elements to display in the grid */\n  children?: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAkB;;;ACSlB,IAAAC,gBAAkB;AAClB,sCAAsC;;;ACVtC,IAAAC,4BAAmB;AACnB,6BAAgB;;;ACIhB,+BAAoB;AACpB,+BAAsB;AAEtB,IAAM,EAAE,YAAY,IAAI;AAEjB,IAAM,wBAAwB,CACnC,UAGoE;AACpE,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,SAAO;AACT;AAEO,IAAM,sBAAsB,CAAC,UAA2B,MAAM;AACnE,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO;AAAA,sCAC2B,OAAO;AAAA;AAAA,EAE3C;AAEA,SAAO;AAAA;AAAA;AAAA,yBAGgB,YAAY,EAAE;AAAA,sCACD,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,yBAG5B,YAAY,EAAE;AAAA,sCACD,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,yBAG1C,YAAY,EAAE;AAAA;AAAA,UAE7B,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,yBAK5B,YAAY,EAAE;AAAA;AAAA,UAE7B,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAKnE;;;AD9CA,IAAM,gBAAY,0BAAAC,SAAO,uBAAAC,OAAG;AAAA,IACxB,CAAC,UAAU,oBAAoB,MAAM,QAAQ,CAAC;AAAA;AAGlD,IAAO,iBAAQ;;;AEMf,mBAAkB;AA+Gd;AA1GJ,IAAM,cAAsC;AAAA,EAC1C,GAAG;AAAA,EACH,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP;AAuBA,IAAM,QAAQ,CAAC,UACb,OAAO,UAAU,WAAW,GAAG,YAAY,KAAK,KAAK,CAAC,OAAO;AAE/D,IAAM,eAAe,CAAC,UACpB,OAAO,UAAU,YAAY,UAAU;AAKzC,IAAM,yBAAyB,CAC7B,OACA,YACS;AACT,QAAM,EAAE,IAAI,IAAI,IAAI,GAAG,IAAI;AAC3B,QAAM,WAAW,IAAI;AACrB,QAAM,cAAc,IAAI,UAAU,MAAM,CAAC;AACzC,QAAM,cAAc,IAAI,UAAU,MAAM,MAAM,CAAC;AAC/C,QAAM,cAAc,IAAI,UAAU,MAAM,MAAM,MAAM,CAAC;AACrD,QAAM,cAAc,IAAI,UAAU,MAAM,MAAM,MAAM,MAAM,CAAC;AAC7D;AAIA,IAAM,WAAW,CACf,OACA,MACA,UACS;AACT,QAAM,SAAS,SAAS,QAAQ,iBAAiB;AAEjD,MAAI,aAAa,KAAK,GAAG;AACvB,UAAM,EAAE,IAAI,IAAI,IAAI,GAAG,IAAI;AAC3B,UAAM,MAAM,IAAI;AAChB,QAAI,OAAO,OAAW,OAAM,GAAG,MAAM,KAAK,IAAI,MAAM,EAAE;AACtD,UAAM,QAAQ,MAAM;AACpB,QAAI,UAAU,OAAW,OAAM,GAAG,MAAM,KAAK,IAAI,MAAM,KAAK;AAC5D,UAAM,QAAQ,MAAM,MAAM;AAC1B,QAAI,UAAU,OAAW,OAAM,GAAG,MAAM,KAAK,IAAI,MAAM,KAAK;AAC5D,UAAM,QAAQ,MAAM,MAAM,MAAM;AAChC,QAAI,UAAU,OAAW,OAAM,GAAG,MAAM,KAAK,IAAI,MAAM,KAAK;AAC5D;AAAA,EACF;AAEA,QAAM,WAAW,MAAM,KAAiB;AACxC,MAAI,SAAS,OAAO;AAClB,UAAM,SAAS;AAAA,EACjB,OAAO;AACL,UAAM,YAAY;AAAA,EACpB;AACF;AAEO,IAAM,eAAoC,CAAC;AAAA,EAChD,UAAU;AAAA,EACV,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAmB,EAAE,SAAS,OAAO;AAE3C,MAAI,aAAa,OAAO,GAAG;AACzB,2BAAuB,OAAO,OAAkC;AAAA,EAClE,OAAO;AACL,UAAM,sBAAsB,UAAU,OAAiB;AAAA,EACzD;AAEA,WAAS,OAAO,OAAO,UAAU,GAAG;AACpC,WAAS,OAAO,UAAU,aAAa,GAAG;AAE1C,QAAM,UAAU,CAAC,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAElE,SACE,4CAAC,SAAI,WAAW,SAAS,OACtB,UACH;AAEJ;AAEA,aAAa,cAAc;;;AH9GrB,IAAAC,sBAAA;AANN,IAAM,aAAkC,CAAC,UAAU;AACjD,QAAM,EAAE,UAAU,GAAG,MAAM,KAAK,QAAQ,WAAW,UAAU,UAAU,IACrE;AAEF,UAAI,uDAAsB,KAAK,GAAG;AAChC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,QAAQ,sBAAsB,UAAU,GAAG;AAAA,QAC3C,WAAW,sBAAsB,aAAa,GAAG;AAAA,QACjD,UAAU;AAAA,QACV;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AAGA,SAAO,6CAAC,gBAAc,GAAG,OAAO;AAClC;AAEA,WAAW,cAAc;AACzB,IAAO,qBAAQ;;;AD9B8B,IAAAC,sBAAA;AAA7C,IAAM,OAA4B,CAAC,UAAU,6CAAC,sBAAY,GAAG,OAAO;AAEpE,KAAK,cAAc;AACnB,IAAO,eAAQ;;;AKXf,IAAAC,SAAuB;;;ANCvB,IAAO,gBAAQ;","names":["import_react","import_react","import_styled_components","styled","Box","import_jsx_runtime","import_jsx_runtime","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Grid.tsx","../src/GridHybrid.tsx","../src/styles.ts","../src/utils.ts","../src/GridTailwind.tsx","../src/GridTypes.ts"],"sourcesContent":["import Grid from \"./Grid\";\n\nexport default Grid;\nexport { Grid };\nexport * from \"./GridTypes\";\n","import React from \"react\";\nimport type { GridProps } from \"./GridTypes\";\nimport GridHybrid from \"./GridHybrid\";\n\n/**\n * Grid component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using a\n * styled() extension or styled-system props).\n */\nconst Grid: React.FC<GridProps> = (props) => <GridHybrid {...props} />;\n\nGrid.displayName = \"Grid\";\nexport default Grid;\n","/**\n * Hybrid Grid component.\n * Automatically chooses between the Tailwind implementation (preferred) and the\n * styled-components implementation. Grid never exposed styled-system props on its\n * public API, so the realistic styled-components trigger is a styled(Grid)\n * extension — routing on needsStyledComponents preserves that backward\n * compatibility (and any accidental styled-system prop spread).\n */\n\nimport React from \"react\";\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\nimport Container from \"./styles\"; // Styled-components version\nimport { GridTailwind } from \"./GridTailwind\"; // Tailwind version\nimport { toResponsiveGapObject } from \"./utils\";\nimport type { GridProps } from \"./GridTypes\";\n\nconst GridHybrid: React.FC<GridProps> = (props) => {\n  const {\n    columns = 1,\n    gap = 400,\n    rowGap,\n    columnGap,\n    children,\n    className,\n  } = props;\n\n  if (needsStyledComponents(props)) {\n    return (\n      <Container\n        display=\"grid\"\n        rowGap={toResponsiveGapObject(rowGap ?? gap)}\n        columnGap={toResponsiveGapObject(columnGap ?? gap)}\n        $columns={columns}\n        className={className}\n      >\n        {children}\n      </Container>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <GridTailwind {...props} />;\n};\n\nGridHybrid.displayName = \"Grid\";\nexport default GridHybrid;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps } from \"./GridTypes\";\nimport { getResponsiveStyles } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n  ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nexport default Container;\n","import type {\n  GapValue,\n  ResponsiveGapValue,\n  ResponsiveValue,\n} from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nconst { breakpoints } = theme;\n\nexport const toResponsiveGapObject = (\n  value: ResponsiveGapValue\n):\n  | GapValue\n  | { sm?: GapValue; md?: GapValue; lg?: GapValue; xl?: GapValue } => {\n  if (typeof value !== \"object\") return value;\n  return value;\n};\n\nexport const getResponsiveStyles = (columns: ResponsiveValue = 1) => {\n  if (typeof columns === \"number\") {\n    return css`\n      grid-template-columns: repeat(${columns}, 1fr);\n    `;\n  }\n\n  return css`\n    grid-template-columns: repeat(1, 1fr);\n\n    @media (min-width: ${breakpoints.sm}) {\n      grid-template-columns: repeat(${columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n      grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n      grid-template-columns: repeat(\n        ${columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n\n    @media (min-width: ${breakpoints.xl}) {\n      grid-template-columns: repeat(\n        ${columns.xl || columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n  `;\n};\n","/**\n * Tailwind/CSS implementation of the Grid component.\n *\n * Dependency-free: renders a plain <div class=\"seeds-grid\"> and drives layout\n * with a mix of inline styles and CSS custom properties consumed by grid.css.\n *\n * jsdom-safe rule (mirrors Icon/Avatar/Skeleton):\n * - Scalar values (a number of columns, or a scalar gap) are written as literal\n *   resolved inline styles (e.g. row-gap: 24px) so window.getComputedStyle sees\n *   them in tests. Do NOT use var(--space-N) here — jsdom cannot resolve it.\n * - Responsive values (an object) are emitted as inline CSS custom properties;\n *   the concrete property is set only by the media queries in grid.css so the\n *   overrides are not blocked by inline specificity.\n */\n\nimport React from \"react\";\nimport type { GapValue, GridProps } from \"./GridTypes\";\n\n// Space scale → px, matching seeds-design-tokens/seeds-space/tokens.json and the\n// mapping Box's styled-system applies on the styled-components path.\nconst SPACE_SCALE: Record<number, number> = {\n  0: 0,\n  100: 2,\n  200: 4,\n  300: 8,\n  350: 12,\n  400: 16,\n  450: 24,\n  500: 32,\n  600: 40,\n};\n\n// Loose bag of CSS declarations + custom properties. Cast to React.CSSProperties\n// at the JSX site (same approach as IconTailwind), since custom properties are\n// not part of the CSSProperties type.\ntype GridStyle = Record<string, string>;\n\ntype ResponsiveGapObject = {\n  sm?: GapValue;\n  md?: GapValue;\n  lg?: GapValue;\n  xl?: GapValue;\n};\n\ntype ResponsiveColumnsObject = {\n  sm?: number;\n  md?: number;\n  lg?: number;\n  xl?: number;\n};\n\n// Resolve a scalar gap value to a concrete CSS length. Space-scale keys map to\n// px; pixel/arbitrary strings (\"20px\", \"1em\") pass through unchanged.\nconst toGap = (value: GapValue): string =>\n  typeof value === \"number\" ? `${SPACE_SCALE[value] ?? 0}px` : value;\n\nconst isResponsive = (value: unknown): boolean =>\n  typeof value === \"object\" && value !== null;\n\n// Set the responsive column custom properties, resolving the breakpoint cascade\n// in JS (md falls back to sm, lg to md/sm, xl to lg/md/sm) exactly like\n// getResponsiveStyles on the styled-components path.\nconst applyResponsiveColumns = (\n  style: GridStyle,\n  columns: ResponsiveColumnsObject\n): void => {\n  const { sm, md, lg, xl } = columns;\n  style[\"--sg-cols\"] = \"repeat(1, 1fr)\";\n  style[\"--sg-cols-sm\"] = `repeat(${sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-md\"] = `repeat(${md ?? sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-lg\"] = `repeat(${lg ?? md ?? sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-xl\"] = `repeat(${xl ?? lg ?? md ?? sm ?? 1}, 1fr)`;\n};\n\n// Apply a single gap axis. Scalar → concrete inline property (jsdom-safe).\n// Responsive → custom properties only, driven by grid.css media queries.\nconst applyGap = (\n  style: GridStyle,\n  axis: \"row\" | \"column\",\n  value: GapValue | ResponsiveGapObject\n): void => {\n  const prefix = axis === \"row\" ? \"--sg-row-gap\" : \"--sg-col-gap\";\n\n  if (isResponsive(value)) {\n    const { sm, md, lg, xl } = value as ResponsiveGapObject;\n    style[prefix] = \"0\";\n    if (sm !== undefined) style[`${prefix}-sm`] = toGap(sm);\n    const mdVal = md ?? sm;\n    if (mdVal !== undefined) style[`${prefix}-md`] = toGap(mdVal);\n    const lgVal = lg ?? md ?? sm;\n    if (lgVal !== undefined) style[`${prefix}-lg`] = toGap(lgVal);\n    const xlVal = xl ?? lg ?? md ?? sm;\n    if (xlVal !== undefined) style[`${prefix}-xl`] = toGap(xlVal);\n    return;\n  }\n\n  const resolved = toGap(value as GapValue);\n  if (axis === \"row\") {\n    style.rowGap = resolved;\n  } else {\n    style.columnGap = resolved;\n  }\n};\n\nexport const GridTailwind: React.FC<GridProps> = ({\n  columns = 1,\n  gap = 400,\n  rowGap,\n  columnGap,\n  children,\n  className,\n}) => {\n  const style: GridStyle = { display: \"grid\" };\n\n  if (isResponsive(columns)) {\n    applyResponsiveColumns(style, columns as ResponsiveColumnsObject);\n  } else {\n    style.gridTemplateColumns = `repeat(${columns as number}, 1fr)`;\n  }\n\n  applyGap(style, \"row\", rowGap ?? gap);\n  applyGap(style, \"column\", columnGap ?? gap);\n\n  const classes = [\"seeds-grid\", className].filter(Boolean).join(\" \");\n\n  return (\n    <div className={classes} style={style as React.CSSProperties}>\n      {children}\n    </div>\n  );\n};\n\nGridTailwind.displayName = \"GridTailwind\";\n","import type { TypeSpace } from \"@sproutsocial/seeds-react-theme\";\nimport * as React from \"react\";\n\nexport type ResponsiveValue =\n  | number\n  | {\n      sm?: number;\n      md?: number;\n      lg?: number;\n      xl?: number;\n    };\n\n/**\n * Gap value that can be either:\n * - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)\n * - A pixel string value (e.g., \"16px\", \"20px\")\n */\nexport type GapValue = keyof TypeSpace | (string & {});\n\n/**\n * Responsive gap value that can be either:\n * - A single GapValue applied at all breakpoints\n * - An object with optional breakpoint keys (sm, md, lg, xl) for responsive values\n */\nexport type ResponsiveGapValue =\n  | GapValue\n  | {\n      sm?: GapValue;\n      md?: GapValue;\n      lg?: GapValue;\n      xl?: GapValue;\n    };\n\nexport interface ContainerProps {\n  $columns?: ResponsiveValue;\n}\n\nexport interface GridProps {\n  /** Number of columns (can be responsive) */\n  columns?: ResponsiveValue;\n  /** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  gap?: ResponsiveGapValue;\n  /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  rowGap?: ResponsiveGapValue;\n  /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  columnGap?: ResponsiveGapValue;\n  /** Children elements to display in the grid */\n  children?: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n"],"mappings":"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","names":["import_react","import_react","import_styled_components","styled","Box","import_jsx_runtime","import_jsx_runtime","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-grid",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "Seeds React Grid",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -29,9 +29,9 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-box": "^1.1.28",
-    "@sproutsocial/seeds-react-theme": "^4.3.1",
-    "@sproutsocial/seeds-react-system-props": "^3.1.4"
+    "@sproutsocial/seeds-react-box": "^1.1.30",
+    "@sproutsocial/seeds-react-theme": "^4.4.0",
+    "@sproutsocial/seeds-react-system-props": "^3.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",