reshaped 3.3.7 → 3.3.9

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.
Files changed (19) hide show
  1. package/dist/bundle.js +9 -9
  2. package/dist/cjs/cli/theming/index.js +3 -0
  3. package/dist/cjs/cli/theming/tailwind.d.ts +3 -0
  4. package/dist/cjs/cli/theming/tailwind.js +83 -0
  5. package/dist/cjs/themes/figma/tailwind.css +1 -0
  6. package/dist/cjs/themes/fragments/twitter/tailwind.css +1 -0
  7. package/dist/cjs/themes/reshaped/tailwind.css +1 -0
  8. package/dist/cjs/themes/slate/tailwind.css +1 -0
  9. package/dist/cli/theming/index.js +3 -0
  10. package/dist/cli/theming/tailwind.d.ts +3 -0
  11. package/dist/cli/theming/tailwind.js +76 -0
  12. package/dist/components/View/View.d.ts +3 -2
  13. package/dist/components/View/View.js +5 -8
  14. package/dist/components/View/tests/View.stories.d.ts +2 -2
  15. package/dist/themes/figma/tailwind.css +1 -0
  16. package/dist/themes/fragments/twitter/tailwind.css +1 -0
  17. package/dist/themes/reshaped/tailwind.css +1 -0
  18. package/dist/themes/slate/tailwind.css +1 -0
  19. package/package.json +16 -16
package/dist/cjs/cli/theming/index.js CHANGED
@@ -10,6 +10,7 @@ const chalk_1 = __importDefault(require("chalk"));
10
10
  const mergeDefinitions_1 = __importDefault(require("../../themes/_generator/utilities/mergeDefinitions"));
11
11
  const transform_1 = __importDefault(require("../../themes/_generator/transform"));
12
12
  const reshaped_1 = __importDefault(require("../../themes/_generator/definitions/reshaped"));
