@sproutsocial/seeds-react-grid 0.1.0 → 0.2.0

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     3.61 KB
-CJS dist/index.js.map 4.56 KB
-CJS ⚡️ Build success in 99ms
-ESM dist/esm/index.js     1.71 KB
-ESM dist/esm/index.js.map 4.45 KB
-ESM ⚡️ Build success in 101ms
+CJS dist/index.js     3.71 KB
+CJS dist/index.js.map 5.23 KB
+CJS ⚡️ Build success in 50ms
+ESM dist/esm/index.js     1.84 KB
+ESM dist/esm/index.js.map 5.11 KB
+ESM ⚡️ Build success in 51ms
 DTS Build start
-DTS ⚡️ Build success in 4810ms
-DTS dist/index.d.ts  1.50 KB
-DTS dist/index.d.mts 1.50 KB
-Done in 6.61s.
+DTS ⚡️ Build success in 4364ms
+DTS dist/index.d.ts  1.86 KB
+DTS dist/index.d.mts 1.86 KB
+Done in 5.53s.

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @sproutsocial/seeds-react-grid
 
+## 0.2.0
+
+### Minor Changes
+
+- a08b705: Gap values can now be passed an object of responsive values
+
+### Patch Changes
+
+- 4ba8720: Fix `breakpoints` alias typing so consumers can import `TypeBreakpoint` (and use `theme.breakpoints`) without type errors.
+
+  - `theme.breakpoints.sm/md/lg/xl` are now CSS length strings (e.g. `"640px"`) instead of raw numbers. Array entries (`breakpoints[0]`...) are unchanged during the migration to the new scale.
+  - `newBreakpoints` is no longer exported from the theme package — consumers should use `theme.breakpoints.sm/md/lg/xl` instead. Grid media queries updated accordingly.
+
+- Updated dependencies [4ba8720]
+  - @sproutsocial/seeds-react-theme@3.6.2
+  - @sproutsocial/seeds-react-box@1.1.16
+
+## 0.1.1
+
+### Patch Changes
+
+- 1f9a473: Switched grids to use newBreakpoints theme values that are preventing users from using grid's columns api responsively
+- Updated dependencies [1f9a473]
+  - @sproutsocial/seeds-react-theme@3.6.1
+  - @sproutsocial/seeds-react-box@1.1.15
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/esm/index.js

@@ -7,6 +7,10 @@ import Box from "@sproutsocial/seeds-react-box";
 import { css } from "styled-components";
 import { theme } from "@sproutsocial/seeds-react-theme";
 var { breakpoints } = theme;
