@sproutsocial/seeds-react-token 1.0.0 → 1.0.1

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.
@@ -8,14 +8,14 @@ CLI Target: es2022
8
8
  CLI Cleaning output folder
9
9
  CJS Build start
10
10
  ESM Build start
11
- CJS dist/index.js 6.76 KB
12
- CJS dist/index.js.map 7.16 KB
13
- CJS ⚡️ Build success in 213ms
14
11
  ESM dist/esm/index.js 4.33 KB
15
12
  ESM dist/esm/index.js.map 7.04 KB
16
- ESM ⚡️ Build success in 230ms
13
+ ESM ⚡️ Build success in 137ms
14
+ CJS dist/index.js 6.77 KB
15
+ CJS dist/index.js.map 7.16 KB
16
+ CJS ⚡️ Build success in 146ms
17
17
  DTS Build start
18
- DTS ⚡️ Build success in 41500ms
18
+ DTS ⚡️ Build success in 40629ms
19
19
  DTS dist/index.d.ts 1.01 KB
20
20
  DTS dist/index.d.mts 1.01 KB
21
- Done in 48.48s.
21
+ Done in 47.12s.
package/CHANGELOG.md CHANGED
@@ -1,8 +1,21 @@
1
1
  # @sproutsocial/seeds-react-token
2
2
 
3
+ ## 1.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 9fd8bac: Update dependencies to use semantic package version instead of wildcards
8
+ - Updated dependencies [9fd8bac]
9
+ - @sproutsocial/seeds-react-visually-hidden@1.0.2
10
+ - @sproutsocial/seeds-react-system-props@3.0.2
11
+ - @sproutsocial/seeds-react-mixins@4.1.1
12
+ - @sproutsocial/seeds-react-hooks@3.0.2
13
+ - @sproutsocial/seeds-react-theme@2.2.1
14
+ - @sproutsocial/seeds-react-icon@1.1.2
15
+ - @sproutsocial/seeds-react-box@1.1.2
16
+
3
17
  ## 1.0.0
4
18
 
5
19
  ### Major Changes
6
20
 
7
21
  - bd8d03d: Migrate Token from Racine to seeds-react-token