13
+ const tailwind_1 = require("./tailwind");
13
14
  const transformDefinition = (name, definition, options) => {
14
15
  const { isFragment, outputPath } = options;
15
16
  const code = (0, transform_1.default)(name, definition, options);
@@ -18,10 +19,12 @@ const transformDefinition = (name, definition, options) => {
18
19
  : path_1.default.resolve(outputPath, name);
19
20
  const themePath = path_1.default.resolve(themeFolderPath, "theme.css");
20
21
  const themeMediaPath = path_1.default.resolve(themeFolderPath, "media.css");
22
+ const twPath = path_1.default.resolve(themeFolderPath, "tailwind.css");
21
23
  const themeJsonPath = path_1.default.resolve(themeFolderPath, "theme.json");
22
24
  fs_1.default.mkdirSync(themeFolderPath, { recursive: true });
23
25
  fs_1.default.writeFileSync(themePath, code.variables);
24
26
  fs_1.default.writeFileSync(themeJsonPath, JSON.stringify(definition));
27
+ fs_1.default.writeFileSync(twPath, (0, tailwind_1.transformToTailwind)(definition));
25
28
  if (code.media)
26
29
  fs_1.default.writeFileSync(themeMediaPath, code.media);
27
30
  const logOutput = `Compiled ${chalk_1.default.bold(name)} theme${isFragment ? " fragment" : ""}`;
package/dist/cjs/cli/theming/tailwind.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { FullThemeDefinition } from "../../themes/_generator/tokens/types";
2
+ import type * as T from "../../themes/_generator/types";
3
+ export declare const transformToTailwind: (theme?: T.PartialDeep<FullThemeDefinition>) => string;
package/dist/cjs/cli/theming/tailwind.js ADDED
@@ -0,0 +1,83 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.transformToTailwind = void 0;
7
+ /**
8
+ * Transform JS theme defintion to Tailwind 4 CSS definition
9
+ */
10
+ const reshaped_1 = __importDefault(require("../../themes/_generator/definitions/reshaped"));
11
+ const mergeDefinitions_1 = __importDefault(require("../../themes/_generator/utilities/mergeDefinitions"));
12
+ const string_1 = require("../../utilities/string");
13
+ const transformToTailwind = (theme) => {
14
+ const variables = {};
15
+ const definition = theme
16
+ ? (0, mergeDefinitions_1.default)(reshaped_1.default, theme)
17
+ : reshaped_1.default;
18
+ Object.keys(definition.color).forEach((tokenName) => {
19
+ const cssTokenName = (0, string_1.camelToKebab)(tokenName);
20
+ const cssVariable = ["rs", "color", cssTokenName].join("-");
21
+ const configValue = `var(--${cssVariable})`;
22
+ if (cssTokenName.startsWith("rgb-"))
23
+ return;
24
+ if (cssTokenName.startsWith("background-")) {
25
+ const name = cssTokenName.replace("background-", "");
26
+ variables[`--background-color-${name}`] = configValue;
27
+ return;
28
+ }
29
+ if (cssTokenName.startsWith("on-")) {
30
+ // Replacing on- separately to support on-brand
31
+ const name = cssTokenName.replace("on-", "").replace("background-", "");
32
+ variables[`--text-color-on-${name}`] = configValue;
33
+ return;
34
+ }
35
+ if (cssTokenName.startsWith("foreground-")) {
36
+ const name = cssTokenName.replace("foreground-", "");
37
+ variables[`--text-color-${name}`] = configValue;
38
+ return;
39
+ }
40
+ if (cssTokenName.startsWith("border-")) {
41
+ const name = cssTokenName.replace("border-", "");
42
+ variables[`--border-color-${name}`] = configValue;
43
+ return;
44
+ }
45
+ variables[`--color-${cssTokenName}`] = configValue;
46
+ });
47
+ Object.keys(definition.radius).forEach((tokenName) => {
48
+ const cssTokenName = (0, string_1.camelToKebab)(tokenName);
49
+ variables[`--radius-${tokenName}`] = `var(--rs-radius-${cssTokenName})`;
50
+ return;
51
+ });
52
+ Object.keys(definition.unit).forEach((tokenName) => {
53
+ if (tokenName.startsWith("base")) {
54
+ [...Array(11).keys()].forEach((i) => {
55
+ if (i === 0) {
56
+ variables[`--spacing-0`] = "0px";
57
+ }
58
+ else {
59
+ variables[`--spacing-x${i}`] = `var(--rs-unit-x${i})`;
60
+ }
61
+ });
62
+ }
63
+ });
64
+ Object.keys(definition.shadow).forEach((tokenName) => {
65
+ const cssTokenName = (0, string_1.camelToKebab)(tokenName);
66
+ const cssVariable = ["rs", "shadow", cssTokenName].join("-");
67
+ const configValue = `var(--${cssVariable})`;
68
+ const name = cssTokenName.replace("shadow-", "");
69
+ variables[`--shadow-${name}`] = configValue;
70
+ return;
71
+ });
72
+ Object.entries(definition.viewport).forEach(([tokenName, tokenValue]) => {
73
+ if (!tokenValue.minPx)
74
+ return;
75
+ variables[`--breakpoint-${tokenName}`] = `${tokenValue.minPx}px`;
76
+ });
77
+ return `@theme {
78
+ ${Object.entries(variables)
79
+ .map(([key, value]) => `${key}: ${value};`)
80
+ .join("\n")}
81
+ }`;
82
+ };
83
+ exports.transformToTailwind = transformToTailwind;
package/dist/cjs/themes/figma/tailwind.css ADDED
@@ -0,0 +1 @@
1
+ @theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--background-color-neutral-highlighted:var(--rs-color-background-neutral-highlighted);--background-color-primary-highlighted:var(--rs-color-background-primary-highlighted);--background-color-positive-highlighted:var(--rs-color-background-positive-highlighted);--background-color-critical-highlighted:var(--rs-color-background-critical-highlighted);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
package/dist/cjs/themes/fragments/twitter/tailwind.css ADDED
@@ -0,0 +1 @@
1
+ @theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--background-color-primary-highlighted:var(--rs-color-background-primary-highlighted);--text-color-on-primary:var(--rs-color-on-background-primary);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
package/dist/cjs/themes/reshaped/tailwind.css ADDED
@@ -0,0 +1 @@
1
+ @theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
package/dist/cjs/themes/slate/tailwind.css ADDED
@@ -0,0 +1 @@
1
+ @theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
package/dist/cli/theming/index.js CHANGED
@@ -4,6 +4,7 @@ import chalk from "chalk";
4
4
  import mergeDefinitions from "../../themes/_generator/utilities/mergeDefinitions.js";
5
5
  import transform from "../../themes/_generator/transform.js";
6
6
  import reshapedDefinition from "../../themes/_generator/definitions/reshaped.js";
7
+ import { transformToTailwind } from "./tailwind.js";
7
8
  const transformDefinition = (name, definition, options) => {
8
9
  const { isFragment, outputPath } = options;
9
10
  const code = transform(name, definition, options);
@@ -12,10 +13,12 @@ const transformDefinition = (name, definition, options) => {
12
13
  : path.resolve(outputPath, name);
13
14
  const themePath = path.resolve(themeFolderPath, "theme.css");
14
15
  const themeMediaPath = path.resolve(themeFolderPath, "media.css");
16
+ const twPath = path.resolve(themeFolderPath, "tailwind.css");
15
17
  const themeJsonPath = path.resolve(themeFolderPath, "theme.json");
16
18
  fs.mkdirSync(themeFolderPath, { recursive: true });
17
19
  fs.writeFileSync(themePath, code.variables);
18
20
  fs.writeFileSync(themeJsonPath, JSON.stringify(definition));
21
+ fs.writeFileSync(twPath, transformToTailwind(definition));
19
22
  if (code.media)
20
23
  fs.writeFileSync(themeMediaPath, code.media);
21
24
  const logOutput = `Compiled ${chalk.bold(name)} theme${isFragment ? " fragment" : ""}`;
package/dist/cli/theming/tailwind.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { FullThemeDefinition } from "../../themes/_generator/tokens/types";
2
+ import type * as T from "../../themes/_generator/types";
3
+ export declare const transformToTailwind: (theme?: T.PartialDeep<FullThemeDefinition>) => string;
package/dist/cli/theming/tailwind.js ADDED
@@ -0,0 +1,76 @@
1
+ /**
2
+ * Transform JS theme defintion to Tailwind 4 CSS definition
3
+ */
4
+ import reshapedDefinition from "../../themes/_generator/definitions/reshaped.js";
5
+ import mergeDefinitions from "../../themes/_generator/utilities/mergeDefinitions.js";
6
+ import { camelToKebab } from "../../utilities/string.js";
7
+ export const transformToTailwind = (theme) => {
8
+ const variables = {};
9
+ const definition = theme
10
+ ? mergeDefinitions(reshapedDefinition, theme)
11
+ : reshapedDefinition;
12
+ Object.keys(definition.color).forEach((tokenName) => {
13
+ const cssTokenName = camelToKebab(tokenName);
14
+ const cssVariable = ["rs", "color", cssTokenName].join("-");
15
+ const configValue = `var(--${cssVariable})`;
16
+ if (cssTokenName.startsWith("rgb-"))
17
+ return;
18
+ if (cssTokenName.startsWith("background-")) {
19
+ const name = cssTokenName.replace("background-", "");
20
+ variables[`--background-color-${name}`] = configValue;
21
+ return;
22
+ }
23
+ if (cssTokenName.startsWith("on-")) {
24
+ // Replacing on- separately to support on-brand
25
+ const name = cssTokenName.replace("on-", "").replace("background-", "");
26
+ variables[`--text-color-on-${name}`] = configValue;
27
+ return;
28
+ }
29
+ if (cssTokenName.startsWith("foreground-")) {
30
+ const name = cssTokenName.replace("foreground-", "");
31
+ variables[`--text-color-${name}`] = configValue;
32
+ return;
33
+ }
34
+ if (cssTokenName.startsWith("border-")) {
35
+ const name = cssTokenName.replace("border-", "");
36
+ variables[`--border-color-${name}`] = configValue;
37
+ return;
38
+ }
39
+ variables[`--color-${cssTokenName}`] = configValue;
40
+ });
41
+ Object.keys(definition.radius).forEach((tokenName) => {
42
+ const cssTokenName = camelToKebab(tokenName);
43
+ variables[`--radius-${tokenName}`] = `var(--rs-radius-${cssTokenName})`;
44
+ return;
45
+ });
46
+ Object.keys(definition.unit).forEach((tokenName) => {
47
+ if (tokenName.startsWith("base")) {
48
+ [...Array(11).keys()].forEach((i) => {
49
+ if (i === 0) {
50
+ variables[`--spacing-0`] = "0px";
51
+ }
52
+ else {
53
+ variables[`--spacing-x${i}`] = `var(--rs-unit-x${i})`;
54
+ }
55
+ });
56
+ }
57
+ });
58
+ Object.keys(definition.shadow).forEach((tokenName) => {
59
+ const cssTokenName = camelToKebab(tokenName);
60
+ const cssVariable = ["rs", "shadow", cssTokenName].join("-");
61
+ const configValue = `var(--${cssVariable})`;
62
+ const name = cssTokenName.replace("shadow-", "");
63
+ variables[`--shadow-${name}`] = configValue;
64
+ return;
65
+ });
66
+ Object.entries(definition.viewport).forEach(([tokenName, tokenValue]) => {
67
+ if (!tokenValue.minPx)
68
+ return;
69
+ variables[`--breakpoint-${tokenName}`] = `${tokenValue.minPx}px`;
70
+ });
71
+ return `@theme {
72
+ ${Object.entries(variables)
73
+ .map(([key, value]) => `${key}: ${value};`)
74
+ .join("\n")}
75
+ }`;
76
+ };
package/dist/components/View/View.d.ts CHANGED
@@ -1,6 +1,7 @@
1
+ import React from "react";
1
2
  import type * as T from "./View.types";
2
3
  declare const View: {
3
- <As extends keyof JSX.IntrinsicElements = "div">(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
4
- Item: <As extends keyof JSX.IntrinsicElements = "div">(props: T.ItemProps<As>) => import("react/jsx-runtime").JSX.Element;
4
+ <As extends keyof JSX.IntrinsicElements = "div">(props: T.Props<As>): React.ReactNode;
5
+ Item: <As extends keyof JSX.IntrinsicElements = "div">(props: T.ItemProps<As>) => React.ReactNode;
5
6
  };
6
7
  export default View;
package/dist/components/View/View.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { createElement as _createElement } from "react";
2
- import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import React from "react";
4
4
  import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
5
5
  import Divider from "../Divider/index.js";
@@ -101,7 +101,6 @@ const View = (props) => {
101
101
  if (isItem) {
102
102
  itemElement = React.cloneElement(child, {
103
103
  className: classNames(className, child.props.className),
104
- key,
105
104
  });
106
105
  }
107
106
  else if (!className &&
@@ -120,29 +119,27 @@ const View = (props) => {
120
119
  nowrap = true;
121
120
  if ((isItem || isView) && child.props?.grow)
122
121
  isFlex = true;
123
- return [dividerElement, itemElement];
122
+ return (_jsxs(React.Fragment, { children: [dividerElement, itemElement] }, `${key}-fragment`));
124
123
  };
125
124
  const formattedChildren = React.Children.map(children, (child, index) => {
126
125
  if (!child)
127
126
  return null;
128
- // Ignore the indices of the items that rendered nothing
129
- const renderedIndex = renderedItemIndex;
130
127
  renderedItemIndex += 1;
131
128
  if (child.type === Hidden) {
132
129
  const { children: hiddenChild, ...hiddenProps } = child.props;
133
130
  const key = child.key || index;
134
- return (_createElement(Hidden, { ...hiddenProps, key: key }, renderItem({ child: hiddenChild, index: renderedIndex })));
131
+ return (_createElement(Hidden, { ...hiddenProps, key: key }, renderItem({ child: hiddenChild, index: renderedItemIndex })));
135
132
  }
136
133
  if (child.type === React.Fragment && React.Children.count(child.props.children) > 1) {
137
134
  return child.props.children.map((child) => {
138
135
  if (!child)
139
136
  return null;
140
- const index = renderedIndex;
137
+ const index = renderedItemIndex;
141
138
  renderedItemIndex += 1;
142
139
  return renderItem({ child, index });
143
140
  });
144
141
  }
145
- return renderItem({ child, index: renderedIndex });
142
+ return renderItem({ child, index: renderedItemIndex });
146
143
  });
147
144
  // Classnames and attributes are written here so we can assign nowrap to the root element based on the children
148
145
  const rootClassNames = classNames(s.root, className, radiusStyles?.classNames, bleedStyles?.classNames, widthStyles?.classNames, heightStyles?.classNames, maxWidthStyles?.classNames, maxHeightStyles?.classNames, minWidthStyles?.classNames, minHeightStyles?.classNames, borderStyles?.classNames, backgroundColor && s[`--bg-${backgroundColor}`], shadow && s[`--shadow-${shadow}`], overflow && s[`--overflow-${overflow}`], animated && s["--animated"], divided && s["--divided"], (padding !== undefined || paddingInline !== undefined || paddingBlock !== undefined) &&
package/dist/components/View/tests/View.stories.d.ts CHANGED
@@ -3,8 +3,8 @@ import { type ViewProps } from "./..";
3
3
  declare const _default: {
4
4
  title: string;
5
5
  component: {
6
- <As extends keyof JSX.IntrinsicElements = "div">(props: ViewProps<As>): React.JSX.Element;
7
- Item: <As extends keyof JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>) => React.JSX.Element;
6
+ <As extends keyof JSX.IntrinsicElements = "div">(props: ViewProps<As>): React.ReactNode;
7
+ Item: <As extends keyof JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>) => React.ReactNode;
8
8
  };
9
9
  parameters: {
10
10
  iframe: {
package/dist/themes/figma/tailwind.css ADDED
@@ -0,0 +1 @@
1
+ @theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--background-color-neutral-highlighted:var(--rs-color-background-neutral-highlighted);--background-color-primary-highlighted:var(--rs-color-background-primary-highlighted);--background-color-positive-highlighted:var(--rs-color-background-positive-highlighted);--background-color-critical-highlighted:var(--rs-color-background-critical-highlighted);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
package/dist/themes/fragments/twitter/tailwind.css ADDED
@@ -0,0 +1 @@
1
+ @theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--background-color-primary-highlighted:var(--rs-color-background-primary-highlighted);--text-color-on-primary:var(--rs-color-on-background-primary);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
package/dist/themes/reshaped/tailwind.css ADDED
@@ -0,0 +1 @@
1
+ @theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
package/dist/themes/slate/tailwind.css ADDED
@@ -0,0 +1 @@
1
+ @theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "reshaped",
3
3
  "description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
4
- "version": "3.3.7",
4
+ "version": "3.3.9",
5
5
  "license": "MIT",
6
6
  "email": "hello@reshaped.so",
7
7
  "homepage": "https://reshaped.so",
@@ -52,10 +52,10 @@
52
52
  "import": "./dist/bundle.js"
53
53
  },
54
54
  "./bundle.css": "./dist/bundle.css",
55
- "./themes/reshaped/theme.css": "./dist/themes/reshaped/theme.css",
56
- "./themes/slate/theme.css": "./dist/themes/slate/theme.css",
57
- "./themes/figma/theme.css": "./dist/themes/figma/theme.css",
58
- "./themes/fragments/twitter/theme.css": "./dist/themes/fragments/twitter/theme.css",
55
+ "./themes/reshaped/*": "./dist/themes/reshaped/*",
56
+ "./themes/slate/*": "./dist/themes/slate/*",
57
+ "./themes/figma/*": "./dist/themes/figma/*",
58
+ "./themes/fragments/twitter/*": "./dist/themes/fragments/twitter/*",
59
59
  "./package.json": "./package.json"
60
60
  },
61
61
  "sideEffects": false,
@@ -98,12 +98,12 @@
98
98
  "@commitlint/types": "19.5.0",
99
99
  "@eslint/js": "9.16.0",
100
100
  "@size-limit/preset-big-lib": "11.1.6",
101
- "@storybook/addon-a11y": "8.4.6",
102
- "@storybook/addon-controls": "8.4.6",
103
- "@storybook/addon-docs": "8.4.6",
104
- "@storybook/addon-storysource": "8.4.6",
105
- "@storybook/react": "8.4.6",
106
- "@storybook/react-vite": "8.4.6",
101
+ "@storybook/addon-a11y": "8.5.2",
102
+ "@storybook/addon-controls": "8.5.2",
103
+ "@storybook/addon-docs": "8.5.2",
104
+ "@storybook/addon-storysource": "8.5.2",
105
+ "@storybook/react": "8.5.2",
106
+ "@storybook/react-vite": "8.5.2",
107
107
  "@testing-library/dom": "10.4.0",
108
108
  "@testing-library/jest-dom": "6.6.3",
109
109
  "@testing-library/react": "16.0.1",
@@ -112,8 +112,8 @@
112
112
  "@types/events": "3.0.3",
113
113
  "@types/jest": "29.5.14",
114
114
  "@types/node": "22.10.1",
115
- "@types/react": "18.3.12",
116
- "@types/react-dom": "18.3.1",
115
+ "@types/react": "19.0.8",
116
+ "@types/react-dom": "19.0.3",
117
117
  "@typescript-eslint/eslint-plugin": "7.18.0",
118
118
  "@typescript-eslint/parser": "7.18.0",
119
119
  "@vitejs/plugin-react": "4.3.4",
@@ -137,12 +137,12 @@
137
137
  "postcss-each": "1.1.0",
138
138
  "postcss-nested": "7.0.2",
139
139
  "prettier": "3.4.1",
140
- "react": "18.3.1",
141
- "react-dom": "18.3.1",
140
+ "react": "19.0.0",
141
+ "react-dom": "19.0.0",
142
142
  "react-shadow": "20.5.0",
143
143
  "resolve-tspaths": "0.8.23",
144
144
  "size-limit": "11.1.6",
145
- "storybook": "8.4.6",
145
+ "storybook": "8.5.2",
146
146
  "stylelint": "16.11.0",
147
147
  "stylelint-config-prettier": "9.0.5",
148
148
  "stylelint-config-standard": "36.0.1",