+var toResponsiveGapObject = (value) => {
+  if (typeof value !== "object") return value;
+  return value;
+};
 var getResponsiveStyles = (columns = 1) => {
   if (typeof columns === "number") {
     return css`
@@ -14,20 +18,24 @@ var getResponsiveStyles = (columns = 1) => {
     `;
   }
   return css`
-    grid-template-columns: repeat(${columns.sm || 1}, 1fr);
+    grid-template-columns: repeat(1, 1fr);
+
+    @media (min-width: ${breakpoints.sm}) {
+      grid-template-columns: repeat(${columns.sm || 1}, 1fr);
+    }
 
-    @media (min-width: ${breakpoints.md}px) {
+    @media (min-width: ${breakpoints.md}) {
       grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);
     }
 
-    @media (min-width: ${breakpoints.lg}px) {
+    @media (min-width: ${breakpoints.lg}) {
       grid-template-columns: repeat(
         ${columns.lg || columns.md || columns.sm || 1},
         1fr
       );
     }
 
-    @media (min-width: ${breakpoints.xl}px) {
+    @media (min-width: ${breakpoints.xl}) {
       grid-template-columns: repeat(
         ${columns.xl || columns.lg || columns.md || columns.sm || 1},
         1fr
@@ -53,8 +61,8 @@ var Grid = ({
     Container,
     {
       display: "grid",
-      rowGap: rowGap ?? gap,
-      columnGap: columnGap ?? gap,
+      rowGap: toResponsiveGapObject(rowGap ?? gap),
+      columnGap: toResponsiveGapObject(columnGap ?? gap),
       $columns: columns,
       className,
       children
@@ -66,18 +74,9 @@ var Grid_default = Grid;
 // src/GridTypes.ts
 import "react";
 
-// src/constants.ts
-var BREAKPOINTS = {
-  sm: 640,
-  md: 768,
-  lg: 1024,
-  xl: 1280
-};
-
 // src/index.ts
 var index_default = Grid_default;
 export {
-  BREAKPOINTS,
   Grid_default as Grid,
   index_default as default
 };

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Grid.tsx","../../src/utils.ts","../../src/GridTypes.ts","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps, GridProps } from \"./GridTypes\";\nimport { getResponsiveStyles } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n  ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nconst Grid: React.FC<GridProps> = ({\n  columns = 1,\n  gap = 400,\n  rowGap,\n  columnGap,\n  children,\n  className,\n}) => {\n  return (\n    <Container\n      display=\"grid\"\n      rowGap={rowGap ?? gap}\n      columnGap={columnGap ?? gap}\n      $columns={columns}\n      className={className}\n    >\n      {children}\n    </Container>\n  );\n};\n\nexport default Grid;\n","import type { ResponsiveValue } from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n// WE may want to check this. I also see seeds-react/seeds-react-grid/src/constants.ts which has different values\n// And 900px for \"small\" seems way too big\nconst { breakpoints } = theme;\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(${columns.sm || 1}, 1fr);\n\n    @media (min-width: ${breakpoints.md}px) {\n      grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.lg}px) {\n      grid-template-columns: repeat(\n        ${columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n\n    @media (min-width: ${breakpoints.xl}px) {\n      grid-template-columns: repeat(\n        ${columns.xl || columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n  `;\n};\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\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) or pixel string (e.g., \"16px\") */\n  gap?: GapValue;\n  /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., \"16px\") */\n  rowGap?: GapValue;\n  /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., \"16px\") */\n  columnGap?: GapValue;\n  /** Children elements to display in the grid */\n  children?: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n","export const BREAKPOINTS = {\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n} as const;\n","import Grid from \"./Grid\";\n\nexport default Grid;\nexport { Grid };\nexport * from \"./GridTypes\";\nexport { BREAKPOINTS } from \"./constants\";\n"],"mappings":";AAAA,OAAkB;AAClB,OAAO,YAAY;AACnB,OAAO,SAAS;;;ACDhB,SAAS,WAAW;AACpB,SAAS,aAAa;AAGtB,IAAM,EAAE,YAAY,IAAI;AAEjB,IAAM,sBAAsB,CAAC,UAA2B,MAAM;AACnE,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO;AAAA,sCAC2B,OAAO;AAAA;AAAA,EAE3C;AAEA,SAAO;AAAA,oCAC2B,QAAQ,MAAM,CAAC;AAAA;AAAA,yBAE1B,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;;;ADhBI;AAbJ,IAAM,YAAY,OAAO,GAAG;AAAA,IACxB,CAAC,UAAU,oBAAoB,MAAM,QAAQ,CAAC;AAAA;AAGlD,IAAM,OAA4B,CAAC;AAAA,EACjC,UAAU;AAAA,EACV,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,QAAQ,UAAU;AAAA,MAClB,WAAW,aAAa;AAAA,MACxB,UAAU;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;AE9Bf,OAAuB;;;ACDhB,IAAM,cAAc;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;;;ACHA,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../../src/Grid.tsx","../../src/utils.ts","../../src/GridTypes.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps, GridProps } from \"./GridTypes\";\nimport { getResponsiveStyles, toResponsiveGapObject } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n  ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nconst Grid: React.FC<GridProps> = ({\n  columns = 1,\n  gap = 400,\n  rowGap,\n  columnGap,\n  children,\n  className,\n}) => {\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\nexport default Grid;\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","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":";AAAA,OAAkB;AAClB,OAAO,YAAY;AACnB,OAAO,SAAS;;;ACGhB,SAAS,WAAW;AACpB,SAAS,aAAa;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;;;ADhCI;AAbJ,IAAM,YAAY,OAAO,GAAG;AAAA,IACxB,CAAC,UAAU,oBAAoB,MAAM,QAAQ,CAAC;AAAA;AAGlD,IAAM,OAA4B,CAAC;AAAA,EACjC,UAAU;AAAA,EACV,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,QAAQ,sBAAsB,UAAU,GAAG;AAAA,MAC3C,WAAW,sBAAsB,aAAa,GAAG;AAAA,MACjD,UAAU;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;AE9Bf,OAAuB;;;ACCvB,IAAO,gBAAQ;","names":[]}

