diff --git a/benchmark/package.json b/benchmark/package.json index 44fc90eb3b5901..b3232997e9ca25 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -33,7 +33,7 @@ "react-redux": "^8.1.2", "redux": "^4.2.1", "serve-handler": "^6.1.5", - "styled-components": "^5.3.11", + "styled-components": "^6.0.0", "styled-system": "^5.1.5", "theme-ui": "^0.16.1", "webpack": "^5.88.2" diff --git a/docs/data/material/guides/styled-components/styled-components.md b/docs/data/material/guides/styled-components/styled-components.md index d08a54e727b7df..d2f7502878cab7 100644 --- a/docs/data/material/guides/styled-components/styled-components.md +++ b/docs/data/material/guides/styled-components/styled-components.md @@ -100,6 +100,12 @@ For TypeScript, you must also update the `tsconfig.json` as shown here: +}); ``` +:::info +**Versions compatibility** + +To ensure compatibility, it's essential to align the major version of `@mui/styled-engine-sc` with that of the `styled-components` package you're using. For instance, if you opt for `styled-components` version 5, it's necessary to use `@mui/styled-engine-sc` version 5. Similarly, if your preference is `styled-components` version 6, you'll need to upgrade `@mui/styled-engine-sc` to its version 6, which is currently in an alpha state. +::: + ## Ready-to-use examples MUI provides boilerplate examples of Create React App with Material UI and styled-components in both JavaScript and TypeScript: diff --git a/docs/data/system/getting-started/custom-components/StyleFunctionSxDemo.tsx b/docs/data/system/getting-started/custom-components/StyleFunctionSxDemo.tsx index 53d9f3ee4b14b6..07a6c99d8c4b4c 100644 --- a/docs/data/system/getting-started/custom-components/StyleFunctionSxDemo.tsx +++ b/docs/data/system/getting-started/custom-components/StyleFunctionSxDemo.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import styled, { InterpolationFunction, ThemeProvider } from 'styled-components'; +import styled, { ThemeProvider, StyleFunction } from 'styled-components'; import { unstable_styleFunctionSx, SxProps } from '@mui/system'; import { createTheme } from '@mui/material/styles'; @@ -10,7 +10,7 @@ interface DivProps { const theme = createTheme(); const Div = styled('div')( - unstable_styleFunctionSx as InterpolationFunction, + unstable_styleFunctionSx as StyleFunction, ); export default function StyleFunctionSxDemo() { diff --git a/docs/package.json b/docs/package.json index 15375d238b4b67..456c5f67b27480 100644 --- a/docs/package.json +++ b/docs/package.json @@ -107,10 +107,9 @@ "react-window": "^1.8.9", "recharts": "2.8.0", "rimraf": "^5.0.5", - "styled-components": "^5.3.11", + "styled-components": "^6.0.0", "stylis": "4.2.0", "stylis-plugin-rtl": "^2.1.1", - "stylis-plugin-rtl-sc": "npm:stylis-plugin-rtl@^1.1.0", "use-count-up": "^3.0.1", "webpack-bundle-analyzer": "^4.9.1" }, @@ -132,7 +131,6 @@ "@types/react-swipeable-views-utils": "^0.13.5", "@types/react-transition-group": "^4.4.7", "@types/react-window": "^1.8.6", - "@types/styled-components": "5.1.28", "@types/stylis": "^4.2.0", "chai": "^4.3.10", "cross-fetch": "^4.0.0", diff --git a/docs/src/modules/components/DemoSandbox.js b/docs/src/modules/components/DemoSandbox.js index b3ad8bb8187e95..78aff5ce50a01e 100644 --- a/docs/src/modules/components/DemoSandbox.js +++ b/docs/src/modules/components/DemoSandbox.js @@ -4,7 +4,6 @@ import PropTypes from 'prop-types'; import { create } from 'jss'; import { prefixer } from 'stylis'; import rtlPlugin from 'stylis-plugin-rtl'; -import rtlPluginSc from 'stylis-plugin-rtl-sc'; import createCache from '@emotion/cache'; import { CacheProvider } from '@emotion/react'; import { StyleSheetManager } from 'styled-components'; @@ -66,7 +65,7 @@ function FramedDemo(props) { diff --git a/docs/src/modules/utils/StyledEngineProvider.js b/docs/src/modules/utils/StyledEngineProvider.js index bf0c547ba7b468..b562e3980e229a 100644 --- a/docs/src/modules/utils/StyledEngineProvider.js +++ b/docs/src/modules/utils/StyledEngineProvider.js @@ -5,7 +5,6 @@ import { CacheProvider } from '@emotion/react'; import createCache from '@emotion/cache'; import { prefixer } from 'stylis'; import rtlPlugin from 'stylis-plugin-rtl'; -import rtlPluginSc from 'stylis-plugin-rtl-sc'; import { useTheme } from '@mui/material/styles'; // Cache for the rtl version of the styles @@ -23,7 +22,7 @@ export default function StyledEngineProvider(props) { const emotionCache = theme.direction === 'rtl' ? cacheRtl : cacheLtr; return ( - + {children} ); diff --git a/examples/material-ui-cra-styled-components-ts/README.md b/examples/material-ui-cra-styled-components-ts/README.md index 98d6ee90f430d2..0db84ea0644e49 100644 --- a/examples/material-ui-cra-styled-components-ts/README.md +++ b/examples/material-ui-cra-styled-components-ts/README.md @@ -48,6 +48,10 @@ The following link leverages this demo: https://mui.com/guides/interoperability/ This example demonstrates how to set up Material UI with [Create React App](https://github.com/facebookincubator/create-react-app) with [styled-components](https://styled-components.com/) as a style engine for your application using TypeScript. +## Versions compatibility + +Note, the version 5 of `@mui/styled-engine-sc` is compatible with version 5 of `styled-components`, while the version 6 of `@mui/styled-engine-sc` (currently in alpha), is compatible with v6 of `styled-components`. When incorporating these dependencies into your project, consider this compatibility requirement. In this example application, both libraries are using version 6. + ## What's next? diff --git a/examples/material-ui-cra-styled-components-ts/package.json b/examples/material-ui-cra-styled-components-ts/package.json index f459b0451edc9a..966c65fe21652c 100644 --- a/examples/material-ui-cra-styled-components-ts/package.json +++ b/examples/material-ui-cra-styled-components-ts/package.json @@ -5,7 +5,7 @@ "dependencies": { "@mui/lab": "latest", "@mui/material": "latest", - "@mui/styled-engine-sc": "latest", + "@mui/styled-engine-sc": "^6.0.0", "@testing-library/jest-dom": "latest", "@testing-library/react": "latest", "@testing-library/user-event": "latest", @@ -38,7 +38,6 @@ "@types/node": "latest", "@types/react": "latest", "@types/react-dom": "latest", - "@types/styled-components": "latest", "craco-alias": "^3.0.1", "typescript": "latest" } diff --git a/examples/material-ui-cra-styled-components/README.md b/examples/material-ui-cra-styled-components/README.md index 667d4a31bb3651..338bd5226b679f 100644 --- a/examples/material-ui-cra-styled-components/README.md +++ b/examples/material-ui-cra-styled-components/README.md @@ -32,6 +32,10 @@ The following link leverages this demo: https://mui.com/guides/interoperability/ This example demonstrates how to set up Material UI with [Create React App](https://github.com/facebookincubator/create-react-app), using [styled-components](https://styled-components.com/) as a style engine for your application. +## Versions compatibility + +Note, the version 5 of `@mui/styled-engine-sc` is compatible with version 5 of `styled-components`, while the version 6 of `@mui/styled-engine-sc` (currently in alpha), is compatible with v6 of `styled-components`. When incorporating these dependencies into your project, consider this compatibility requirement. In this example application, both libraries are using version 6. + ## What's next? diff --git a/examples/material-ui-cra-styled-components/package.json b/examples/material-ui-cra-styled-components/package.json index 2851457439f64a..1d4a7b240a15af 100644 --- a/examples/material-ui-cra-styled-components/package.json +++ b/examples/material-ui-cra-styled-components/package.json @@ -5,7 +5,7 @@ "dependencies": { "@mui/material": "latest", "@mui/lab": "latest", - "@mui/styled-engine-sc": "latest", + "@mui/styled-engine-sc": "^6.0.0", "@testing-library/jest-dom": "latest", "@testing-library/react": "latest", "@testing-library/user-event": "latest", diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json index 062ff6374059d5..21fc6f0235d49d 100644 --- a/packages/mui-styled-engine-sc/package.json +++ b/packages/mui-styled-engine-sc/package.json @@ -46,19 +46,13 @@ "@mui-internal/test-utils": "^1.0.0", "@types/chai": "^4.3.6", "@types/react": "^18.2.23", - "@types/styled-components": "^5.1.28", "chai": "^4.3.10", + "hoist-non-react-statics": "^3.3.2", "react": "^18.2.0", - "styled-components": "^5.3.11" + "styled-components": "^6.0.0" }, "peerDependencies": { - "@types/styled-components": "^5.1.14", - "styled-components": "^5.3.1" - }, - "peerDependenciesMeta": { - "@types/styled-components": { - "optional": true - } + "styled-components": "^6.0.0" }, "sideEffects": false, "publishConfig": { diff --git a/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.d.ts b/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.d.ts index e99b713830cbec..6e46a0722a27e1 100644 --- a/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.d.ts +++ b/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.d.ts @@ -1,9 +1,11 @@ import * as React from 'react'; -import { CSSObject, InterpolationFunction } from 'styled-components'; +import { CSSObject, StyleFunction } from 'styled-components'; -export interface GlobalStylesProps { +export interface GlobalStylesProps { defaultTheme?: object; - styles: string | CSSObject | InterpolationFunction; + styles: string | CSSObject | StyleFunction; } -export default function Global(props: GlobalStylesProps): React.ReactElement; +export default function Global( + props: GlobalStylesProps, +): React.ReactElement; diff --git a/packages/mui-styled-engine-sc/src/index.d.ts b/packages/mui-styled-engine-sc/src/index.d.ts index d338703d00e04d..c5c3c88977f0b4 100644 --- a/packages/mui-styled-engine-sc/src/index.d.ts +++ b/packages/mui-styled-engine-sc/src/index.d.ts @@ -1,17 +1,68 @@ import * as React from 'react'; import * as CSS from 'csstype'; -import { - AnyStyledComponent, - StyledConfig, - StyledComponent, - StyledComponentPropsWithRef, - StyledComponentInnerComponent, - StyledComponentInnerOtherProps, - StyledComponentInnerAttrs, - ThemedStyledProps, - StyledComponentBase, - Keyframes, -} from 'styled-components'; +import * as hoistNonReactStatics from 'hoist-non-react-statics'; + +type WithOptionalTheme

= OmitU & { + theme?: T | undefined; +}; + +// Helper type operators +// Pick that distributes over union types +export type PickU = T extends any ? { [P in K]: T[P] } : never; +export type OmitU = T extends any ? PickU> : never; + +// Any prop that has a default prop becomes optional, but its type is unchanged +// Undeclared default props are augmented into the resulting allowable attributes +// If declared props have indexed properties, ignore default props entirely as keyof gets widened +// Wrap in an outer-level conditional type to allow distribution over props that are unions +type Defaultize = P extends any + ? string extends keyof P + ? P + : PickU> & + Partial>> & + Partial>> + : never; + +export type IntrinsicElementsKeys = keyof JSX.IntrinsicElements; +type ReactDefaultizedProps = C extends { defaultProps: infer D } ? Defaultize : P; + +type MakeAttrsOptional< + C extends string | React.ComponentType, + O extends object, + A extends keyof P, + P = React.ComponentPropsWithRef< + C extends IntrinsicElementsKeys | React.ComponentType ? C : never + >, +> = + // Distribute unions early to avoid quadratic expansion + P extends any ? OmitU & O, A> & Partial> : never; + +export type StyledComponentProps< + // The Component from whose props are derived + C extends string | React.ComponentType, + // The Theme from the current context + T extends object, + // The other props added by the template + O extends object, + // The props that are made optional by .attrs + A extends keyof any, + // The Component passed with "forwardedAs" prop + FAsC extends string | React.ComponentType = C, +> = + // Distribute O if O is a union type + O extends object + ? WithOptionalTheme & MakeAttrsOptional, T> + : never; + +export interface ThemeProps { + theme: T; +} + +export type ThemedStyledProps = P & ThemeProps; + +export interface Keyframes { + getName(): string; +} export * from 'styled-components'; export { default } from 'styled-components'; @@ -83,6 +134,95 @@ export type FlattenSimpleInterpolation = ReadonlyArray; export type InterpolationFunction

= (props: P) => Interpolation

; +// abuse Pick to strip the call signature from ForwardRefExoticComponent +type ForwardRefExoticBase

= PickU< + React.ForwardRefExoticComponent

, + keyof React.ForwardRefExoticComponent +>; + +type StyledComponentPropsWithAs< + C extends string | React.ComponentType, + T extends object, + O extends object, + A extends keyof any, + AsC extends string | React.ComponentType = C, + FAsC extends string | React.ComponentType = C, +> = StyledComponentProps & { + as?: AsC | undefined; + forwardedAs?: FAsC | undefined; +}; + +export type StyledComponent< + C extends keyof JSX.IntrinsicElements | React.ComponentType, + T extends object, + O extends object = {}, + A extends keyof any = never, +> = // the "string" allows this to be used as an object key + // I really want to avoid this if possible but it's the only way to use nesting with object styles... + string & + StyledComponentBase & + hoistNonReactStatics.NonReactStatics ? C : never>; + +// any doesn't count as assignable to never in the extends clause, and we default A to never +export type AnyStyledComponent = + | StyledComponent + | StyledComponent; + +export type StyledComponentInnerComponent> = + C extends StyledComponent + ? I + : C extends StyledComponent + ? I + : C; + +export type StyledComponentInnerOtherProps = + C extends StyledComponent + ? O + : C extends StyledComponent + ? O + : never; +export type StyledComponentInnerAttrs = C extends StyledComponent< + any, + any, + any, + infer A +> + ? A + : never; + +export interface StyledComponentBase< + C extends string | React.ComponentType, + T extends object, + O extends object = {}, + A extends keyof any = never, +> extends ForwardRefExoticBase> { + // add our own fake call signature to implement the polymorphic 'as' prop + ( + props: StyledComponentProps & { + as?: never | undefined; + forwardedAs?: never | undefined; + }, + ): React.ReactElement>; + < + AsC extends string | React.ComponentType = C, + FAsC extends string | React.ComponentType = AsC, + >( + props: StyledComponentPropsWithAs, + ): React.ReactElement>; + + withComponent( + component: WithC, + ): StyledComponent< + StyledComponentInnerComponent, + T, + O & StyledComponentInnerOtherProps, + A | StyledComponentInnerAttrs + >; + withComponent>( + component: WithC, + ): StyledComponent; +} + // remove the call signature from StyledComponent so Interpolation can still infer InterpolationFunction type StyledComponentInterpolation = | Pick, keyof StyledComponentBase> @@ -96,6 +236,12 @@ type ThemedStyledComponentFactories = { [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunctionBase; }; +export type StyledComponentPropsWithRef< + C extends keyof JSX.IntrinsicElements | React.ComponentType, +> = C extends AnyStyledComponent + ? React.ComponentPropsWithRef> + : React.ComponentPropsWithRef; + // Same as in styled-components, but copied here so that it would use the Interpolation & CSS typings from above export interface ThemedStyledFunctionBase< C extends keyof JSX.IntrinsicElements | React.ComponentType, @@ -128,6 +274,16 @@ export interface ThemedStyledFunction< A extends keyof any = never, > extends ThemedStyledFunctionBase {} +// Config to be used with withConfig +export interface StyledConfig { + // TODO: Add all types from the original StyledComponentWrapperProperties + componentId?: string; + displayName?: string; + shouldForwardProp?: + | ((prop: keyof O, defaultValidatorFn: (prop: keyof O) => boolean) => boolean) + | undefined; +} + // same as ThemedBaseStyledInterface in styled-components, but with added options & common props for MUI components export interface ThemedBaseStyledInterface< MUIStyledCommonProps extends object, diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json index 2140960b60bb1d..2120e7351e4d28 100644 --- a/packages/mui-system/package.json +++ b/packages/mui-system/package.json @@ -60,13 +60,12 @@ "@types/prop-types": "^15.7.7", "@types/react": "^18.2.23", "@types/sinon": "^10.0.19", - "@types/styled-components": "^5.1.28", "chai": "^4.3.10", "fast-glob": "^3.3.1", "lodash": "^4.17.21", "react": "^18.2.0", "sinon": "^15.2.0", - "styled-components": "^5.3.11" + "styled-components": "^6.0.0" }, "peerDependencies": { "@emotion/react": "^11.5.0", diff --git a/packages/mui-system/src/index.spec.tsx b/packages/mui-system/src/index.spec.tsx index 57fb394473a91c..8411979d97df94 100644 --- a/packages/mui-system/src/index.spec.tsx +++ b/packages/mui-system/src/index.spec.tsx @@ -36,7 +36,7 @@ function composeTest() { function interopTest() { const mixin = style({ prop: 'color' }); // built-in style function - const SystemSpacingBox = styled.div` + const SystemSpacingBox = styled('div')<{ m: number }>` ${spacing} ${mixin} `; diff --git a/test/package.json b/test/package.json index 316d242dc3283a..417d897b7306f1 100644 --- a/test/package.json +++ b/test/package.json @@ -33,7 +33,7 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.15.0", "sinon": "^15.2.0", - "styled-components": "6.0.7", + "styled-components": "^6.0.0", "stylis": "4.2.0", "stylis-plugin-rtl": "^2.1.1", "stylis-plugin-rtl-sc": "npm:stylis-plugin-rtl@^1.1.0", diff --git a/yarn.lock b/yarn.lock index cb1babe17bbb57..06d581c7276a0c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -229,7 +229,7 @@ "@jridgewell/trace-mapping" "^0.3.17" jsesc "^2.5.1" -"@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.18.6", "@babel/helper-annotate-as-pure@^7.22.5": +"@babel/helper-annotate-as-pure@^7.18.6", "@babel/helper-annotate-as-pure@^7.22.5": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882" integrity sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg== @@ -316,7 +316,7 @@ dependencies: "@babel/types" "^7.22.15" -"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5": +"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5": version "7.22.15" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0" integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w== @@ -1599,7 +1599,7 @@ dependencies: "@emotion/memoize" "0.7.4" -"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.2.1": +"@emotion/is-prop-valid@^1.2.1": version "1.2.1" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc" integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw== @@ -1678,16 +1678,6 @@ "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1" "@emotion/utils" "^1.2.1" -"@emotion/stylis@^0.8.4": - version "0.8.5" - resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" - integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== - -"@emotion/unitless@^0.7.4": - version "0.7.5" - resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" - integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== - "@emotion/unitless@^0.8.0", "@emotion/unitless@^0.8.1": version "0.8.1" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3" @@ -3749,7 +3739,7 @@ dependencies: "@types/node" "*" -"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.1": +"@types/hoist-non-react-statics@^3.3.1": version "3.3.1" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== @@ -4069,15 +4059,6 @@ resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9" integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA== -"@types/styled-components@5.1.28", "@types/styled-components@^5.1.28": - version "5.1.28" - resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.28.tgz#3b86c4d373924ff6976de788843cab445d9ab15b" - integrity sha512-nu0VKNybkjvUqJAXWtRqKd7j3iRUl8GbYSTvZNuIBJcw/HUp1Y4QUXNLlj7gcnRV/t784JnHAlvRnSnE3nPbJA== - dependencies: - "@types/hoist-non-react-statics" "*" - "@types/react" "*" - csstype "^3.0.2" - "@types/styled-system@^5.1.13": version "5.1.15" resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.15.tgz#075f969cc028a895dba916c07708e2fe828d7077" @@ -5297,22 +5278,6 @@ babel-plugin-react-remove-properties@^0.3.0: resolved "https://registry.yarnpkg.com/babel-plugin-react-remove-properties/-/babel-plugin-react-remove-properties-0.3.0.tgz#7b623fb3c424b6efb4edc9b1ae4cc50e7154b87f" integrity sha512-vbxegtXGyVcUkCvayLzftU95vuvpYFV85pRpeMpohMHeEY46Qe0VNWfkVVcCbaZ12CXHzDFOj0esumATcW83ng== -"babel-plugin-styled-components@>= 1.12.0": - version "2.0.7" - resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086" - integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA== - dependencies: - "@babel/helper-annotate-as-pure" "^7.16.0" - "@babel/helper-module-imports" "^7.16.0" - babel-plugin-syntax-jsx "^6.18.0" - lodash "^4.17.11" - picomatch "^2.3.0" - -babel-plugin-syntax-jsx@^6.18.0: - version "6.18.0" - resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" - integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw== - babel-plugin-tester@^11.0.4: version "11.0.4" resolved "https://registry.yarnpkg.com/babel-plugin-tester/-/babel-plugin-tester-11.0.4.tgz#4a661c5f08a63c344d46247f1256a7ef5175b405" @@ -6797,7 +6762,7 @@ css-select@^5.1.0: domutils "^3.0.1" nth-check "^2.0.1" -css-to-react-native@^3.0.0, css-to-react-native@^3.2.0: +css-to-react-native@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32" integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ== @@ -9609,7 +9574,7 @@ he@1.2.0, he@^1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== -hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -11741,7 +11706,7 @@ lodash.upperfirst@4.3.1: resolved "https://registry.yarnpkg.com/lodash.upperfirst/-/lodash.upperfirst-4.3.1.tgz#1365edf431480481ef0d1c68957a5ed99d49f7ce" integrity sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg== -lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4: +lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -13761,7 +13726,7 @@ picocolors@^1.0.0: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== -picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1: +picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== @@ -16194,10 +16159,10 @@ style-search@^0.1.0: resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902" integrity sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg== -styled-components@6.0.7: - version "6.0.7" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.0.7.tgz#1cf4a5e6b6181b29f941934df54af19b7ef05ab0" - integrity sha512-xIwWuiRMYR43mskVsW9MGTRjSo7ol4bcVjT595fGUp3OLBJOlOgaiKaxsHdC4a2HqWKqKnh0CmcRbk5ogyDjTg== +styled-components@^6.0.0: + version "6.0.8" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.0.8.tgz#90617ad60de39772e03a81c8f3b8e66c12f51c44" + integrity sha512-AwI02MTWZwqjzfXgR5QcbmcSn5xVjY4N2TLjSuYnmuBGF3y7GicHz3ysbpUq2EMJP5M8/Nc22vcmF3V3WNZDFA== dependencies: "@babel/cli" "^7.21.0" "@babel/core" "^7.21.0" @@ -16219,22 +16184,6 @@ styled-components@6.0.7: stylis "^4.3.0" tslib "^2.5.0" -styled-components@^5.3.11: - version "5.3.11" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.11.tgz#9fda7bf1108e39bf3f3e612fcc18170dedcd57a8" - integrity sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw== - dependencies: - "@babel/helper-module-imports" "^7.0.0" - "@babel/traverse" "^7.4.5" - "@emotion/is-prop-valid" "^1.1.0" - "@emotion/stylis" "^0.8.4" - "@emotion/unitless" "^0.7.4" - babel-plugin-styled-components ">= 1.12.0" - css-to-react-native "^3.0.0" - hoist-non-react-statics "^3.0.0" - shallowequal "^1.1.0" - supports-color "^5.5.0" - styled-jsx@5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f" @@ -16383,7 +16332,7 @@ supports-color@^2.0.0: resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" integrity sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g== -supports-color@^5.0.0, supports-color@^5.3.0, supports-color@^5.5.0: +supports-color@^5.0.0, supports-color@^5.3.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==