8
-
package/dist/esm/index.js CHANGED
@@ -137,9 +137,9 @@ var Token = ({
137
137
  var Token_default = Token;
138
138
 
139
139
  // src/index.ts
140
- var src_default = Token_default;
140
+ var index_default = Token_default;
141
141
  export {
142
142
  Token_default as Token,
143
- src_default as default
143
+ index_default as default
144
144
  };
145
145
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Token.tsx","../../src/styles.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport Container from \"./styles\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Token = ({\n children,\n closeable = true,\n onClick,\n qa,\n valid = true,\n disabled = false,\n palette = \"neutral\",\n ...rest\n}: TypeTokenProps) => {\n const textContainer = useTextContent(\"\");\n\n return (\n <Container\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n //@ts-ignore some legacy ref type mismatch between divs\n ref={textContainer}\n valid={valid}\n palette={palette}\n type={closeable || onClick ? \"button\" : undefined}\n as={closeable || onClick ? \"button\" : \"div\"}\n closeable={closeable || !!onClick}\n disabled={disabled}\n onClick={onClick}\n data-qa-token={textContainer.current}\n data-qa-token-iscloseable={closeable === true}\n data-qa-token-isvalid={valid === true}\n data-qa-token-isdisabled={disabled === true}\n {...qa}\n {...rest}\n >\n {!valid && (\n <>\n <VisuallyHidden as=\"div\" role=\"status\">\n This is an invalid token\n </VisuallyHidden>\n <Icon\n aria-hidden\n pr={300}\n name=\"circle-exclamation-solid\"\n size=\"mini\"\n />\n <VisuallyHidden>Invalid</VisuallyHidden>\n </>\n )}\n {closeable ? (\n <Box display=\"flex\" alignItems=\"center\" justifyContent=\"space-between\">\n <Box as=\"span\" display=\"flex\" alignItems=\"center\">\n {children}\n </Box>\n <Icon aria-hidden pl={300} name=\"x-solid\" size=\"mini\" />\n </Box>\n ) : (\n children\n )}\n </Container>\n );\n};\n\nexport default Token;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Container = styled.button<TypeTokenProps>`\n position: relative;\n display: inline-flex;\n align-items: center;\n margin: 0;\n line-height: 1;\n outline: none;\n /* Theme Properties */\n ${({ theme }) => css`\n ${theme.typography[200]}\n font-family: ${theme.fontFamily};\n font-weight: ${theme.fontWeights.normal};\n border: 1px solid ${theme.colors.container.border.base};\n border-radius: ${theme.radii[500]};\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.base};\n padding: ${theme.space[200]} ${theme.space[300]};\n transition: all ${theme.duration.fast} ${theme.easing.ease_inout};\n `}\n\n &:focus {\n ${focusRing}\n }\n\n ${({ closeable, theme }) =>\n closeable &&\n css`\n cursor: pointer;\n &:hover,\n &:active {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.base)};\n }\n `}\n\n ${({ theme, palette }) =>\n palette === \"blue\" &&\n css`\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.decorative.blue};\n border: 1px solid ${theme.colors.container.border.decorative.blue};\n &:hover,\n &:active {\n cursor: pointer;\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.decorative.blue)};\n }\n `}\n\n ${({ disabled, theme }) =>\n disabled &&\n css`\n opacity: 0.4;\n cursor: not-allowed;\n &:hover,\n &:active {\n box-shadow: none;\n border: 1px solid ${theme.colors.container.border.base};\n }\n `}\n \n ${({ valid, theme }) =>\n !valid &&\n css`\n color: ${theme.colors.text.error};\n background: ${theme.colors.container.background.error};\n border: 1px solid ${theme.colors.container.border.error};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.error)};\n }\n `}\n\n ${COMMON}\n`;\n\nexport default Container;\n","import Token from \"./Token\";\n\nexport default Token;\nexport { Token };\nexport * from \"./Token\";\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../src/Token.tsx","../../src/styles.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport Container from \"./styles\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Token = ({\n children,\n closeable = true,\n onClick,\n qa,\n valid = true,\n disabled = false,\n palette = \"neutral\",\n ...rest\n}: TypeTokenProps) => {\n const textContainer = useTextContent(\"\");\n\n return (\n <Container\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n //@ts-ignore some legacy ref type mismatch between divs\n ref={textContainer}\n valid={valid}\n palette={palette}\n type={closeable || onClick ? \"button\" : undefined}\n as={closeable || onClick ? \"button\" : \"div\"}\n closeable={closeable || !!onClick}\n disabled={disabled}\n onClick={onClick}\n data-qa-token={textContainer.current}\n data-qa-token-iscloseable={closeable === true}\n data-qa-token-isvalid={valid === true}\n data-qa-token-isdisabled={disabled === true}\n {...qa}\n {...rest}\n >\n {!valid && (\n <>\n <VisuallyHidden as=\"div\" role=\"status\">\n This is an invalid token\n </VisuallyHidden>\n <Icon\n aria-hidden\n pr={300}\n name=\"circle-exclamation-solid\"\n size=\"mini\"\n />\n <VisuallyHidden>Invalid</VisuallyHidden>\n </>\n )}\n {closeable ? (\n <Box display=\"flex\" alignItems=\"center\" justifyContent=\"space-between\">\n <Box as=\"span\" display=\"flex\" alignItems=\"center\">\n {children}\n </Box>\n <Icon aria-hidden pl={300} name=\"x-solid\" size=\"mini\" />\n </Box>\n ) : (\n children\n )}\n </Container>\n );\n};\n\nexport default Token;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Container = styled.button<TypeTokenProps>`\n position: relative;\n display: inline-flex;\n align-items: center;\n margin: 0;\n line-height: 1;\n outline: none;\n /* Theme Properties */\n ${({ theme }) => css`\n ${theme.typography[200]}\n font-family: ${theme.fontFamily};\n font-weight: ${theme.fontWeights.normal};\n border: 1px solid ${theme.colors.container.border.base};\n border-radius: ${theme.radii[500]};\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.base};\n padding: ${theme.space[200]} ${theme.space[300]};\n transition: all ${theme.duration.fast} ${theme.easing.ease_inout};\n `}\n\n &:focus {\n ${focusRing}\n }\n\n ${({ closeable, theme }) =>\n closeable &&\n css`\n cursor: pointer;\n &:hover,\n &:active {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.base)};\n }\n `}\n\n ${({ theme, palette }) =>\n palette === \"blue\" &&\n css`\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.decorative.blue};\n border: 1px solid ${theme.colors.container.border.decorative.blue};\n &:hover,\n &:active {\n cursor: pointer;\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.decorative.blue)};\n }\n `}\n\n ${({ disabled, theme }) =>\n disabled &&\n css`\n opacity: 0.4;\n cursor: not-allowed;\n &:hover,\n &:active {\n box-shadow: none;\n border: 1px solid ${theme.colors.container.border.base};\n }\n `}\n \n ${({ valid, theme }) =>\n !valid &&\n css`\n color: ${theme.colors.text.error};\n background: ${theme.colors.container.background.error};\n border: 1px solid ${theme.colors.container.border.error};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.error)};\n }\n `}\n\n ${COMMON}\n`;\n\nexport default Container;\n","import Token from \"./Token\";\n\nexport default Token;\nexport { Token };\nexport * from \"./Token\";\n"],"mappings":"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","names":[]}
package/dist/index.js CHANGED
@@ -28,12 +28,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
28
28
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
29
 