package/dist/index.d.mts

@@ -14,18 +14,29 @@ type ResponsiveValue = number | {
  * - A pixel string value (e.g., "16px", "20px")
  */
 type GapValue = keyof TypeSpace | (string & {});
+/**
+ * Responsive gap value that can be either:
+ * - A single GapValue applied at all breakpoints
+ * - An object with optional breakpoint keys (sm, md, lg, xl) for responsive values
+ */
+type ResponsiveGapValue = GapValue | {
+    sm?: GapValue;
+    md?: GapValue;
+    lg?: GapValue;
+    xl?: GapValue;
+};
 interface ContainerProps {
     $columns?: ResponsiveValue;
 }
 interface GridProps {
     /** Number of columns (can be responsive) */
     columns?: ResponsiveValue;
-    /** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., "16px") */
-    gap?: GapValue;
-    /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., "16px") */
-    rowGap?: GapValue;
-    /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., "16px") */
-    columnGap?: GapValue;
+    /** 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 }) */
+    gap?: ResponsiveGapValue;
+    /** 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 }) */
+    rowGap?: ResponsiveGapValue;
+    /** 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 }) */
+    columnGap?: ResponsiveGapValue;
     /** Children elements to display in the grid */
     children?: React.ReactNode;
     /** Custom className */
@@ -34,11 +45,4 @@ interface GridProps {
 
 declare const Grid: React__default.FC<GridProps>;
 
-declare const BREAKPOINTS: {
-    readonly sm: 640;
-    readonly md: 768;
-    readonly lg: 1024;
-    readonly xl: 1280;
-};
-
-export { BREAKPOINTS, type ContainerProps, type GapValue, Grid, type GridProps, type ResponsiveValue, Grid as default };
+export { type ContainerProps, type GapValue, Grid, type GridProps, type ResponsiveGapValue, type ResponsiveValue, Grid as default };

package/dist/index.d.ts

@@ -14,18 +14,29 @@ type ResponsiveValue = number | {
  * - A pixel string value (e.g., "16px", "20px")
  */
 type GapValue = keyof TypeSpace | (string & {});
+/**
+ * Responsive gap value that can be either:
+ * - A single GapValue applied at all breakpoints
+ * - An object with optional breakpoint keys (sm, md, lg, xl) for responsive values
+ */
+type ResponsiveGapValue = GapValue | {
+    sm?: GapValue;
+    md?: GapValue;
+    lg?: GapValue;
+    xl?: GapValue;
+};
 interface ContainerProps {
     $columns?: ResponsiveValue;
 }
 interface GridProps {
     /** Number of columns (can be responsive) */
     columns?: ResponsiveValue;
-    /** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., "16px") */
-    gap?: GapValue;
-    /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., "16px") */
-    rowGap?: GapValue;
-    /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., "16px") */
-    columnGap?: GapValue;
+    /** 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 }) */
+    gap?: ResponsiveGapValue;
+    /** 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 }) */
+    rowGap?: ResponsiveGapValue;
+    /** 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 }) */
+    columnGap?: ResponsiveGapValue;
     /** Children elements to display in the grid */
     children?: React.ReactNode;
     /** Custom className */
@@ -34,11 +45,4 @@ interface GridProps {
 
 declare const Grid: React__default.FC<GridProps>;
 
-declare const BREAKPOINTS: {
-    readonly sm: 640;
-    readonly md: 768;
-    readonly lg: 1024;
-    readonly xl: 1280;
-};
-
-export { BREAKPOINTS, type ContainerProps, type GapValue, Grid, type GridProps, type ResponsiveValue, Grid as default };
+export { type ContainerProps, type GapValue, Grid, type GridProps, type ResponsiveGapValue, type ResponsiveValue, Grid as default };

package/dist/index.js

@@ -30,7 +30,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  BREAKPOINTS: () => BREAKPOINTS,
   Grid: () => Grid_default,
   default: () => index_default
 });
