@sproutsocial/seeds-react-grid 0.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.0
+CLI Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-grid/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     3.60 KB
+CJS dist/index.js.map 4.37 KB
+CJS ⚡️ Build success in 17ms
+ESM dist/esm/index.js     1.70 KB
+ESM dist/esm/index.js.map 4.25 KB
+ESM ⚡️ Build success in 16ms
+DTS Build start
+DTS ⚡️ Build success in 4473ms
+DTS dist/index.d.ts  1.50 KB
+DTS dist/index.d.mts 1.50 KB
+Done in 5.83s.

package/dist/esm/index.js

@@ -0,0 +1,83 @@
+// src/Grid.tsx
+import "react";
+import styled from "styled-components";
+import Box from "@sproutsocial/seeds-react-box";
+
+// src/utils.ts
+import { css } from "styled-components";
+import { breakpoints } from "@sproutsocial/seeds-react-theme/src/light/theme";
+var getResponsiveStyles = (columns = 1) => {
+  if (typeof columns === "number") {
+    return css`
+      grid-template-columns: repeat(${columns}, 1fr);
+    `;
+  }
+  return css`
+    grid-template-columns: repeat(${columns.sm || 1}, 1fr);
+
+    @media (min-width: ${breakpoints.md}px) {
+      grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);
+    }
+
+    @media (min-width: ${breakpoints.lg}px) {
+      grid-template-columns: repeat(
+        ${columns.lg || columns.md || columns.sm || 1},
+        1fr
+      );
+    }
+
+    @media (min-width: ${breakpoints.xl}px) {
+      grid-template-columns: repeat(
+        ${columns.xl || columns.lg || columns.md || columns.sm || 1},
+        1fr
+      );
+    }
+  `;
+};
+
+// src/Grid.tsx
+import { jsx } from "react/jsx-runtime";
+var Container = styled(Box)`
+  ${(props) => getResponsiveStyles(props.$columns)}
+`;
+var Grid = ({
+  columns = 1,
+  gap = 400,
+  rowGap,
+  columnGap,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsx(
+    Container,
+    {
+      display: "grid",
+      rowGap: rowGap ?? gap,
+      columnGap: columnGap ?? gap,
+      $columns: columns,
+      className,
+      children
+    }
+  );
+};
+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
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +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 { breakpoints } from \"@sproutsocial/seeds-react-theme/src/light/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 * as React from \"react\";\nimport type { TypeSpace } from \"@sproutsocial/seeds-react-theme\";\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 | `${number}px`;\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,mBAAmB;AAErB,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;;;ADbI;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;;;AE/Bf,OAAuB;;;ACAhB,IAAM,cAAc;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;;;ACHA,IAAO,gBAAQ;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import React__default from 'react';
+import { TypeSpace } from '@sproutsocial/seeds-react-theme';
+
+type ResponsiveValue = number | {
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+};
+/**
+ * Gap value that can be either:
+ * - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)
+ * - A pixel string value (e.g., "16px", "20px")
+ */
+type GapValue = keyof TypeSpace | `${number}px`;
+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;
+    /** Children elements to display in the grid */
+    children?: React.ReactNode;
+    /** Custom className */
+    className?: string;
+}
+
+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 };

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import React__default from 'react';
+import { TypeSpace } from '@sproutsocial/seeds-react-theme';
+
+type ResponsiveValue = number | {
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+};
+/**
+ * Gap value that can be either:
+ * - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)
+ * - A pixel string value (e.g., "16px", "20px")
+ */
+type GapValue = keyof TypeSpace | `${number}px`;
+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;
+    /** Children elements to display in the grid */
+    children?: React.ReactNode;
+    /** Custom className */
+    className?: string;
+}
+
+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 };

package/dist/index.js