30
30
  // src/index.ts
31
- var src_exports = {};
32
- __export(src_exports, {
31
+ var index_exports = {};
32
+ __export(index_exports, {
33
33
  Token: () => Token_default,
34
- default: () => src_default
34
+ default: () => index_default
35
35
  });
36
- module.exports = __toCommonJS(src_exports);
36
+ module.exports = __toCommonJS(index_exports);
37
37
 
38
38
  // src/Token.tsx
39
39
  var React = require("react");
@@ -174,7 +174,7 @@ var Token = ({
174
174
  var Token_default = Token;
175
175
 
176
176
  // src/index.ts
177
- var src_default = Token_default;
177
+ var index_default = Token_default;
178
178
  // Annotate the CommonJS export names for ESM import in node:
179
179
  0 && (module.exports = {
180
180
  Token
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/Token.tsx","../src/styles.ts"],"sourcesContent":["import Token from \"./Token\";\n\nexport default Token;\nexport { Token };\nexport * from \"./Token\";\n","import * as React from \"react\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport Container from \"./styles\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Token = ({\n children,\n closeable = true,\n onClick,\n qa,\n valid = true,\n disabled = false,\n palette = \"neutral\",\n ...rest\n}: TypeTokenProps) => {\n const textContainer = useTextContent(\"\");\n\n return (\n <Container\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n //@ts-ignore some legacy ref type mismatch between divs\n ref={textContainer}\n valid={valid}\n palette={palette}\n type={closeable || onClick ? \"button\" : undefined}\n as={closeable || onClick ? \"button\" : \"div\"}\n closeable={closeable || !!onClick}\n disabled={disabled}\n onClick={onClick}\n data-qa-token={textContainer.current}\n data-qa-token-iscloseable={closeable === true}\n data-qa-token-isvalid={valid === true}\n data-qa-token-isdisabled={disabled === true}\n {...qa}\n {...rest}\n >\n {!valid && (\n <>\n <VisuallyHidden as=\"div\" role=\"status\">\n This is an invalid token\n </VisuallyHidden>\n <Icon\n aria-hidden\n pr={300}\n name=\"circle-exclamation-solid\"\n size=\"mini\"\n />\n <VisuallyHidden>Invalid</VisuallyHidden>\n </>\n )}\n {closeable ? (\n <Box display=\"flex\" alignItems=\"center\" justifyContent=\"space-between\">\n <Box as=\"span\" display=\"flex\" alignItems=\"center\">\n {children}\n </Box>\n <Icon aria-hidden pl={300} name=\"x-solid\" size=\"mini\" />\n </Box>\n ) : (\n children\n )}\n </Container>\n );\n};\n\nexport default Token;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Container = styled.button<TypeTokenProps>`\n position: relative;\n display: inline-flex;\n align-items: center;\n margin: 0;\n line-height: 1;\n outline: none;\n /* Theme Properties */\n ${({ theme }) => css`\n ${theme.typography[200]}\n font-family: ${theme.fontFamily};\n font-weight: ${theme.fontWeights.normal};\n border: 1px solid ${theme.colors.container.border.base};\n border-radius: ${theme.radii[500]};\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.base};\n padding: ${theme.space[200]} ${theme.space[300]};\n transition: all ${theme.duration.fast} ${theme.easing.ease_inout};\n `}\n\n &:focus {\n ${focusRing}\n }\n\n ${({ closeable, theme }) =>\n closeable &&\n css`\n cursor: pointer;\n &:hover,\n &:active {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.base)};\n }\n `}\n\n ${({ theme, palette }) =>\n palette === \"blue\" &&\n css`\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.decorative.blue};\n border: 1px solid ${theme.colors.container.border.decorative.blue};\n &:hover,\n &:active {\n cursor: pointer;\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.decorative.blue)};\n }\n `}\n\n ${({ disabled, theme }) =>\n disabled &&\n css`\n opacity: 0.4;\n cursor: not-allowed;\n &:hover,\n &:active {\n box-shadow: none;\n border: 1px solid ${theme.colors.container.border.base};\n }\n `}\n \n ${({ valid, theme }) =>\n !valid &&\n css`\n color: ${theme.colors.text.error};\n background: ${theme.colors.container.background.error};\n border: 1px solid ${theme.colors.container.border.error};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.error)};\n }\n `}\n\n ${COMMON}\n`;\n\nexport default Container;\n"],"mappings":"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","names":["import_seeds_react_hooks","styled","Icon","Box"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/Token.tsx","../src/styles.ts"],"sourcesContent":["import Token from \"./Token\";\n\nexport default Token;\nexport { Token };\nexport * from \"./Token\";\n","import * as React from \"react\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport Container from \"./styles\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Token = ({\n children,\n closeable = true,\n onClick,\n qa,\n valid = true,\n disabled = false,\n palette = \"neutral\",\n ...rest\n}: TypeTokenProps) => {\n const textContainer = useTextContent(\"\");\n\n return (\n <Container\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n //@ts-ignore some legacy ref type mismatch between divs\n ref={textContainer}\n valid={valid}\n palette={palette}\n type={closeable || onClick ? \"button\" : undefined}\n as={closeable || onClick ? \"button\" : \"div\"}\n closeable={closeable || !!onClick}\n disabled={disabled}\n onClick={onClick}\n data-qa-token={textContainer.current}\n data-qa-token-iscloseable={closeable === true}\n data-qa-token-isvalid={valid === true}\n data-qa-token-isdisabled={disabled === true}\n {...qa}\n {...rest}\n >\n {!valid && (\n <>\n <VisuallyHidden as=\"div\" role=\"status\">\n This is an invalid token\n </VisuallyHidden>\n <Icon\n aria-hidden\n pr={300}\n name=\"circle-exclamation-solid\"\n size=\"mini\"\n />\n <VisuallyHidden>Invalid</VisuallyHidden>\n </>\n )}\n {closeable ? (\n <Box display=\"flex\" alignItems=\"center\" justifyContent=\"space-between\">\n <Box as=\"span\" display=\"flex\" alignItems=\"center\">\n {children}\n </Box>\n <Icon aria-hidden pl={300} name=\"x-solid\" size=\"mini\" />\n </Box>\n ) : (\n children\n )}\n </Container>\n );\n};\n\nexport default Token;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Container = styled.button<TypeTokenProps>`\n position: relative;\n display: inline-flex;\n align-items: center;\n margin: 0;\n line-height: 1;\n outline: none;\n /* Theme Properties */\n ${({ theme }) => css`\n ${theme.typography[200]}\n font-family: ${theme.fontFamily};\n font-weight: ${theme.fontWeights.normal};\n border: 1px solid ${theme.colors.container.border.base};\n border-radius: ${theme.radii[500]};\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.base};\n padding: ${theme.space[200]} ${theme.space[300]};\n transition: all ${theme.duration.fast} ${theme.easing.ease_inout};\n `}\n\n &:focus {\n ${focusRing}\n }\n\n ${({ closeable, theme }) =>\n closeable &&\n css`\n cursor: pointer;\n &:hover,\n &:active {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.base)};\n }\n `}\n\n ${({ theme, palette }) =>\n palette === \"blue\" &&\n css`\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.decorative.blue};\n border: 1px solid ${theme.colors.container.border.decorative.blue};\n &:hover,\n &:active {\n cursor: pointer;\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.decorative.blue)};\n }\n `}\n\n ${({ disabled, theme }) =>\n disabled &&\n css`\n opacity: 0.4;\n cursor: not-allowed;\n &:hover,\n &:active {\n box-shadow: none;\n border: 1px solid ${theme.colors.container.border.base};\n }\n `}\n \n ${({ valid, theme }) =>\n !valid &&\n css`\n color: ${theme.colors.text.error};\n background: ${theme.colors.container.background.error};\n border: 1px solid ${theme.colors.container.border.error};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.error)};\n }\n `}\n\n ${COMMON}\n`;\n\nexport default Container;\n"],"mappings":"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","names":["import_seeds_react_hooks","styled","Icon","Box"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-token",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Seeds React Token",
5
5
  "author": "Sprout Social, Inc.",
6
6
  "license": "MIT",
@@ -18,13 +18,13 @@
18
18
  "test:watch": "jest --watch --coverage=false"
19
19
  },
20
20
  "dependencies": {
21
- "@sproutsocial/seeds-react-theme": "*",
22
- "@sproutsocial/seeds-react-system-props": "*",
23
- "@sproutsocial/seeds-react-box": "*",
24
- "@sproutsocial/seeds-react-icon": "*",
25
- "@sproutsocial/seeds-react-visually-hidden": "*",
26
- "@sproutsocial/seeds-react-hooks": "*",
27
- "@sproutsocial/seeds-react-mixins": "*"
21
+ "@sproutsocial/seeds-react-theme": "^2.2.0",
22
+ "@sproutsocial/seeds-react-system-props": "^3.0.1",
23
+ "@sproutsocial/seeds-react-box": "^1.1.1",
24
+ "@sproutsocial/seeds-react-icon": "^1.1.1",
25
+ "@sproutsocial/seeds-react-visually-hidden": "^1.0.1",
26
+ "@sproutsocial/seeds-react-hooks": "^3.0.1",
27
+ "@sproutsocial/seeds-react-mixins": "^4.1.0"
28
28
  },
29
29
  "devDependencies": {
30
30
  "@types/react": "^18.0.0",