@@ -45,6 +44,10 @@ var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_styled_components = require("styled-components");
 var import_seeds_react_theme = require("@sproutsocial/seeds-react-theme");
 var { breakpoints } = import_seeds_react_theme.theme;
+var toResponsiveGapObject = (value) => {
+  if (typeof value !== "object") return value;
+  return value;
+};
 var getResponsiveStyles = (columns = 1) => {
   if (typeof columns === "number") {
     return import_styled_components.css`
@@ -52,20 +55,24 @@ var getResponsiveStyles = (columns = 1) => {
     `;
   }
   return import_styled_components.css`
-    grid-template-columns: repeat(${columns.sm || 1}, 1fr);
+    grid-template-columns: repeat(1, 1fr);
+
+    @media (min-width: ${breakpoints.sm}) {
+      grid-template-columns: repeat(${columns.sm || 1}, 1fr);
+    }
 
-    @media (min-width: ${breakpoints.md}px) {
+    @media (min-width: ${breakpoints.md}) {
       grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);
     }
 
-    @media (min-width: ${breakpoints.lg}px) {
+    @media (min-width: ${breakpoints.lg}) {
       grid-template-columns: repeat(
         ${columns.lg || columns.md || columns.sm || 1},
         1fr
       );
     }
 
-    @media (min-width: ${breakpoints.xl}px) {
+    @media (min-width: ${breakpoints.xl}) {
       grid-template-columns: repeat(
         ${columns.xl || columns.lg || columns.md || columns.sm || 1},
         1fr
@@ -91,8 +98,8 @@ var Grid = ({
     Container,
     {
       display: "grid",
-      rowGap: rowGap ?? gap,
-      columnGap: columnGap ?? gap,
+      rowGap: toResponsiveGapObject(rowGap ?? gap),
+      columnGap: toResponsiveGapObject(columnGap ?? gap),
       $columns: columns,
       className,
       children
@@ -104,19 +111,10 @@ var Grid_default = Grid;
 // src/GridTypes.ts
 var React2 = require("react");
 
-// src/constants.ts
-var BREAKPOINTS = {
-  sm: 640,
-  md: 768,
-  lg: 1024,
-  xl: 1280
-};
-
 // src/index.ts
 var index_default = Grid_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  BREAKPOINTS,
   Grid
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Grid.tsx","../src/utils.ts","../src/GridTypes.ts","../src/constants.ts"],"sourcesContent":["import Grid from \"./Grid\";\n\nexport default Grid;\nexport { Grid };\nexport * from \"./GridTypes\";\nexport { BREAKPOINTS } from \"./constants\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps, GridProps } from \"./GridTypes\";\nimport { getResponsiveStyles } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n  ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nconst Grid: React.FC<GridProps> = ({\n  columns = 1,\n  gap = 400,\n  rowGap,\n  columnGap,\n  children,\n  className,\n}) => {\n  return (\n    <Container\n      display=\"grid\"\n      rowGap={rowGap ?? gap}\n      columnGap={columnGap ?? gap}\n      $columns={columns}\n      className={className}\n    >\n      {children}\n    </Container>\n  );\n};\n\nexport default Grid;\n","import type { ResponsiveValue } from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n// WE may want to check this. I also see seeds-react/seeds-react-grid/src/constants.ts which has different values\n// And 900px for \"small\" seems way too big\nconst { breakpoints } = theme;\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(${columns.sm || 1}, 1fr);\n\n    @media (min-width: ${breakpoints.md}px) {\n      grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.lg}px) {\n      grid-template-columns: repeat(\n        ${columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n\n    @media (min-width: ${breakpoints.xl}px) {\n      grid-template-columns: repeat(\n        ${columns.xl || columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n  `;\n};\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\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) or pixel string (e.g., \"16px\") */\n  gap?: GapValue;\n  /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., \"16px\") */\n  rowGap?: GapValue;\n  /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., \"16px\") */\n  columnGap?: GapValue;\n  /** Children elements to display in the grid */\n  children?: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n","export const BREAKPOINTS = {\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,IAAAA,4BAAmB;AACnB,6BAAgB;;;ACDhB,+BAAoB;AACpB,+BAAsB;AAGtB,IAAM,EAAE,YAAY,IAAI;AAEjB,IAAM,sBAAsB,CAAC,UAA2B,MAAM;AACnE,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO;AAAA,sCAC2B,OAAO;AAAA;AAAA,EAE3C;AAEA,SAAO;AAAA,oCAC2B,QAAQ,MAAM,CAAC;AAAA;AAAA,yBAE1B,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;;;ADhBI;AAbJ,IAAM,gBAAY,0BAAAC,SAAO,uBAAAC,OAAG;AAAA,IACxB,CAAC,UAAU,oBAAoB,MAAM,QAAQ,CAAC;AAAA;AAGlD,IAAM,OAA4B,CAAC;AAAA,EACjC,UAAU;AAAA,EACV,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,QAAQ,UAAU;AAAA,MAClB,WAAW,aAAa;AAAA,MACxB,UAAU;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;AE9Bf,IAAAC,SAAuB;;;ACDhB,IAAM,cAAc;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;;;AJHA,IAAO,gBAAQ;","names":["import_styled_components","styled","Box","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Grid.tsx","../src/utils.ts","../src/GridTypes.ts"],"sourcesContent":["import Grid from \"./Grid\";\n\nexport default Grid;\nexport { Grid };\nexport * from \"./GridTypes\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps, GridProps } from \"./GridTypes\";\nimport { getResponsiveStyles, toResponsiveGapObject } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n  ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nconst Grid: React.FC<GridProps> = ({\n  columns = 1,\n  gap = 400,\n  rowGap,\n  columnGap,\n  children,\n  className,\n}) => {\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\nexport default Grid;\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","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,mBAAkB;AAClB,IAAAA,4BAAmB;AACnB,6BAAgB;;;ACGhB,+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;;;ADhCI;AAbJ,IAAM,gBAAY,0BAAAC,SAAO,uBAAAC,OAAG;AAAA,IACxB,CAAC,UAAU,oBAAoB,MAAM,QAAQ,CAAC;AAAA;AAGlD,IAAM,OAA4B,CAAC;AAAA,EACjC,UAAU;AAAA,EACV,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,QAAQ,sBAAsB,UAAU,GAAG;AAAA,MAC3C,WAAW,sBAAsB,aAAa,GAAG;AAAA,MACjD,UAAU;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;AE9Bf,IAAAC,SAAuB;;;AHCvB,IAAO,gBAAQ;","names":["import_styled_components","styled","Box","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-grid",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Seeds React Grid",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,8 +18,8 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-box": "^1.1.14",
-    "@sproutsocial/seeds-react-theme": "^3.0.0",
+    "@sproutsocial/seeds-react-box": "^1.1.16",
+    "@sproutsocial/seeds-react-theme": "^3.6.2",
     "@sproutsocial/seeds-react-system-props": "^3.0.1"
   },
   "devDependencies": {

package/src/Grid.stories.tsx

@@ -175,10 +175,16 @@ export const Playground: StoryObj<PlaygroundArgs> = {
         lg: columnsLg,
         xl: columnsXl,
       },
-      ...(rowGap && (typeof rowGap === "string" || rowGap > 0)
+      ...(rowGap &&
+      (typeof rowGap === "string" ||
+        (typeof rowGap === "number" && rowGap > 0) ||
+        typeof rowGap === "object")
         ? { rowGap }
         : {}),
-      ...(columnGap && (typeof columnGap === "string" || columnGap > 0)
+      ...(columnGap &&
+      (typeof columnGap === "string" ||
+        (typeof columnGap === "number" && columnGap > 0) ||
+        typeof columnGap === "object")
         ? { columnGap }
         : {}),
     };
@@ -198,6 +204,60 @@ export const Playground: StoryObj<PlaygroundArgs> = {
   },
 };
 
+export const ResponsiveGap: Story = {
+  name: "Responsive Gap",
+  render: () => {
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
+        <div>
+          <p style={{ marginBottom: "8px", fontWeight: "bold" }}>
+            Uniform gap (resize to see no change): gap=&#123;400&#125;
+          </p>
+          <Grid columns={{ sm: 1, md: 2, lg: 3 }} gap={400}>
+            <GridItem color={COLORS.COLOR_BLUE_600}>Item 1</GridItem>
+            <GridItem color={COLORS.COLOR_BLUE_600}>Item 2</GridItem>
+            <GridItem color={COLORS.COLOR_BLUE_600}>Item 3</GridItem>
+          </Grid>
+        </div>
+
+        <div>
+          <p style={{ marginBottom: "8px", fontWeight: "bold" }}>
+            Responsive gap (resize to see gap change): gap=&#123;&#123; sm: 200,
+            md: 400, lg: 500 &#125;&#125;
+          </p>
+          <Grid
+            columns={{ sm: 1, md: 2, lg: 3 }}
+            gap={{ sm: 200, md: 400, lg: 500 }}
+          >
+            <GridItem color={COLORS.COLOR_PURPLE_600}>Item 1</GridItem>
+            <GridItem color={COLORS.COLOR_PURPLE_600}>Item 2</GridItem>
+            <GridItem color={COLORS.COLOR_PURPLE_600}>Item 3</GridItem>
+          </Grid>
+        </div>
+
+        <div>
+          <p style={{ marginBottom: "8px", fontWeight: "bold" }}>
+            Independent row/column gaps: rowGap=&#123;&#123; sm: 200, md: 500
+            &#125;&#125; columnGap=&#123;&#123; sm: 400, md: 200 &#125;&#125;
+          </p>
+          <Grid
+            columns={{ sm: 2, md: 3 }}
+            rowGap={{ sm: 200, md: 500 }}
+            columnGap={{ sm: 400, md: 200 }}
+          >
+            <GridItem color={COLORS.COLOR_TEAL_600}>Item 1</GridItem>
+            <GridItem color={COLORS.COLOR_TEAL_600}>Item 2</GridItem>
+            <GridItem color={COLORS.COLOR_TEAL_600}>Item 3</GridItem>
+            <GridItem color={COLORS.COLOR_TEAL_600}>Item 4</GridItem>
+            <GridItem color={COLORS.COLOR_TEAL_600}>Item 5</GridItem>
+            <GridItem color={COLORS.COLOR_TEAL_600}>Item 6</GridItem>
+          </Grid>
+        </div>
+      </div>
+    );
+  },
+};
+
 export const NestedGrid: Story = {
   name: "Nested Grid Layout",
   args: {

package/src/Grid.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import Box from "@sproutsocial/seeds-react-box";
 import type { ContainerProps, GridProps } from "./GridTypes";
-import { getResponsiveStyles } from "./utils";
+import { getResponsiveStyles, toResponsiveGapObject } from "./utils";
 
 const Container = styled(Box)<ContainerProps>`
   ${(props) => getResponsiveStyles(props.$columns)}
@@ -19,8 +19,8 @@ const Grid: React.FC<GridProps> = ({
   return (
     <Container
       display="grid"
-      rowGap={rowGap ?? gap}
-      columnGap={columnGap ?? gap}
+      rowGap={toResponsiveGapObject(rowGap ?? gap)}
+      columnGap={toResponsiveGapObject(columnGap ?? gap)}
       $columns={columns}
       className={className}
     >

package/src/GridTypes.ts

@@ -17,6 +17,20 @@ export type ResponsiveValue =
  */
 export type GapValue = keyof TypeSpace | (string & {});
 
+/**
+ * Responsive gap value that can be either:
+ * - A single GapValue applied at all breakpoints
+ * - An object with optional breakpoint keys (sm, md, lg, xl) for responsive values
+ */
+export type ResponsiveGapValue =
+  | GapValue
+  | {
+      sm?: GapValue;
+      md?: GapValue;
+      lg?: GapValue;
+      xl?: GapValue;
+    };
+
 export interface ContainerProps {
   $columns?: ResponsiveValue;
 }
@@ -24,12 +38,12 @@ export interface ContainerProps {
 export interface GridProps {
   /** Number of columns (can be responsive) */
   columns?: ResponsiveValue;
-  /** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., "16px") */
-  gap?: GapValue;
-  /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., "16px") */
-  rowGap?: GapValue;
-  /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., "16px") */
-  columnGap?: GapValue;
+  /** 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 }) */
+  gap?: ResponsiveGapValue;
+  /** 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 }) */
+  rowGap?: ResponsiveGapValue;
+  /** 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 }) */
+  columnGap?: ResponsiveGapValue;
   /** Children elements to display in the grid */
   children?: React.ReactNode;
   /** Custom className */

package/src/__tests__/Grid.typetest.tsx

@@ -57,6 +57,36 @@ function GridTypes() {
         <div>Item 2</div>
       </Grid>
 
+      {/* With responsive gap using space scale */}
+      <Grid gap={{ sm: 400, md: 450, lg: 500 }}>
+        <div>Item</div>
+      </Grid>
+
+      {/* With partial responsive gap */}
+      <Grid gap={{ sm: 400 }}>
+        <div>Item</div>
+      </Grid>
+
+      {/* With responsive rowGap using pixel strings */}
+      <Grid rowGap={{ sm: "16px", md: "24px" }}>
+        <div>Item</div>
+      </Grid>
+
+      {/* With responsive columnGap */}
+      <Grid columnGap={{ sm: 300, md: 400, lg: 450, xl: 500 }}>
+        <div>Item</div>
+      </Grid>
+
+      {/* @ts-expect-error - invalid key in responsive gap */}
+      <Grid gap={{ xs: 400 }}>
+        <div>Item</div>
+      </Grid>
+
+      {/* @ts-expect-error - invalid gap value inside responsive object */}
+      <Grid gap={{ sm: 16 }}>
+        <div>Item</div>
+      </Grid>
+
       {/* @ts-expect-error - invalid columns value */}
       <Grid columns="invalid">
         <div>Item</div>

package/src/__tests__/grid.test.tsx

@@ -151,6 +151,66 @@ describe("Grid", () => {
     expect(styles.columnGap).toBe("10px");
   });
 
+  it("should accept responsive object for gap", () => {
+    const { container } = render(
+      <Grid gap={{ sm: 400, md: 450, lg: 500 }}>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Grid>
+    );
+    const gridElement = container.firstChild as HTMLElement;
+    const styles = window.getComputedStyle(gridElement);
+    expect(styles.display).toBe("grid");
+  });
+
+  it("should accept responsive object for rowGap", () => {
+    const { container } = render(
+      <Grid rowGap={{ sm: 300, md: 400 }} columnGap={400}>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Grid>
+    );
+    const gridElement = container.firstChild as HTMLElement;
+    const styles = window.getComputedStyle(gridElement);
+    expect(styles.columnGap).toBe("16px");
+  });
+
+  it("should accept responsive object for columnGap", () => {
+    const { container } = render(
+      <Grid rowGap={400} columnGap={{ sm: 400, lg: 500 }}>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Grid>
+    );
+    const gridElement = container.firstChild as HTMLElement;
+    const styles = window.getComputedStyle(gridElement);
+    expect(styles.rowGap).toBe("16px");
+  });
+
+  it("should mix responsive and static gap values", () => {
+    const { container } = render(
+      <Grid gap={{ sm: 400 }} columnGap={300}>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Grid>
+    );
+    const gridElement = container.firstChild as HTMLElement;
+    const styles = window.getComputedStyle(gridElement);
+    expect(styles.columnGap).toBe("8px");
+  });
+
+  it("should accept responsive object with pixel strings", () => {
+    const { container } = render(
+      <Grid gap={{ sm: "16px", md: "24px" }}>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Grid>
+    );
+    const gridElement = container.firstChild as HTMLElement;
+    const styles = window.getComputedStyle(gridElement);
+    expect(styles.display).toBe("grid");
+  });
+
   it("should render with single column by default", () => {
     const { container } = render(
       <Grid>

package/src/index.ts

@@ -3,4 +3,3 @@ import Grid from "./Grid";
 export default Grid;
 export { Grid };
 export * from "./GridTypes";
-export { BREAKPOINTS } from "./constants";

package/src/utils.ts

@@ -1,10 +1,22 @@
-import type { ResponsiveValue } from "./GridTypes";
+import type {
+  GapValue,
+  ResponsiveGapValue,
+  ResponsiveValue,
+} from "./GridTypes";
 import { css } from "styled-components";
 import { theme } from "@sproutsocial/seeds-react-theme";
-// WE may want to check this. I also see seeds-react/seeds-react-grid/src/constants.ts which has different values
-// And 900px for "small" seems way too big
+
 const { breakpoints } = theme;
 
+export const toResponsiveGapObject = (
+  value: ResponsiveGapValue
+):
+  | GapValue
+  | { sm?: GapValue; md?: GapValue; lg?: GapValue; xl?: GapValue } => {
+  if (typeof value !== "object") return value;
+  return value;
+};
+
 export const getResponsiveStyles = (columns: ResponsiveValue = 1) => {
   if (typeof columns === "number") {
     return css`
@@ -13,20 +25,24 @@ export const getResponsiveStyles = (columns: ResponsiveValue = 1) => {
   }
 
   return css`
-    grid-template-columns: repeat(${columns.sm || 1}, 1fr);
+    grid-template-columns: repeat(1, 1fr);
+
+    @media (min-width: ${breakpoints.sm}) {
+      grid-template-columns: repeat(${columns.sm || 1}, 1fr);
+    }
 
-    @media (min-width: ${breakpoints.md}px) {
+    @media (min-width: ${breakpoints.md}) {
       grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);
     }
 
-    @media (min-width: ${breakpoints.lg}px) {
+    @media (min-width: ${breakpoints.lg}) {
       grid-template-columns: repeat(
         ${columns.lg || columns.md || columns.sm || 1},
         1fr
       );
     }
 
-    @media (min-width: ${breakpoints.xl}px) {
+    @media (min-width: ${breakpoints.xl}) {
       grid-template-columns: repeat(
         ${columns.xl || columns.lg || columns.md || columns.sm || 1},
         1fr

package/src/constants.ts

@@ -1,6 +0,0 @@
-export const BREAKPOINTS = {
-  sm: 640,
-  md: 768,
-  lg: 1024,
-  xl: 1280,
-} as const;