@sproutsocial/seeds-react-grid 0.0.0 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +8 -8
- package/CHANGELOG.md +13 -0
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +5 -4
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/GridTypes.ts +2 -2
- package/src/__tests__/Grid.typetest.tsx +3 -3
- package/src/utils.ts +4 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -8,14 +8,14 @@ $ tsup --dts
|
|
|
8
8
|
[34mCLI[39m Cleaning output folder
|
|
9
9
|
[34mCJS[39m Build start
|
|
10
10
|
[34mESM[39m Build start
|
|
11
|
-
[32mCJS[39m [1mdist/index.js [22m[32m3.
|
|
12
|
-
[32mCJS[39m [1mdist/index.js.map [22m[32m4.
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in
|
|
14
|
-
[32mESM[39m [1mdist/esm/index.js [22m[32m1.
|
|
15
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[32m4.
|
|
16
|
-
[32mESM[39m ⚡️ Build success in
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m3.61 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m4.56 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 99ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m1.71 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m4.45 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 101ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 4810ms
|
|
19
19
|
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.50 KB[39m
|
|
20
20
|
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.50 KB[39m
|
|
21
|
-
Done in
|
|
21
|
+
Done in 6.61s.
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
# @sproutsocial/seeds-react-grid
|
|
2
|
+
|
|
3
|
+
## 0.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 990c196: Add Grid component: a layout primitive for creating CSS Grid layouts with responsive column configurations and customizable gaps.
|
|
8
|
+
|
|
9
|
+
## 0.0.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- de310b9: Fix grid style import
|
package/dist/esm/index.js
CHANGED
|
@@ -5,7 +5,8 @@ import Box from "@sproutsocial/seeds-react-box";
|
|
|
5
5
|
|
|
6
6
|
// src/utils.ts
|
|
7
7
|
import { css } from "styled-components";
|
|
8
|
-
import {
|
|
8
|
+
import { theme } from "@sproutsocial/seeds-react-theme";
|
|
9
|
+
var { breakpoints } = theme;
|
|
9
10
|
var getResponsiveStyles = (columns = 1) => {
|
|
10
11
|
if (typeof columns === "number") {
|
|
11
12
|
return css`
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +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 {
|
|
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":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -13,7 +13,7 @@ type ResponsiveValue = number | {
|
|
|
13
13
|
* - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
14
14
|
* - A pixel string value (e.g., "16px", "20px")
|
|
15
15
|
*/
|
|
16
|
-
type GapValue = keyof TypeSpace |
|
|
16
|
+
type GapValue = keyof TypeSpace | (string & {});
|
|
17
17
|
interface ContainerProps {
|
|
18
18
|
$columns?: ResponsiveValue;
|
|
19
19
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -13,7 +13,7 @@ type ResponsiveValue = number | {
|
|
|
13
13
|
* - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
14
14
|
* - A pixel string value (e.g., "16px", "20px")
|
|
15
15
|
*/
|
|
16
|
-
type GapValue = keyof TypeSpace |
|
|
16
|
+
type GapValue = keyof TypeSpace | (string & {});
|
|
17
17
|
interface ContainerProps {
|
|
18
18
|
$columns?: ResponsiveValue;
|
|
19
19
|
}
|
package/dist/index.js
CHANGED
|
@@ -43,7 +43,8 @@ var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
|
|
|
43
43
|
|
|
44
44
|
// src/utils.ts
|
|
45
45
|
var import_styled_components = require("styled-components");
|
|
46
|
-
var
|
|
46
|
+
var import_seeds_react_theme = require("@sproutsocial/seeds-react-theme");
|
|
47
|
+
var { breakpoints } = import_seeds_react_theme.theme;
|
|
47
48
|
var getResponsiveStyles = (columns = 1) => {
|
|
48
49
|
if (typeof columns === "number") {
|
|
49
50
|
return import_styled_components.css`
|
|
@@ -53,18 +54,18 @@ var getResponsiveStyles = (columns = 1) => {
|
|
|
53
54
|
return import_styled_components.css`
|
|
54
55
|
grid-template-columns: repeat(${columns.sm || 1}, 1fr);
|
|
55
56
|
|
|
56
|
-
@media (min-width: ${
|
|
57
|
+
@media (min-width: ${breakpoints.md}px) {
|
|
57
58
|
grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);
|
|
58
59
|
}
|
|
59
60
|
|
|
60
|
-
@media (min-width: ${
|
|
61
|
+
@media (min-width: ${breakpoints.lg}px) {
|
|
61
62
|
grid-template-columns: repeat(
|
|
62
63
|
${columns.lg || columns.md || columns.sm || 1},
|
|
63
64
|
1fr
|
|
64
65
|
);
|
|
65
66
|
}
|
|
66
67
|
|
|
67
|
-
@media (min-width: ${
|
|
68
|
+
@media (min-width: ${breakpoints.xl}px) {
|
|
68
69
|
grid-template-columns: repeat(
|
|
69
70
|
${columns.xl || columns.lg || columns.md || columns.sm || 1},
|
|
70
71
|
1fr
|
package/dist/index.js.map
CHANGED
|
@@ -1 +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 {
|
|
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"]}
|
package/package.json
CHANGED
package/src/GridTypes.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
1
|
import type { TypeSpace } from "@sproutsocial/seeds-react-theme";
|
|
2
|
+
import * as React from "react";
|
|
3
3
|
|
|
4
4
|
export type ResponsiveValue =
|
|
5
5
|
| number
|
|
@@ -15,7 +15,7 @@ export type ResponsiveValue =
|
|
|
15
15
|
* - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)
|
|
16
16
|
* - A pixel string value (e.g., "16px", "20px")
|
|
17
17
|
*/
|
|
18
|
-
export type GapValue = keyof TypeSpace |
|
|
18
|
+
export type GapValue = keyof TypeSpace | (string & {});
|
|
19
19
|
|
|
20
20
|
export interface ContainerProps {
|
|
21
21
|
$columns?: ResponsiveValue;
|
|
@@ -62,7 +62,7 @@ function GridTypes() {
|
|
|
62
62
|
<div>Item</div>
|
|
63
63
|
</Grid>
|
|
64
64
|
|
|
65
|
-
{/*
|
|
65
|
+
{/* Valid gap value - any string is allowed */}
|
|
66
66
|
<Grid gap="invalid">
|
|
67
67
|
<div>Item</div>
|
|
68
68
|
</Grid>
|
|
@@ -87,12 +87,12 @@ function GridTypes() {
|
|
|
87
87
|
<div>Item</div>
|
|
88
88
|
</Grid>
|
|
89
89
|
|
|
90
|
-
{/*
|
|
90
|
+
{/* Valid gap value - any string is allowed */}
|
|
91
91
|
<Grid gap="16rem">
|
|
92
92
|
<div>Item</div>
|
|
93
93
|
</Grid>
|
|
94
94
|
|
|
95
|
-
{/*
|
|
95
|
+
{/* Valid gap value - any string is allowed */}
|
|
96
96
|
<Grid gap="1em">
|
|
97
97
|
<div>Item</div>
|
|
98
98
|
</Grid>
|
package/src/utils.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import type { ResponsiveValue } from "./GridTypes";
|
|
2
2
|
import { css } from "styled-components";
|
|
3
|
-
import {
|
|
3
|
+
import { theme } from "@sproutsocial/seeds-react-theme";
|
|
4
|
+
// WE may want to check this. I also see seeds-react/seeds-react-grid/src/constants.ts which has different values
|
|
5
|
+
// And 900px for "small" seems way too big
|
|
6
|
+
const { breakpoints } = theme;
|
|
4
7
|
|
|
5
8
|
export const getResponsiveStyles = (columns: ResponsiveValue = 1) => {
|
|
6
9
|
if (typeof columns === "number") {
|