From 0759ea9f1358c2e8c8fe32807911555bec3abe81 Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Wed, 2 Oct 2024 13:49:47 +1000 Subject: [PATCH 1/4] Tiles: Migrate to CSS gap --- .changeset/cold-bats-act.md | 24 ++++++ .changeset/tricky-penguins-search.md | 17 ++++ .../src/lib/components/Tiles/Tiles.css.ts | 64 ++++++++++----- .../lib/components/Tiles/Tiles.playroom.tsx | 8 +- .../components/Tiles/Tiles.screenshots.tsx | 24 +----- .../src/lib/components/Tiles/Tiles.tsx | 77 +++++++++---------- .../src/__snapshots__/contract.test.ts.snap | 11 +-- 7 files changed, 127 insertions(+), 98 deletions(-) create mode 100644 .changeset/cold-bats-act.md create mode 100644 .changeset/tricky-penguins-search.md diff --git a/.changeset/cold-bats-act.md b/.changeset/cold-bats-act.md new file mode 100644 index 0000000000..eda7f77927 --- /dev/null +++ b/.changeset/cold-bats-act.md @@ -0,0 +1,24 @@ +--- +'braid-design-system': minor +--- + +--- +updated: + - Tiles +--- + +**Tiles:** Remove `columns` limit + +The `columns` prop was previously limited from 1 to 6. +With the migration to [CSS Grid] this limit no longer applies. + +Note: Responsive values are also still supported, e.g. `columns={{ mobile: 1, tablet: 8 }}`. + +**EXAMPLE USAGE:** +```jsx + + ... + +``` + +[CSS Grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid diff --git a/.changeset/tricky-penguins-search.md b/.changeset/tricky-penguins-search.md new file mode 100644 index 0000000000..304a3fda56 --- /dev/null +++ b/.changeset/tricky-penguins-search.md @@ -0,0 +1,17 @@ +--- +'braid-design-system': major +--- + +--- +updated: + - Tiles +--- + +Migrate to CSS `gap` internally. + +With the browser support policy now enabling adoption of CSS [gap], Braid’s layout components are now able to lean into the platform directly for its declarative, parent-driven approach to white space management. + +Previously to enable gap-like behaviour, layout components iterated over their children wrapping them in container elements that applied padding. +The trade off of this technique was increased number of DOM elements and the introduction of unwanted space if the child element was hidden or return `null`, requiring developers to hoist logic to the parent component. + +[gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/gap diff --git a/packages/braid-design-system/src/lib/components/Tiles/Tiles.css.ts b/packages/braid-design-system/src/lib/components/Tiles/Tiles.css.ts index e8cb43903b..fcf1918c55 100644 --- a/packages/braid-design-system/src/lib/components/Tiles/Tiles.css.ts +++ b/packages/braid-design-system/src/lib/components/Tiles/Tiles.css.ts @@ -1,24 +1,46 @@ -import { styleVariants } from '@vanilla-extract/css'; -import type { Breakpoint } from '../../css/breakpoints'; +import { createVar, fallbackVar, style } from '@vanilla-extract/css'; import { responsiveStyle } from '../../css/responsiveStyle'; -const columnsWidths = { - 1: '100%', - 2: `${100 / 2}%`, - 3: `${100 / 3}%`, - 4: `${100 / 4}%`, - 5: `${100 / 5}%`, - 6: `${100 / 6}%`, -} as const; +const columns = createVar(); +export const mobileColumnsVar = createVar(); +export const tabletColumnsVar = createVar(); +export const desktopColumnsVar = createVar(); +export const wideColumnsVar = createVar(); -const makeColumnsAtoms = (breakpoint: Breakpoint) => - styleVariants( - columnsWidths, - (width) => responsiveStyle({ [breakpoint]: { flex: `0 0 ${width}` } }), - `columns_${breakpoint}`, - ); - -export const columnsMobile = makeColumnsAtoms('mobile'); -export const columnsTablet = makeColumnsAtoms('tablet'); -export const columnsDesktop = makeColumnsAtoms('desktop'); -export const columnsWide = makeColumnsAtoms('wide'); +export const tiles = style([ + { + display: 'grid', + gridTemplateColumns: `repeat(${columns}, 1fr)`, + }, + responsiveStyle({ + mobile: { + vars: { + [columns]: mobileColumnsVar, + }, + }, + tablet: { + vars: { + [columns]: fallbackVar(tabletColumnsVar, mobileColumnsVar), + }, + }, + desktop: { + vars: { + [columns]: fallbackVar( + desktopColumnsVar, + tabletColumnsVar, + mobileColumnsVar, + ), + }, + }, + wide: { + vars: { + [columns]: fallbackVar( + wideColumnsVar, + desktopColumnsVar, + tabletColumnsVar, + mobileColumnsVar, + ), + }, + }, + }), +]); diff --git a/packages/braid-design-system/src/lib/components/Tiles/Tiles.playroom.tsx b/packages/braid-design-system/src/lib/components/Tiles/Tiles.playroom.tsx index 8bc4072e4e..c5cfd2fab2 100644 --- a/packages/braid-design-system/src/lib/components/Tiles/Tiles.playroom.tsx +++ b/packages/braid-design-system/src/lib/components/Tiles/Tiles.playroom.tsx @@ -2,10 +2,6 @@ import React from 'react'; import { cleanSpaceValue } from '../../playroom/cleanSpaceValue'; import { type TilesProps, Tiles as BraidTiles } from './Tiles'; -export const Tiles = ({ space, columns, ...restProps }: TilesProps) => ( - +export const Tiles = ({ space, ...restProps }: TilesProps) => ( + ); diff --git a/packages/braid-design-system/src/lib/components/Tiles/Tiles.screenshots.tsx b/packages/braid-design-system/src/lib/components/Tiles/Tiles.screenshots.tsx index 7583426606..b523929d64 100644 --- a/packages/braid-design-system/src/lib/components/Tiles/Tiles.screenshots.tsx +++ b/packages/braid-design-system/src/lib/components/Tiles/Tiles.screenshots.tsx @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import type { ComponentScreenshot } from 'site/types'; import { Tiles } from '../'; import { Placeholder } from '../private/Placeholder/Placeholder'; @@ -29,27 +29,5 @@ export const screenshots: ComponentScreenshot = { ), }, - { - label: - 'Test - Should flatten fragments (6 tiles should be evenly spaced)', - Example: () => ( - - - - - - - - - - - - - - - - - ), - }, ], }; diff --git a/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx b/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx index 157ca29000..8bb3f0ffed 100644 --- a/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx +++ b/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx @@ -1,20 +1,21 @@ -import React, { Children } from 'react'; -import flattenChildren from '../../utils/flattenChildren'; +import React from 'react'; +import { assignInlineVars } from '@vanilla-extract/dynamic'; import { Box } from '../Box/Box'; -import type { Space } from '../../css/atoms/atoms'; -import { negativeMargin } from '../../css/negativeMargin/negativeMargin'; -import { resolveResponsiveProp } from '../../utils/resolveResponsiveProp'; -import * as styles from './Tiles.css'; +import type { ResponsiveSpace } from '../../css/atoms/atoms'; import type { ReactNodeNoStrings } from '../private/ReactNodeNoStrings'; -import type { RequiredResponsiveValue } from '../../css/atoms/sprinkles.css'; import buildDataAttributes, { type DataAttributeMap, } from '../private/buildDataAttributes'; +import { + type RequiredResponsiveValue, + normalizeResponsiveValue, +} from '../../css/atoms/sprinkles.css'; +import * as styles from './Tiles.css'; export interface TilesProps { children: ReactNodeNoStrings; - space: RequiredResponsiveValue; - columns: RequiredResponsiveValue<1 | 2 | 3 | 4 | 5 | 6>; + space: ResponsiveSpace; + columns: RequiredResponsiveValue; data?: DataAttributeMap; } @@ -24,37 +25,33 @@ export const Tiles = ({ columns = 1, data, ...restProps -}: TilesProps) => ( - +}: TilesProps) => { + const { + mobile: mobileColumns, + tablet: tabletColumns, + desktop: desktopColumns, + wide: wideColumns, + } = normalizeResponsiveValue(columns); + + return ( - {Children.map(flattenChildren(children), (child) => ( - - - {child} - - - ))} + {children} - -); + ); +}; diff --git a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap index c4c4dd1502..b60fa87761 100644 --- a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap +++ b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap @@ -8650,14 +8650,9 @@ exports[`Tiles 1`] = ` props: { children: ReactNodeNoStrings columns: - | 1 - | 2 - | 3 - | 4 - | 5 - | 6 - | RequiredConditionalObject<"mobile", "tablet" | "desktop" | "wide", 1 | 2 | 3 | 4 | 5 | 6> - | RequiredResponsiveArray<1 | 2 | 3 | 4, 1 | 2 | 3 | 4 | 5 | 6 | null> + | RequiredConditionalObject<"mobile", "tablet" | "desktop" | "wide", number> + | RequiredResponsiveArray<1 | 2 | 3 | 4, number | null> + | number data?: DataAttributeMap space: | "gutter" From 1000b9c22a3453176017a98b18b5151eb6b6fcd0 Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Wed, 2 Oct 2024 14:52:49 +1000 Subject: [PATCH 2/4] Update spread placeholders in tiles --- .../src/lib/components/Spread/Spread.screenshots.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/braid-design-system/src/lib/components/Spread/Spread.screenshots.tsx b/packages/braid-design-system/src/lib/components/Spread/Spread.screenshots.tsx index 851298c460..6e9dbb439d 100644 --- a/packages/braid-design-system/src/lib/components/Spread/Spread.screenshots.tsx +++ b/packages/braid-design-system/src/lib/components/Spread/Spread.screenshots.tsx @@ -112,15 +112,15 @@ export const screenshots: ComponentScreenshot = { - + - + - + ), From e80a95e7cc3182685b2cf9a330c12cc8a090d3df Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Wed, 2 Oct 2024 16:19:51 +1000 Subject: [PATCH 3/4] Update .changeset/tricky-penguins-search.md Co-authored-by: Adam Skoufis --- .changeset/tricky-penguins-search.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/tricky-penguins-search.md b/.changeset/tricky-penguins-search.md index 304a3fda56..709a9de0c2 100644 --- a/.changeset/tricky-penguins-search.md +++ b/.changeset/tricky-penguins-search.md @@ -12,6 +12,6 @@ Migrate to CSS `gap` internally. With the browser support policy now enabling adoption of CSS [gap], Braid’s layout components are now able to lean into the platform directly for its declarative, parent-driven approach to white space management. Previously to enable gap-like behaviour, layout components iterated over their children wrapping them in container elements that applied padding. -The trade off of this technique was increased number of DOM elements and the introduction of unwanted space if the child element was hidden or return `null`, requiring developers to hoist logic to the parent component. +The trade off of this technique was increased number of DOM elements and the introduction of unwanted space if the child element was hidden or returned `null`, requiring developers to hoist logic to the parent component. [gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/gap From 7b245d720d3f7f5013eb5d71ffb21a84537eb446 Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Wed, 2 Oct 2024 16:39:17 +1000 Subject: [PATCH 4/4] Update VE dynamic package --- packages/braid-design-system/package.json | 2 +- .../src/lib/components/Tiles/Tiles.tsx | 30 ++++++------ pnpm-lock.yaml | 48 +++++++++---------- 3 files changed, 41 insertions(+), 39 deletions(-) diff --git a/packages/braid-design-system/package.json b/packages/braid-design-system/package.json index 9987789f01..9202f20850 100644 --- a/packages/braid-design-system/package.json +++ b/packages/braid-design-system/package.json @@ -190,7 +190,7 @@ "@capsizecss/vanilla-extract": "^2.0.0", "@vanilla-extract/css": "^1.9.2", "@vanilla-extract/css-utils": "^0.1.3", - "@vanilla-extract/dynamic": "^2.0.3", + "@vanilla-extract/dynamic": "^2.1.2", "@vanilla-extract/sprinkles": "^1.5.1", "assert": "^2.0.0", "autosuggest-highlight": "^3.3.4", diff --git a/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx b/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx index 8bb3f0ffed..af3119da8c 100644 --- a/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx +++ b/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx @@ -26,11 +26,19 @@ export const Tiles = ({ data, ...restProps }: TilesProps) => { + /** + * Defaulting the normalised column values to empty strings so that when + * parsed to strings for `assignInlineVars`, they are correctly omitted + * from the style attribute when not defined. + * + * Without this, `undefined` would be parsed to the string "undefined", + * requiring additional logic to omit them manually from the style attribute. + */ const { - mobile: mobileColumns, - tablet: tabletColumns, - desktop: desktopColumns, - wide: wideColumns, + mobile: mobileColumns = '', + tablet: tabletColumns = '', + desktop: desktopColumns = '', + wide: wideColumns = '', } = normalizeResponsiveValue(columns); return ( @@ -38,16 +46,10 @@ export const Tiles = ({ gap={space} className={styles.tiles} style={assignInlineVars({ - ...(mobileColumns - ? { [styles.mobileColumnsVar]: `${mobileColumns}` } - : {}), - ...(tabletColumns - ? { [styles.tabletColumnsVar]: `${tabletColumns}` } - : {}), - ...(desktopColumns - ? { [styles.desktopColumnsVar]: `${desktopColumns}` } - : {}), - ...(wideColumns ? { [styles.wideColumnsVar]: `${wideColumns}` } : {}), + [styles.mobileColumnsVar]: String(mobileColumns), + [styles.tabletColumnsVar]: String(tabletColumns), + [styles.desktopColumnsVar]: String(desktopColumns), + [styles.wideColumnsVar]: String(wideColumns), })} {...buildDataAttributes({ data, validateRestProps: restProps })} > diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 996cd7b88f..eb9f18fe46 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -186,8 +186,8 @@ importers: specifier: ^0.1.3 version: 0.1.3 '@vanilla-extract/dynamic': - specifier: ^2.0.3 - version: 2.0.3 + specifier: ^2.1.2 + version: 2.1.2 '@vanilla-extract/sprinkles': specifier: ^1.5.1 version: 1.5.1(@vanilla-extract/css@1.15.5(babel-plugin-macros@3.1.0)) @@ -251,7 +251,7 @@ importers: version: 7.6.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.5.4) '@storybook/react-webpack5': specifier: 7.6.20 - version: 7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1) + version: 7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1) '@svgr/core': specifier: ^5.5.0 version: 5.5.0 @@ -353,7 +353,7 @@ importers: version: 2.13.0 sku: specifier: 13.1.3 - version: 13.1.3(@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1))(@types/node@18.13.0)(@types/react@18.3.3)(react@18.3.1)(sass@1.54.3)(terser@5.31.0)(type-fest@3.13.1)(webpack-hot-middleware@2.26.1) + version: 13.1.3(@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1))(@types/node@18.13.0)(@types/react@18.3.3)(react@18.3.1)(sass@1.54.3)(terser@5.31.0)(type-fest@3.13.1)(webpack-hot-middleware@2.26.1) storybook: specifier: 7.6.20 version: 7.6.20 @@ -3069,8 +3069,8 @@ packages: '@vanilla-extract/css@1.15.5': resolution: {integrity: sha512-N1nQebRWnXvlcmu9fXKVUs145EVwmWtMD95bpiEKtvehHDpUhmO1l2bauS7FGYKbi3dU1IurJbGpQhBclTr1ng==} - '@vanilla-extract/dynamic@2.0.3': - resolution: {integrity: sha512-Rglfw2gXAYiBzAQ4jgUG7rBgE2c88e/zcG27ZVoIqMHVq56wf2C1katGMm1yFMNBgzqM7oBNYzz4YOMzznydkg==} + '@vanilla-extract/dynamic@2.1.2': + resolution: {integrity: sha512-9BGMciD8rO1hdSPIAh1ntsG4LPD3IYKhywR7VOmmz9OO4Lx1hlwkSg3E6X07ujFx7YuBfx0GDQnApG9ESHvB2A==} '@vanilla-extract/integration@7.1.9': resolution: {integrity: sha512-bkikYnUdEiUoUZGX3tErmkpU43M4Q0McZcSUHutP/pQCeuDB29t8brLOLzdkahwD+RteX2/R3ukmIm3lAYzUnA==} @@ -11261,7 +11261,7 @@ snapshots: '@pkgjs/parseargs@0.11.0': optional: true - '@pmmmwh/react-refresh-webpack-plugin@0.5.15(react-refresh@0.14.0)(type-fest@3.13.1)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20))': + '@pmmmwh/react-refresh-webpack-plugin@0.5.15(react-refresh@0.14.0)(type-fest@3.13.1)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20))': dependencies: ansi-html: 0.0.9 core-js-pure: 3.26.1 @@ -11734,11 +11734,11 @@ snapshots: '@storybook/node-logger@7.6.20': {} - '@storybook/preset-react-webpack@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)': + '@storybook/preset-react-webpack@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)': dependencies: '@babel/preset-flow': 7.24.7(@babel/core@7.24.5) '@babel/preset-react': 7.24.7(@babel/core@7.24.5) - '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.0)(type-fest@3.13.1)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)) + '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.0)(type-fest@3.13.1)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)) '@storybook/core-webpack': 7.6.20 '@storybook/docs-tools': 7.6.20 '@storybook/node-logger': 7.6.20 @@ -11864,10 +11864,10 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - '@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)': + '@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)': dependencies: '@storybook/builder-webpack5': 7.6.20(esbuild@0.18.20)(typescript@5.5.4) - '@storybook/preset-react-webpack': 7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1) + '@storybook/preset-react-webpack': 7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1) '@storybook/react': 7.6.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.5.4) '@types/node': 18.13.0 react: 18.3.1 @@ -12594,7 +12594,7 @@ snapshots: transitivePeerDependencies: - babel-plugin-macros - '@vanilla-extract/dynamic@2.0.3': + '@vanilla-extract/dynamic@2.1.2': dependencies: '@vanilla-extract/private': 1.0.6 @@ -14666,9 +14666,9 @@ snapshots: '@typescript-eslint/parser': 7.17.0(eslint@8.57.0)(typescript@5.5.4) eslint: 8.57.0 eslint-config-prettier: 8.10.0(eslint@8.57.0) - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1)(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-cypress: 3.4.0(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@7.17.0(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(jest@29.1.2(@types/node@18.13.0))(typescript@5.5.4) eslint-plugin-react: 7.35.0(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -14688,13 +14688,13 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1)(eslint@8.57.0): + eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 4.3.6(supports-color@8.1.1) enhanced-resolve: 5.17.1 eslint: 8.57.0 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.6 is-core-module: 2.15.0 @@ -14705,14 +14705,14 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 7.17.0(eslint@8.57.0)(typescript@5.5.4) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1)(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0) transitivePeerDependencies: - supports-color @@ -14721,7 +14721,7 @@ snapshots: eslint: 8.57.0 globals: 13.24.0 - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 @@ -14731,7 +14731,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.15.0 is-glob: 4.0.3 @@ -18919,7 +18919,7 @@ snapshots: transitivePeerDependencies: - supports-color - sku@13.1.3(@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1))(@types/node@18.13.0)(@types/react@18.3.3)(react@18.3.1)(sass@1.54.3)(terser@5.31.0)(type-fest@3.13.1)(webpack-hot-middleware@2.26.1): + sku@13.1.3(@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1))(@types/node@18.13.0)(@types/react@18.3.3)(react@18.3.1)(sass@1.54.3)(terser@5.31.0)(type-fest@3.13.1)(webpack-hot-middleware@2.26.1): dependencies: '@babel/core': 7.24.5 '@babel/plugin-transform-react-constant-elements': 7.22.3(@babel/core@7.24.5) @@ -18933,7 +18933,7 @@ snapshots: '@loadable/component': 5.15.2(react@18.3.1) '@loadable/server': 5.15.2(@loadable/component@5.15.2(react@18.3.1))(react@18.3.1) '@loadable/webpack-plugin': 5.15.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)) - '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.0)(type-fest@3.13.1)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)) + '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.0)(type-fest@3.13.1)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)) '@swc/core': 1.7.14 '@types/express': 4.17.21 '@types/jest': 29.1.2 @@ -19016,7 +19016,7 @@ snapshots: webpack-node-externals: 3.0.0 wrap-ansi: 7.0.0 optionalDependencies: - '@storybook/react-webpack5': 7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1) + '@storybook/react-webpack5': 7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1) transitivePeerDependencies: - '@rspack/core' - '@swc/helpers'