@@ -0,0 +1,121 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BREAKPOINTS: () => BREAKPOINTS,
+  Grid: () => Grid_default,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Grid.tsx
+var import_react = require("react");
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+
+// src/utils.ts
+var import_styled_components = require("styled-components");
+var import_theme = require("@sproutsocial/seeds-react-theme/src/light/theme");
+var getResponsiveStyles = (columns = 1) => {
+  if (typeof columns === "number") {
+    return import_styled_components.css`
+      grid-template-columns: repeat(${columns}, 1fr);
+    `;
+  }
+  return import_styled_components.css`
+    grid-template-columns: repeat(${columns.sm || 1}, 1fr);
+
+    @media (min-width: ${import_theme.breakpoints.md}px) {
+      grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);
+    }
+
+    @media (min-width: ${import_theme.breakpoints.lg}px) {
+      grid-template-columns: repeat(
+        ${columns.lg || columns.md || columns.sm || 1},
+        1fr
+      );
+    }
+
+    @media (min-width: ${import_theme.breakpoints.xl}px) {
+      grid-template-columns: repeat(
+        ${columns.xl || columns.lg || columns.md || columns.sm || 1},
+        1fr
+      );
+    }
+  `;
+};
+
+// src/Grid.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Container = (0, import_styled_components2.default)(import_seeds_react_box.default)`
+  ${(props) => getResponsiveStyles(props.$columns)}
+`;
+var Grid = ({
+  columns = 1,
+  gap = 400,
+  rowGap,
+  columnGap,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Container,
+    {
+      display: "grid",
+      rowGap: rowGap ?? gap,
+      columnGap: columnGap ?? gap,
+      $columns: columns,
+      className,
+      children
+    }
+  );
+};
+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

@@ -0,0 +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 { breakpoints } from \"@sproutsocial/seeds-react-theme/src/light/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 * as React from \"react\";\nimport type { TypeSpace } from \"@sproutsocial/seeds-react-theme\";\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 | `${number}px`;\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,mBAA4B;AAErB,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,yBAAY,EAAE;AAAA,sCACD,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,yBAG1C,yBAAY,EAAE;AAAA;AAAA,UAE7B,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,yBAK5B,yBAAY,EAAE;AAAA;AAAA,UAE7B,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAKnE;;;ADbI;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;;;AE/Bf,IAAAC,SAAuB;;;ACAhB,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"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-grid",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@sproutsocial/seeds-react-grid",
+  "version": "0.0.0",
+  "description": "Seeds React Grid",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-box": "^1.1.14",
+    "@sproutsocial/seeds-react-theme": "^3.0.0",
+    "@sproutsocial/seeds-react-system-props": "^3.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.3.4",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Grid.stories.tsx

@@ -0,0 +1,230 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import COLORS from "@sproutsocial/seeds-color";
+import Grid from "./Grid";
+import type { GridProps } from "./GridTypes";
+
+const meta = {
+  title: "Components/Grid",
+  component: Grid,
+  argTypes: {
+    columns: {
+      control: { type: "number", min: 1, max: 12, step: 1 },
+      description:
+        "Number of columns in the grid (can be a number or responsive object)",
+    },
+    gap: {
+      control: { type: "select" },
+      options: [
+        0,
+        100,
+        200,
+        300,
+        350,
+        400,
+        450,
+        500,
+        600,
+        "16px",
+        "20px",
+        "24px",
+      ],
+      description:
+        "Gap between all grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600) or pixel string (e.g., '16px')",
+    },
+    rowGap: {
+      control: { type: "select" },
+      options: [
+        0,
+        100,
+        200,
+        300,
+        350,
+        400,
+        450,
+        500,
+        600,
+        "16px",
+        "20px",
+        "24px",
+      ],
+      description:
+        "Optional: Override gap for rows only. Use theme.space scale or pixel string (e.g., '16px')",
+      table: {
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    columnGap: {
+      control: { type: "select" },
+      options: [
+        0,
+        100,
+        200,
+        300,
+        350,
+        400,
+        450,
+        500,
+        600,
+        "16px",
+        "20px",
+        "24px",
+      ],
+      description:
+        "Optional: Override gap for columns only. Use theme.space scale or pixel string (e.g., '16px')",
+      table: {
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    children: {
+      control: false,
+      description: "Child elements to display in the grid",
+    },
+    className: {
+      control: "text",
+      description: "Custom CSS class name",
+    },
+  },
+} satisfies Meta<typeof Grid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+type PlaygroundArgs = GridProps & {
+  columnsSm?: number;
+  columnsMd?: number;
+  columnsLg?: number;
+  columnsXl?: number;
+};
+
+// Helper component for grid items
+const GridItem = ({
+  children,
+  color = COLORS.COLOR_BLUE_600,
+}: {
+  children: React.ReactNode;
+  color?: string;
+}) => (
+  <div
+    style={{
+      backgroundColor: color,
+      padding: "20px",
+      borderRadius: "8px",
+      color: "white",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      minHeight: "100px",
+      fontWeight: "bold",
+    }}
+  >
+    {children}
+  </div>
+);
+
+export const Playground: StoryObj<PlaygroundArgs> = {
+  name: "Playground",
+  args: {
+    gap: 400,
+    columnsSm: 1,
+    columnsMd: 2,
+    columnsLg: 3,
+    columnsXl: 4,
+  },
+  argTypes: {
+    columnsSm: {
+      control: { type: "number", min: 1, max: 12, step: 1 },
+      name: "Columns (sm - 640px)",
+      description: "Number of columns on small screens (640px and up)",
+    },
+    columnsMd: {
+      control: { type: "number", min: 1, max: 12, step: 1 },
+      name: "Columns (md - 768px)",
+      description: "Number of columns on medium screens (768px and up)",
+    },
+    columnsLg: {
+      control: { type: "number", min: 1, max: 12, step: 1 },
+      name: "Columns (lg - 1024px)",
+      description: "Number of columns on large screens (1024px and up)",
+    },
+    columnsXl: {
+      control: { type: "number", min: 1, max: 12, step: 1 },
+      name: "Columns (xl - 1280px)",
+      description: "Number of columns on xl screens (1280px and up)",
+    },
+    columns: {
+      control: false,
+      table: { disable: true },
+    },
+  },
+  render: (args) => {
+    const {
+      rowGap,
+      columnGap,
+      columnsSm,
+      columnsMd,
+      columnsLg,
+      columnsXl,
+      ...restArgs
+    } = args;
+    const gridProps = {
+      ...restArgs,
+      columns: {
+        sm: columnsSm,
+        md: columnsMd,
+        lg: columnsLg,
+        xl: columnsXl,
+      },
+      ...(rowGap && (typeof rowGap === "string" || rowGap > 0)
+        ? { rowGap }
+        : {}),
+      ...(columnGap && (typeof columnGap === "string" || columnGap > 0)
+        ? { columnGap }
+        : {}),
+    };
+    return (
+      <Grid {...gridProps}>
+        <GridItem color={COLORS.COLOR_BLUE_600}>Item 1</GridItem>
+        <GridItem color={COLORS.COLOR_PURPLE_600}>Item 2</GridItem>
+        <GridItem color={COLORS.COLOR_TEAL_600}>Item 3</GridItem>
+        <GridItem color={COLORS.COLOR_RED_600}>Item 4</GridItem>
+        <GridItem color={COLORS.COLOR_ORANGE_600}>Item 5</GridItem>
+        <GridItem color={COLORS.COLOR_MAGENTA_600}>Item 6</GridItem>
+        <GridItem color={COLORS.COLOR_AQUA_600}>Item 7</GridItem>
+        <GridItem color={COLORS.COLOR_PINK_600}>Item 8</GridItem>
+        <GridItem color={COLORS.COLOR_GREEN_600}>Item 9</GridItem>
+      </Grid>
+    );
+  },
+};
+
+export const NestedGrid: Story = {
+  name: "Nested Grid Layout",
+  args: {
+    gap: 400,
+  },
+  render: (args) => {
+    return (
+      <Grid columns={1} gap={args.gap}>
+        <Grid columns={1} gap={350}>
+          <GridItem color={COLORS.COLOR_BLUE_600}>Row 1, Column 1</GridItem>
+        </Grid>
+
+        <Grid columns={{ sm: 1, md: 2 }} gap={350}>
+          <GridItem color={COLORS.COLOR_PURPLE_600}>Row 2, Column 1</GridItem>
+          <GridItem color={COLORS.COLOR_PURPLE_600}>Row 2, Column 2</GridItem>
+        </Grid>
+
+        <Grid columns={{ sm: 1, md: 3 }} gap={350}>
+          <GridItem color={COLORS.COLOR_TEAL_600}>Row 3, Column 1</GridItem>
+          <GridItem color={COLORS.COLOR_TEAL_600}>Row 3, Column 2</GridItem>
+          <GridItem color={COLORS.COLOR_TEAL_600}>Row 3, Column 3</GridItem>
+        </Grid>
+
+        <Grid columns={1} gap={350}>
+          <GridItem color={COLORS.COLOR_RED_600}>Row 4, Column 1</GridItem>
+        </Grid>
+      </Grid>
+    );
+  },
+};

package/src/Grid.tsx

@@ -0,0 +1,32 @@
+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";
+
+const Container = styled(Box)<ContainerProps>`
+  ${(props) => getResponsiveStyles(props.$columns)}
+`;
+
+const Grid: React.FC<GridProps> = ({
+  columns = 1,
+  gap = 400,
+  rowGap,
+  columnGap,
+  children,
+  className,
+}) => {
+  return (
+    <Container
+      display="grid"
+      rowGap={rowGap ?? gap}
+      columnGap={columnGap ?? gap}
+      $columns={columns}
+      className={className}
+    >
+      {children}
+    </Container>
+  );
+};
+
+export default Grid;

package/src/GridTypes.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import type { TypeSpace } from "@sproutsocial/seeds-react-theme";
+
+export type ResponsiveValue =
+  | number
+  | {
+      sm?: number;
+      md?: number;
+      lg?: number;
+      xl?: number;
+    };
+
+/**
+ * Gap value that can be either:
+ * - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)
+ * - A pixel string value (e.g., "16px", "20px")
+ */
+export type GapValue = keyof TypeSpace | `${number}px`;
+
+export interface ContainerProps {
+  $columns?: ResponsiveValue;
+}
+
+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;
+  /** Children elements to display in the grid */
+  children?: React.ReactNode;
+  /** Custom className */
+  className?: string;
+}

package/src/__tests__/Grid.typetest.tsx

@@ -0,0 +1,101 @@
+import * as React from "react";
+import Grid from "../Grid";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function GridTypes() {
+  return (
+    <>
+      {/* Basic usage */}
+      <Grid>
+        <div>Item</div>
+      </Grid>
+
+      {/* With fixed columns */}
+      <Grid columns={3}>
+        <div>Item</div>
+      </Grid>
+
+      {/* With responsive columns */}
+      <Grid columns={{ sm: 1, md: 2, lg: 3, xl: 4 }}>
+        <div>Item</div>
+      </Grid>
+
+      {/* With gap using space scale */}
+      <Grid gap={450}>
+        <div>Item</div>
+      </Grid>
+
+      {/* With gap using pixel string */}
+      <Grid gap="24px">
+        <div>Item</div>
+      </Grid>
+
+      {/* With rowGap and columnGap using space scale */}
+      <Grid rowGap={500} columnGap={400}>
+        <div>Item</div>
+      </Grid>
+
+      {/* With rowGap and columnGap using pixel strings */}
+      <Grid rowGap="32px" columnGap="16px">
+        <div>Item</div>
+      </Grid>
+
+      {/* Mix of space scale and pixel strings */}
+      <Grid rowGap={450} columnGap="20px">
+        <div>Item</div>
+      </Grid>
+
+      {/* With all props */}
+      <Grid
+        columns={{ sm: 1, md: 2, lg: 3 }}
+        gap={400}
+        rowGap={450}
+        columnGap={350}
+        className="custom-grid"
+      >
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Grid>
+
+      {/* @ts-expect-error - invalid columns value */}
+      <Grid columns="invalid">
+        <div>Item</div>
+      </Grid>
+
+      {/* @ts-expect-error - invalid gap value */}
+      <Grid gap="invalid">
+        <div>Item</div>
+      </Grid>
+
+      {/* @ts-expect-error - invalid responsive columns */}
+      <Grid columns={{ xs: 1 }}>
+        <div>Item</div>
+      </Grid>
+
+      {/* @ts-expect-error - invalid gap value (not in SpaceScale and not a px string) */}
+      <Grid gap={16}>
+        <div>Item</div>
+      </Grid>
+
+      {/* @ts-expect-error - invalid rowGap value (not in SpaceScale and not a px string) */}
+      <Grid rowGap={20}>
+        <div>Item</div>
+      </Grid>
+
+      {/* @ts-expect-error - invalid columnGap value (not in SpaceScale and not a px string) */}
+      <Grid columnGap={25}>
+        <div>Item</div>
+      </Grid>
+
+      {/* @ts-expect-error - invalid gap string (must end with px) */}
+      <Grid gap="16rem">
+        <div>Item</div>
+      </Grid>
+
+      {/* @ts-expect-error - invalid gap string (must end with px) */}
+      <Grid gap="1em">
+        <div>Item</div>
+      </Grid>
+    </>
+  );
+}

package/src/__tests__/grid.test.tsx

@@ -0,0 +1,165 @@
+import React from "react";
+import { render } from "@sproutsocial/seeds-react-testing-library";
+import Grid from "../Grid";
+
+describe("Grid", () => {
+  it("should render properly", async () => {
+    const { container, runA11yCheck } = render(
+      <Grid>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Grid>
+    );
+    expect(container).toBeTruthy();
+    await runA11yCheck();
+  });
+
+  it("should render children", () => {
+    const { getByText } = render(
+      <Grid>
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </Grid>
+    );
+    expect(getByText("Item 1")).toBeInTheDocument();
+    expect(getByText("Item 2")).toBeInTheDocument();
+    expect(getByText("Item 3")).toBeInTheDocument();
+  });
+
+  it("should apply custom className", () => {
+    const { container } = render(
+      <Grid className="custom-class">
+        <div>Item 1</div>
+      </Grid>
+    );
+    expect(container.firstChild).toHaveClass("custom-class");
+  });
+
+  it("should render with fixed columns", () => {
+    const { container } = render(
+      <Grid columns={3}>
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </Grid>
+    );
+    const gridElement = container.firstChild as HTMLElement;
+    const styles = window.getComputedStyle(gridElement);
+    expect(styles.display).toBe("grid");
+  });
+
+  it("should render with responsive columns", () => {
+    const { container } = render(
+      <Grid columns={{ sm: 1, md: 2, lg: 3, xl: 4 }}>
+        <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 apply gap prop", () => {
+    const { container } = render(
+      <Grid gap={450}>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Grid>
+    );
+    const gridElement = container.firstChild as HTMLElement;
+    const styles = window.getComputedStyle(gridElement);
+    expect(styles.rowGap).toBe("24px");
+    expect(styles.columnGap).toBe("24px");
+  });
+
+  it("should apply rowGap and columnGap props", () => {
+    const { container } = render(
+      <Grid rowGap={500} columnGap={400}>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Grid>
+    );
+    const gridElement = container.firstChild as HTMLElement;
+    const styles = window.getComputedStyle(gridElement);
+    expect(styles.rowGap).toBe("32px");
+    expect(styles.columnGap).toBe("16px");
+  });
+
+  it("should override gap with rowGap and columnGap", () => {
+    const { container } = render(
+      <Grid gap={400} rowGap={500} columnGap={300}>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Grid>
+    );
+    const gridElement = container.firstChild as HTMLElement;
+    const styles = window.getComputedStyle(gridElement);
+    expect(styles.rowGap).toBe("32px");
+    expect(styles.columnGap).toBe("8px");
+  });
+
+  it("should default to 16px gap when no gap props provided", () => {
+    const { container } = render(
+      <Grid>
+        <div>Item 1</div>
+      </Grid>
+    );
+    const gridElement = container.firstChild as HTMLElement;
+    const styles = window.getComputedStyle(gridElement);
+    expect(styles.rowGap).toBe("16px");
+    expect(styles.columnGap).toBe("16px");
+  });
+
+  it("should accept pixel string values for gap", () => {
+    const { container } = render(
+      <Grid gap="20px">
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Grid>
+    );
+    const gridElement = container.firstChild as HTMLElement;
+    const styles = window.getComputedStyle(gridElement);
+    expect(styles.rowGap).toBe("20px");
+    expect(styles.columnGap).toBe("20px");
+  });
+
+  it("should accept pixel string values for rowGap and columnGap", () => {
+    const { container } = render(
+      <Grid rowGap="48px" columnGap="12px">
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Grid>
+    );
+    const gridElement = container.firstChild as HTMLElement;
+    const styles = window.getComputedStyle(gridElement);
+    expect(styles.rowGap).toBe("48px");
+    expect(styles.columnGap).toBe("12px");
+  });
+
+  it("should mix space scale and pixel string values", () => {
+    const { container } = render(
+      <Grid rowGap={450} columnGap="10px">
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Grid>
+    );
+    const gridElement = container.firstChild as HTMLElement;
+    const styles = window.getComputedStyle(gridElement);
+    expect(styles.rowGap).toBe("24px");
+    expect(styles.columnGap).toBe("10px");
+  });
+
+  it("should render with single column by default", () => {
+    const { container } = render(
+      <Grid>
+        <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");
+  });
+});

package/src/constants.ts

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

package/src/index.ts

@@ -0,0 +1,6 @@
+import Grid from "./Grid";
+
+export default Grid;
+export { Grid };
+export * from "./GridTypes";
+export { BREAKPOINTS } from "./constants";

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}

package/src/styles.ts

@@ -0,0 +1,21 @@
+import styled, { css } from "styled-components";
+import { COMMON, LAYOUT } from "@sproutsocial/seeds-react-system-props";
+
+interface GridProps {
+  isLoading?: boolean;
+}
+
+const Grid = styled.div<GridProps>`
+  display: block;
+
+  ${(props) =>
+    props.isLoading &&
+    css`
+      visibility: hidden;
+    `}
+
+  ${COMMON}
+  ${LAYOUT}
+`;
+
+export default Grid;

package/src/utils.ts

@@ -0,0 +1,33 @@
+import type { ResponsiveValue } from "./GridTypes";
+import { css } from "styled-components";
+import { breakpoints } from "@sproutsocial/seeds-react-theme/src/light/theme";
+
+export const getResponsiveStyles = (columns: ResponsiveValue = 1) => {
+  if (typeof columns === "number") {
+    return css`
+      grid-template-columns: repeat(${columns}, 1fr);
+    `;
+  }
+
+  return css`
+    grid-template-columns: repeat(${columns.sm || 1}, 1fr);
+
+    @media (min-width: ${breakpoints.md}px) {
+      grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);
+    }
+
+    @media (min-width: ${breakpoints.lg}px) {
+      grid-template-columns: repeat(
+        ${columns.lg || columns.md || columns.sm || 1},
+        1fr
+      );
+    }
+
+    @media (min-width: ${breakpoints.xl}px) {
+      grid-template-columns: repeat(
+        ${columns.xl || columns.lg || columns.md || columns.sm || 1},
+        1fr
+      );
+    }
+  `;
+};

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));