diff --git a/.browserslistrc b/.browserslistrc index 3630a85dc0733a..6ab4c0c15806ec 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -6,48 +6,131 @@ last 1 safari version node 14 # Default/Fallback -# `npx browserslist --mobile-to-desktop "> 0.5%, last 2 versions, Firefox ESR, not dead, not IE 11"` when the last major is released. -# Manually downgrading to ios_saf 12.4 for iPhone 6 and webpack 4 support. +# `npx browserslist --mobile-to-desktop "> 0.5%, last 2 versions, Firefox ESR, not dead, safari >= 15.4, iOS >= 15.4"` when the last major is released. +# Explicit safari versions are here based on the agreed terms in: https://github.com/mui/material-ui/issues/40958#issuecomment-1953215043 +# +# After you update the version, you might need to run `npx update-browserslist-db@latest` to update caniuse-lite to gather latest browser versions. +# Otherwise, running `pnpm build` might fail due to unknown browser versions. +# # On update, sync references where "#stable-snapshot" is mentioned in the codebase. [stable] -and_chr 91 -and_ff 89 -and_qq 10.4 -and_uc 12.12 -android 91 -baidu 7.12 -chrome 90 -edge 91 -firefox 78 -# 12.4 but 12.2-12.5 are treated equally in caniuse-lite. -# Though caniuse-lite does not supporting finding an exact version in a range which is why `12.4` would result in "Unknown version 12.4 of ios_saf" -ios_saf 12.2 +and_chr 122 +and_chr 121 +and_ff 123 +and_ff 122 +and_qq 14.9 +and_uc 15.5 +android 122 +android 121 +chrome 122 +chrome 121 +chrome 120 +chrome 119 +chrome 109 +edge 122 +edge 121 +firefox 123 +firefox 122 +firefox 115 +ios_saf 17.4 +ios_saf 17.3 +ios_saf 17.2 +ios_saf 17.1 +ios_saf 17.0 +ios_saf 16.6-16.7 +ios_saf 16.5 +ios_saf 16.4 +ios_saf 16.3 +ios_saf 16.2 +ios_saf 16.1 +ios_saf 16.0 +ios_saf 15.6-15.8 +ios_saf 15.5 +ios_saf 15.4 +kaios 3.0-3.1 kaios 2.5 op_mini all -op_mob 73 -opera 76 -safari 14 -samsung 13.0 +op_mob 80 +opera 108 +opera 107 +opera 106 +safari 17.4 +safari 17.3 +safari 17.2 +safari 17.1 +safari 17.0 +safari 16.6 +safari 16.5 +safari 16.4 +safari 16.3 +safari 16.2 +safari 16.1 +safari 16.0 +safari 15.6 +safari 15.5 +safari 15.4 +samsung 23 +samsung 22 -# Same as `stable` but with IE 11 [legacy] ie 11 -and_chr 91 -and_ff 89 -and_qq 10.4 -and_uc 12.12 -android 91 -baidu 7.12 -chrome 90 -edge 91 -firefox 78 -ios_saf 12.2 +and_chr 122 +and_chr 121 +and_ff 123 +and_ff 122 +and_qq 14.9 +and_uc 15.5 +android 122 +android 121 +chrome 122 +chrome 121 +chrome 120 +chrome 119 +chrome 109 +edge 122 +edge 121 +firefox 123 +firefox 122 +firefox 115 +ios_saf 17.4 +ios_saf 17.3 +ios_saf 17.2 +ios_saf 17.1 +ios_saf 17.0 +ios_saf 16.6-16.7 +ios_saf 16.5 +ios_saf 16.4 +ios_saf 16.3 +ios_saf 16.2 +ios_saf 16.1 +ios_saf 16.0 +ios_saf 15.6-15.8 +ios_saf 15.5 +ios_saf 15.4 +kaios 3.0-3.1 kaios 2.5 op_mini all -op_mob 73 -opera 76 -safari 14 -samsung 13.0 +op_mob 80 +opera 108 +opera 107 +opera 106 +safari 17.4 +safari 17.3 +safari 17.2 +safari 17.1 +safari 17.0 +safari 16.6 +safari 16.5 +safari 16.4 +safari 16.3 +safari 16.2 +safari 16.1 +safari 16.0 +safari 15.6 +safari 15.5 +safari 15.4 +samsung 23 +samsung 22 # snapshot of `npx browserslist "maintained node versions"` # On update check all #stable-snapshot markers diff --git a/.circleci/config.yml b/.circleci/config.yml index e662bbf871ae94..305d7ac6155054 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -132,7 +132,8 @@ jobs: - run: name: Check for duplicated packages command: | - if [[ $(git diff --name-status master | grep pnpm.lock) == "" ]]; + # #default-branch-switch + if [[ $(git diff --name-status next | grep -E 'pnpm-workspace\.yaml|pnpm-lock.yaml|package\.json') == "" ]]; then echo "No changes to dependencies detected. Skipping..." else diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index ee08e27e9519d9..fc0c4f59babfe7 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -19,7 +19,7 @@ jobs: uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@3ab4101902695724f9365a384f86c1074d94e18c # v3.24.7 + uses: github/codeql-action/init@1b1aada464948af03b950897e5eb522f92603cc2 # v3.24.9 with: languages: typescript config-file: ./.github/codeql/codeql-config.yml @@ -30,4 +30,4 @@ jobs: # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs # queries: security-extended,security-and-quality - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@3ab4101902695724f9365a384f86c1074d94e18c # v3.24.7 + uses: github/codeql-action/analyze@1b1aada464948af03b950897e5eb522f92603cc2 # v3.24.9 diff --git a/.github/workflows/no-response.yml b/.github/workflows/no-response.yml index f268f0c23959de..b4a63e97879364 100644 --- a/.github/workflows/no-response.yml +++ b/.github/workflows/no-response.yml @@ -8,8 +8,10 @@ on: issue_comment: types: [created] schedule: - # Schedule for five minutes after the hour, every hour - - cron: '5 * * * *' + # These runs in our repos are spread evenly throughout the day to avoid hitting rate limits. + # If you change this schedule, consider changing the remaining repositories as well. + # Runs at 12 am, 12 pm + - cron: '0 0,12 * * *' permissions: {} diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml index 444373cd60ed00..eb89daf450ca4c 100644 --- a/.github/workflows/scorecards.yml +++ b/.github/workflows/scorecards.yml @@ -43,6 +43,6 @@ jobs: # Upload the results to GitHub's code scanning dashboard. - name: Upload to code-scanning - uses: github/codeql-action/upload-sarif@3ab4101902695724f9365a384f86c1074d94e18c # v3.24.7 + uses: github/codeql-action/upload-sarif@1b1aada464948af03b950897e5eb522f92603cc2 # v3.24.9 with: sarif_file: results.sarif diff --git a/CHANGELOG.md b/CHANGELOG.md index 3228a93542ad5e..b05444e119e57b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,84 @@ # [Versions](https://mui.com/versions/) +## v6.0.0-alpha.0 + + + +_Mar 26, 2024_ + +A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨: + +- 🔥 Converted 10+ Material UI components to support static CSS extraction +- ⬅️ Added RTL support in Pigment CSS (#41570) @brijeshb42 + +### `@mui/material@6.0.0-alpha.0` + +- [BottomNavigation] Convert to support CSS extraction (#41612) @aacevski +- [AvatarGroup] Convert to support CSS extraction (#41485) @zanivan +- [Backdrop] Convert to support CSS extraction (#41581) @aacevski +- [Breadcrumbs] Convert to support CSS extraction (#41496) @aacevski +- [Card] Convert to support CSS extraction (#41580) @aacevski +- [Divider] Convert to support CSS extraction (#41366) @sai6855 +- [FormControl] Convert to support CSS extraction (#41613) @aacevski +- [FormGroup] Convert to support CSS extraction (#41614) @aacevski +- [MobileStepper] Convert to support CSS extraction (#41533) @aacevski +- [Modal] Support CSS extraction (#41483) @sai6855 +- [Popover] Convert to support CSS extraction (#41564) @aacevski +- [Stepper] Convert to support CSS extraction (#41546) @aacevski +- [Autocomplete] Display options provided to the `options` prop even if loading is true (#41634) @nekoya +- [Backdrop] Deprecate TransitionComponent (#40677) @harry-whorlow +- [ButtonGroup] Deprecate composed classes (#41259) @sai6855 +- [StepLabel] Deprecate `componentProps` prop (#41321) @sai6855 +- [Chip] Convert to support CSS extraction (#41592) @DiegoAndai + +### `@pigment-css/react@0.0.4` + +- Fix evaluation of undefined variables (#41569) @siriwatknp +- Fix react-modal demos location (#41560) @sai6855 +- [react] RTL Support (#41570) @brijeshb42 + +### `@mui/system@6.0.0-alpha.0` + +- [core] Standardize index pattern (#41574) @DiegoAndai +- Fix typo to avoid infinite recursion in function call (#41616) @michael-land +- Move stylesheet generator to `extendTheme` (#41446) @siriwatknp + +### Docs + +- [joy-ui] Refresh the marketing example on the Color Inversion page (#41497) @cipherlogs +- [material-ui] Add v5 to v6 migration guide (#41561) @DiegoAndai +- [system] Add v5 to v6 migration guide (#41575) @DiegoAndai +- [material-ui][Slider] Remove `valueLabelFormat` from restricted values demo so that the tooltip thumb label displays the same as the value text (#41567) @StylesTrip +- [pigment-css] Update the RTL section on the readme (#41576) @danilo-leal + +### Core + +- [blog] Update the callout (#41645) @cherniavskii +- [blog] Link to Romain's blog post in MUI X v7 announcement post (#41640) @cherniavskii +- [blog] Blog post with MUI X v7.0.0 annoucement (#41563) @joserodolfofreitas +- [blog] Add post about remote (#41565) @danilo-leal +- [core] Restore the pnpm-lock.yaml (#41643) @mnajdova +- [core] Fix failing CI steps (#41636) @mnajdova +- [core] Update browser support versions (#41568) @siriwatknp +- [core] Add instructions to deploying docs guide (#41582) @DiegoAndai +- [core] Add comment explaining the frequency of no-response action runs (#41555) @michaldudak +- [core] Init the next branch (#41552) @mnajdova +- [core] Lower the frequency of no-response action runs (#41553) @michaldudak +- [core] Update peerDependencies ranges to include v6 packages (#41662) @michaldudak +- [core] Run pnpm dedupe (#41658) @michaldudak +- [core] Fix dedupe check (#41657) @Janpot +- [pigment-css][demo] Add index page for material-ui (#41577) @brijeshb42 +- [pigment-css][demo] Remove app specific pnpm workspace (#41393) @brijeshb42 +- [docs] Add notification for MUI X v7 blog post (#41587) @cherniavskii +- [docs] MUI X v7 blog post annoucement followup (#41601) @joserodolfofreitas +- [docs] Update the installation guides to use the next tag (#41558) @mnajdova +- [docs][material-ui] Fix typo in CSS theme variables customization (#41632) @ZeeshanTamboli +- [material-ui][docs] Remove deleted page from the sidenav (#41594) @danilo-leal +- [website] Update pricing table (#41595) @cherniavskii +- [website] Add stray design adjustments throughout the site (#41547) @danilo-leal + +All contributors of this release in alphabetical order: @aacevski, @brijeshb42, @cherniavskii, @cipherlogs, @danilo-leal, @DiegoAndai, @harry-whorlow, @Janpot, @joserodolfofreitas, @michael-land, @michaldudak, @mnajdova, @nekoya, @sai6855, @siriwatknp, @StylesTrip, @zanivan, @ZeeshanTamboli + ## v5.15.14 @@ -9,7 +88,7 @@ _Mar 18, 2024_ A big thanks to the 15 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements. -### `@mui/material@5.15.13` +### `@mui/material@5.15.14` - [Accordion] Convert to support CSS extraction (#41221) @mnajdova - ​[Autocomplete] Convert to support CSS extraction (#40330) @mnajdova @@ -12978,7 +13057,7 @@ Here are some highlights ✨: 1. `stable` (default, formerly `esm`) which targets a snapshot (on release) of `> 0.5%, last 2 versions, Firefox ESR, not dead, not IE 11"` 2. `node` (formerly default) which targets a snapshot (on release) of `maintained node versions` - 3. `legacy` (new) which is `stable` + IE11 + 3. `legacy` (new) which is `stable` + IE 11 4. `modern` (formerly `es`) which targets the last 1 version of evergreen browsers and active node (currently that is 14 The change yields a 6% reduction in bundle size 📦 (Babel only). diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6c968f9809673b..642641f9f3f8f3 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -25,7 +25,7 @@ Here are a few guidelines that will help you along the way. ## Code of conduct -We has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as our code of conduct, and we expect project participants to adhere to it. +We have adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as our code of conduct, and we expect project participants to adhere to it. Please read [the full text](https://github.com/mui/.github/blob/master/CODE_OF_CONDUCT.md) to understand what actions will and will not be tolerated. ## A large spectrum of contributions @@ -72,11 +72,11 @@ git remote add upstream https://github.com/mui/material-ui.git -3. Synchronize your local `master` branch with the upstream one: +3. Synchronize your local `next` branch with the upstream one: ```bash -git checkout master -git pull upstream master +git checkout next +git pull upstream next ``` 4. Install the dependencies with pnpm (yarn or npm aren't supported): @@ -146,7 +146,7 @@ Make sure the following is true: -- The branch is targeted at `master` for ongoing development. All tests are passing. Code that lands in `master` must be compatible with the latest stable release. It may contain additional features but no breaking changes. We should be able to release a new minor version from the tip of `master` at any time. +- The branch is targeted at `next` for ongoing development. All tests are passing. Code that lands in `next` must be compatible with the latest alpha/beta release. It may contain additional features but no breaking changes. We should be able to release a new minor version from the tip of `next` at any time. - If a feature is being added: - If the result was already achievable with the core library, you've explained why this feature needs to be added to the core. - If this is a common use case, you've added an example to the documentation. diff --git a/apps/README.md b/apps/README.md new file mode 100644 index 00000000000000..0fb64c7b2a5424 --- /dev/null +++ b/apps/README.md @@ -0,0 +1,9 @@ +# Pigment CSS apps + +To test Pigment CSS demo apps, you can directly run - + +`pnpm nx run @app/vite-app:preview` to start vite demo or `pnpm nx run @app/next-app:preview` to start nextjs demo after building automatically. + +To start either of the apps in dev mode, just run - + +`pnpm nx run @app/vite-app:dev` or `pnpm nx run @app/next-app:dev` diff --git a/apps/pigment-css-next-app/next.config.js b/apps/pigment-css-next-app/next.config.js index 076069c4db48e5..70facd067ef4ec 100644 --- a/apps/pigment-css-next-app/next.config.js +++ b/apps/pigment-css-next-app/next.config.js @@ -81,32 +81,20 @@ const theme = extendTheme({ }, }, }, + getSelector: function getSelector(colorScheme, css) { + if (colorScheme) { + return { + [`@media (prefers-color-scheme: ${colorScheme})`]: { + ':root': css, + }, + }; + } + return ':root'; + }, }); - -// TODO: Fix this from the Material UI side in a separate PR -theme.palette = theme.colorSchemes.light.palette; theme.getColorSchemeSelector = (colorScheme) => { return `@media (prefers-color-scheme: ${colorScheme})`; }; -const { css: rootCss } = theme.generateCssVars(); -const { css: lightCss } = theme.generateCssVars('light'); -const { css: darkCss } = theme.generateCssVars('dark'); -theme.generateCssVars = (colorScheme) => { - if (colorScheme === 'dark') { - return { - css: darkCss, - selector: { - '@media (prefers-color-scheme: dark)': { - ':root': darkCss, - }, - }, - }; - } - if (colorScheme === 'light') { - return { css: lightCss, selector: ':root' }; - } - return { css: rootCss, selector: ':root' }; -}; /** * @type {PigmentOptions} @@ -116,7 +104,6 @@ const pigmentOptions = { transformLibraries: ['local-ui-lib'], sourceMap: true, displayName: true, - transformSx: false, }; /** @type {import('next').NextConfig} */ @@ -127,6 +114,10 @@ const nextConfig = { typescript: { ignoreBuildErrors: true, }, + devIndicators: { + buildActivity: true, + buildActivityPosition: 'bottom-right', + }, }; module.exports = withPigment(nextConfig, pigmentOptions); diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json index eeff6a21ce1156..aedc0b2125a9a7 100644 --- a/apps/pigment-css-next-app/package.json +++ b/apps/pigment-css-next-app/package.json @@ -9,13 +9,14 @@ "clean": "rimraf .next" }, "dependencies": { - "@pigment-css/react": "file:../../packages/pigment-css-react", - "@mui/utils": "file:../../packages/mui-utils/build", - "@mui/base": "file:../../packages/mui-base/build", - "@mui/material": "file:../../packages/mui-material/build", - "@mui/system": "file:../../packages/mui-system/build", - "@mui/material-nextjs": "file:../../packages/mui-material-nextjs/build", - "@mui/icons-material": "file:../../packages/mui-icons-material/build", + "@pigment-css/react": "workspace:^", + "@mui/utils": "workspace:^", + "@mui/base": "workspace:^", + "@mui/lab": "workspace:^", + "@mui/material": "workspace:^", + "@mui/system": "workspace:^", + "@mui/material-nextjs": "workspace:^", + "@mui/icons-material": "workspace:^", "@emotion/cache": "latest", "local-ui-lib": "workspace:^", "react": "^18.2.0", @@ -23,12 +24,20 @@ "next": "latest" }, "devDependencies": { - "@pigment-css/unplugin": "file:../../packages/pigment-css-unplugin", - "@pigment-css/nextjs-plugin": "file:../../packages/pigment-css-nextjs-plugin", + "@pigment-css/nextjs-plugin": "workspace:^", "@types/node": "^20.5.7", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", - "eslint": "^8.56.0", - "typescript": "^5.3.3" + "eslint": "^8.57.0", + "typescript": "^5.4.3" + }, + "nx": { + "targets": { + "preview": { + "dependsOn": [ + "^build" + ] + } + } } } diff --git a/apps/pigment-css-next-app/src/app/globals.css b/apps/pigment-css-next-app/src/app/globals.css index 7f5569579ba220..3c8b02ea506b59 100644 --- a/apps/pigment-css-next-app/src/app/globals.css +++ b/apps/pigment-css-next-app/src/app/globals.css @@ -17,10 +17,4 @@ color: inherit; text-decoration: none; } - - @media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } - } } diff --git a/apps/pigment-css-next-app/src/app/layout.tsx b/apps/pigment-css-next-app/src/app/layout.tsx index 3907673a0fdf0a..4ae45924829e53 100644 --- a/apps/pigment-css-next-app/src/app/layout.tsx +++ b/apps/pigment-css-next-app/src/app/layout.tsx @@ -1,4 +1,5 @@ import type { Metadata } from 'next'; +import { css } from '@pigment-css/react'; import { Inter } from 'next/font/google'; import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'; import { ThemeProvider } from '@mui/material/styles'; @@ -18,8 +19,13 @@ export const metadata: Metadata = { export default function RootLayout(props: { children: React.ReactNode }) { return ( - - + t.vars.palette.background.default}; + color: ${({ theme: t }) => t.vars.palette.text.primary}; + `}`} + > + {props.children} diff --git a/apps/pigment-css-next-app/src/app/material-ui/layout.tsx b/apps/pigment-css-next-app/src/app/material-ui/layout.tsx index 06afb2f9251928..0ee7bd13e9ec99 100644 --- a/apps/pigment-css-next-app/src/app/material-ui/layout.tsx +++ b/apps/pigment-css-next-app/src/app/material-ui/layout.tsx @@ -34,6 +34,12 @@ const Main = styled('div')(({ theme }) => ({ border: '1px solid rgb(229, 234, 242)', borderRadius: '12px', }, + ...theme.applyStyles('dark', { + '& .demo-container': { + backgroundColor: 'rgba(31, 38, 46, 0.1)', + border: '1px solid rgba(59, 74, 89, 0.2)', + }, + }), })); export default function MaterialUILayout({ children }: { children: React.ReactNode }) { diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-app-bar/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-app-bar/page.tsx new file mode 100644 index 00000000000000..cf15589d8cab32 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-app-bar/page.tsx @@ -0,0 +1,100 @@ +'use client'; +import * as React from 'react'; +import BackToTop from '../../../../../../docs/data/material/components/app-bar/BackToTop'; +import BottomAppBar from '../../../../../../docs/data/material/components/app-bar/BottomAppBar'; +import ButtonAppBar from '../../../../../../docs/data/material/components/app-bar/ButtonAppBar'; +import DenseAppBar from '../../../../../../docs/data/material/components/app-bar/DenseAppBar'; +import DrawerAppBar from '../../../../../../docs/data/material/components/app-bar/DrawerAppBar'; +import ElevateAppBar from '../../../../../../docs/data/material/components/app-bar/ElevateAppBar'; +import EnableColorOnDarkAppBar from '../../../../../../docs/data/material/components/app-bar/EnableColorOnDarkAppBar'; +import HideAppBar from '../../../../../../docs/data/material/components/app-bar/HideAppBar'; +import MenuAppBar from '../../../../../../docs/data/material/components/app-bar/MenuAppBar'; +import PrimarySearchAppBar from '../../../../../../docs/data/material/components/app-bar/PrimarySearchAppBar'; +import ProminentAppBar from '../../../../../../docs/data/material/components/app-bar/ProminentAppBar'; +import ResponsiveAppBar from '../../../../../../docs/data/material/components/app-bar/ResponsiveAppBar'; +import SearchAppBar from '../../../../../../docs/data/material/components/app-bar/SearchAppBar'; + +export default function AppBar() { + return ( + +
+

Back To Top

+
+ +
+
+
+

Bottom App Bar

+
+ +
+
+
+

Button App Bar

+
+ +
+
+
+

Dense App Bar

+
+ +
+
+
+

Drawer App Bar

+
+ +
+
+
+

Elevate App Bar

+
+ +
+
+
+

Enable Color On Dark App Bar

+
+ +
+
+
+

Hide App Bar

+
+ +
+
+
+

Menu App Bar

+
+ +
+
+
+

Primary Search App Bar

+
+ +
+
+
+

Prominent App Bar

+
+ +
+
+
+

Responsive App Bar

+
+ +
+
+
+

Search App Bar

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-backdrop/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-backdrop/page.tsx new file mode 100644 index 00000000000000..54b664b5a36ba5 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-backdrop/page.tsx @@ -0,0 +1,13 @@ +'use client'; +import SimpleBackdrop from '../../../../../../docs/data/material/components/backdrop/SimpleBackdrop'; + +export default function Backdrop() { + return ( +
+

Simple Backdrop

+
+ +
+
+ ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-bottom-navigation/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-bottom-navigation/page.tsx new file mode 100644 index 00000000000000..835bfff7a9c407 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-bottom-navigation/page.tsx @@ -0,0 +1,30 @@ +'use client'; +import * as React from 'react'; +import FixedBottomNavigation from '../../../../../../docs/data/material/components/bottom-navigation/FixedBottomNavigation'; +import LabelBottomNavigation from '../../../../../../docs/data/material/components/bottom-navigation/LabelBottomNavigation'; +import SimpleBottomNavigation from '../../../../../../docs/data/material/components/bottom-navigation/SimpleBottomNavigation'; + +export default function BottomNavigation() { + return ( + +
+

Fixed Bottom Navigation

+
+ +
+
+
+

Label Bottom Navigation

+
+ +
+
+
+

Simple Bottom Navigation

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-breadcrumbs/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-breadcrumbs/page.tsx new file mode 100644 index 00000000000000..2bc3ae9757a7a7 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-breadcrumbs/page.tsx @@ -0,0 +1,58 @@ +'use client'; +import * as React from 'react'; +import ActiveLastBreadcrumb from '../../../../../../docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb'; +import BasicBreadcrumbs from '../../../../../../docs/data/material/components/breadcrumbs/BasicBreadcrumbs'; +import CollapsedBreadcrumbs from '../../../../../../docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs'; +import CustomSeparator from '../../../../../../docs/data/material/components/breadcrumbs/CustomSeparator'; +import CustomizedBreadcrumbs from '../../../../../../docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs'; +import IconBreadcrumbs from '../../../../../../docs/data/material/components/breadcrumbs/IconBreadcrumbs'; +import RouterBreadcrumbs from '../../../../../../docs/data/material/components/breadcrumbs/RouterBreadcrumbs'; + +export default function Breadcrumbs() { + return ( + +
+

Active Last Breadcrumb

+
+ +
+
+
+

Basic Breadcrumbs

+
+ +
+
+
+

Collapsed Breadcrumbs

+
+ +
+
+
+

Custom Separator

+
+ +
+
+
+

Customized Breadcrumbs

+
+ +
+
+
+

Icon Breadcrumbs

+
+ +
+
+
+

Router Breadcrumbs

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-button-group/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-button-group/page.tsx new file mode 100644 index 00000000000000..73eeddd9668ec6 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-button-group/page.tsx @@ -0,0 +1,58 @@ +'use client'; +import * as React from 'react'; +import BasicButtonGroup from '../../../../../../docs/data/material/components/button-group/BasicButtonGroup'; +import DisableElevation from '../../../../../../docs/data/material/components/button-group/DisableElevation'; +import GroupOrientation from '../../../../../../docs/data/material/components/button-group/GroupOrientation'; +import GroupSizesColors from '../../../../../../docs/data/material/components/button-group/GroupSizesColors'; +import LoadingButtonGroup from '../../../../../../docs/data/material/components/button-group/LoadingButtonGroup'; +import SplitButton from '../../../../../../docs/data/material/components/button-group/SplitButton'; +import VariantButtonGroup from '../../../../../../docs/data/material/components/button-group/VariantButtonGroup'; + +export default function ButtonGroup() { + return ( + +
+

Basic Button Group

+
+ +
+
+
+

Disable Elevation

+
+ +
+
+
+

Group Orientation

+
+ +
+
+
+

Group Sizes Colors

+
+ +
+
+
+

Loading Button Group

+
+ +
+
+
+

Split Button

+
+ +
+
+
+

Variant Button Group

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-button/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-button/page.tsx new file mode 100644 index 00000000000000..a684ae0126c0ee --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-button/page.tsx @@ -0,0 +1,121 @@ +'use client'; +import * as React from 'react'; +import BasicButtons from '../../../../../../docs/data/material/components/buttons/BasicButtons'; +import ButtonBaseDemo from '../../../../../../docs/data/material/components/buttons/ButtonBaseDemo'; +import ButtonSizes from '../../../../../../docs/data/material/components/buttons/ButtonSizes'; +import ColorButtons from '../../../../../../docs/data/material/components/buttons/ColorButtons'; +import ContainedButtons from '../../../../../../docs/data/material/components/buttons/ContainedButtons'; +import CustomizedButtons from '../../../../../../docs/data/material/components/buttons/CustomizedButtons'; +import DisableElevation from '../../../../../../docs/data/material/components/buttons/DisableElevation'; +import IconButtonColors from '../../../../../../docs/data/material/components/buttons/IconButtonColors'; +import IconButtonSizes from '../../../../../../docs/data/material/components/buttons/IconButtonSizes'; +import IconButtons from '../../../../../../docs/data/material/components/buttons/IconButtons'; +import IconLabelButtons from '../../../../../../docs/data/material/components/buttons/IconLabelButtons'; +import InputFileUpload from '../../../../../../docs/data/material/components/buttons/InputFileUpload'; +import LoadingButtons from '../../../../../../docs/data/material/components/buttons/LoadingButtons'; +import LoadingButtonsTransition from '../../../../../../docs/data/material/components/buttons/LoadingButtonsTransition'; +import OutlinedButtons from '../../../../../../docs/data/material/components/buttons/OutlinedButtons'; +import TextButtons from '../../../../../../docs/data/material/components/buttons/TextButtons'; + +export default function Buttons() { + return ( + +
+

Basic Buttons

+
+ +
+
+
+

Button Base Demo

+
+ +
+
+
+

Button Sizes

+
+ +
+
+
+

Color Buttons

+
+ +
+
+
+

Contained Buttons

+
+ +
+
+
+

Customized Buttons

+
+ +
+
+
+

Disable Elevation

+
+ +
+
+
+

Icon Button Colors

+
+ +
+
+
+

Icon Button Sizes

+
+ +
+
+
+

Icon Buttons

+
+ +
+
+
+

Icon Label Buttons

+
+ +
+
+
+

Input File Upload

+
+ +
+
+
+

Loading Buttons

+
+ +
+
+
+

Loading Buttons Transition

+
+ +
+
+
+

Outlined Buttons

+
+ +
+
+
+

Text Buttons

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-card/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-card/page.tsx new file mode 100644 index 00000000000000..4dbe15c5339126 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-card/page.tsx @@ -0,0 +1,65 @@ +'use client'; +import * as React from 'react'; +import ActionAreaCard from '../../../../../../docs/data/material/components/cards/ActionAreaCard'; +import BasicCard from '../../../../../../docs/data/material/components/cards/BasicCard'; +import ImgMediaCard from '../../../../../../docs/data/material/components/cards/ImgMediaCard'; +import MediaCard from '../../../../../../docs/data/material/components/cards/MediaCard'; +import MediaControlCard from '../../../../../../docs/data/material/components/cards/MediaControlCard'; +import MultiActionAreaCard from '../../../../../../docs/data/material/components/cards/MultiActionAreaCard'; +import OutlinedCard from '../../../../../../docs/data/material/components/cards/OutlinedCard'; +import RecipeReviewCard from '../../../../../../docs/data/material/components/cards/RecipeReviewCard'; + +export default function Cards() { + return ( + +
+

Action Area Card

+
+ +
+
+
+

Basic Card

+
+ +
+
+
+

Img Media Card

+
+ +
+
+
+

Media Card

+
+ +
+
+
+

Media Control Card

+
+ +
+
+
+

Multi Action Area Card

+
+ +
+
+
+

Outlined Card

+
+ +
+
+
+

Recipe Review Card

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-chip/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-chip/page.tsx new file mode 100644 index 00000000000000..4b2786f32e6d0b --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-chip/page.tsx @@ -0,0 +1,93 @@ +'use client'; +import * as React from 'react'; +import AvatarChips from '../../../../../../docs/data/material/components/chips/AvatarChips'; +import BasicChips from '../../../../../../docs/data/material/components/chips/BasicChips'; +import ChipsArray from '../../../../../../docs/data/material/components/chips/ChipsArray'; +import ClickableAndDeletableChips from '../../../../../../docs/data/material/components/chips/ClickableAndDeletableChips'; +import ClickableChips from '../../../../../../docs/data/material/components/chips/ClickableChips'; +import ClickableLinkChips from '../../../../../../docs/data/material/components/chips/ClickableLinkChips'; +import ColorChips from '../../../../../../docs/data/material/components/chips/ColorChips'; +import CustomDeleteIconChips from '../../../../../../docs/data/material/components/chips/CustomDeleteIconChips'; +import DeletableChips from '../../../../../../docs/data/material/components/chips/DeletableChips'; +import IconChips from '../../../../../../docs/data/material/components/chips/IconChips'; +import MultilineChips from '../../../../../../docs/data/material/components/chips/MultilineChips'; +import SizesChips from '../../../../../../docs/data/material/components/chips/SizesChips'; + +export default function Chips() { + return ( + +
+

Avatar Chips

+
+ +
+
+
+

Basic Chips

+
+ +
+
+
+

Chips Array

+
+ +
+
+
+

Clickable And Deletable Chips

+
+ +
+
+
+

Clickable Chips

+
+ +
+
+
+

Clickable Link Chips

+
+ +
+
+
+

Color Chips

+
+ +
+
+
+

Custom Delete Icon Chips

+
+ +
+
+
+

Deletable Chips

+
+ +
+
+
+

Icon Chips

+
+ +
+
+
+

Multiline Chips

+
+ +
+
+
+

Sizes Chips

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-divider/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-divider/page.tsx new file mode 100644 index 00000000000000..dc5bb0fa9c9e7d --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-divider/page.tsx @@ -0,0 +1,58 @@ +'use client'; +import * as React from 'react'; +import DividerText from '../../../../../../docs/data/material/components/dividers/DividerText'; +import DividerVariants from '../../../../../../docs/data/material/components/dividers/DividerVariants'; +import FlexDivider from '../../../../../../docs/data/material/components/dividers/FlexDivider'; +import IntroDivider from '../../../../../../docs/data/material/components/dividers/IntroDivider'; +import ListDividers from '../../../../../../docs/data/material/components/dividers/ListDividers'; +import VerticalDividerMiddle from '../../../../../../docs/data/material/components/dividers/VerticalDividerMiddle'; +import VerticalDividers from '../../../../../../docs/data/material/components/dividers/VerticalDividers'; + +export default function Dividers() { + return ( + +
+

Divider Text

+
+ +
+
+
+

Divider Variants

+
+ +
+
+
+

Flex Divider

+
+ +
+
+
+

Intro Divider

+
+ +
+
+
+

List Dividers

+
+ +
+
+
+

Vertical Divider Middle

+
+ +
+
+
+

Vertical Dividers

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-modal/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-modal/page.tsx new file mode 100644 index 00000000000000..763472163e7732 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-modal/page.tsx @@ -0,0 +1,51 @@ +'use client'; +import * as React from 'react'; +import BasicModal from '../../../../../../docs/data/material/components/modal/BasicModal'; +import KeepMountedModal from '../../../../../../docs/data/material/components/modal/KeepMountedModal'; +import NestedModal from '../../../../../../docs/data/material/components/modal/NestedModal'; +import ServerModal from '../../../../../../docs/data/material/components/modal/ServerModal'; +import SpringModal from '../../../../../../docs/data/material/components/modal/SpringModal'; +import TransitionsModal from '../../../../../../docs/data/material/components/modal/TransitionsModal'; + +export default function Modal() { + return ( + +
+

Basic Modal

+
+ +
+
+
+

Keep Mounted Modal

+
+ +
+
+
+

Nested Modal

+
+ +
+
+
+

Server Modal

+
+ +
+
+
+

Spring Modal

+
+ +
+
+
+

Transitions Modal

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-popover/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-popover/page.tsx new file mode 100644 index 00000000000000..95c5049affc815 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-popover/page.tsx @@ -0,0 +1,37 @@ +'use client'; +import * as React from 'react'; +import BasicPopover from '../../../../../../docs/data/material/components/popover/BasicPopover'; +import MouseOverPopover from '../../../../../../docs/data/material/components/popover/MouseOverPopover'; +import PopoverPopupState from '../../../../../../docs/data/material/components/popover/PopoverPopupState'; +import VirtualElementPopover from '../../../../../../docs/data/material/components/popover/VirtualElementPopover'; + +export default function Popover() { + return ( + +
+

Basic Popover

+
+ +
+
+
+

Mouse Over Popover

+
+ +
+
+
+

Popover Popup State

+
+ +
+
+
+

Virtual Element Popover

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-stepper/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-stepper/page.tsx new file mode 100644 index 00000000000000..81bc13081eeb64 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-stepper/page.tsx @@ -0,0 +1,79 @@ +'use client'; +import * as React from 'react'; +import CustomizedSteppers from '../../../../../../docs/data/material/components/steppers/CustomizedSteppers'; +import DotsMobileStepper from '../../../../../../docs/data/material/components/steppers/DotsMobileStepper'; +import HorizontalLinearAlternativeLabelStepper from '../../../../../../docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper'; +import HorizontalLinearStepper from '../../../../../../docs/data/material/components/steppers/HorizontalLinearStepper'; +import HorizontalNonLinearStepper from '../../../../../../docs/data/material/components/steppers/HorizontalNonLinearStepper'; +import HorizontalStepperWithError from '../../../../../../docs/data/material/components/steppers/HorizontalStepperWithError'; +import ProgressMobileStepper from '../../../../../../docs/data/material/components/steppers/ProgressMobileStepper'; +import SwipeableTextMobileStepper from '../../../../../../docs/data/material/components/steppers/SwipeableTextMobileStepper'; +import TextMobileStepper from '../../../../../../docs/data/material/components/steppers/TextMobileStepper'; +import VerticalLinearStepper from '../../../../../../docs/data/material/components/steppers/VerticalLinearStepper'; + +export default function Steppers() { + return ( + +
+

Customized Steppers

+
+ +
+
+
+

Dots Mobile Stepper

+
+ +
+
+
+

Horizontal Linear Alternative Label Stepper

+
+ +
+
+
+

Horizontal Linear Stepper

+
+ +
+
+
+

Horizontal Non Linear Stepper

+
+ +
+
+
+

Horizontal Stepper With Error

+
+ +
+
+
+

Progress Mobile Stepper

+
+ +
+
+
+

Swipeable Text Mobile Stepper

+
+ +
+
+
+

Text Mobile Stepper

+
+ +
+
+
+

Vertical Linear Stepper

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json index 3822681587fc07..883667eb642e00 100644 --- a/apps/pigment-css-vite-app/package.json +++ b/apps/pigment-css-vite-app/package.json @@ -9,30 +9,40 @@ "build": "vite build" }, "dependencies": { - "@pigment-css/react": "file:../../packages/pigment-css-react", - "@mui/utils": "file:../../packages/mui-utils/build", - "@mui/base": "file:../../packages/mui-base/build", - "@mui/material": "file:../../packages/mui-material/build", - "@mui/system": "file:../../packages/mui-system/build", - "@mui/icons-material": "file:../../packages/mui-icons-material/build", + "@pigment-css/react": "workspace:^", + "@mui/utils": "workspace:^", + "@mui/base": "workspace:^", + "@mui/lab": "workspace:^", + "@mui/material": "workspace:^", + "@mui/system": "workspace:^", + "@mui/icons-material": "workspace:^", "clsx": "^2.1.0", "local-ui-lib": "workspace:^", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router": "^6.22.1", + "react-error-boundary": "^4.0.13", + "react-router": "^6.22.3", "react-router-dom": "^6.22.1" }, "devDependencies": { - "@babel/preset-env": "^7.23.9", - "@babel/preset-react": "^7.23.3", - "@babel/preset-typescript": "^7.23.3", - "@pigment-css/vite-plugin": "file:../../packages/pigment-css-vite-plugin", + "@babel/preset-react": "^7.24.1", + "@babel/preset-typescript": "^7.24.1", + "@pigment-css/vite-plugin": "workspace:^", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "@vitejs/plugin-react": "^4.2.1", - "postcss": "^8.4.35", + "postcss": "^8.4.38", "postcss-combine-media-query": "^1.0.1", - "vite": "5.0.12", + "vite": "5.2.2", "vite-plugin-pages": "^0.32.0" + }, + "nx": { + "targets": { + "preview": { + "dependsOn": [ + "^build" + ] + } + } } } diff --git a/apps/pigment-css-vite-app/src/App.tsx b/apps/pigment-css-vite-app/src/App.tsx deleted file mode 100644 index 526e5a872499cf..00000000000000 --- a/apps/pigment-css-vite-app/src/App.tsx +++ /dev/null @@ -1,177 +0,0 @@ -import * as React from 'react'; -import { styled, generateAtomics } from '@pigment-css/react'; -import type { Breakpoint } from '@mui/system'; -import { Button, bounceAnim } from 'local-ui-lib'; -import Slider from './Slider/ZeroSlider'; -import { Box } from './Box'; - -const ShowCaseDiv = styled('div')({ - [`.${Button}`]: { - color: '#f94564', - animation: `${bounceAnim} 1s ease infinite`, - }, -}); - -const atomics = generateAtomics(({ theme }) => ({ - conditions: Object.entries(theme.breakpoints.values).reduce( - (acc, [key, value]) => { - if (key === 'xs') { - return acc; - } - acc[key as Breakpoint] = theme.breakpoints.up(value); - return acc; - }, - {} as Record, - ), - defaultCondition: 'sm', - properties: { - display: ['none', 'flex', 'block', 'grid', 'inline-flex', 'inline-block'], - flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'], - justifyContent: ['center', 'space-between'], - alignItems: ['center'], - }, -})); - -const HalfWidth = styled.div<{ isRed?: boolean }>(({ theme }) => ({ - marginLeft: 20, - width: '50%', - maxHeight: 100, - padding: 20, - border: '1px solid #ccc', - color: ({ isRed }) => { - if (isRed) { - return (theme.vars || theme).palette.primary.main; - } - return (theme.vars || theme).palette.secondary.main; - }, -})); - -type AppProps = { - isRed?: boolean; -}; - -export function App({ isRed }: AppProps) { - const [count, setCount] = React.useState(0); - const [value, setValue] = React.useState(50); - const [isColorPrimary, setIsColorPrimary] = React.useState(true); - const [size, setSize] = React.useState('medium'); - const [showMarks, setShowMarks] = React.useState(true); - const [isTrackInverted, setIsTrackInverted] = React.useState(false); - const [disabled, setDisabled] = React.useState(false); - const [isHorizontal, setIsHorizontal] = React.useState(true); - - return ( -
- - - - -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- ({ - color: (theme.vars || theme).palette.primary.main, - fontSize: isRed ? 'h1.fontSize' : 'h2.fontSize', - ':hover': { - backgroundColor: ['primary.dark', 'secondary.main'], - color: { - sm: 'primary.dark', - md: 'secondary.main', - }, - }, - })} - > - setValue(val as number)} - /> - -
-
-

Atomics Demo

-
- Hello1 - Hello2 -
-
- Hello -
- ); -} diff --git a/apps/pigment-css-vite-app/src/Layout.tsx b/apps/pigment-css-vite-app/src/Layout.tsx index 06afb2f9251928..321dcacf08c933 100644 --- a/apps/pigment-css-vite-app/src/Layout.tsx +++ b/apps/pigment-css-vite-app/src/Layout.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { styled } from '@pigment-css/react'; -const Main = styled('div')(({ theme }) => ({ +const Main = styled.main(({ theme }) => ({ display: 'flex', flexDirection: 'column', gap: '32px', diff --git a/apps/pigment-css-vite-app/src/components/ErrorBoundaryFallback.tsx b/apps/pigment-css-vite-app/src/components/ErrorBoundaryFallback.tsx new file mode 100644 index 00000000000000..74a73000ed37bc --- /dev/null +++ b/apps/pigment-css-vite-app/src/components/ErrorBoundaryFallback.tsx @@ -0,0 +1,21 @@ +import { css } from '@pigment-css/react'; +import Alert from '@mui/material/Alert'; +import { FallbackProps } from 'react-error-boundary'; + +export function ErrorBoundaryFallback({ error }: FallbackProps) { + const err = error as Error; + return ( + + Error while rendering. + 
+        {err.message}
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/main.tsx b/apps/pigment-css-vite-app/src/main.tsx index e0f34c2030ede3..9760ba4a72aef3 100644 --- a/apps/pigment-css-vite-app/src/main.tsx +++ b/apps/pigment-css-vite-app/src/main.tsx @@ -1,13 +1,40 @@ import * as ReactDOMClient from 'react-dom/client'; import * as React from 'react'; -import { BrowserRouter as Router, useRoutes } from 'react-router-dom'; +import { BrowserRouter as Router, useLocation, useRoutes } from 'react-router-dom'; import { ThemeProvider, createTheme } from '@mui/material/styles'; +import CircularProgress from '@mui/material/CircularProgress'; import CssBaseline from '@mui/material/CssBaseline'; +import { css } from '@pigment-css/react'; +import { Box } from '@pigment-css/react/Box'; +import { ErrorBoundary } from 'react-error-boundary'; import routes from '~react-pages'; import '@pigment-css/react/styles.css'; +import { ErrorBoundaryFallback } from './components/ErrorBoundaryFallback'; function App() { - return Loading...

}>{useRoutes(routes)}; + const location = useLocation(); + return ( + + + + + } + > + {useRoutes(routes)} + + + ); } const theme = createTheme({ diff --git a/apps/pigment-css-vite-app/src/pages/index.tsx b/apps/pigment-css-vite-app/src/pages/index.tsx index 920cff8ecbc115..2037fda5402843 100644 --- a/apps/pigment-css-vite-app/src/pages/index.tsx +++ b/apps/pigment-css-vite-app/src/pages/index.tsx @@ -1 +1,11 @@ -export { App as default } from '../App'; +import { Link } from 'react-router-dom'; + +export default function App() { + return ( +
+

+ See Material UI components in action! +

+
+ ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx new file mode 100644 index 00000000000000..4f78230508237e --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import { useLocation, matchRoutes, Link } from 'react-router-dom'; +import { css } from '@pigment-css/react'; +import routes from '~react-pages'; +import Layout from '../../Layout'; + +export default function MaterialIndex() { + const location = useLocation(); + const matchedRoute = React.useMemo( + () => matchRoutes(routes, location.pathname)?.[0], + [location.pathname], + ); + const childRoutes = matchedRoute?.route.children ?? []; + + return ( + +
+

Material UI Components

+ +
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-app-bar.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-app-bar.tsx new file mode 100644 index 00000000000000..57b41d25804b34 --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-app-bar.tsx @@ -0,0 +1,101 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import BackToTop from '../../../../../docs/data/material/components/app-bar/BackToTop.tsx'; +import BottomAppBar from '../../../../../docs/data/material/components/app-bar/BottomAppBar.tsx'; +import ButtonAppBar from '../../../../../docs/data/material/components/app-bar/ButtonAppBar.tsx'; +import DenseAppBar from '../../../../../docs/data/material/components/app-bar/DenseAppBar.tsx'; +import DrawerAppBar from '../../../../../docs/data/material/components/app-bar/DrawerAppBar.tsx'; +import ElevateAppBar from '../../../../../docs/data/material/components/app-bar/ElevateAppBar.tsx'; +import EnableColorOnDarkAppBar from '../../../../../docs/data/material/components/app-bar/EnableColorOnDarkAppBar.tsx'; +import HideAppBar from '../../../../../docs/data/material/components/app-bar/HideAppBar.tsx'; +import MenuAppBar from '../../../../../docs/data/material/components/app-bar/MenuAppBar.tsx'; +import PrimarySearchAppBar from '../../../../../docs/data/material/components/app-bar/PrimarySearchAppBar.tsx'; +import ProminentAppBar from '../../../../../docs/data/material/components/app-bar/ProminentAppBar.tsx'; +import ResponsiveAppBar from '../../../../../docs/data/material/components/app-bar/ResponsiveAppBar.tsx'; +import SearchAppBar from '../../../../../docs/data/material/components/app-bar/SearchAppBar.tsx'; + +export default function AppBar() { + return ( + +

AppBar

+
+

Back To Top

+
+ +
+
+
+

Bottom App Bar

+
+ +
+
+
+

Button App Bar

+
+ +
+
+
+

Dense App Bar

+
+ +
+
+
+

Drawer App Bar

+
+ +
+
+
+

Elevate App Bar

+
+ +
+
+
+

Enable Color On Dark App Bar

+
+ +
+
+
+

Hide App Bar

+
+ +
+
+
+

Menu App Bar

+
+ +
+
+
+

Primary Search App Bar

+
+ +
+
+
+

Prominent App Bar

+
+ +
+
+
+

Responsive App Bar

+
+ +
+
+
+

Search App Bar

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-avatar.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-avatar.tsx index 7b22274b1e6756..0e566dac16a15f 100644 --- a/apps/pigment-css-vite-app/src/pages/material-ui/react-avatar.tsx +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-avatar.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import MaterialUILayout from '../../Layout'; import BackgroundLetterAvatars from '../../../../../docs/data/material/components/avatars/BackgroundLetterAvatars.tsx'; import BadgeAvatars from '../../../../../docs/data/material/components/avatars/BadgeAvatars.tsx'; diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-breadcrumbs.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-breadcrumbs.tsx new file mode 100644 index 00000000000000..acaf39e31fd638 --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-breadcrumbs.tsx @@ -0,0 +1,63 @@ +import { ErrorBoundary } from 'react-error-boundary'; + +import MaterialUILayout from '../../Layout'; +import ActiveLastBreadcrumb from '../../../../../docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb'; +import BasicBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/BasicBreadcrumbs'; +import CollapsedBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs'; +import CustomSeparator from '../../../../../docs/data/material/components/breadcrumbs/CustomSeparator'; +import CustomizedBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs'; +import IconBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/IconBreadcrumbs'; +import RouterBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/RouterBreadcrumbs'; +import { ErrorBoundaryFallback } from '../../components/ErrorBoundaryFallback'; + +export default function Breadcrumbs() { + return ( + +

Breadcrumbs

+
+

Active Last Breadcrumb

+
+ +
+
+
+

Basic Breadcrumbs

+
+ +
+
+
+

Collapsed Breadcrumbs

+
+ +
+
+
+

Custom Separator

+
+ +
+
+
+

Customized Breadcrumbs

+
+ +
+
+
+

Icon Breadcrumbs

+
+ +
+
+
+

Router Breadcrumbs

+
+ + + +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-button-group.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-button-group.tsx new file mode 100644 index 00000000000000..9c320eaeb63a15 --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-button-group.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import BasicButtonGroup from '../../../../../docs/data/material/components/button-group/BasicButtonGroup.tsx'; +import DisableElevation from '../../../../../docs/data/material/components/button-group/DisableElevation.tsx'; +import GroupOrientation from '../../../../../docs/data/material/components/button-group/GroupOrientation.tsx'; +import GroupSizesColors from '../../../../../docs/data/material/components/button-group/GroupSizesColors.tsx'; +import LoadingButtonGroup from '../../../../../docs/data/material/components/button-group/LoadingButtonGroup.tsx'; +import SplitButton from '../../../../../docs/data/material/components/button-group/SplitButton.tsx'; +import VariantButtonGroup from '../../../../../docs/data/material/components/button-group/VariantButtonGroup.tsx'; + +export default function ButtonGroup() { + return ( + +

Button-group

+
+

Basic Button Group

+
+ +
+
+
+

Disable Elevation

+
+ +
+
+
+

Group Orientation

+
+ +
+
+
+

Group Sizes Colors

+
+ +
+
+
+

Loading Button Group

+
+ +
+
+
+

Split Button

+
+ +
+
+
+

Variant Button Group

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-button.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-button.tsx new file mode 100644 index 00000000000000..51affe28f44f0a --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-button.tsx @@ -0,0 +1,122 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import BasicButtons from '../../../../../docs/data/material/components/buttons/BasicButtons.tsx'; +import ButtonBaseDemo from '../../../../../docs/data/material/components/buttons/ButtonBaseDemo.tsx'; +import ButtonSizes from '../../../../../docs/data/material/components/buttons/ButtonSizes.tsx'; +import ColorButtons from '../../../../../docs/data/material/components/buttons/ColorButtons.tsx'; +import ContainedButtons from '../../../../../docs/data/material/components/buttons/ContainedButtons.tsx'; +import CustomizedButtons from '../../../../../docs/data/material/components/buttons/CustomizedButtons.tsx'; +import DisableElevation from '../../../../../docs/data/material/components/buttons/DisableElevation.tsx'; +import IconButtonColors from '../../../../../docs/data/material/components/buttons/IconButtonColors.tsx'; +import IconButtonSizes from '../../../../../docs/data/material/components/buttons/IconButtonSizes.tsx'; +import IconButtons from '../../../../../docs/data/material/components/buttons/IconButtons.tsx'; +import IconLabelButtons from '../../../../../docs/data/material/components/buttons/IconLabelButtons.tsx'; +import InputFileUpload from '../../../../../docs/data/material/components/buttons/InputFileUpload.tsx'; +import LoadingButtons from '../../../../../docs/data/material/components/buttons/LoadingButtons.tsx'; +import LoadingButtonsTransition from '../../../../../docs/data/material/components/buttons/LoadingButtonsTransition.tsx'; +import OutlinedButtons from '../../../../../docs/data/material/components/buttons/OutlinedButtons.tsx'; +import TextButtons from '../../../../../docs/data/material/components/buttons/TextButtons.tsx'; + +export default function Buttons() { + return ( + +

Buttons

+
+

Basic Buttons

+
+ +
+
+
+

Button Base Demo

+
+ +
+
+
+

Button Sizes

+
+ +
+
+
+

Color Buttons

+
+ +
+
+
+

Contained Buttons

+
+ +
+
+
+

Customized Buttons

+
+ +
+
+
+

Disable Elevation

+
+ +
+
+
+

Icon Button Colors

+
+ +
+
+
+

Icon Button Sizes

+
+ +
+
+
+

Icon Buttons

+
+ +
+
+
+

Icon Label Buttons

+
+ +
+
+
+

Input File Upload

+
+ +
+
+
+

Loading Buttons

+
+ +
+
+
+

Loading Buttons Transition

+
+ +
+
+
+

Outlined Buttons

+
+ +
+
+
+

Text Buttons

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-chip.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-chip.tsx new file mode 100644 index 00000000000000..2727c782aca916 --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-chip.tsx @@ -0,0 +1,94 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import AvatarChips from '../../../../../docs/data/material/components/chips/AvatarChips.tsx'; +import BasicChips from '../../../../../docs/data/material/components/chips/BasicChips.tsx'; +import ChipsArray from '../../../../../docs/data/material/components/chips/ChipsArray.tsx'; +import ClickableAndDeletableChips from '../../../../../docs/data/material/components/chips/ClickableAndDeletableChips.tsx'; +import ClickableChips from '../../../../../docs/data/material/components/chips/ClickableChips.tsx'; +import ClickableLinkChips from '../../../../../docs/data/material/components/chips/ClickableLinkChips.tsx'; +import ColorChips from '../../../../../docs/data/material/components/chips/ColorChips.tsx'; +import CustomDeleteIconChips from '../../../../../docs/data/material/components/chips/CustomDeleteIconChips.tsx'; +import DeletableChips from '../../../../../docs/data/material/components/chips/DeletableChips.tsx'; +import IconChips from '../../../../../docs/data/material/components/chips/IconChips.tsx'; +import MultilineChips from '../../../../../docs/data/material/components/chips/MultilineChips.tsx'; +import SizesChips from '../../../../../docs/data/material/components/chips/SizesChips.tsx'; + +export default function Chips() { + return ( + +

Chips

+
+

Avatar Chips

+
+ +
+
+
+

Basic Chips

+
+ +
+
+
+

Chips Array

+
+ +
+
+
+

Clickable And Deletable Chips

+
+ +
+
+
+

Clickable Chips

+
+ +
+
+
+

Clickable Link Chips

+
+ +
+
+
+

Color Chips

+
+ +
+
+
+

Custom Delete Icon Chips

+
+ +
+
+
+

Deletable Chips

+
+ +
+
+
+

Icon Chips

+
+ +
+
+
+

Multiline Chips

+
+ +
+
+
+

Sizes Chips

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-divider.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-divider.tsx new file mode 100644 index 00000000000000..df4684b889129d --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-divider.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import DividerText from '../../../../../docs/data/material/components/dividers/DividerText.tsx'; +import DividerVariants from '../../../../../docs/data/material/components/dividers/DividerVariants.tsx'; +import FlexDivider from '../../../../../docs/data/material/components/dividers/FlexDivider.tsx'; +import IntroDivider from '../../../../../docs/data/material/components/dividers/IntroDivider.tsx'; +import ListDividers from '../../../../../docs/data/material/components/dividers/ListDividers.tsx'; +import VerticalDividerMiddle from '../../../../../docs/data/material/components/dividers/VerticalDividerMiddle.tsx'; +import VerticalDividers from '../../../../../docs/data/material/components/dividers/VerticalDividers.tsx'; + +export default function Dividers() { + return ( + +

Dividers

+
+

Divider Text

+
+ +
+
+
+

Divider Variants

+
+ +
+
+
+

Flex Divider

+
+ +
+
+
+

Intro Divider

+
+ +
+
+
+

List Dividers

+
+ +
+
+
+

Vertical Divider Middle

+
+ +
+
+
+

Vertical Dividers

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-modal.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-modal.tsx new file mode 100644 index 00000000000000..8e5341af93c0b3 --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-modal.tsx @@ -0,0 +1,52 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import BasicModal from '../../../../../docs/data/material/components/modal/BasicModal.tsx'; +import KeepMountedModal from '../../../../../docs/data/material/components/modal/KeepMountedModal.tsx'; +import NestedModal from '../../../../../docs/data/material/components/modal/NestedModal.tsx'; +import ServerModal from '../../../../../docs/data/material/components/modal/ServerModal.tsx'; +import SpringModal from '../../../../../docs/data/material/components/modal/SpringModal.tsx'; +import TransitionsModal from '../../../../../docs/data/material/components/modal/TransitionsModal.tsx'; + +export default function Modal() { + return ( + +

Modal

+
+

Basic Modal

+
+ +
+
+
+

Keep Mounted Modal

+
+ +
+
+
+

Nested Modal

+
+ +
+
+
+

Server Modal

+
+ +
+
+
+

Spring Modal

+
+ +
+
+
+

Transitions Modal

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-stepper.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-stepper.tsx new file mode 100644 index 00000000000000..5f9cc1d0e683d6 --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-stepper.tsx @@ -0,0 +1,80 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import CustomizedSteppers from '../../../../../docs/data/material/components/steppers/CustomizedSteppers.tsx'; +import DotsMobileStepper from '../../../../../docs/data/material/components/steppers/DotsMobileStepper.tsx'; +import HorizontalLinearAlternativeLabelStepper from '../../../../../docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx'; +import HorizontalLinearStepper from '../../../../../docs/data/material/components/steppers/HorizontalLinearStepper.tsx'; +import HorizontalNonLinearStepper from '../../../../../docs/data/material/components/steppers/HorizontalNonLinearStepper.tsx'; +import HorizontalStepperWithError from '../../../../../docs/data/material/components/steppers/HorizontalStepperWithError.tsx'; +import ProgressMobileStepper from '../../../../../docs/data/material/components/steppers/ProgressMobileStepper.tsx'; +import SwipeableTextMobileStepper from '../../../../../docs/data/material/components/steppers/SwipeableTextMobileStepper.tsx'; +import TextMobileStepper from '../../../../../docs/data/material/components/steppers/TextMobileStepper.tsx'; +import VerticalLinearStepper from '../../../../../docs/data/material/components/steppers/VerticalLinearStepper.tsx'; + +export default function Steppers() { + return ( + +

Steppers

+
+

Customized Steppers

+
+ +
+
+
+

Dots Mobile Stepper

+
+ +
+
+
+

Horizontal Linear Alternative Label Stepper

+
+ +
+
+
+

Horizontal Linear Stepper

+
+ +
+
+
+

Horizontal Non Linear Stepper

+
+ +
+
+
+

Horizontal Stepper With Error

+
+ +
+
+
+

Progress Mobile Stepper

+
+ +
+
+
+

Swipeable Text Mobile Stepper

+
+ +
+
+
+

Text Mobile Stepper

+
+ +
+
+
+

Vertical Linear Stepper

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/vite-env.d.ts b/apps/pigment-css-vite-app/vite-env.d.ts index 5c48b9640e969a..f07ec82ef8602f 100644 --- a/apps/pigment-css-vite-app/vite-env.d.ts +++ b/apps/pigment-css-vite-app/vite-env.d.ts @@ -1,2 +1,2 @@ /// -/// +/// diff --git a/apps/pigment-css-vite-app/vite.config.ts b/apps/pigment-css-vite-app/vite.config.ts index 814f407f2231db..031cd34a6f7571 100644 --- a/apps/pigment-css-vite-app/vite.config.ts +++ b/apps/pigment-css-vite-app/vite.config.ts @@ -1,59 +1,66 @@ +import * as path from 'node:path'; import { defineConfig, splitVendorChunkPlugin } from 'vite'; import reactPlugin from '@vitejs/plugin-react'; import Pages from 'vite-plugin-pages'; import { pigment } from '@pigment-css/vite-plugin'; import { experimental_extendTheme as extendTheme } from '@mui/material/styles'; -const theme = extendTheme(); - -// TODO: Fix this from the Material UI side in a separate PR -theme.palette = theme.colorSchemes.light.palette; +const theme = extendTheme({ + getSelector: function getSelector(colorScheme, css) { + if (colorScheme) { + return { + [`@media (prefers-color-scheme: ${colorScheme})`]: { + ':root': css, + }, + }; + } + return ':root'; + }, +}); theme.getColorSchemeSelector = (colorScheme) => { return `@media (prefers-color-scheme: ${colorScheme})`; }; -const { css: rootCss } = theme.generateCssVars(); -const { css: lightCss } = theme.generateCssVars('light'); -const { css: darkCss } = theme.generateCssVars('dark'); -theme.generateCssVars = (colorScheme) => { - if (colorScheme === 'dark') { - return { - css: darkCss, - selector: { - '@media (prefers-color-scheme: dark)': { - ':root': darkCss, - }, - }, - }; - } - if (colorScheme === 'light') { - return { css: lightCss, selector: ':root' }; - } - return { css: rootCss, selector: ':root' }; -}; export default defineConfig({ plugins: [ - reactPlugin({ include: /\.(mdx|js|jsx|ts|tsx)$/ }), + reactPlugin({ + include: /\.(mdx|js|jsx|ts|tsx)$/, + babel: { + presets: [ + [ + '@babel/preset-react', + { + runtime: 'automatic', + }, + ], + '@babel/preset-typescript', + ], + }, + }), pigment({ theme, transformLibraries: ['local-ui-lib', '@mui/material'], sourceMap: true, displayName: true, - transformSx: false, }), Pages(), splitVendorChunkPlugin(), ], resolve: { alias: [ - { - find: /^@mui\/system\/(.*)/, - replacement: '@mui/system/esm/$1', - }, { find: /^@mui\/icons-material\/(.*)/, replacement: '@mui/icons-material/esm/$1', }, + { + find: /^@pigment-css\/react$/, + // There is a weird issue on the CI where Vite/Rollup isn't able to resolve + // the path for pigment-css/react in this monodrep. This is a temporary workaround. It does not + // affect local development or end-user projects. + replacement: path.resolve( + path.join(process.cwd(), 'node_modules/@pigment-css/react/build/index.mjs'), + ), + }, ], }, }); diff --git a/apps/pnpm-lock.yaml b/apps/pnpm-lock.yaml index 0df1319ac41672..ecd3a0782023dc 100644 --- a/apps/pnpm-lock.yaml +++ b/apps/pnpm-lock.yaml @@ -1374,13 +1374,13 @@ importers: version: file:../packages/mui-base/build(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/icons-material': specifier: file:../../packages/mui-icons-material/build - version: file:../packages/mui-icons-material/build(@mui/material@5.15.12)(@types/react@18.2.55)(react@18.2.0) + version: file:../packages/mui-icons-material/build(@mui/material@5.15.13)(@types/react@18.2.55)(react@18.2.0) '@mui/material': specifier: file:../../packages/mui-material/build version: file:../packages/mui-material/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/material-nextjs': specifier: file:../../packages/mui-material-nextjs/build - version: file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.12)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0) + version: file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.13)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0) '@mui/system': specifier: file:../../packages/mui-system/build version: file:../packages/mui-system/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) @@ -1432,7 +1432,7 @@ importers: version: file:../packages/mui-base/build(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/icons-material': specifier: file:../../packages/mui-icons-material/build - version: file:../packages/mui-icons-material/build(@mui/material@5.15.12)(@types/react@18.2.55)(react@18.2.0) + version: file:../packages/mui-icons-material/build(@mui/material@5.15.13)(@types/react@18.2.55)(react@18.2.0) '@mui/material': specifier: file:../../packages/mui-material/build version: file:../packages/mui-material/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) @@ -8991,7 +8991,7 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - file:../packages/mui-icons-material/build(@mui/material@5.15.12)(@types/react@18.2.55)(react@18.2.0): + file:../packages/mui-icons-material/build(@mui/material@5.15.13)(@types/react@18.2.55)(react@18.2.0): resolution: {directory: ../packages/mui-icons-material/build, type: directory} id: file:../packages/mui-icons-material/build name: '@mui/icons-material' @@ -9010,7 +9010,7 @@ packages: react: 18.2.0 dev: false - file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.12)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0): + file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.13)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0): resolution: {directory: ../packages/mui-material-nextjs/build, type: directory} id: file:../packages/mui-material-nextjs/build name: '@mui/material-nextjs' diff --git a/apps/pnpm-workspace.yaml b/apps/pnpm-workspace.yaml deleted file mode 100644 index da23d95e53e26f..00000000000000 --- a/apps/pnpm-workspace.yaml +++ /dev/null @@ -1,9 +0,0 @@ -packages: - - 'local-ui-lib' - - 'pigment-*' - - '../packages/waterfall' - - '../packages-internal/docs-utils' - - '../packages/test-utils' - - '../packages-internal/*' - - '../packages/mui-*' - - '../packages/pigment-*' diff --git a/benchmark/package.json b/benchmark/package.json index 48ca1c919ad051..5716765dcb00c3 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -21,7 +21,7 @@ "@styled-system/css": "^5.1.5", "benchmark": "^2.1.4", "docs": "workspace:^", - "express": "^4.18.3", + "express": "^4.19.2", "fs-extra": "^11.2.0", "jss": "^10.10.0", "playwright": "^1.42.1", diff --git a/docs/data/base/getting-started/quickstart/quickstart.md b/docs/data/base/getting-started/quickstart/quickstart.md index 0bcf49c0652a79..9ffbd4d16ded6d 100644 --- a/docs/data/base/getting-started/quickstart/quickstart.md +++ b/docs/data/base/getting-started/quickstart/quickstart.md @@ -10,18 +10,24 @@ If you're using Next.js 13.4 or later, check out the [Next.js App Router guide]( `@mui/base` is completely standalone – run one of the following commands to add Base UI to your React project: +:::info +The `next` tag is used to download the latest pre-release, v6 version. Remove it to get the current stable version. +::: + + + ```bash npm -npm install @mui/base +npm install @mui/base@next ``` ```bash yarn -yarn add @mui/base +yarn add @mui/base@next ``` ```bash pnpm -pnpm add @mui/base +pnpm add @mui/base@next ``` diff --git a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md index 92cf9f71fa4ad9..78b3d3e30a554c 100644 --- a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md +++ b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md @@ -31,8 +31,14 @@ We'll use [`create-react-app` with TypeScript](https://create-react-app.dev/docs After you have created the project, follow the instructions given on the [Tailwind CSS installation page](https://tailwindcss.com/docs/guides/create-react-app) in order to configure `tailwind`. Next, install `@mui/base` in the project: +:::info +The `next` tag is used to download the latest pre-release, v6 version. Remove it to get the current stable version. +::: + + + ```bash -npm install @mui/base +npm install @mui/base@next ``` ## Adding the player markup diff --git a/docs/data/joy/components/accordion/AccordionTransition.js b/docs/data/joy/components/accordion/AccordionTransition.js index de2d4476fcba53..15908702f1506d 100644 --- a/docs/data/joy/components/accordion/AccordionTransition.js +++ b/docs/data/joy/components/accordion/AccordionTransition.js @@ -9,7 +9,7 @@ import Radio from '@mui/joy/Radio'; import Stack from '@mui/joy/Stack'; import Typography from '@mui/joy/Typography'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; export default function AccordionTransition() { const [transition, setTransition] = React.useState('0.2s ease'); diff --git a/docs/data/joy/components/badge/BadgeAlignment.js b/docs/data/joy/components/badge/BadgeAlignment.js index 7f680cd6156126..4d0c4ac31ef6ad 100644 --- a/docs/data/joy/components/badge/BadgeAlignment.js +++ b/docs/data/joy/components/badge/BadgeAlignment.js @@ -6,7 +6,7 @@ import IconButton from '@mui/joy/IconButton'; import ArrowUpward from '@mui/icons-material/ArrowUpward'; import ArrowDownward from '@mui/icons-material/ArrowDownward'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; export default function BadgeAlignment() { const [anchorOrigin, setAnchorOrigin] = React.useState({ diff --git a/docs/data/joy/components/badge/BadgeAlignment.tsx b/docs/data/joy/components/badge/BadgeAlignment.tsx index 37171c79fe3161..26cef0321dd2f4 100644 --- a/docs/data/joy/components/badge/BadgeAlignment.tsx +++ b/docs/data/joy/components/badge/BadgeAlignment.tsx @@ -6,7 +6,7 @@ import IconButton from '@mui/joy/IconButton'; import ArrowUpward from '@mui/icons-material/ArrowUpward'; import ArrowDownward from '@mui/icons-material/ArrowDownward'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; export default function BadgeAlignment() { const [anchorOrigin, setAnchorOrigin] = React.useState( diff --git a/docs/data/joy/components/grid/InteractiveGrid.js b/docs/data/joy/components/grid/InteractiveGrid.js index c2faa3bb5819c6..6752884b6f1483 100644 --- a/docs/data/joy/components/grid/InteractiveGrid.js +++ b/docs/data/joy/components/grid/InteractiveGrid.js @@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup'; import Radio from '@mui/joy/Radio'; import Sheet from '@mui/joy/Sheet'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; export default function InteractiveGrid() { diff --git a/docs/data/joy/components/grid/InteractiveGrid.tsx b/docs/data/joy/components/grid/InteractiveGrid.tsx index 00b0a52f1975a0..8059be0f4b3260 100644 --- a/docs/data/joy/components/grid/InteractiveGrid.tsx +++ b/docs/data/joy/components/grid/InteractiveGrid.tsx @@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup'; import Radio from '@mui/joy/Radio'; import Sheet from '@mui/joy/Sheet'; import { GridDirection } from '@mui/system'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; type GridItemsAlignment = diff --git a/docs/data/joy/components/grid/SpacingGrid.js b/docs/data/joy/components/grid/SpacingGrid.js index 79d8eac75e8775..20971a1813de88 100644 --- a/docs/data/joy/components/grid/SpacingGrid.js +++ b/docs/data/joy/components/grid/SpacingGrid.js @@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup'; import Radio from '@mui/joy/Radio'; import Sheet from '@mui/joy/Sheet'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; export default function SpacingGrid() { const [spacing, setSpacing] = React.useState(2); diff --git a/docs/data/joy/components/grid/SpacingGrid.tsx b/docs/data/joy/components/grid/SpacingGrid.tsx index 6ae4b326be60a8..ebb3466624480a 100644 --- a/docs/data/joy/components/grid/SpacingGrid.tsx +++ b/docs/data/joy/components/grid/SpacingGrid.tsx @@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup'; import Radio from '@mui/joy/Radio'; import Sheet from '@mui/joy/Sheet'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; export default function SpacingGrid() { const [spacing, setSpacing] = React.useState(2); diff --git a/docs/data/joy/components/stack/InteractiveStack.js b/docs/data/joy/components/stack/InteractiveStack.js index 0ec70fd492dc6c..d5142c84f95783 100644 --- a/docs/data/joy/components/stack/InteractiveStack.js +++ b/docs/data/joy/components/stack/InteractiveStack.js @@ -8,7 +8,7 @@ import Radio from '@mui/joy/Radio'; import Stack from '@mui/joy/Stack'; import { styled } from '@mui/joy/styles'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; const Item = styled(Sheet)(({ theme }) => ({ ...theme.typography['body-sm'], diff --git a/docs/data/joy/components/stack/InteractiveStack.tsx b/docs/data/joy/components/stack/InteractiveStack.tsx index 17cf59c88e3c4d..971adbb6a0f9c3 100644 --- a/docs/data/joy/components/stack/InteractiveStack.tsx +++ b/docs/data/joy/components/stack/InteractiveStack.tsx @@ -8,7 +8,7 @@ import Radio from '@mui/joy/Radio'; import Stack, { StackProps } from '@mui/joy/Stack'; import { styled } from '@mui/joy/styles'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; const Item = styled(Sheet)(({ theme }) => ({ ...theme.typography['body-sm'], diff --git a/docs/data/joy/customization/approaches/ButtonThemes.js b/docs/data/joy/customization/approaches/ButtonThemes.js index 558e3bb782cc1a..ee359cacdf3162 100644 --- a/docs/data/joy/customization/approaches/ButtonThemes.js +++ b/docs/data/joy/customization/approaches/ButtonThemes.js @@ -6,7 +6,7 @@ import FormLabel from '@mui/joy/FormLabel'; import Select from '@mui/joy/Select'; import Option from '@mui/joy/Option'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; const githubTheme = extendTheme({ cssVarPrefix: 'gh', diff --git a/docs/data/joy/getting-started/installation/installation.md b/docs/data/joy/getting-started/installation/installation.md index 4f1b53ec6624cf..341b00918886b7 100644 --- a/docs/data/joy/getting-started/installation/installation.md +++ b/docs/data/joy/getting-started/installation/installation.md @@ -6,17 +6,23 @@ Run one of the following commands to add Joy UI to your project: +:::info +The `next` tag is used to download the latest pre-release, v6 version. Remove it to get the current stable version. +::: + + + ```bash npm -npm install @mui/joy @emotion/react @emotion/styled +npm install @mui/joy@next @emotion/react @emotion/styled ``` ```bash yarn -yarn add @mui/joy @emotion/react @emotion/styled +yarn add @mui/joy@next @emotion/react @emotion/styled ``` ```bash pnpm -pnpm add @mui/joy @emotion/react @emotion/styled +pnpm add @mui/joy@next @emotion/react @emotion/styled ``` diff --git a/docs/data/joy/integrations/icon-libraries/icon-libraries.md b/docs/data/joy/integrations/icon-libraries/icon-libraries.md index b36c8dd5cf793a..bd0192f0351031 100644 --- a/docs/data/joy/integrations/icon-libraries/icon-libraries.md +++ b/docs/data/joy/integrations/icon-libraries/icon-libraries.md @@ -13,8 +13,12 @@ This section assumes that you've already installed Joy UI in your app—see [In #### yarn +:::info +The `next` tag is used to download the latest pre-release, v6 version. Remove it to get the current stable version. +::: + ```bash -yarn add @mui/icons-material @mui/material +yarn add @mui/icons-material@next @mui/material@next ``` :::warning @@ -39,8 +43,14 @@ You can keep track of the progress in [this issue](https://github.com/mui/materi #### npm +:::info +The `next` tag is used to download the latest pre-release, v6 version. Remove it to get the current stable version. +::: + + + ```bash -npm install @mui/icons-material @mui/material +npm install @mui/icons-material@next @mui/material@next ``` :::warning diff --git a/docs/data/joy/main-features/automatic-adjustment/ListThemes.js b/docs/data/joy/main-features/automatic-adjustment/ListThemes.js index cb7a7976d56b70..828ebe8d50fc04 100644 --- a/docs/data/joy/main-features/automatic-adjustment/ListThemes.js +++ b/docs/data/joy/main-features/automatic-adjustment/ListThemes.js @@ -10,7 +10,7 @@ import Option from '@mui/joy/Option'; import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded'; import ToggleOffRoundedIcon from '@mui/icons-material/ToggleOffRounded'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; export default function ListThemes() { const [preset, setPreset] = React.useState(''); diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js index 6b7d09f473cf0e..a7d4251827ab8f 100644 --- a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js +++ b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js @@ -1,5 +1,5 @@ import * as React from 'react'; - +import { useTheme } from '@mui/joy/styles'; import Box from '@mui/joy/Box'; import Button from '@mui/joy/Button'; import IconButton from '@mui/joy/IconButton'; @@ -7,6 +7,7 @@ import Typography from '@mui/joy/Typography'; import Sheet from '@mui/joy/Sheet'; import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import ColorLensRoundedIcon from '@mui/icons-material/ColorLensRounded'; +import InvertColorsIcon from '@mui/icons-material/InvertColors'; /** * Design credit: https://flutter.dev/ @@ -14,71 +15,113 @@ import ColorLensRoundedIcon from '@mui/icons-material/ColorLensRounded'; export default function ColorInversionMarketing() { const [color, setColor] = React.useState('primary'); + const [solid, setSolid] = React.useState(true); + const theme = useTheme(); + + const shade = (x) => theme.vars.palette[color][x]; + const color1 = solid ? shade(800) : shade(600); + const color2 = solid ? shade(600) : shade(200); + const color3 = shade(900); + const gradient1 = `${color1}, ${color2} 65%`; + const gradient2 = `${color1} 65%, ${color3}`; + const textColor = { color: solid ? shade(50) : shade(700) }; + + const buttonStyles = { + borderRadius: 99, + '&:hover': { + '& .MuiButton-endDecorator': { transform: 'translate(4px, 0px)' }, + }, + '& span': { transition: '0.15s' }, + }; + return ( - - Get started - +
+ + Get started + + Instant access to the power of the Joy UI library. *': { flexGrow: 1, fontWeight: 'lg' }, + gap: 1, }} > - + - - - + { - const colors = ['primary', 'neutral', 'danger', 'success', 'warning']; - - const nextColorIndex = colors.indexOf(color) + 1; - setColor(colors[nextColorIndex] ?? colors[0]); + bgcolor: 'transparent', + display: 'flex', + gap: 2, + '& button': { borderRadius: '50%' }, }} > - - + setSolid((state) => !state)}> + + + { + const colors = ['primary', 'neutral', 'danger', 'success', 'warning']; + + const nextColorIndex = colors.indexOf(color) + 1; + setColor(colors[nextColorIndex] ?? colors[0]); + }} + > + + + ); } diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx index 90e93c26a075d4..befa18c13e5612 100644 --- a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx +++ b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ColorPaletteProp } from '@mui/joy/styles'; +import { ColorPaletteProp, PaletteRange, useTheme } from '@mui/joy/styles'; import Box from '@mui/joy/Box'; import Button from '@mui/joy/Button'; import IconButton from '@mui/joy/IconButton'; @@ -7,6 +7,7 @@ import Typography from '@mui/joy/Typography'; import Sheet from '@mui/joy/Sheet'; import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import ColorLensRoundedIcon from '@mui/icons-material/ColorLensRounded'; +import InvertColorsIcon from '@mui/icons-material/InvertColors'; /** * Design credit: https://flutter.dev/ @@ -14,76 +15,118 @@ import ColorLensRoundedIcon from '@mui/icons-material/ColorLensRounded'; export default function ColorInversionMarketing() { const [color, setColor] = React.useState('primary'); + const [solid, setSolid] = React.useState(true); + const theme = useTheme(); + + const shade = (x: keyof PaletteRange): string => theme.vars.palette[color][x]; + const color1 = solid ? shade(800) : shade(600); + const color2 = solid ? shade(600) : shade(200); + const color3 = shade(900); + const gradient1 = `${color1}, ${color2} 65%`; + const gradient2 = `${color1} 65%, ${color3}`; + const textColor = { color: solid ? shade(50) : shade(700) }; + + const buttonStyles = { + borderRadius: 99, + '&:hover': { + '& .MuiButton-endDecorator': { transform: 'translate(4px, 0px)' }, + }, + '& span': { transition: '0.15s' }, + }; + return ( - - Get started - +
+ + Get started + + Instant access to the power of the Joy UI library. *': { flexGrow: 1, fontWeight: 'lg' }, + gap: 1, }} > - + - - - + { - const colors: ColorPaletteProp[] = [ - 'primary', - 'neutral', - 'danger', - 'success', - 'warning', - ]; - const nextColorIndex = colors.indexOf(color) + 1; - setColor(colors[nextColorIndex] ?? colors[0]); + bgcolor: 'transparent', + display: 'flex', + gap: 2, + '& button': { borderRadius: '50%' }, }} > - - + setSolid((state) => !state)}> + + + { + const colors: ColorPaletteProp[] = [ + 'primary', + 'neutral', + 'danger', + 'success', + 'warning', + ]; + const nextColorIndex = colors.indexOf(color) + 1; + setColor(colors[nextColorIndex] ?? colors[0]); + }} + > + + + ); } diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.js b/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.js index 822606a78376a9..147f6e3b0735a7 100644 --- a/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.js +++ b/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.js @@ -10,7 +10,7 @@ import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; export default function ColorInversionMotivation() { const demo = ( - + {/* Left: The global variants are applied to children only */} - + {demo} One layer @@ -55,7 +54,7 @@ export default function ColorInversionMotivation() { {/* Right: The global variants are applied to both parent and children */} - + {React.cloneElement(demo, { variant: 'solid', color: 'primary', diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.tsx index 352d801efdde4e..e6d5948ea2673f 100644 --- a/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.tsx +++ b/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.tsx @@ -10,7 +10,7 @@ import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; export default function ColorInversionMotivation() { const demo = ( - + {/* Left: The global variants are applied to children only */} - + {demo} One layer @@ -54,7 +53,7 @@ export default function ColorInversionMotivation() { {/* Right: The global variants are applied to both parent and children */} - + {React.cloneElement(demo, { variant: 'solid', color: 'primary', diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionPopup.js b/docs/data/joy/main-features/color-inversion/ColorInversionPopup.js index 7d8b603c3e2dc9..41c91f879e4c45 100644 --- a/docs/data/joy/main-features/color-inversion/ColorInversionPopup.js +++ b/docs/data/joy/main-features/color-inversion/ColorInversionPopup.js @@ -28,10 +28,10 @@ export default function ColorInversionPopup() { const [color, setColor] = React.useState('danger'); const [menuButton, setMenuButton] = React.useState(null); return ( - + + + + + ); +} + +ForgotPassword.propTypes = { + handleClose: PropTypes.func.isRequired, + open: PropTypes.bool.isRequired, +}; + +export default ForgotPassword; diff --git a/docs/data/material/getting-started/templates/sign-in-side/ForgotPassword.tsx b/docs/data/material/getting-started/templates/sign-in-side/ForgotPassword.tsx new file mode 100644 index 00000000000000..2d2dad736b9e53 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/ForgotPassword.tsx @@ -0,0 +1,56 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; +import OutlinedInput from '@mui/material/OutlinedInput'; + +interface ForgotPasswordProps { + open: boolean; + handleClose: () => void; +} + +export default function ForgotPassword({ open, handleClose }: ForgotPasswordProps) { + return ( + ) => { + event.preventDefault(); + handleClose(); + }, + }} + > + Reset password + + + Enter your account's email address, and we'll send you a link to + reset your password. + + + + + + + + + ); +} diff --git a/docs/data/material/getting-started/templates/sign-in-side/README.md b/docs/data/material/getting-started/templates/sign-in-side/README.md index 67c088ce173215..a7995114143ef1 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/README.md +++ b/docs/data/material/getting-started/templates/sign-in-side/README.md @@ -4,7 +4,7 @@ -1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples). +1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/next/examples). 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react. 3. Import and use the `SignInSide` component. @@ -12,4 +12,4 @@ -View the demo at https://mui.com/material-ui/getting-started/templates/sign-in-side/. +View the demo at https://next.mui.com/material-ui/getting-started/templates/sign-in-side/. diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js new file mode 100644 index 00000000000000..2fe26179da482b --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js @@ -0,0 +1,195 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Card from '@mui/material/Card'; +import Checkbox from '@mui/material/Checkbox'; +import Divider from '@mui/material/Divider'; +import FormLabel from '@mui/material/FormLabel'; +import FormControl from '@mui/material/FormControl'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Link from '@mui/material/Link'; +import TextField from '@mui/material/TextField'; +import Typography from '@mui/material/Typography'; + +import ForgotPassword from './ForgotPassword'; +import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; + +export default function SignInCard() { + const [emailError, setEmailError] = React.useState(false); + const [emailErrorMessage, setEmailErrorMessage] = React.useState(''); + const [passwordError, setPasswordError] = React.useState(false); + const [passwordErrorMessage, setPasswordErrorMessage] = React.useState(''); + const [open, setOpen] = React.useState(false); + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + const handleSubmit = (event) => { + event.preventDefault(); + const data = new FormData(event.currentTarget); + console.log({ + email: data.get('email'), + password: data.get('password'), + }); + }; + + const validateInputs = () => { + const email = document.getElementById('email'); + const password = document.getElementById('password'); + + let isValid = true; + + if (!email.value || !/\S+@\S+\.\S+/.test(email.value)) { + setEmailError(true); + setEmailErrorMessage('Please enter a valid email address.'); + isValid = false; + } else { + setEmailError(false); + setEmailErrorMessage(''); + } + + if (!password.value || password.value.length < 6) { + setPasswordError(true); + setPasswordErrorMessage('Password must be at least 6 characters long.'); + isValid = false; + } else { + setPasswordError(false); + setPasswordErrorMessage(''); + } + + return isValid; + }; + + return ( + ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + width: { xs: '100%', sm: '450px' }, + p: { xs: 2, sm: 4 }, + gap: 2, + boxShadow: + theme.palette.mode === 'light' + ? 'rgba(0, 0, 0, 0.05) 0px 5px 15px 0px, rgba(25, 28, 33, 0.05) 0px 15px 35px -5px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px' + : 'rgba(0, 0, 0, 0.5) 0px 5px 15px 0px, rgba(25, 28, 33, 0.08) 0px 15px 35px -5px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px', + })} + > + + + Sign in + + + + Email + + + + + Password + + Forgot your password? + + + + + } + label="Remember me" + /> + + + + Don't have an account? Sign up + + + or + + + + + + ); +} diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx new file mode 100644 index 00000000000000..67d6e041a4c3d6 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx @@ -0,0 +1,195 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Card from '@mui/material/Card'; +import Checkbox from '@mui/material/Checkbox'; +import Divider from '@mui/material/Divider'; +import FormLabel from '@mui/material/FormLabel'; +import FormControl from '@mui/material/FormControl'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Link from '@mui/material/Link'; +import TextField from '@mui/material/TextField'; +import Typography from '@mui/material/Typography'; + +import ForgotPassword from './ForgotPassword'; +import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; + +export default function SignInCard() { + const [emailError, setEmailError] = React.useState(false); + const [emailErrorMessage, setEmailErrorMessage] = React.useState(''); + const [passwordError, setPasswordError] = React.useState(false); + const [passwordErrorMessage, setPasswordErrorMessage] = React.useState(''); + const [open, setOpen] = React.useState(false); + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault(); + const data = new FormData(event.currentTarget); + console.log({ + email: data.get('email'), + password: data.get('password'), + }); + }; + + const validateInputs = () => { + const email = document.getElementById('email') as HTMLInputElement; + const password = document.getElementById('password') as HTMLInputElement; + + let isValid = true; + + if (!email.value || !/\S+@\S+\.\S+/.test(email.value)) { + setEmailError(true); + setEmailErrorMessage('Please enter a valid email address.'); + isValid = false; + } else { + setEmailError(false); + setEmailErrorMessage(''); + } + + if (!password.value || password.value.length < 6) { + setPasswordError(true); + setPasswordErrorMessage('Password must be at least 6 characters long.'); + isValid = false; + } else { + setPasswordError(false); + setPasswordErrorMessage(''); + } + + return isValid; + }; + + return ( + ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + width: { xs: '100%', sm: '450px' }, + p: { xs: 2, sm: 4 }, + gap: 2, + boxShadow: + theme.palette.mode === 'light' + ? 'rgba(0, 0, 0, 0.05) 0px 5px 15px 0px, rgba(25, 28, 33, 0.05) 0px 15px 35px -5px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px' + : 'rgba(0, 0, 0, 0.5) 0px 5px 15px 0px, rgba(25, 28, 33, 0.08) 0px 15px 35px -5px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px', + })} + > + + + Sign in + + + + Email + + + + + Password + + Forgot your password? + + + + + } + label="Remember me" + /> + + + + Don't have an account? Sign up + + + or + + + + + + ); +} diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js index 57130a724f73d4..26e2bb449ef3d6 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js @@ -1,129 +1,126 @@ import * as React from 'react'; -import Avatar from '@mui/material/Avatar'; +import PropTypes from 'prop-types'; +import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import CssBaseline from '@mui/material/CssBaseline'; -import TextField from '@mui/material/TextField'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import Link from '@mui/material/Link'; -import Paper from '@mui/material/Paper'; -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; -import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; -import Typography from '@mui/material/Typography'; +import Stack from '@mui/material/Stack'; +import ToggleButton from '@mui/material/ToggleButton'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import { createTheme, ThemeProvider } from '@mui/material/styles'; -function Copyright(props) { +import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; +import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; + +import getSignInSideTheme from './getSignInSideTheme'; +import ToggleColorMode from './ToggleColorMode'; +import SignInCard from './SignInCard'; +import Content from './Content'; + +function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) { return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - + + + + + Custom theme + + Material Design 2 + + ); } -// TODO remove, this demo shouldn't need to reset the theme. - -const defaultTheme = createTheme(); +ToggleCustomTheme.propTypes = { + showCustomTheme: PropTypes.shape({ + valueOf: PropTypes.func.isRequired, + }).isRequired, + toggleCustomTheme: PropTypes.func.isRequired, +}; export default function SignInSide() { - const handleSubmit = (event) => { - event.preventDefault(); - const data = new FormData(event.currentTarget); - console.log({ - email: data.get('email'), - password: data.get('password'), - }); + const [mode, setMode] = React.useState('light'); + const [showCustomTheme, setShowCustomTheme] = React.useState(true); + const defaultTheme = createTheme({ palette: { mode } }); + const SignInSideTheme = createTheme(getSignInSideTheme(mode)); + + const toggleColorMode = () => { + setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + }; + + const toggleCustomTheme = () => { + setShowCustomTheme((prev) => !prev); }; return ( - - - - + + ({ + backgroundImage: + theme.palette.mode === 'light' + ? 'radial-gradient(ellipse at 70% 51%, #f0f7ff, #fff)' + : 'radial-gradient(at 70% 51%, rgba(2,41,79,0.5), rgb(1, 6, 11))', + backgroundSize: 'cover', + height: { xs: 'auto', md: '100dvh' }, + pb: { xs: 12, sm: 0 }, + })} + component="main" + > + - t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900], - backgroundSize: 'cover', - backgroundPosition: 'center', + position: { sm: 'static', md: 'fixed' }, + width: '100%', + p: { xs: 2, sm: 4 }, }} - /> - - + - - - - Forgot password? - - - - - {"Don't have an account? Sign Up"} - - - - - - - - + Back + + + + + + + + + ); } diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx index 0e8d6b207eab07..f27e977ad3c71f 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx @@ -1,128 +1,127 @@ import * as React from 'react'; -import Avatar from '@mui/material/Avatar'; +import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import CssBaseline from '@mui/material/CssBaseline'; -import TextField from '@mui/material/TextField'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import Link from '@mui/material/Link'; -import Paper from '@mui/material/Paper'; -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; -import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; -import Typography from '@mui/material/Typography'; +import Stack from '@mui/material/Stack'; +import ToggleButton from '@mui/material/ToggleButton'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import { createTheme, ThemeProvider } from '@mui/material/styles'; +import { PaletteMode } from '@mui/material'; + +import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; +import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; + +import getSignInSideTheme from './getSignInSideTheme'; +import ToggleColorMode from './ToggleColorMode'; +import SignInCard from './SignInCard'; +import Content from './Content'; + +interface ToggleCustomThemeProps { + showCustomTheme: Boolean; + toggleCustomTheme: () => void; +} -function Copyright(props: any) { +function ToggleCustomTheme({ + showCustomTheme, + toggleCustomTheme, +}: ToggleCustomThemeProps) { return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - + + + + + Custom theme + + Material Design 2 + + ); } -// TODO remove, this demo shouldn't need to reset the theme. -const defaultTheme = createTheme(); - export default function SignInSide() { - const handleSubmit = (event: React.FormEvent) => { - event.preventDefault(); - const data = new FormData(event.currentTarget); - console.log({ - email: data.get('email'), - password: data.get('password'), - }); + const [mode, setMode] = React.useState('light'); + const [showCustomTheme, setShowCustomTheme] = React.useState(true); + const defaultTheme = createTheme({ palette: { mode } }); + const SignInSideTheme = createTheme(getSignInSideTheme(mode)); + + const toggleColorMode = () => { + setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + }; + + const toggleCustomTheme = () => { + setShowCustomTheme((prev) => !prev); }; return ( - - - - + + ({ + backgroundImage: + theme.palette.mode === 'light' + ? 'radial-gradient(ellipse at 70% 51%, #f0f7ff, #fff)' + : 'radial-gradient(at 70% 51%, rgba(2,41,79,0.5), rgb(1, 6, 11))', + backgroundSize: 'cover', + height: { xs: 'auto', md: '100dvh' }, + pb: { xs: 12, sm: 0 }, + })} + component="main" + > + - t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900], - backgroundSize: 'cover', - backgroundPosition: 'center', + position: { sm: 'static', md: 'fixed' }, + width: '100%', + p: { xs: 2, sm: 4 }, }} - /> - - + - - - - Forgot password? - - - - - {"Don't have an account? Sign Up"} - - - - - - - - + Back + + + + + + + + + ); } diff --git a/docs/data/material/getting-started/templates/sign-in-side/SitemarkIcon.js b/docs/data/material/getting-started/templates/sign-in-side/SitemarkIcon.js new file mode 100644 index 00000000000000..d390782f3be28e --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/SitemarkIcon.js @@ -0,0 +1,85 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; + +import SvgIcon from '@mui/material/SvgIcon'; + +/* this logo is from LogoToUse.com */ + +function SitemarkIcon({ sx }) { + return ( + + + + + + + + + + + + + + + + + ); +} + +SitemarkIcon.propTypes = { + sx: PropTypes.oneOfType([ + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]), + ), + PropTypes.func, + PropTypes.object, + ]), +}; + +export default SitemarkIcon; diff --git a/docs/data/material/getting-started/templates/sign-in-side/SitemarkIcon.tsx b/docs/data/material/getting-started/templates/sign-in-side/SitemarkIcon.tsx new file mode 100644 index 00000000000000..aee5bffc07e174 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/SitemarkIcon.tsx @@ -0,0 +1,76 @@ +import * as React from 'react'; +import { SxProps, Theme } from '@mui/system'; +import SvgIcon from '@mui/material/SvgIcon'; + +interface SitemarkIconProps { + sx?: SxProps; +} + +/* this logo is from LogoToUse.com */ + +export default function SitemarkIcon({ sx }: SitemarkIconProps) { + return ( + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.js b/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.js new file mode 100644 index 00000000000000..7e4305a7698c28 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.js @@ -0,0 +1,30 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; + +import IconButton from '@mui/material/IconButton'; + +import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded'; +import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded'; + +function ToggleColorMode({ mode, toggleColorMode }) { + return ( + + {mode === 'dark' ? ( + + ) : ( + + )} + + ); +} + +ToggleColorMode.propTypes = { + mode: PropTypes.oneOf(['dark', 'light']).isRequired, + toggleColorMode: PropTypes.func.isRequired, +}; + +export default ToggleColorMode; diff --git a/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx new file mode 100644 index 00000000000000..3783eb9d80714d --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; + +import { PaletteMode } from '@mui/material'; +import IconButton from '@mui/material/IconButton'; + +import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded'; +import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded'; + +interface ToggleColorModeProps { + mode: PaletteMode; + toggleColorMode: () => void; +} + +function ToggleColorMode({ mode, toggleColorMode }: ToggleColorModeProps) { + return ( + + {mode === 'dark' ? ( + + ) : ( + + )} + + ); +} + +export default ToggleColorMode; diff --git a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js new file mode 100644 index 00000000000000..b464dd285ddd78 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js @@ -0,0 +1,623 @@ +import * as React from 'react'; + +import { alpha } from '@mui/material/styles'; + +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; + +export const brand = { + 50: '#F0F7FF', + 100: '#CEE5FD', + 200: '#9CCCFC', + 300: '#55A6F6', + 400: '#0A66C2', + 500: '#0959AA', + 600: '#064079', + 700: '#033363', + 800: '#02294F', + 900: '#021F3B', +}; + +export const secondary = { + 50: '#F9F0FF', + 100: '#E9CEFD', + 200: '#D49CFC', + 300: '#B355F6', + 400: '#750AC2', + 500: '#6709AA', + 600: '#490679', + 700: '#3B0363', + 800: '#2F024F', + 900: '#23023B', +}; + +export const gray = { + 50: '#FBFCFE', + 100: '#EAF0F5', + 200: '#D6E2EB', + 300: '#BFCCD9', + 400: '#94A6B8', + 500: '#5B6B7C', + 600: '#4C5967', + 700: '#364049', + 800: '#131B20', + 900: '#090E10', +}; + +export const green = { + 50: '#F6FEF6', + 100: '#E3FBE3', + 200: '#C7F7C7', + 300: '#A1E8A1', + 400: '#51BC51', + 500: '#1F7A1F', + 600: '#136C13', + 700: '#0A470A', + 800: '#042F04', + 900: '#021D02', +}; + +export const red = { + 50: '#FFF0F0', + 100: '#FDCECE', + 200: '#FC9C9C', + 300: '#F65555', + 400: '#C20A0A', + 500: '#910808', + 600: '#790606', + 700: '#630303', + 800: '#4F0202', + 900: '#3B0202', +}; + +const getDesignTokens = (mode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[500], + dark: brand[800], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[100], + light: brand[300], + main: brand[400], + dark: brand[800], + }), + }, + secondary: { + light: secondary[300], + main: secondary[500], + dark: secondary[800], + ...(mode === 'dark' && { + light: secondary[400], + main: secondary[500], + dark: secondary[900], + }), + }, + warning: { + main: '#F7B538', + dark: '#F79F00', + ...(mode === 'dark' && { main: '#F7B538', dark: '#F79F00' }), + }, + error: { + light: red[50], + main: red[500], + dark: red[700], + ...(mode === 'dark' && { light: '#D32F2F', main: '#D32F2F', dark: '#B22A2A' }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + 50: gray[50], + 100: gray[100], + 200: gray[200], + 300: gray[300], + 400: gray[400], + 500: gray[500], + 600: gray[600], + 700: gray[700], + 800: gray[800], + 900: gray[900], + }, + divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5), + background: { + default: '#fff', + paper: gray[50], + ...(mode === 'dark' && { default: gray[900], paper: gray[800] }), + }, + text: { + primary: gray[800], + secondary: gray[600], + ...(mode === 'dark' && { primary: '#fff', secondary: gray[400] }), + }, + action: { + selected: `${alpha(brand[200], 0.2)}`, + ...(mode === 'dark' && { + selected: alpha(brand[800], 0.2), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: 60, + fontWeight: 600, + lineHeight: 78 / 70, + letterSpacing: -0.2, + }, + h2: { + fontSize: 48, + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: 42, + lineHeight: 1.2, + }, + h4: { + fontSize: 36, + fontWeight: 500, + lineHeight: 1.5, + }, + h5: { + fontSize: 20, + fontWeight: 600, + }, + h6: { + fontSize: 18, + }, + subtitle1: { + fontSize: 18, + }, + subtitle2: { + fontSize: 16, + }, + body1: { + fontWeight: 400, + fontSize: 15, + }, + body2: { + fontWeight: 400, + fontSize: 14, + }, + caption: { + fontWeight: 400, + fontSize: 12, + }, + }, +}); + +export default function getSignInSideTheme(mode) { + return { + ...getDesignTokens(mode), + components: { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: { + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }, + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + boxShadow: 'none', + borderRadius: '10px', + textTransform: 'none', + ...(ownerState.size === 'small' && { + maxHeight: '32px', + }), + ...(ownerState.size === 'medium' && { + height: '40px', + }), + ...(ownerState.variant === 'contained' && + ownerState.color === 'primary' && { + color: brand[50], + background: brand[500], + backgroundImage: `linear-gradient(to bottom, ${brand[400]}, ${brand[600]})`, + boxShadow: `inset 0 1px ${alpha(brand[300], 0.5)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + background: brand[400], + backgroundImage: 'none', + boxShadow: `0 0 0 1px ${alpha(brand[300], 0.5)}`, + }, + }), + ...(ownerState.variant === 'outlined' && { + backgroundColor: alpha(brand[300], 0.1), + borderColor: brand[300], + color: brand[500], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + borderColor: gray[200], + }, + }), + ...(ownerState.variant === 'text' && { + color: brand[600], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + }), + ...(theme.palette.mode === 'dark' && { + ...(ownerState.variant === 'contained' && + ownerState.color === 'primary' && { + border: `1px solid ${brand[600]}`, + backgroundImage: `linear-gradient(to bottom, ${brand[500]}, ${brand[600]})`, + backgroundColor: brand[500], + '&:hover': { + background: brand[600], + backgroundImage: 'none', + boxShadow: `0 0 0 1px ${alpha(brand[700], 0.5)}`, + }, + }), + ...(ownerState.variant === 'outlined' && { + backgroundColor: alpha(brand[600], 0.1), + borderColor: brand[700], + color: brand[300], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + color: gray[300], + '&:hover': { + backgroundColor: alpha(gray[600], 0.3), + borderColor: gray[700], + }, + }), + ...(ownerState.variant === 'text' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + }), + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...(ownerState.size === 'small' && { + height: '32px', + width: '32px', + }), + ...(ownerState.size === 'medium' && { + height: '40px', + width: '40px', + }), + color: brand[600], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + ...(theme.palette.mode === 'dark' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + }), + }, + }, + MuiDivider: { + styleOverrides: { + root: ({ theme }) => ({ + borderColor: `${alpha(gray[200], 0.8)}`, + ...(theme.palette.mode === 'dark' && { + borderColor: `${alpha(gray[700], 0.4)}`, + }), + }), + }, + }, + MuiPaper: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundImage: 'none', + backgroundColor: gray[100], + ...(theme.palette.mode === 'dark' && { + backgroundColor: gray[800], + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiOutlinedInput: { + styleOverrides: { + notchedOutline: { + border: 'none', + }, + input: { + paddingLeft: 10, + }, + root: ({ theme, ownerState }) => ({ + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, + maxHeight: '4px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + boxSizing: 'border-box', + flexGrow: 1, + height: '40px', + borderRadius: '10px', + border: '1px solid', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focused': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + ...(ownerState.color === 'error' && { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + }), + ...(theme.palette.mode === 'dark' && { + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, + maxHeight: '6px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + '&::placeholder': { + opacity: 1, + color: gray[500], + }, + }, + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + backgroundColor: alpha(gray[900], 0.8), + transition: 'border-color 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focused': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + ...(ownerState.color === 'error' && { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }), + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + backgroundColor: gray[50], + borderRadius: 10, + outline: `1px solid ${alpha(gray[200], 0.8)}`, + boxShadow: 'none', + ...(ownerState.variant === 'outlined' && { + border: 0, + boxSizing: 'border-box', + background: `linear-gradient(to bottom, #FFF, ${gray[50]})`, + }), + ...(theme.palette.mode === 'dark' && { + backgroundColor: alpha(gray[800], 0.6), + outline: `1px solid ${alpha(gray[700], 0.5)}`, + ...(ownerState.variant === 'outlined' && { + boxSizing: 'border-box', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: brand[600], + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + '&::before': { + content: '""', + position: 'absolute', + width: 0, + height: '1px', + bottom: 0, + left: 0, + backgroundColor: brand[200], + opacity: 0.7, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: '100%', + opacity: 1, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + ...(theme.palette.mode === 'dark' && { + color: brand[200], + }), + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + '& .Mui-selected': { + color: brand[500], + }, + ...(theme.palette.mode === 'dark' && { + '& .Mui-selected': { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: , + checkedIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + '&:hover': { + borderColor: brand[300], + backgroundColor: brand[600], + }, + }, + ...(theme.palette.mode === 'dark' && { + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[600], + boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.2) inset', + '&:hover': { + borderColor: brand[300], + backgroundColor: brand[800], + }, + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...(theme.palette.mode === 'dark' && { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + '&.Mui-selected': { color: brand[300] }, + }), + }), + }, + }, + MuiStack: { + defaultProps: { + useFlexGap: true, + }, + }, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx new file mode 100644 index 00000000000000..6b4da0a9489ccb --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx @@ -0,0 +1,642 @@ +import * as React from 'react'; +import type {} from '@mui/material/themeCssVarsAugmentation'; +import { ThemeOptions, alpha } from '@mui/material/styles'; +import { PaletteMode } from '@mui/material'; + +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; + +declare module '@mui/material/styles/createPalette' { + interface ColorRange { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + } + + interface PaletteColor extends ColorRange {} +} + +export const brand = { + 50: '#F0F7FF', + 100: '#CEE5FD', + 200: '#9CCCFC', + 300: '#55A6F6', + 400: '#0A66C2', + 500: '#0959AA', + 600: '#064079', + 700: '#033363', + 800: '#02294F', + 900: '#021F3B', +}; + +export const secondary = { + 50: '#F9F0FF', + 100: '#E9CEFD', + 200: '#D49CFC', + 300: '#B355F6', + 400: '#750AC2', + 500: '#6709AA', + 600: '#490679', + 700: '#3B0363', + 800: '#2F024F', + 900: '#23023B', +}; + +export const gray = { + 50: '#FBFCFE', + 100: '#EAF0F5', + 200: '#D6E2EB', + 300: '#BFCCD9', + 400: '#94A6B8', + 500: '#5B6B7C', + 600: '#4C5967', + 700: '#364049', + 800: '#131B20', + 900: '#090E10', +}; + +export const green = { + 50: '#F6FEF6', + 100: '#E3FBE3', + 200: '#C7F7C7', + 300: '#A1E8A1', + 400: '#51BC51', + 500: '#1F7A1F', + 600: '#136C13', + 700: '#0A470A', + 800: '#042F04', + 900: '#021D02', +}; + +export const red = { + 50: '#FFF0F0', + 100: '#FDCECE', + 200: '#FC9C9C', + 300: '#F65555', + 400: '#C20A0A', + 500: '#910808', + 600: '#790606', + 700: '#630303', + 800: '#4F0202', + 900: '#3B0202', +}; + +const getDesignTokens = (mode: PaletteMode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[500], + dark: brand[800], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[100], + light: brand[300], + main: brand[400], + dark: brand[800], + }), + }, + secondary: { + light: secondary[300], + main: secondary[500], + dark: secondary[800], + ...(mode === 'dark' && { + light: secondary[400], + main: secondary[500], + dark: secondary[900], + }), + }, + warning: { + main: '#F7B538', + dark: '#F79F00', + ...(mode === 'dark' && { main: '#F7B538', dark: '#F79F00' }), + }, + error: { + light: red[50], + main: red[500], + dark: red[700], + ...(mode === 'dark' && { light: '#D32F2F', main: '#D32F2F', dark: '#B22A2A' }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + 50: gray[50], + 100: gray[100], + 200: gray[200], + 300: gray[300], + 400: gray[400], + 500: gray[500], + 600: gray[600], + 700: gray[700], + 800: gray[800], + 900: gray[900], + }, + divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5), + background: { + default: '#fff', + paper: gray[50], + ...(mode === 'dark' && { default: gray[900], paper: gray[800] }), + }, + text: { + primary: gray[800], + secondary: gray[600], + ...(mode === 'dark' && { primary: '#fff', secondary: gray[400] }), + }, + action: { + selected: `${alpha(brand[200], 0.2)}`, + ...(mode === 'dark' && { + selected: alpha(brand[800], 0.2), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: 60, + fontWeight: 600, + lineHeight: 78 / 70, + letterSpacing: -0.2, + }, + h2: { + fontSize: 48, + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: 42, + lineHeight: 1.2, + }, + h4: { + fontSize: 36, + fontWeight: 500, + lineHeight: 1.5, + }, + h5: { + fontSize: 20, + fontWeight: 600, + }, + h6: { + fontSize: 18, + }, + subtitle1: { + fontSize: 18, + }, + subtitle2: { + fontSize: 16, + }, + body1: { + fontWeight: 400, + fontSize: 15, + }, + body2: { + fontWeight: 400, + fontSize: 14, + }, + caption: { + fontWeight: 400, + fontSize: 12, + }, + }, +}); + +export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { + return { + ...getDesignTokens(mode), + components: { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: { + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }, + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + boxShadow: 'none', + borderRadius: '10px', + textTransform: 'none', + ...(ownerState.size === 'small' && { + maxHeight: '32px', + }), + ...(ownerState.size === 'medium' && { + height: '40px', + }), + ...(ownerState.variant === 'contained' && + ownerState.color === 'primary' && { + color: brand[50], + background: brand[500], + backgroundImage: `linear-gradient(to bottom, ${brand[400]}, ${brand[600]})`, + boxShadow: `inset 0 1px ${alpha(brand[300], 0.5)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + background: brand[400], + backgroundImage: 'none', + boxShadow: `0 0 0 1px ${alpha(brand[300], 0.5)}`, + }, + }), + ...(ownerState.variant === 'outlined' && { + backgroundColor: alpha(brand[300], 0.1), + borderColor: brand[300], + color: brand[500], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + borderColor: gray[200], + }, + }), + ...(ownerState.variant === 'text' && { + color: brand[600], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + }), + ...(theme.palette.mode === 'dark' && { + ...(ownerState.variant === 'contained' && + ownerState.color === 'primary' && { + border: `1px solid ${brand[600]}`, + backgroundImage: `linear-gradient(to bottom, ${brand[500]}, ${brand[600]})`, + backgroundColor: brand[500], + '&:hover': { + background: brand[600], + backgroundImage: 'none', + boxShadow: `0 0 0 1px ${alpha(brand[700], 0.5)}`, + }, + }), + ...(ownerState.variant === 'outlined' && { + backgroundColor: alpha(brand[600], 0.1), + borderColor: brand[700], + color: brand[300], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + color: gray[300], + '&:hover': { + backgroundColor: alpha(gray[600], 0.3), + borderColor: gray[700], + }, + }), + ...(ownerState.variant === 'text' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + }), + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...(ownerState.size === 'small' && { + height: '32px', + width: '32px', + }), + ...(ownerState.size === 'medium' && { + height: '40px', + width: '40px', + }), + color: brand[600], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + ...(theme.palette.mode === 'dark' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + }), + }, + }, + MuiDivider: { + styleOverrides: { + root: ({ theme }) => ({ + borderColor: `${alpha(gray[200], 0.8)}`, + ...(theme.palette.mode === 'dark' && { + borderColor: `${alpha(gray[700], 0.4)}`, + }), + }), + }, + }, + MuiPaper: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundImage: 'none', + backgroundColor: gray[100], + ...(theme.palette.mode === 'dark' && { + backgroundColor: gray[800], + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiOutlinedInput: { + styleOverrides: { + notchedOutline: { + border: 'none', + }, + input: { + paddingLeft: 10, + }, + + root: ({ theme, ownerState }) => ({ + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, + maxHeight: '4px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + boxSizing: 'border-box', + flexGrow: 1, + height: '40px', + borderRadius: '10px', + border: '1px solid', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focused': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + ...(ownerState.color === 'error' && { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + }), + ...(theme.palette.mode === 'dark' && { + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, + maxHeight: '6px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + '&::placeholder': { + opacity: 1, + color: gray[500], + }, + }, + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + backgroundColor: alpha(gray[900], 0.8), + transition: 'border-color 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focused': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + ...(ownerState.color === 'error' && { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }), + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + backgroundColor: gray[50], + borderRadius: 10, + outline: `1px solid ${alpha(gray[200], 0.8)}`, + boxShadow: 'none', + ...(ownerState.variant === 'outlined' && { + border: 0, + boxSizing: 'border-box', + background: `linear-gradient(to bottom, #FFF, ${gray[50]})`, + }), + ...(theme.palette.mode === 'dark' && { + backgroundColor: alpha(gray[800], 0.6), + outline: `1px solid ${alpha(gray[700], 0.5)}`, + ...(ownerState.variant === 'outlined' && { + boxSizing: 'border-box', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: brand[600], + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + '&::before': { + content: '""', + position: 'absolute', + width: 0, + height: '1px', + bottom: 0, + left: 0, + backgroundColor: brand[200], + opacity: 0.7, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: '100%', + opacity: 1, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + ...(theme.palette.mode === 'dark' && { + color: brand[200], + }), + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + '& .Mui-selected': { + color: brand[500], + }, + ...(theme.palette.mode === 'dark' && { + '& .Mui-selected': { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: , + checkedIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + '&:hover': { + borderColor: brand[300], + backgroundColor: brand[600], + }, + }, + ...(theme.palette.mode === 'dark' && { + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[600], + boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.2) inset', + '&:hover': { + borderColor: brand[300], + backgroundColor: brand[800], + }, + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...(theme.palette.mode === 'dark' && { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + '&.Mui-selected': { color: brand[300] }, + }), + }), + }, + }, + MuiStack: { + defaultProps: { + useFlexGap: true, + }, + }, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/sign-in/CustomIcons.js b/docs/data/material/getting-started/templates/sign-in/CustomIcons.js new file mode 100644 index 00000000000000..e4a8d735bb75e6 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/CustomIcons.js @@ -0,0 +1,150 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; + +import SvgIcon from '@mui/material/SvgIcon'; + +function SitemarkIcon({ sx }) { + return ( + + + + + + + + + + + + + + + + + ); +} + +SitemarkIcon.propTypes = { + sx: PropTypes.oneOfType([ + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]), + ), + PropTypes.func, + PropTypes.object, + ]), +}; + +export { SitemarkIcon }; + +export function FacebookIcon() { + return ( + + + + + + + + + + + + + ); +} + +export function GoogleIcon() { + return ( + + + + + + + + + ); +} diff --git a/docs/data/material/getting-started/templates/sign-in/CustomIcons.tsx b/docs/data/material/getting-started/templates/sign-in/CustomIcons.tsx new file mode 100644 index 00000000000000..f66661a29dcb57 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/CustomIcons.tsx @@ -0,0 +1,141 @@ +import * as React from 'react'; +import { SxProps, Theme } from '@mui/system'; +import SvgIcon from '@mui/material/SvgIcon'; + +interface IconProps { + sx?: SxProps; +} + +export function SitemarkIcon({ sx }: IconProps) { + return ( + + + + + + + + + + + + + + + + + ); +} + +export function FacebookIcon() { + return ( + + + + + + + + + + + + + ); +} + +export function GoogleIcon() { + return ( + + + + + + + + + ); +} diff --git a/docs/data/material/getting-started/templates/sign-in/ForgotPassword.js b/docs/data/material/getting-started/templates/sign-in/ForgotPassword.js new file mode 100644 index 00000000000000..3375fb0e111c06 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/ForgotPassword.js @@ -0,0 +1,59 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; +import OutlinedInput from '@mui/material/OutlinedInput'; + +function ForgotPassword({ open, handleClose }) { + return ( + { + event.preventDefault(); + handleClose(); + }, + }} + > + Reset password + + + Enter your account's email address, and we'll send you a link to + reset your password. + + + + + + + + + ); +} + +ForgotPassword.propTypes = { + handleClose: PropTypes.func.isRequired, + open: PropTypes.bool.isRequired, +}; + +export default ForgotPassword; diff --git a/docs/data/material/getting-started/templates/sign-in/ForgotPassword.tsx b/docs/data/material/getting-started/templates/sign-in/ForgotPassword.tsx new file mode 100644 index 00000000000000..2d2dad736b9e53 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/ForgotPassword.tsx @@ -0,0 +1,56 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; +import OutlinedInput from '@mui/material/OutlinedInput'; + +interface ForgotPasswordProps { + open: boolean; + handleClose: () => void; +} + +export default function ForgotPassword({ open, handleClose }: ForgotPasswordProps) { + return ( + ) => { + event.preventDefault(); + handleClose(); + }, + }} + > + Reset password + + + Enter your account's email address, and we'll send you a link to + reset your password. + + + + + + + + + ); +} diff --git a/docs/data/material/getting-started/templates/sign-in/README.md b/docs/data/material/getting-started/templates/sign-in/README.md index 7ad1e840c69051..f9de61277a45c7 100644 --- a/docs/data/material/getting-started/templates/sign-in/README.md +++ b/docs/data/material/getting-started/templates/sign-in/README.md @@ -4,7 +4,7 @@ -1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples). +1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/next/examples). 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react. 3. Import and use the `SignIn` component. @@ -12,4 +12,4 @@ -View the demo at https://mui.com/material-ui/getting-started/templates/sign-in/. +View the demo at https://next.mui.com/material-ui/getting-started/templates/sign-in/. diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.js b/docs/data/material/getting-started/templates/sign-in/SignIn.js index 8d463953256cd5..d87dc97aca99c9 100644 --- a/docs/data/material/getting-started/templates/sign-in/SignIn.js +++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js @@ -1,36 +1,100 @@ import * as React from 'react'; -import Avatar from '@mui/material/Avatar'; +import PropTypes from 'prop-types'; +import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; +import Card from '@mui/material/Card'; +import Checkbox from '@mui/material/Checkbox'; import CssBaseline from '@mui/material/CssBaseline'; -import TextField from '@mui/material/TextField'; import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; +import Divider from '@mui/material/Divider'; +import FormLabel from '@mui/material/FormLabel'; +import FormControl from '@mui/material/FormControl'; import Link from '@mui/material/Link'; -import Grid from '@mui/material/Grid'; -import Box from '@mui/material/Box'; -import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; +import TextField from '@mui/material/TextField'; +import ToggleButton from '@mui/material/ToggleButton'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import Typography from '@mui/material/Typography'; -import Container from '@mui/material/Container'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; +import Stack from '@mui/material/Stack'; +import { alpha } from '@mui/material'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; + +import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; +import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; -function Copyright(props) { +import ForgotPassword from './ForgotPassword'; +import getSignInTheme from './getSignInTheme'; +import ToggleColorMode from './ToggleColorMode'; +import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; + +function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) { return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - + + + + + Custom theme + + Material Design 2 + + ); } -// TODO remove, this demo shouldn't need to reset the theme. - -const defaultTheme = createTheme(); +ToggleCustomTheme.propTypes = { + showCustomTheme: PropTypes.shape({ + valueOf: PropTypes.func.isRequired, + }).isRequired, + toggleCustomTheme: PropTypes.func.isRequired, +}; export default function SignIn() { + const [mode, setMode] = React.useState('light'); + const [showCustomTheme, setShowCustomTheme] = React.useState(true); + const defaultTheme = createTheme({ palette: { mode } }); + const SignInTheme = createTheme(getSignInTheme(mode)); + const [emailError, setEmailError] = React.useState(false); + const [emailErrorMessage, setEmailErrorMessage] = React.useState(''); + const [passwordError, setPasswordError] = React.useState(false); + const [passwordErrorMessage, setPasswordErrorMessage] = React.useState(''); + const [open, setOpen] = React.useState(false); + + const toggleColorMode = () => { + setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + }; + + const toggleCustomTheme = () => { + setShowCustomTheme((prev) => !prev); + }; + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + const handleSubmit = (event) => { event.preventDefault(); const data = new FormData(event.currentTarget); @@ -40,73 +104,206 @@ export default function SignIn() { }); }; + const validateInputs = () => { + const email = document.getElementById('email'); + const password = document.getElementById('password'); + + let isValid = true; + + if (!email.value || !/\S+@\S+\.\S+/.test(email.value)) { + setEmailError(true); + setEmailErrorMessage('Please enter a valid email address.'); + isValid = false; + } else { + setEmailError(false); + setEmailErrorMessage(''); + } + + if (!password.value || password.value.length < 6) { + setPasswordError(true); + setPasswordErrorMessage('Password must be at least 6 characters long.'); + isValid = false; + } else { + setPasswordError(false); + setPasswordErrorMessage(''); + } + + return isValid; + }; + return ( - - - - + + ({ + backgroundImage: + theme.palette.mode === 'light' + ? `linear-gradient(180deg, ${alpha('#CEE5FD', 0.2)}, #FFF)` + : `linear-gradient(${alpha('#02294F', 0.2)}, ${alpha('#021F3B', 0.0)})`, + backgroundRepeat: 'no-repeat', + height: { xs: 'auto', sm: '100dvh' }, + pb: { xs: 12, sm: 0 }, + })} + component="main" + > + - - - - - Sign in - - - - - } - label="Remember me" - /> - + + + + ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + width: { xs: '100%', sm: '450px' }, + p: { xs: 2, sm: 4 }, + gap: 4, + boxShadow: + theme.palette.mode === 'light' + ? 'rgba(0, 0, 0, 0.05) 0px 5px 15px 0px, rgba(25, 28, 33, 0.05) 0px 15px 35px -5px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px' + : 'rgba(0, 0, 0, 0.5) 0px 5px 15px 0px, rgba(25, 28, 33, 0.08) 0px 15px 35px -5px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px', + })} + > + + + Sign in + + - Sign In - - - - - Forgot password? - - - - - {"Don't have an account? Sign Up"} - - - - - - - + + Email + + + + + Password + + Forgot your password? + + + + + } + label="Remember me" + /> + + + + Don't have an account? Sign up + + + or + + + + + + + + ); } diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx index 8b34d60e356568..0e7839d79d8388 100644 --- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx +++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx @@ -1,35 +1,100 @@ import * as React from 'react'; -import Avatar from '@mui/material/Avatar'; +import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; +import Card from '@mui/material/Card'; +import Checkbox from '@mui/material/Checkbox'; import CssBaseline from '@mui/material/CssBaseline'; -import TextField from '@mui/material/TextField'; import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; +import Divider from '@mui/material/Divider'; +import FormLabel from '@mui/material/FormLabel'; +import FormControl from '@mui/material/FormControl'; import Link from '@mui/material/Link'; -import Grid from '@mui/material/Grid'; -import Box from '@mui/material/Box'; -import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; +import TextField from '@mui/material/TextField'; +import ToggleButton from '@mui/material/ToggleButton'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import Typography from '@mui/material/Typography'; -import Container from '@mui/material/Container'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; +import Stack from '@mui/material/Stack'; +import { alpha, PaletteMode } from '@mui/material'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; + +import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; +import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; -function Copyright(props: any) { +import ForgotPassword from './ForgotPassword'; +import getSignInTheme from './getSignInTheme'; +import ToggleColorMode from './ToggleColorMode'; +import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; + +interface ToggleCustomThemeProps { + showCustomTheme: Boolean; + toggleCustomTheme: () => void; +} + +function ToggleCustomTheme({ + showCustomTheme, + toggleCustomTheme, +}: ToggleCustomThemeProps) { return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - + + + + + Custom theme + + Material Design 2 + + ); } -// TODO remove, this demo shouldn't need to reset the theme. -const defaultTheme = createTheme(); - export default function SignIn() { + const [mode, setMode] = React.useState('light'); + const [showCustomTheme, setShowCustomTheme] = React.useState(true); + const defaultTheme = createTheme({ palette: { mode } }); + const SignInTheme = createTheme(getSignInTheme(mode)); + const [emailError, setEmailError] = React.useState(false); + const [emailErrorMessage, setEmailErrorMessage] = React.useState(''); + const [passwordError, setPasswordError] = React.useState(false); + const [passwordErrorMessage, setPasswordErrorMessage] = React.useState(''); + const [open, setOpen] = React.useState(false); + + const toggleColorMode = () => { + setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + }; + + const toggleCustomTheme = () => { + setShowCustomTheme((prev) => !prev); + }; + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); const data = new FormData(event.currentTarget); @@ -39,73 +104,206 @@ export default function SignIn() { }); }; + const validateInputs = () => { + const email = document.getElementById('email') as HTMLInputElement; + const password = document.getElementById('password') as HTMLInputElement; + + let isValid = true; + + if (!email.value || !/\S+@\S+\.\S+/.test(email.value)) { + setEmailError(true); + setEmailErrorMessage('Please enter a valid email address.'); + isValid = false; + } else { + setEmailError(false); + setEmailErrorMessage(''); + } + + if (!password.value || password.value.length < 6) { + setPasswordError(true); + setPasswordErrorMessage('Password must be at least 6 characters long.'); + isValid = false; + } else { + setPasswordError(false); + setPasswordErrorMessage(''); + } + + return isValid; + }; + return ( - - - - + + ({ + backgroundImage: + theme.palette.mode === 'light' + ? `linear-gradient(180deg, ${alpha('#CEE5FD', 0.2)}, #FFF)` + : `linear-gradient(${alpha('#02294F', 0.2)}, ${alpha('#021F3B', 0.0)})`, + backgroundRepeat: 'no-repeat', + height: { xs: 'auto', sm: '100dvh' }, + pb: { xs: 12, sm: 0 }, + })} + component="main" + > + - - - - - Sign in - - - - - } - label="Remember me" - /> - + + + + ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + width: { xs: '100%', sm: '450px' }, + p: { xs: 2, sm: 4 }, + gap: 4, + boxShadow: + theme.palette.mode === 'light' + ? 'rgba(0, 0, 0, 0.05) 0px 5px 15px 0px, rgba(25, 28, 33, 0.05) 0px 15px 35px -5px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px' + : 'rgba(0, 0, 0, 0.5) 0px 5px 15px 0px, rgba(25, 28, 33, 0.08) 0px 15px 35px -5px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px', + })} + > + + + Sign in + + - Sign In - - - - - Forgot password? - - - - - {"Don't have an account? Sign Up"} - - - - - - - + + Email + + + + + Password + + Forgot your password? + + + + + } + label="Remember me" + /> + + + + Don't have an account? Sign up + + + or + + + + + + + + ); } diff --git a/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.js b/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.js new file mode 100644 index 00000000000000..7e4305a7698c28 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.js @@ -0,0 +1,30 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; + +import IconButton from '@mui/material/IconButton'; + +import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded'; +import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded'; + +function ToggleColorMode({ mode, toggleColorMode }) { + return ( + + {mode === 'dark' ? ( + + ) : ( + + )} + + ); +} + +ToggleColorMode.propTypes = { + mode: PropTypes.oneOf(['dark', 'light']).isRequired, + toggleColorMode: PropTypes.func.isRequired, +}; + +export default ToggleColorMode; diff --git a/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx new file mode 100644 index 00000000000000..3783eb9d80714d --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; + +import { PaletteMode } from '@mui/material'; +import IconButton from '@mui/material/IconButton'; + +import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded'; +import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded'; + +interface ToggleColorModeProps { + mode: PaletteMode; + toggleColorMode: () => void; +} + +function ToggleColorMode({ mode, toggleColorMode }: ToggleColorModeProps) { + return ( + + {mode === 'dark' ? ( + + ) : ( + + )} + + ); +} + +export default ToggleColorMode; diff --git a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js new file mode 100644 index 00000000000000..1e788763faec22 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js @@ -0,0 +1,623 @@ +import * as React from 'react'; + +import { alpha } from '@mui/material/styles'; + +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; + +export const brand = { + 50: '#F0F7FF', + 100: '#CEE5FD', + 200: '#9CCCFC', + 300: '#55A6F6', + 400: '#0A66C2', + 500: '#0959AA', + 600: '#064079', + 700: '#033363', + 800: '#02294F', + 900: '#021F3B', +}; + +export const secondary = { + 50: '#F9F0FF', + 100: '#E9CEFD', + 200: '#D49CFC', + 300: '#B355F6', + 400: '#750AC2', + 500: '#6709AA', + 600: '#490679', + 700: '#3B0363', + 800: '#2F024F', + 900: '#23023B', +}; + +export const gray = { + 50: '#FBFCFE', + 100: '#EAF0F5', + 200: '#D6E2EB', + 300: '#BFCCD9', + 400: '#94A6B8', + 500: '#5B6B7C', + 600: '#4C5967', + 700: '#364049', + 800: '#131B20', + 900: '#090E10', +}; + +export const green = { + 50: '#F6FEF6', + 100: '#E3FBE3', + 200: '#C7F7C7', + 300: '#A1E8A1', + 400: '#51BC51', + 500: '#1F7A1F', + 600: '#136C13', + 700: '#0A470A', + 800: '#042F04', + 900: '#021D02', +}; + +export const red = { + 50: '#FFF0F0', + 100: '#FDCECE', + 200: '#FC9C9C', + 300: '#F65555', + 400: '#C20A0A', + 500: '#910808', + 600: '#790606', + 700: '#630303', + 800: '#4F0202', + 900: '#3B0202', +}; + +const getDesignTokens = (mode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[500], + dark: brand[800], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[100], + light: brand[300], + main: brand[400], + dark: brand[800], + }), + }, + secondary: { + light: secondary[300], + main: secondary[500], + dark: secondary[800], + ...(mode === 'dark' && { + light: secondary[400], + main: secondary[500], + dark: secondary[900], + }), + }, + warning: { + main: '#F7B538', + dark: '#F79F00', + ...(mode === 'dark' && { main: '#F7B538', dark: '#F79F00' }), + }, + error: { + light: red[50], + main: red[500], + dark: red[700], + ...(mode === 'dark' && { light: '#D32F2F', main: '#D32F2F', dark: '#B22A2A' }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + 50: gray[50], + 100: gray[100], + 200: gray[200], + 300: gray[300], + 400: gray[400], + 500: gray[500], + 600: gray[600], + 700: gray[700], + 800: gray[800], + 900: gray[900], + }, + divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5), + background: { + default: '#fff', + paper: gray[50], + ...(mode === 'dark' && { default: gray[900], paper: gray[800] }), + }, + text: { + primary: gray[800], + secondary: gray[600], + ...(mode === 'dark' && { primary: '#fff', secondary: gray[400] }), + }, + action: { + selected: `${alpha(brand[200], 0.2)}`, + ...(mode === 'dark' && { + selected: alpha(brand[800], 0.2), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: 60, + fontWeight: 600, + lineHeight: 78 / 70, + letterSpacing: -0.2, + }, + h2: { + fontSize: 48, + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: 42, + lineHeight: 1.2, + }, + h4: { + fontSize: 36, + fontWeight: 500, + lineHeight: 1.5, + }, + h5: { + fontSize: 20, + fontWeight: 600, + }, + h6: { + fontSize: 18, + }, + subtitle1: { + fontSize: 18, + }, + subtitle2: { + fontSize: 16, + }, + body1: { + fontWeight: 400, + fontSize: 15, + }, + body2: { + fontWeight: 400, + fontSize: 14, + }, + caption: { + fontWeight: 400, + fontSize: 12, + }, + }, +}); + +export default function getSignInTheme(mode) { + return { + ...getDesignTokens(mode), + components: { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: { + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }, + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + boxShadow: 'none', + borderRadius: '10px', + textTransform: 'none', + ...(ownerState.size === 'small' && { + maxHeight: '32px', + }), + ...(ownerState.size === 'medium' && { + height: '40px', + }), + ...(ownerState.variant === 'contained' && + ownerState.color === 'primary' && { + color: brand[50], + background: brand[500], + backgroundImage: `linear-gradient(to bottom, ${brand[400]}, ${brand[600]})`, + boxShadow: `inset 0 1px ${alpha(brand[300], 0.5)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + background: brand[400], + backgroundImage: 'none', + boxShadow: `0 0 0 1px ${alpha(brand[300], 0.5)}`, + }, + }), + ...(ownerState.variant === 'outlined' && { + backgroundColor: alpha(brand[300], 0.1), + borderColor: brand[300], + color: brand[500], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + borderColor: gray[200], + }, + }), + ...(ownerState.variant === 'text' && { + color: brand[600], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + }), + ...(theme.palette.mode === 'dark' && { + ...(ownerState.variant === 'contained' && + ownerState.color === 'primary' && { + border: `1px solid ${brand[600]}`, + backgroundImage: `linear-gradient(to bottom, ${brand[500]}, ${brand[600]})`, + backgroundColor: brand[500], + '&:hover': { + background: brand[600], + backgroundImage: 'none', + boxShadow: `0 0 0 1px ${alpha(brand[700], 0.5)}`, + }, + }), + ...(ownerState.variant === 'outlined' && { + backgroundColor: alpha(brand[600], 0.1), + borderColor: brand[700], + color: brand[300], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + color: gray[300], + '&:hover': { + backgroundColor: alpha(gray[600], 0.3), + borderColor: gray[700], + }, + }), + ...(ownerState.variant === 'text' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + }), + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...(ownerState.size === 'small' && { + height: '32px', + width: '32px', + }), + ...(ownerState.size === 'medium' && { + height: '40px', + width: '40px', + }), + color: brand[600], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + ...(theme.palette.mode === 'dark' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + }), + }, + }, + MuiDivider: { + styleOverrides: { + root: ({ theme }) => ({ + borderColor: `${alpha(gray[200], 0.8)}`, + ...(theme.palette.mode === 'dark' && { + borderColor: `${alpha(gray[700], 0.4)}`, + }), + }), + }, + }, + MuiPaper: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundImage: 'none', + backgroundColor: gray[100], + ...(theme.palette.mode === 'dark' && { + backgroundColor: gray[800], + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + backgroundColor: gray[50], + borderRadius: 10, + outline: `1px solid ${alpha(gray[200], 0.8)}`, + boxShadow: 'none', + ...(ownerState.variant === 'outlined' && { + border: 0, + boxSizing: 'border-box', + background: `linear-gradient(to bottom, #FFF, ${gray[50]})`, + }), + ...(theme.palette.mode === 'dark' && { + backgroundColor: alpha(gray[800], 0.6), + outline: `1px solid ${alpha(gray[700], 0.5)}`, + ...(ownerState.variant === 'outlined' && { + boxSizing: 'border-box', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), + }), + }), + }, + }, + MuiOutlinedInput: { + styleOverrides: { + notchedOutline: { + border: 'none', + }, + input: { + paddingLeft: 10, + }, + root: ({ theme, ownerState }) => ({ + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, + maxHeight: '4px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + boxSizing: 'border-box', + flexGrow: 1, + height: '40px', + borderRadius: '10px', + border: '1px solid', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focused': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + ...(ownerState.color === 'error' && { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + }), + ...(theme.palette.mode === 'dark' && { + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, + maxHeight: '6px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + '&::placeholder': { + opacity: 1, + color: gray[500], + }, + }, + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + backgroundColor: alpha(gray[900], 0.8), + transition: 'border-color 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focused': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + ...(ownerState.color === 'error' && { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }), + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: brand[600], + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + '&::before': { + content: '""', + position: 'absolute', + width: 0, + height: '1px', + bottom: 0, + left: 0, + backgroundColor: brand[200], + opacity: 0.7, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: '100%', + opacity: 1, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + ...(theme.palette.mode === 'dark' && { + color: brand[200], + }), + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + '& .Mui-selected': { + color: brand[500], + }, + ...(theme.palette.mode === 'dark' && { + '& .Mui-selected': { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: , + checkedIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + '&:hover': { + borderColor: brand[300], + backgroundColor: brand[600], + }, + }, + ...(theme.palette.mode === 'dark' && { + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[600], + boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.2) inset', + '&:hover': { + borderColor: brand[300], + backgroundColor: brand[800], + }, + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...(theme.palette.mode === 'dark' && { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + '&.Mui-selected': { color: brand[300] }, + }), + }), + }, + }, + MuiStack: { + defaultProps: { + useFlexGap: true, + }, + }, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx new file mode 100644 index 00000000000000..a5375811d8533a --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx @@ -0,0 +1,642 @@ +import * as React from 'react'; +import type {} from '@mui/material/themeCssVarsAugmentation'; +import { ThemeOptions, alpha } from '@mui/material/styles'; +import { PaletteMode } from '@mui/material'; + +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; + +declare module '@mui/material/styles/createPalette' { + interface ColorRange { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + } + + interface PaletteColor extends ColorRange {} +} + +export const brand = { + 50: '#F0F7FF', + 100: '#CEE5FD', + 200: '#9CCCFC', + 300: '#55A6F6', + 400: '#0A66C2', + 500: '#0959AA', + 600: '#064079', + 700: '#033363', + 800: '#02294F', + 900: '#021F3B', +}; + +export const secondary = { + 50: '#F9F0FF', + 100: '#E9CEFD', + 200: '#D49CFC', + 300: '#B355F6', + 400: '#750AC2', + 500: '#6709AA', + 600: '#490679', + 700: '#3B0363', + 800: '#2F024F', + 900: '#23023B', +}; + +export const gray = { + 50: '#FBFCFE', + 100: '#EAF0F5', + 200: '#D6E2EB', + 300: '#BFCCD9', + 400: '#94A6B8', + 500: '#5B6B7C', + 600: '#4C5967', + 700: '#364049', + 800: '#131B20', + 900: '#090E10', +}; + +export const green = { + 50: '#F6FEF6', + 100: '#E3FBE3', + 200: '#C7F7C7', + 300: '#A1E8A1', + 400: '#51BC51', + 500: '#1F7A1F', + 600: '#136C13', + 700: '#0A470A', + 800: '#042F04', + 900: '#021D02', +}; + +export const red = { + 50: '#FFF0F0', + 100: '#FDCECE', + 200: '#FC9C9C', + 300: '#F65555', + 400: '#C20A0A', + 500: '#910808', + 600: '#790606', + 700: '#630303', + 800: '#4F0202', + 900: '#3B0202', +}; + +const getDesignTokens = (mode: PaletteMode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[500], + dark: brand[800], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[100], + light: brand[300], + main: brand[400], + dark: brand[800], + }), + }, + secondary: { + light: secondary[300], + main: secondary[500], + dark: secondary[800], + ...(mode === 'dark' && { + light: secondary[400], + main: secondary[500], + dark: secondary[900], + }), + }, + warning: { + main: '#F7B538', + dark: '#F79F00', + ...(mode === 'dark' && { main: '#F7B538', dark: '#F79F00' }), + }, + error: { + light: red[50], + main: red[500], + dark: red[700], + ...(mode === 'dark' && { light: '#D32F2F', main: '#D32F2F', dark: '#B22A2A' }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + 50: gray[50], + 100: gray[100], + 200: gray[200], + 300: gray[300], + 400: gray[400], + 500: gray[500], + 600: gray[600], + 700: gray[700], + 800: gray[800], + 900: gray[900], + }, + divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5), + background: { + default: '#fff', + paper: gray[50], + ...(mode === 'dark' && { default: gray[900], paper: gray[800] }), + }, + text: { + primary: gray[800], + secondary: gray[600], + ...(mode === 'dark' && { primary: '#fff', secondary: gray[400] }), + }, + action: { + selected: `${alpha(brand[200], 0.2)}`, + ...(mode === 'dark' && { + selected: alpha(brand[800], 0.2), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: 60, + fontWeight: 600, + lineHeight: 78 / 70, + letterSpacing: -0.2, + }, + h2: { + fontSize: 48, + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: 42, + lineHeight: 1.2, + }, + h4: { + fontSize: 36, + fontWeight: 500, + lineHeight: 1.5, + }, + h5: { + fontSize: 20, + fontWeight: 600, + }, + h6: { + fontSize: 18, + }, + subtitle1: { + fontSize: 18, + }, + subtitle2: { + fontSize: 16, + }, + body1: { + fontWeight: 400, + fontSize: 15, + }, + body2: { + fontWeight: 400, + fontSize: 14, + }, + caption: { + fontWeight: 400, + fontSize: 12, + }, + }, +}); + +export default function getSignInTheme(mode: PaletteMode): ThemeOptions { + return { + ...getDesignTokens(mode), + components: { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: { + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }, + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + boxShadow: 'none', + borderRadius: '10px', + textTransform: 'none', + ...(ownerState.size === 'small' && { + maxHeight: '32px', + }), + ...(ownerState.size === 'medium' && { + height: '40px', + }), + ...(ownerState.variant === 'contained' && + ownerState.color === 'primary' && { + color: brand[50], + background: brand[500], + backgroundImage: `linear-gradient(to bottom, ${brand[400]}, ${brand[600]})`, + boxShadow: `inset 0 1px ${alpha(brand[300], 0.5)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + background: brand[400], + backgroundImage: 'none', + boxShadow: `0 0 0 1px ${alpha(brand[300], 0.5)}`, + }, + }), + ...(ownerState.variant === 'outlined' && { + backgroundColor: alpha(brand[300], 0.1), + borderColor: brand[300], + color: brand[500], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + borderColor: gray[200], + }, + }), + ...(ownerState.variant === 'text' && { + color: brand[600], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + }), + ...(theme.palette.mode === 'dark' && { + ...(ownerState.variant === 'contained' && + ownerState.color === 'primary' && { + border: `1px solid ${brand[600]}`, + backgroundImage: `linear-gradient(to bottom, ${brand[500]}, ${brand[600]})`, + backgroundColor: brand[500], + '&:hover': { + background: brand[600], + backgroundImage: 'none', + boxShadow: `0 0 0 1px ${alpha(brand[700], 0.5)}`, + }, + }), + ...(ownerState.variant === 'outlined' && { + backgroundColor: alpha(brand[600], 0.1), + borderColor: brand[700], + color: brand[300], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + color: gray[300], + '&:hover': { + backgroundColor: alpha(gray[600], 0.3), + borderColor: gray[700], + }, + }), + ...(ownerState.variant === 'text' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + }), + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...(ownerState.size === 'small' && { + height: '32px', + width: '32px', + }), + ...(ownerState.size === 'medium' && { + height: '40px', + width: '40px', + }), + color: brand[600], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + ...(theme.palette.mode === 'dark' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + }), + }, + }, + MuiDivider: { + styleOverrides: { + root: ({ theme }) => ({ + borderColor: `${alpha(gray[200], 0.8)}`, + ...(theme.palette.mode === 'dark' && { + borderColor: `${alpha(gray[700], 0.4)}`, + }), + }), + }, + }, + MuiPaper: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundImage: 'none', + backgroundColor: gray[100], + ...(theme.palette.mode === 'dark' && { + backgroundColor: gray[800], + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + backgroundColor: gray[50], + borderRadius: 10, + outline: `1px solid ${alpha(gray[200], 0.8)}`, + boxShadow: 'none', + ...(ownerState.variant === 'outlined' && { + border: 0, + boxSizing: 'border-box', + background: `linear-gradient(to bottom, #FFF, ${gray[50]})`, + }), + ...(theme.palette.mode === 'dark' && { + backgroundColor: alpha(gray[800], 0.6), + outline: `1px solid ${alpha(gray[700], 0.5)}`, + ...(ownerState.variant === 'outlined' && { + boxSizing: 'border-box', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), + }), + }), + }, + }, + MuiOutlinedInput: { + styleOverrides: { + notchedOutline: { + border: 'none', + }, + input: { + paddingLeft: 10, + }, + + root: ({ theme, ownerState }) => ({ + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, + maxHeight: '4px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + boxSizing: 'border-box', + flexGrow: 1, + height: '40px', + borderRadius: '10px', + border: '1px solid', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focused': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + ...(ownerState.color === 'error' && { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + }), + ...(theme.palette.mode === 'dark' && { + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, + maxHeight: '6px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + '&::placeholder': { + opacity: 1, + color: gray[500], + }, + }, + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + backgroundColor: alpha(gray[900], 0.8), + transition: 'border-color 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focused': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + ...(ownerState.color === 'error' && { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }), + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: brand[600], + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + '&::before': { + content: '""', + position: 'absolute', + width: 0, + height: '1px', + bottom: 0, + left: 0, + backgroundColor: brand[200], + opacity: 0.7, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: '100%', + opacity: 1, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + ...(theme.palette.mode === 'dark' && { + color: brand[200], + }), + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + '& .Mui-selected': { + color: brand[500], + }, + ...(theme.palette.mode === 'dark' && { + '& .Mui-selected': { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: , + checkedIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + '&:hover': { + borderColor: brand[300], + backgroundColor: brand[600], + }, + }, + ...(theme.palette.mode === 'dark' && { + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[600], + boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.2) inset', + '&:hover': { + borderColor: brand[300], + backgroundColor: brand[800], + }, + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...(theme.palette.mode === 'dark' && { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + '&.Mui-selected': { color: brand[300] }, + }), + }), + }, + }, + MuiStack: { + defaultProps: { + useFlexGap: true, + }, + }, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/sign-up/CustomIcons.js b/docs/data/material/getting-started/templates/sign-up/CustomIcons.js new file mode 100644 index 00000000000000..e4a8d735bb75e6 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/CustomIcons.js @@ -0,0 +1,150 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; + +import SvgIcon from '@mui/material/SvgIcon'; + +function SitemarkIcon({ sx }) { + return ( + + + + + + + + + + + + + + + + + ); +} + +SitemarkIcon.propTypes = { + sx: PropTypes.oneOfType([ + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]), + ), + PropTypes.func, + PropTypes.object, + ]), +}; + +export { SitemarkIcon }; + +export function FacebookIcon() { + return ( + + + + + + + + + + + + + ); +} + +export function GoogleIcon() { + return ( + + + + + + + + + ); +} diff --git a/docs/data/material/getting-started/templates/sign-up/CustomIcons.tsx b/docs/data/material/getting-started/templates/sign-up/CustomIcons.tsx new file mode 100644 index 00000000000000..f66661a29dcb57 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/CustomIcons.tsx @@ -0,0 +1,141 @@ +import * as React from 'react'; +import { SxProps, Theme } from '@mui/system'; +import SvgIcon from '@mui/material/SvgIcon'; + +interface IconProps { + sx?: SxProps; +} + +export function SitemarkIcon({ sx }: IconProps) { + return ( + + + + + + + + + + + + + + + + + ); +} + +export function FacebookIcon() { + return ( + + + + + + + + + + + + + ); +} + +export function GoogleIcon() { + return ( + + + + + + + + + ); +} diff --git a/docs/data/material/getting-started/templates/sign-up/README.md b/docs/data/material/getting-started/templates/sign-up/README.md index aa89e2950d0e36..f46cae4ad63fe5 100644 --- a/docs/data/material/getting-started/templates/sign-up/README.md +++ b/docs/data/material/getting-started/templates/sign-up/README.md @@ -4,7 +4,7 @@ -1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples). +1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/next/examples). 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react. 3. Import and use the `SignUp` component. @@ -12,4 +12,4 @@ -View the demo at https://mui.com/material-ui/getting-started/templates/sign-up/. +View the demo at https://next.mui.com/material-ui/getting-started/templates/sign-up/. diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.js b/docs/data/material/getting-started/templates/sign-up/SignUp.js index d2d7739277e7ae..5b8d9c0c02ce82 100644 --- a/docs/data/material/getting-started/templates/sign-up/SignUp.js +++ b/docs/data/material/getting-started/templates/sign-up/SignUp.js @@ -1,133 +1,329 @@ import * as React from 'react'; -import Avatar from '@mui/material/Avatar'; +import PropTypes from 'prop-types'; +import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; +import Card from '@mui/material/Card'; +import Checkbox from '@mui/material/Checkbox'; import CssBaseline from '@mui/material/CssBaseline'; -import TextField from '@mui/material/TextField'; +import Divider from '@mui/material/Divider'; import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; +import FormLabel from '@mui/material/FormLabel'; +import FormControl from '@mui/material/FormControl'; import Link from '@mui/material/Link'; -import Grid from '@mui/material/Grid'; -import Box from '@mui/material/Box'; -import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; +import TextField from '@mui/material/TextField'; +import ToggleButton from '@mui/material/ToggleButton'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import Typography from '@mui/material/Typography'; -import Container from '@mui/material/Container'; +import Stack from '@mui/material/Stack'; +import { alpha } from '@mui/material'; import { createTheme, ThemeProvider } from '@mui/material/styles'; -function Copyright(props) { +import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; +import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; + +import getSignUpTheme from './getSignUpTheme'; +import ToggleColorMode from './ToggleColorMode'; +import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; + +function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) { return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - + + + + + Custom theme + + Material Design 2 + + ); } -// TODO remove, this demo shouldn't need to reset the theme. - -const defaultTheme = createTheme(); +ToggleCustomTheme.propTypes = { + showCustomTheme: PropTypes.shape({ + valueOf: PropTypes.func.isRequired, + }).isRequired, + toggleCustomTheme: PropTypes.func.isRequired, +}; export default function SignUp() { + const [mode, setMode] = React.useState('light'); + const [showCustomTheme, setShowCustomTheme] = React.useState(true); + const defaultTheme = createTheme({ palette: { mode } }); + const SignUpTheme = createTheme(getSignUpTheme(mode)); + const [emailError, setEmailError] = React.useState(false); + const [emailErrorMessage, setEmailErrorMessage] = React.useState(''); + const [passwordError, setPasswordError] = React.useState(false); + const [passwordErrorMessage, setPasswordErrorMessage] = React.useState(''); + const [nameError, setNameError] = React.useState(false); + const [nameErrorMessage, setNameErrorMessage] = React.useState(''); + const [lastNameError, setLastNameError] = React.useState(false); + const [lastNameErrorMessage, setLastNameErrorMessage] = React.useState(''); + + const validateInputs = () => { + const email = document.getElementById('email'); + const password = document.getElementById('password'); + const name = document.getElementById('name'); + const lastName = document.getElementById('lastName'); + + let isValid = true; + + if (!email.value || !/\S+@\S+\.\S+/.test(email.value)) { + setEmailError(true); + setEmailErrorMessage('Please enter a valid email address.'); + isValid = false; + } else { + setEmailError(false); + setEmailErrorMessage(''); + } + + if (!password.value || password.value.length < 6) { + setPasswordError(true); + setPasswordErrorMessage('Password must be at least 6 characters long.'); + isValid = false; + } else { + setPasswordError(false); + setPasswordErrorMessage(''); + } + + if (!name.value || name.value.length < 1) { + setNameError(true); + setNameErrorMessage('Name is required.'); + isValid = false; + } else { + setNameError(false); + setNameErrorMessage(''); + } + + if (!lastName.value || lastName.value.length < 1) { + setLastNameError(true); + setLastNameErrorMessage('Name is required.'); + isValid = false; + } else { + setLastNameError(false); + setLastNameErrorMessage(''); + } + + return isValid; + }; + + const toggleColorMode = () => { + setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + }; + + const toggleCustomTheme = () => { + setShowCustomTheme((prev) => !prev); + }; + const handleSubmit = (event) => { event.preventDefault(); const data = new FormData(event.currentTarget); console.log({ + name: data.get('name'), + lastName: data.get('lastName'), email: data.get('email'), password: data.get('password'), }); }; return ( - - - - + + ({ + backgroundImage: + theme.palette.mode === 'light' + ? `linear-gradient(180deg, ${alpha('#CEE5FD', 0.2)}, #FFF)` + : `linear-gradient(${alpha('#02294F', 0.2)}, ${alpha('#021F3B', 0.0)})`, + backgroundRepeat: 'no-repeat', + height: { xs: 'auto', sm: '100dvh' }, + pb: { xs: 12, sm: 0 }, + })} + component="main" + > + - - - - - Sign up - - - - + + + + + ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + width: { xs: '100%', sm: '450px' }, + p: { xs: 2, sm: 4 }, + gap: 4, + boxShadow: + theme.palette.mode === 'light' + ? 'rgba(0, 0, 0, 0.05) 0px 5px 15px 0px, rgba(25, 28, 33, 0.05) 0px 15px 35px -5px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px' + : 'rgba(0, 0, 0, 0.5) 0px 5px 15px 0px, rgba(25, 28, 33, 0.08) 0px 15px 35px -5px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px', + })} + > + + + Sign up + + + + Name - - + + + Last name - - + + + Email - - + + + Password - - - } - label="I want to receive inspiration, marketing promotions and updates via email." - /> - - - - - - - Already have an account? Sign in - - - - - - - + + } + label="I want to receive updates via email." + /> + + + Already have an account? Sign in + + + + or + + + + + + + + + ); } diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx index 827ed6945af463..d1974095423d59 100644 --- a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx +++ b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx @@ -1,132 +1,329 @@ import * as React from 'react'; -import Avatar from '@mui/material/Avatar'; +import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; +import Card from '@mui/material/Card'; +import Checkbox from '@mui/material/Checkbox'; import CssBaseline from '@mui/material/CssBaseline'; -import TextField from '@mui/material/TextField'; +import Divider from '@mui/material/Divider'; import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; +import FormLabel from '@mui/material/FormLabel'; +import FormControl from '@mui/material/FormControl'; import Link from '@mui/material/Link'; -import Grid from '@mui/material/Grid'; -import Box from '@mui/material/Box'; -import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; +import TextField from '@mui/material/TextField'; +import ToggleButton from '@mui/material/ToggleButton'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import Typography from '@mui/material/Typography'; -import Container from '@mui/material/Container'; +import Stack from '@mui/material/Stack'; +import { alpha, PaletteMode } from '@mui/material'; import { createTheme, ThemeProvider } from '@mui/material/styles'; -function Copyright(props: any) { +import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; +import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; + +import getSignUpTheme from './getSignUpTheme'; +import ToggleColorMode from './ToggleColorMode'; +import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; + +interface ToggleCustomThemeProps { + showCustomTheme: Boolean; + toggleCustomTheme: () => void; +} + +function ToggleCustomTheme({ + showCustomTheme, + toggleCustomTheme, +}: ToggleCustomThemeProps) { return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - + + + + + Custom theme + + Material Design 2 + + ); } -// TODO remove, this demo shouldn't need to reset the theme. -const defaultTheme = createTheme(); - export default function SignUp() { + const [mode, setMode] = React.useState('light'); + const [showCustomTheme, setShowCustomTheme] = React.useState(true); + const defaultTheme = createTheme({ palette: { mode } }); + const SignUpTheme = createTheme(getSignUpTheme(mode)); + const [emailError, setEmailError] = React.useState(false); + const [emailErrorMessage, setEmailErrorMessage] = React.useState(''); + const [passwordError, setPasswordError] = React.useState(false); + const [passwordErrorMessage, setPasswordErrorMessage] = React.useState(''); + const [nameError, setNameError] = React.useState(false); + const [nameErrorMessage, setNameErrorMessage] = React.useState(''); + const [lastNameError, setLastNameError] = React.useState(false); + const [lastNameErrorMessage, setLastNameErrorMessage] = React.useState(''); + + const validateInputs = () => { + const email = document.getElementById('email') as HTMLInputElement; + const password = document.getElementById('password') as HTMLInputElement; + const name = document.getElementById('name') as HTMLInputElement; + const lastName = document.getElementById('lastName') as HTMLInputElement; + + let isValid = true; + + if (!email.value || !/\S+@\S+\.\S+/.test(email.value)) { + setEmailError(true); + setEmailErrorMessage('Please enter a valid email address.'); + isValid = false; + } else { + setEmailError(false); + setEmailErrorMessage(''); + } + + if (!password.value || password.value.length < 6) { + setPasswordError(true); + setPasswordErrorMessage('Password must be at least 6 characters long.'); + isValid = false; + } else { + setPasswordError(false); + setPasswordErrorMessage(''); + } + + if (!name.value || name.value.length < 1) { + setNameError(true); + setNameErrorMessage('Name is required.'); + isValid = false; + } else { + setNameError(false); + setNameErrorMessage(''); + } + + if (!lastName.value || lastName.value.length < 1) { + setLastNameError(true); + setLastNameErrorMessage('Name is required.'); + isValid = false; + } else { + setLastNameError(false); + setLastNameErrorMessage(''); + } + + return isValid; + }; + + const toggleColorMode = () => { + setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + }; + + const toggleCustomTheme = () => { + setShowCustomTheme((prev) => !prev); + }; + const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); const data = new FormData(event.currentTarget); console.log({ + name: data.get('name'), + lastName: data.get('lastName'), email: data.get('email'), password: data.get('password'), }); }; return ( - - - - + + ({ + backgroundImage: + theme.palette.mode === 'light' + ? `linear-gradient(180deg, ${alpha('#CEE5FD', 0.2)}, #FFF)` + : `linear-gradient(${alpha('#02294F', 0.2)}, ${alpha('#021F3B', 0.0)})`, + backgroundRepeat: 'no-repeat', + height: { xs: 'auto', sm: '100dvh' }, + pb: { xs: 12, sm: 0 }, + })} + component="main" + > + - - - - - Sign up - - - - + + + + + ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + width: { xs: '100%', sm: '450px' }, + p: { xs: 2, sm: 4 }, + gap: 4, + boxShadow: + theme.palette.mode === 'light' + ? 'rgba(0, 0, 0, 0.05) 0px 5px 15px 0px, rgba(25, 28, 33, 0.05) 0px 15px 35px -5px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px' + : 'rgba(0, 0, 0, 0.5) 0px 5px 15px 0px, rgba(25, 28, 33, 0.08) 0px 15px 35px -5px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px', + })} + > + + + Sign up + + + + Name - - + + + Last name - - + + + Email - - + + + Password - - - } - label="I want to receive inspiration, marketing promotions and updates via email." - /> - - - - - - - Already have an account? Sign in - - - - - - - + + } + label="I want to receive updates via email." + /> + + + Already have an account? Sign in + + + + or + + + + + + + + + ); } diff --git a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.js b/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.js new file mode 100644 index 00000000000000..7e4305a7698c28 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.js @@ -0,0 +1,30 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; + +import IconButton from '@mui/material/IconButton'; + +import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded'; +import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded'; + +function ToggleColorMode({ mode, toggleColorMode }) { + return ( + + {mode === 'dark' ? ( + + ) : ( + + )} + + ); +} + +ToggleColorMode.propTypes = { + mode: PropTypes.oneOf(['dark', 'light']).isRequired, + toggleColorMode: PropTypes.func.isRequired, +}; + +export default ToggleColorMode; diff --git a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx new file mode 100644 index 00000000000000..3783eb9d80714d --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; + +import { PaletteMode } from '@mui/material'; +import IconButton from '@mui/material/IconButton'; + +import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded'; +import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded'; + +interface ToggleColorModeProps { + mode: PaletteMode; + toggleColorMode: () => void; +} + +function ToggleColorMode({ mode, toggleColorMode }: ToggleColorModeProps) { + return ( + + {mode === 'dark' ? ( + + ) : ( + + )} + + ); +} + +export default ToggleColorMode; diff --git a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js new file mode 100644 index 00000000000000..39d6b9d1db1d7e --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js @@ -0,0 +1,623 @@ +import * as React from 'react'; + +import { alpha } from '@mui/material/styles'; + +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; + +export const brand = { + 50: '#F0F7FF', + 100: '#CEE5FD', + 200: '#9CCCFC', + 300: '#55A6F6', + 400: '#0A66C2', + 500: '#0959AA', + 600: '#064079', + 700: '#033363', + 800: '#02294F', + 900: '#021F3B', +}; + +export const secondary = { + 50: '#F9F0FF', + 100: '#E9CEFD', + 200: '#D49CFC', + 300: '#B355F6', + 400: '#750AC2', + 500: '#6709AA', + 600: '#490679', + 700: '#3B0363', + 800: '#2F024F', + 900: '#23023B', +}; + +export const gray = { + 50: '#FBFCFE', + 100: '#EAF0F5', + 200: '#D6E2EB', + 300: '#BFCCD9', + 400: '#94A6B8', + 500: '#5B6B7C', + 600: '#4C5967', + 700: '#364049', + 800: '#131B20', + 900: '#090E10', +}; + +export const green = { + 50: '#F6FEF6', + 100: '#E3FBE3', + 200: '#C7F7C7', + 300: '#A1E8A1', + 400: '#51BC51', + 500: '#1F7A1F', + 600: '#136C13', + 700: '#0A470A', + 800: '#042F04', + 900: '#021D02', +}; + +export const red = { + 50: '#FFF0F0', + 100: '#FDCECE', + 200: '#FC9C9C', + 300: '#F65555', + 400: '#C20A0A', + 500: '#910808', + 600: '#790606', + 700: '#630303', + 800: '#4F0202', + 900: '#3B0202', +}; + +const getDesignTokens = (mode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[500], + dark: brand[800], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[100], + light: brand[300], + main: brand[400], + dark: brand[800], + }), + }, + secondary: { + light: secondary[300], + main: secondary[500], + dark: secondary[800], + ...(mode === 'dark' && { + light: secondary[400], + main: secondary[500], + dark: secondary[900], + }), + }, + warning: { + main: '#F7B538', + dark: '#F79F00', + ...(mode === 'dark' && { main: '#F7B538', dark: '#F79F00' }), + }, + error: { + light: red[50], + main: red[500], + dark: red[700], + ...(mode === 'dark' && { light: '#D32F2F', main: '#D32F2F', dark: '#B22A2A' }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + 50: gray[50], + 100: gray[100], + 200: gray[200], + 300: gray[300], + 400: gray[400], + 500: gray[500], + 600: gray[600], + 700: gray[700], + 800: gray[800], + 900: gray[900], + }, + divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5), + background: { + default: '#fff', + paper: gray[50], + ...(mode === 'dark' && { default: gray[900], paper: gray[800] }), + }, + text: { + primary: gray[800], + secondary: gray[600], + ...(mode === 'dark' && { primary: '#fff', secondary: gray[400] }), + }, + action: { + selected: `${alpha(brand[200], 0.2)}`, + ...(mode === 'dark' && { + selected: alpha(brand[800], 0.2), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: 60, + fontWeight: 600, + lineHeight: 78 / 70, + letterSpacing: -0.2, + }, + h2: { + fontSize: 48, + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: 42, + lineHeight: 1.2, + }, + h4: { + fontSize: 36, + fontWeight: 500, + lineHeight: 1.5, + }, + h5: { + fontSize: 20, + fontWeight: 600, + }, + h6: { + fontSize: 18, + }, + subtitle1: { + fontSize: 18, + }, + subtitle2: { + fontSize: 16, + }, + body1: { + fontWeight: 400, + fontSize: 15, + }, + body2: { + fontWeight: 400, + fontSize: 14, + }, + caption: { + fontWeight: 400, + fontSize: 12, + }, + }, +}); + +export default function getSignUpTheme(mode) { + return { + ...getDesignTokens(mode), + components: { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: { + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }, + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + boxShadow: 'none', + borderRadius: '10px', + textTransform: 'none', + ...(ownerState.size === 'small' && { + maxHeight: '32px', + }), + ...(ownerState.size === 'medium' && { + height: '40px', + }), + ...(ownerState.variant === 'contained' && + ownerState.color === 'primary' && { + color: brand[50], + background: brand[500], + backgroundImage: `linear-gradient(to bottom, ${brand[400]}, ${brand[600]})`, + boxShadow: `inset 0 1px ${alpha(brand[300], 0.5)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + background: brand[400], + backgroundImage: 'none', + boxShadow: `0 0 0 1px ${alpha(brand[300], 0.5)}`, + }, + }), + ...(ownerState.variant === 'outlined' && { + backgroundColor: alpha(brand[300], 0.1), + borderColor: brand[300], + color: brand[500], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + borderColor: gray[200], + }, + }), + ...(ownerState.variant === 'text' && { + color: brand[600], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + }), + ...(theme.palette.mode === 'dark' && { + ...(ownerState.variant === 'contained' && + ownerState.color === 'primary' && { + border: `1px solid ${brand[600]}`, + backgroundImage: `linear-gradient(to bottom, ${brand[500]}, ${brand[600]})`, + backgroundColor: brand[500], + '&:hover': { + background: brand[600], + backgroundImage: 'none', + boxShadow: `0 0 0 1px ${alpha(brand[700], 0.5)}`, + }, + }), + ...(ownerState.variant === 'outlined' && { + backgroundColor: alpha(brand[600], 0.1), + borderColor: brand[700], + color: brand[300], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + color: gray[300], + '&:hover': { + backgroundColor: alpha(gray[600], 0.3), + borderColor: gray[700], + }, + }), + ...(ownerState.variant === 'text' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + }), + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...(ownerState.size === 'small' && { + height: '32px', + width: '32px', + }), + ...(ownerState.size === 'medium' && { + height: '40px', + width: '40px', + }), + color: brand[600], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + ...(theme.palette.mode === 'dark' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + }), + }, + }, + MuiDivider: { + styleOverrides: { + root: ({ theme }) => ({ + borderColor: `${alpha(gray[200], 0.8)}`, + ...(theme.palette.mode === 'dark' && { + borderColor: `${alpha(gray[700], 0.4)}`, + }), + }), + }, + }, + MuiPaper: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundImage: 'none', + backgroundColor: gray[100], + ...(theme.palette.mode === 'dark' && { + backgroundColor: gray[800], + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiOutlinedInput: { + styleOverrides: { + notchedOutline: { + border: 'none', + }, + input: { + paddingLeft: 10, + }, + root: ({ theme, ownerState }) => ({ + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, + maxHeight: '4px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + boxSizing: 'border-box', + flexGrow: 1, + height: '40px', + borderRadius: '10px', + border: '1px solid', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focused': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + ...(ownerState.color === 'error' && { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + }), + ...(theme.palette.mode === 'dark' && { + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, + maxHeight: '6px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + '&::placeholder': { + opacity: 1, + color: gray[500], + }, + }, + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + backgroundColor: alpha(gray[900], 0.8), + transition: 'border-color 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focused': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + ...(ownerState.color === 'error' && { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }), + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + backgroundColor: gray[50], + borderRadius: 10, + outline: `1px solid ${alpha(gray[200], 0.8)}`, + boxShadow: 'none', + ...(ownerState.variant === 'outlined' && { + border: 0, + boxSizing: 'border-box', + background: `linear-gradient(to bottom, #FFF, ${gray[50]})`, + }), + ...(theme.palette.mode === 'dark' && { + backgroundColor: alpha(gray[800], 0.6), + outline: `1px solid ${alpha(gray[700], 0.5)}`, + ...(ownerState.variant === 'outlined' && { + boxSizing: 'border-box', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: brand[600], + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + '&::before': { + content: '""', + position: 'absolute', + width: 0, + height: '1px', + bottom: 0, + left: 0, + backgroundColor: brand[200], + opacity: 0.7, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: '100%', + opacity: 1, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + ...(theme.palette.mode === 'dark' && { + color: brand[200], + }), + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + '& .Mui-selected': { + color: brand[500], + }, + ...(theme.palette.mode === 'dark' && { + '& .Mui-selected': { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: , + checkedIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + '&:hover': { + borderColor: brand[300], + backgroundColor: brand[600], + }, + }, + ...(theme.palette.mode === 'dark' && { + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[600], + boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.2) inset', + '&:hover': { + borderColor: brand[300], + backgroundColor: brand[800], + }, + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...(theme.palette.mode === 'dark' && { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + '&.Mui-selected': { color: brand[300] }, + }), + }), + }, + }, + MuiStack: { + defaultProps: { + useFlexGap: true, + }, + }, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx new file mode 100644 index 00000000000000..51f2fa45444de8 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx @@ -0,0 +1,642 @@ +import * as React from 'react'; +import type {} from '@mui/material/themeCssVarsAugmentation'; +import { alpha, ThemeOptions } from '@mui/material/styles'; +import { PaletteMode } from '@mui/material'; + +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; + +declare module '@mui/material/styles/createPalette' { + interface ColorRange { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + } + + interface PaletteColor extends ColorRange {} +} + +export const brand = { + 50: '#F0F7FF', + 100: '#CEE5FD', + 200: '#9CCCFC', + 300: '#55A6F6', + 400: '#0A66C2', + 500: '#0959AA', + 600: '#064079', + 700: '#033363', + 800: '#02294F', + 900: '#021F3B', +}; + +export const secondary = { + 50: '#F9F0FF', + 100: '#E9CEFD', + 200: '#D49CFC', + 300: '#B355F6', + 400: '#750AC2', + 500: '#6709AA', + 600: '#490679', + 700: '#3B0363', + 800: '#2F024F', + 900: '#23023B', +}; + +export const gray = { + 50: '#FBFCFE', + 100: '#EAF0F5', + 200: '#D6E2EB', + 300: '#BFCCD9', + 400: '#94A6B8', + 500: '#5B6B7C', + 600: '#4C5967', + 700: '#364049', + 800: '#131B20', + 900: '#090E10', +}; + +export const green = { + 50: '#F6FEF6', + 100: '#E3FBE3', + 200: '#C7F7C7', + 300: '#A1E8A1', + 400: '#51BC51', + 500: '#1F7A1F', + 600: '#136C13', + 700: '#0A470A', + 800: '#042F04', + 900: '#021D02', +}; + +export const red = { + 50: '#FFF0F0', + 100: '#FDCECE', + 200: '#FC9C9C', + 300: '#F65555', + 400: '#C20A0A', + 500: '#910808', + 600: '#790606', + 700: '#630303', + 800: '#4F0202', + 900: '#3B0202', +}; + +const getDesignTokens = (mode: PaletteMode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[500], + dark: brand[800], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[100], + light: brand[300], + main: brand[400], + dark: brand[800], + }), + }, + secondary: { + light: secondary[300], + main: secondary[500], + dark: secondary[800], + ...(mode === 'dark' && { + light: secondary[400], + main: secondary[500], + dark: secondary[900], + }), + }, + warning: { + main: '#F7B538', + dark: '#F79F00', + ...(mode === 'dark' && { main: '#F7B538', dark: '#F79F00' }), + }, + error: { + light: red[50], + main: red[500], + dark: red[700], + ...(mode === 'dark' && { light: '#D32F2F', main: '#D32F2F', dark: '#B22A2A' }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + 50: gray[50], + 100: gray[100], + 200: gray[200], + 300: gray[300], + 400: gray[400], + 500: gray[500], + 600: gray[600], + 700: gray[700], + 800: gray[800], + 900: gray[900], + }, + divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5), + background: { + default: '#fff', + paper: gray[50], + ...(mode === 'dark' && { default: gray[900], paper: gray[800] }), + }, + text: { + primary: gray[800], + secondary: gray[600], + ...(mode === 'dark' && { primary: '#fff', secondary: gray[400] }), + }, + action: { + selected: `${alpha(brand[200], 0.2)}`, + ...(mode === 'dark' && { + selected: alpha(brand[800], 0.2), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: 60, + fontWeight: 600, + lineHeight: 78 / 70, + letterSpacing: -0.2, + }, + h2: { + fontSize: 48, + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: 42, + lineHeight: 1.2, + }, + h4: { + fontSize: 36, + fontWeight: 500, + lineHeight: 1.5, + }, + h5: { + fontSize: 20, + fontWeight: 600, + }, + h6: { + fontSize: 18, + }, + subtitle1: { + fontSize: 18, + }, + subtitle2: { + fontSize: 16, + }, + body1: { + fontWeight: 400, + fontSize: 15, + }, + body2: { + fontWeight: 400, + fontSize: 14, + }, + caption: { + fontWeight: 400, + fontSize: 12, + }, + }, +}); + +export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { + return { + ...getDesignTokens(mode), + components: { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: { + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }, + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + boxShadow: 'none', + borderRadius: '10px', + textTransform: 'none', + ...(ownerState.size === 'small' && { + maxHeight: '32px', + }), + ...(ownerState.size === 'medium' && { + height: '40px', + }), + ...(ownerState.variant === 'contained' && + ownerState.color === 'primary' && { + color: brand[50], + background: brand[500], + backgroundImage: `linear-gradient(to bottom, ${brand[400]}, ${brand[600]})`, + boxShadow: `inset 0 1px ${alpha(brand[300], 0.5)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + background: brand[400], + backgroundImage: 'none', + boxShadow: `0 0 0 1px ${alpha(brand[300], 0.5)}`, + }, + }), + ...(ownerState.variant === 'outlined' && { + backgroundColor: alpha(brand[300], 0.1), + borderColor: brand[300], + color: brand[500], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + backgroundColor: alpha(gray[300], 0.1), + borderColor: alpha(gray[300], 0.5), + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + borderColor: gray[200], + }, + }), + ...(ownerState.variant === 'text' && { + color: brand[600], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + }), + ...(theme.palette.mode === 'dark' && { + ...(ownerState.variant === 'contained' && + ownerState.color === 'primary' && { + border: `1px solid ${brand[600]}`, + backgroundImage: `linear-gradient(to bottom, ${brand[500]}, ${brand[600]})`, + backgroundColor: brand[500], + '&:hover': { + background: brand[600], + backgroundImage: 'none', + boxShadow: `0 0 0 1px ${alpha(brand[700], 0.5)}`, + }, + }), + ...(ownerState.variant === 'outlined' && { + backgroundColor: alpha(brand[600], 0.1), + borderColor: brand[700], + color: brand[300], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + color: gray[300], + '&:hover': { + backgroundColor: alpha(gray[600], 0.3), + borderColor: gray[700], + }, + }), + ...(ownerState.variant === 'text' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + }), + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...(ownerState.size === 'small' && { + height: '32px', + width: '32px', + }), + ...(ownerState.size === 'medium' && { + height: '40px', + width: '40px', + }), + color: brand[600], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, + ...(theme.palette.mode === 'dark' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, + }), + }), + }, + }, + MuiDivider: { + styleOverrides: { + root: ({ theme }) => ({ + borderColor: `${alpha(gray[200], 0.8)}`, + ...(theme.palette.mode === 'dark' && { + borderColor: `${alpha(gray[700], 0.4)}`, + }), + }), + }, + }, + MuiPaper: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundImage: 'none', + backgroundColor: gray[100], + ...(theme.palette.mode === 'dark' && { + backgroundColor: gray[800], + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiOutlinedInput: { + styleOverrides: { + notchedOutline: { + border: 'none', + }, + input: { + paddingLeft: 10, + }, + + root: ({ theme, ownerState }) => ({ + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, + maxHeight: '4px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + boxSizing: 'border-box', + flexGrow: 1, + height: '40px', + borderRadius: '10px', + border: '1px solid', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focused': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + ...(ownerState.color === 'error' && { + borderColor: red[200], + color: red[500], + '& + .MuiFormHelperText-root': { + color: red[500], + }, + }), + ...(theme.palette.mode === 'dark' && { + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, + maxHeight: '6px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + '&::placeholder': { + opacity: 1, + color: gray[500], + }, + }, + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + backgroundColor: alpha(gray[900], 0.8), + transition: 'border-color 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focused': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + ...(ownerState.color === 'error' && { + borderColor: red[700], + color: red[300], + '& + .MuiFormHelperText-root': { + color: red[300], + }, + }), + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + backgroundColor: gray[50], + borderRadius: 10, + outline: `1px solid ${alpha(gray[200], 0.8)}`, + boxShadow: 'none', + ...(ownerState.variant === 'outlined' && { + border: 0, + boxSizing: 'border-box', + background: `linear-gradient(to bottom, #FFF, ${gray[50]})`, + }), + ...(theme.palette.mode === 'dark' && { + backgroundColor: alpha(gray[800], 0.6), + outline: `1px solid ${alpha(gray[700], 0.5)}`, + ...(ownerState.variant === 'outlined' && { + boxSizing: 'border-box', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: brand[600], + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + '&::before': { + content: '""', + position: 'absolute', + width: 0, + height: '1px', + bottom: 0, + left: 0, + backgroundColor: brand[200], + opacity: 0.7, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: '100%', + opacity: 1, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + ...(theme.palette.mode === 'dark' && { + color: brand[200], + }), + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + '& .Mui-selected': { + color: brand[500], + }, + ...(theme.palette.mode === 'dark' && { + '& .Mui-selected': { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: , + checkedIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + '&:hover': { + borderColor: brand[300], + backgroundColor: brand[600], + }, + }, + ...(theme.palette.mode === 'dark' && { + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[600], + boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.2) inset', + '&:hover': { + borderColor: brand[300], + backgroundColor: brand[800], + }, + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...(theme.palette.mode === 'dark' && { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + '&.Mui-selected': { color: brand[300] }, + }), + }), + }, + }, + MuiStack: { + defaultProps: { + useFlexGap: true, + }, + }, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/sticky-footer/README.md b/docs/data/material/getting-started/templates/sticky-footer/README.md index 47ec73373dbbff..773a5d0039f2d3 100644 --- a/docs/data/material/getting-started/templates/sticky-footer/README.md +++ b/docs/data/material/getting-started/templates/sticky-footer/README.md @@ -4,7 +4,7 @@ -1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples). +1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/next/examples). 2. Make sure your project has the required dependencies: @mui/material, @emotion/styled, @emotion/react. 3. Import and use the `StickyFooter` component. @@ -12,4 +12,4 @@ -View the demo at https://mui.com/material-ui/getting-started/templates/sticky-footer/. +View the demo at https://next.mui.com/material-ui/getting-started/templates/sticky-footer/. diff --git a/docs/data/material/guides/localization/localization.md b/docs/data/material/guides/localization/localization.md index c6268abaf45fb8..9f047bfea14351 100644 --- a/docs/data/material/guides/localization/localization.md +++ b/docs/data/material/guides/localization/localization.md @@ -97,7 +97,7 @@ The [Data Grid and Data Grid Pro](/x/react-data-grid/) components have their own -You can [find the source](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/locale/index.ts) in the GitHub repository. +You can [find the source](https://github.com/mui/material-ui/blob/next/packages/mui-material/src/locale/index.ts) in the GitHub repository. To create your own translation, or to customize the English text, copy this file to your project, make any changes needed and import the locale from there. diff --git a/docs/data/material/guides/typescript/typescript.md b/docs/data/material/guides/typescript/typescript.md index 42d6b9bc2c1faa..e781767ed8d904 100644 --- a/docs/data/material/guides/typescript/typescript.md +++ b/docs/data/material/guides/typescript/typescript.md @@ -6,7 +6,7 @@ -Material UI requires a minimum version of TypeScript 3.5. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-ts) example. +Material UI requires a minimum version of TypeScript 3.5. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-ts) example. For types to work, it's recommended that you have at least the following options enabled in your `tsconfig.json`: diff --git a/docs/data/material/integrations/interoperability/interoperability.md b/docs/data/material/integrations/interoperability/interoperability.md index 1d1fdf701be168..4a4b7f0ab9e4a9 100644 --- a/docs/data/material/integrations/interoperability/interoperability.md +++ b/docs/data/material/integrations/interoperability/interoperability.md @@ -274,8 +274,8 @@ If, however, you would like to use styled-components, you can configure your app -- [Create React App with styled-components](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components) -- [Create React App with styled-components and TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts) +- [Create React App with styled-components](https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-styled-components) +- [Create React App with styled-components and TypeScript](https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-styled-components-ts) Following this approach reduces the bundle size, and removes the need to configure the CSS injection order. diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index c3003b6f553ee9..880c30fe523c97 100644 --- a/docs/data/material/integrations/nextjs/nextjs.md +++ b/docs/data/material/integrations/nextjs/nextjs.md @@ -11,18 +11,24 @@ This section walks through the Material UI integration with the Next.js [App Ro Start by ensuring that you already have `@mui/material` and `next` installed. Then, run one of the following commands to install the dependencies: +:::info +The `next` tag is used to download the latest pre-release, v6 version. Remove it to get the current stable version. +::: + + + ```bash npm -npm install @mui/material-nextjs @emotion/cache +npm install @mui/material-nextjs@next @emotion/cache ``` ```bash yarn -yarn add @mui/material-nextjs @emotion/cache +yarn add @mui/material-nextjs@next @emotion/cache ``` ```bash pnpm -pnpm add @mui/material-nextjs @emotion/cache +pnpm add @mui/material-nextjs@next @emotion/cache ``` diff --git a/docs/data/material/integrations/styled-components/styled-components.md b/docs/data/material/integrations/styled-components/styled-components.md index 0601f5b3e68205..f4535e06691d6f 100644 --- a/docs/data/material/integrations/styled-components/styled-components.md +++ b/docs/data/material/integrations/styled-components/styled-components.md @@ -35,11 +35,11 @@ If you're using yarn, you can configure it using a package resolution: ```diff title="package.json" { "dependencies": { -- "@mui/styled-engine": "latest" -+ "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest" +- "@mui/styled-engine": "next" ++ "@mui/styled-engine": "npm:@mui/styled-engine-sc@next" }, + "resolutions": { -+ "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest" ++ "@mui/styled-engine": "npm:@mui/styled-engine-sc@next" + }, } ``` @@ -102,8 +102,8 @@ We provide boilerplate examples of Create React App with Material UI and styled -- [Material UI + CRA + styled-components (JavaScript)](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components) -- [Material UI + CRA + styled-components (TypeScript)](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts) +- [Material UI + CRA + styled-components (JavaScript)](https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-styled-components) +- [Material UI + CRA + styled-components (TypeScript)](https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-styled-components-ts) :::warning `@emotion/react`, `@emotion/styled`, and `styled-components` are optional peer dependencies of `@mui/material`, so you need to install them yourself. diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index 52843015ca2010..0d3b149465b83c 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -253,6 +253,54 @@ The Avatar's `imgProps` was deprecated in favor of `slotProps.img`: />; ``` +## Backdrop + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#backdrop-props) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@next deprecations/backdrop-props +``` + +### TransitionComponent + +The Backdrop's `TransitionComponent` prop was deprecated in favor of `slots.transition`: + +```diff + +``` + +### components + +The Badge's `components` was deprecated in favor of `slots`: + +```diff + +``` + +### componentsProps + +The Badge's `componentsProps` was deprecated in favor of `slotProps`: + +```diff + +``` + ## Button Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#button-classes) below to migrate the code as described in the following sections: @@ -479,6 +527,140 @@ Here's how to migrate: }, ``` +## ButtonGroup + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#button-group-classes) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@latest deprecations/button-group-classes +``` + +### Composed CSS classes + +The CSS classes that composed the following props were deprecated: + +- `orientation` | `variant` and `grouped` +- `color`, `variant` and `grouped` + +Here's how to migrate: + +```diff +-.MuiButtonGroup-root .MuiButtonGroup-groupedHorizontal ++.MuiButtonGroup-root.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedVertical ++.MuiButtonGroup-root.MuiButtonGroup-vertical > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedText ++.MuiButtonGroup-root.MuiButtonGroup-text > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedTextHorizontal ++.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedTextVertical ++.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-vertical > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedTextPrimary ++.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedTextSecondary ++.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlined ++.MuiButtonGroup-root.MuiButtonGroup-outlined > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedHorizontal ++.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedVertical ++.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-vertical > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedPrimary ++.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedSecondary ++.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContained ++.MuiButtonGroup-root.MuiButtonGroup-contained > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedHorizontal ++.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedVertical ++.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-vertical > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedPrimary ++.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedSecondary ++.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped +``` + +```diff + + import { buttonGroupClasses } from '@mui/material/ButtonGroup'; + + MuiButtonGroup: { + styleOverrides: { + root: { +- [`& .${buttonGroupClasses.groupedHorizontal}`]: { ++ [`&.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedVertical}`]: { ++ [`&.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedText}`]: { ++ [`&.${buttonGroupClasses.text} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedTextHorizontal}`]: { ++ [`&.${buttonGroupClasses.text}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedTextVertical}`]: { ++ [`&.${buttonGroupClasses.text}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedTextPrimary}`]: { ++ [`&.${buttonGroupClasses.text}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedTextSecondary}`]: { ++ [`&.${buttonGroupClasses.text}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlined}`]: { ++ [`&.${buttonGroupClasses.outlined} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlinedHorizontal}`]: { ++ [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlinedVertical}`]: { ++ [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlinedPrimary}`]: { ++ [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlinedSecondary}`]: { ++ [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContained}`]: { ++ [`&.${buttonGroupClasses.contained} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContainedHorizontal}`]: { ++ [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContainedVertical}`]: { ++ [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContainedPrimary}`]: { ++ [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContainedSecondary}`]: { ++ [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, + }, + }, + +``` + ## Chip Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#chip-classes) below to migrate the code as described in the following sections: @@ -771,3 +953,22 @@ The Slider's `componentsProps` was deprecated in favor of `slotProps`: + slotProps={{ track: { testid: 'test-id' } }} /> ``` + +## StepLabel + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-label-props) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@latest deprecations/step-label-props +``` + +### componentsProps + +The StepLabel's `componentsProps` was deprecated in favor of `slotProps`: + +```diff + +``` diff --git a/docs/data/material/migration/migration-v4/v5-component-changes.md b/docs/data/material/migration/migration-v4/v5-component-changes.md index 33267341076f13..d039032f159bb7 100644 --- a/docs/data/material/migration/migration-v4/v5-component-changes.md +++ b/docs/data/material/migration/migration-v4/v5-component-changes.md @@ -796,7 +796,7 @@ Rename the `GridList` components to `ImageList` to align with the current Materi ### Use CSS object-fit -Use CSS `object-fit`. For IE11 support either use a polyfill such as +Use CSS `object-fit`. For IE 11 support either use a polyfill such as [this npm package](https://www.npmjs.com/package/object-fit-images), or else continue to use the v4 component. ```diff diff --git a/docs/data/material/migration/migration-v5/migration-v5.md b/docs/data/material/migration/migration-v5/migration-v5.md new file mode 100644 index 00000000000000..4042fa86648dc2 --- /dev/null +++ b/docs/data/material/migration/migration-v5/migration-v5.md @@ -0,0 +1,25 @@ +# Migrating to v6 + +

This guide explains how and why to migrate from Material UI v5 to v6.

+ +## Start using the alpha release + +In the `package.json` file, change the package version from `latest` to `next`. + +```diff title="package.json" +-"@mui/material": "latest", ++"@mui/material": "next", +``` + +Using `next` ensures your project always uses the latest v6 alpha release. +Alternatively, you can also target and fix it to a specific version, for example, `6.0.0-alpha.0`. + +## Breaking changes + +Since v6 is a new major release, it contains some changes that affect the public API. +The steps you need to take to migrate from Material UI v5 to v6 are described below. + +:::info +This list is a work in progress. +Expect updates as new breaking changes are introduced. +::: diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index f8b1c0914d34cb..ee15159b9f27f6 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -195,11 +195,6 @@ const pages: MuiPage[] = [ pathname: '/material-ui/guides', title: 'How-to guides', children: [ - { - pathname: '/material-ui/guides/material-3-components', - title: 'Material Design 3 components', - newFeature: true, - }, { pathname: '/material-ui/guides/minimizing-bundle-size' }, { pathname: '/material-ui/guides/server-rendering' }, { pathname: '/material-ui/guides/responsive-ui', title: 'Responsive UI' }, @@ -274,6 +269,16 @@ const pages: MuiPage[] = [ pathname: '/material-ui/migration/pickers-migration', title: 'Migration from @material-ui/pickers', }, + { + pathname: '/material-ui/migration/v6', + subheader: 'Upgrade to v6', + children: [ + { + pathname: '/material-ui/migration/migration-v5', + title: 'Migrating to v6', + }, + ], + }, { pathname: '/material-ui/migration/v5', subheader: 'Upgrade to v5', diff --git a/docs/data/styles/advanced/advanced.md b/docs/data/styles/advanced/advanced.md index 5e5d2bfea0009d..f56a62d16ac91b 100644 --- a/docs/data/styles/advanced/advanced.md +++ b/docs/data/styles/advanced/advanced.md @@ -417,16 +417,12 @@ It's a must-do for static pages, but it needs to be put in balance with not doin There is [an official Gatsby plugin](https://github.com/hupe1980/gatsby-plugin-material-ui) that enables server-side rendering for `@mui/styles`. Refer to the plugin's page for setup and usage instructions. - - Refer to [this example Gatsby project](https://github.com/mui/material-ui/tree/v4.x/examples/gatsby) for an usage example. ### Next.js Pages Router You need to have a custom `pages/_document.js`, then copy [this logic](https://github.com/mui/material-ui/blob/v4.x/examples/nextjs/pages/_document.js#L52-L59) to inject the server-side rendered styles into the `` element. - - Refer to [this example project](https://github.com/mui/material-ui/tree/v4.x/examples/nextjs) for an up-to-date usage example. ## Class names diff --git a/docs/data/styles/basics/basics.md b/docs/data/styles/basics/basics.md index f654a750ce5d72..deab3798fbaeb8 100644 --- a/docs/data/styles/basics/basics.md +++ b/docs/data/styles/basics/basics.md @@ -17,10 +17,14 @@ Please use [`@mui/system`](/system/getting-started/) instead. To install and save in your `package.json` dependencies, run: +:::info +The `next` tag is used to download the latest pre-release, v6 version. Remove it to get the current stable version. +::: + ```bash -npm install @mui/styles +npm install @mui/styles@next ``` ## Getting started diff --git a/docs/data/system/experimental-api/css-theme-variables/CreateCssVarsProvider.js b/docs/data/system/experimental-api/css-theme-variables/CreateCssVarsProvider.js index 29dc5a22612732..7a051d679ec189 100644 --- a/docs/data/system/experimental-api/css-theme-variables/CreateCssVarsProvider.js +++ b/docs/data/system/experimental-api/css-theme-variables/CreateCssVarsProvider.js @@ -35,7 +35,7 @@ const darkColorScheme = { }; function extendTheme({ cssVarPrefix = 'system-demo' } = {}) { - const { vars: themeVars, generateCssVars } = prepareCssVars( + const { vars: themeVars, ...params } = prepareCssVars( { colorSchemes: { light: lightColorScheme, @@ -54,11 +54,11 @@ function extendTheme({ cssVarPrefix = 'system-demo' } = {}) { // ... any other objects independent of color-scheme, // like fontSizes, spacing etc vars: themeVars, - generateCssVars, palette: { ...lightColorScheme.palette, colorScheme: 'light', }, + ...params, }; return theme; diff --git a/docs/data/system/experimental-api/css-theme-variables/CreateCssVarsProvider.tsx b/docs/data/system/experimental-api/css-theme-variables/CreateCssVarsProvider.tsx index 3ffe7c60179c68..489ad641a0bbc5 100644 --- a/docs/data/system/experimental-api/css-theme-variables/CreateCssVarsProvider.tsx +++ b/docs/data/system/experimental-api/css-theme-variables/CreateCssVarsProvider.tsx @@ -13,9 +13,7 @@ type Theme = { palette: { colorScheme: 'light' | 'dark'; } & (typeof lightColorScheme)['palette']; - vars: ReturnType['vars']; - generateCssVars: ReturnType['generateCssVars']; -}; +} & ReturnType; const lightColorScheme = { palette: { @@ -47,7 +45,7 @@ const darkColorScheme = { }; function extendTheme({ cssVarPrefix = 'system-demo' } = {}) { - const { vars: themeVars, generateCssVars } = prepareCssVars( + const { vars: themeVars, ...params } = prepareCssVars( { colorSchemes: { light: lightColorScheme, @@ -66,11 +64,11 @@ function extendTheme({ cssVarPrefix = 'system-demo' } = {}) { // ... any other objects independent of color-scheme, // like fontSizes, spacing etc vars: themeVars, - generateCssVars, palette: { ...lightColorScheme.palette, colorScheme: 'light', }, + ...params, }; return theme; diff --git a/docs/data/system/getting-started/installation/installation.md b/docs/data/system/getting-started/installation/installation.md index 3fe69f67219c12..325db1402f6063 100644 --- a/docs/data/system/getting-started/installation/installation.md +++ b/docs/data/system/getting-started/installation/installation.md @@ -6,18 +6,20 @@ Run one of the following commands to add MUI System to your project: + + ```bash npm -npm install @mui/system @emotion/react @emotion/styled +npm install @mui/system@next @emotion/react @emotion/styled ``` ```bash yarn -yarn add @mui/system @emotion/react @emotion/styled +yarn add @mui/system@next @emotion/react @emotion/styled ``` ```bash pnpm -pnpm add @mui/system @emotion/react @emotion/styled +pnpm add @mui/system@next @emotion/react @emotion/styled ``` @@ -39,18 +41,24 @@ Please note that [react](https://www.npmjs.com/package/react) is a peer dependen MUI System uses [Emotion](https://emotion.sh/docs/introduction) as its default styling engine. If you want to use [styled-components](https://styled-components.com/) instead, run one of the following commands: +:::info +The `next` tag is used to download the latest pre-release, v6 version. Remove it to get the current stable version. +::: + + + ```bash npm -npm install @mui/system @mui/styled-engine-sc styled-components +npm install @mui/system@next @mui/styled-engine-sc@next styled-components ``` ```bash yarn -yarn add @mui/system @mui/styled-engine-sc styled-components +yarn add @mui/system@next @mui/styled-engine-sc@next styled-components ``` ```bash pnpm -pnpm add @mui/system @mui/styled-engine-sc styled-components +pnpm add @mui/system@next @mui/styled-engine-sc@next styled-components ``` diff --git a/docs/data/system/getting-started/usage/usage.md b/docs/data/system/getting-started/usage/usage.md index 5c2603a88cde17..487340ad2b1585 100644 --- a/docs/data/system/getting-started/usage/usage.md +++ b/docs/data/system/getting-started/usage/usage.md @@ -163,7 +163,7 @@ Runtime performance takes a hit. -Visit the [benchmark folder](https://github.com/mui/material-ui/tree/master/benchmark/browser) for a reproduction of the metrics above. +Visit the [benchmark folder](https://github.com/mui/material-ui/tree/next/benchmark/browser) for a reproduction of the metrics above. We believe that for most use cases it's fast enough, but there are simple workarounds when performance becomes critical. For instance, when rendering a list with many items, you can use a CSS child selector to have a single "style injection" point (using d. for the wrapper and a. for each item). diff --git a/docs/data/system/migration/migration-v5/migration-v5.md b/docs/data/system/migration/migration-v5/migration-v5.md new file mode 100644 index 00000000000000..dc9fa51622a50c --- /dev/null +++ b/docs/data/system/migration/migration-v5/migration-v5.md @@ -0,0 +1,41 @@ +# Migrating to v6 + +

This guide explains how and why to migrate from MUI System v5 to v6.

+ +## Start using the alpha release + +In the `package.json` file, change the package version from `latest` to `next`. + +```diff title="package.json" +-"@mui/system": "latest", ++"@mui/system": "next", +``` + +Using `next` ensures your project always uses the latest v6 alpha release. +Alternatively, you can also target and fix it to a specific version, for example, `6.0.0-alpha.0`. + +## Breaking changes + +Since v6 is a new major release, it contains some changes that affect the public API. +The steps you need to take to migrate from MUI System v5 to v6 are described below. + +:::info +This list is a work in progress. +Expect updates as new breaking changes are introduced. +::: + +### Root code is now ESM + +The ESM code, previously under the `esm/` build, has been moved to the root of the package. +The CommonJS code, previously on the root, has been moved to the `node/` build. + +:::info +This is an intermediate step to prepare for adding the `exports` field to the `package.json` file. +If you have trouble using this new structure, please wait for the future update which adds the `exports` field. +You can follow progress on https://github.com/mui/material-ui/issues/30671. +::: + +### GridProps type + +The `cssGrid` function's `GridProps` type has been renamed to `CssGridProps`. +This is to avoid collision with the `GridProps` type corresponding to the `Grid` component props. diff --git a/docs/data/system/pages.ts b/docs/data/system/pages.ts index bb0128c4abd2e1..d55ef46cced61c 100644 --- a/docs/data/system/pages.ts +++ b/docs/data/system/pages.ts @@ -42,6 +42,16 @@ const pages: readonly MuiPage[] = [ { pathname: '/system/react-stack', title: 'Stack' }, ], }, + { + pathname: '/system/migration', + title: 'Migration', + children: [ + { + pathname: '/system/migration/migration-v5', + title: 'Migrating to v6', + }, + ], + }, { title: 'APIs', pathname: '/system/api', diff --git a/docs/mui-vale/styles/MUI/MuiBrandName.yml b/docs/mui-vale/styles/MUI/MuiBrandName.yml index 3a5251f2ccf622..b5274f773657c7 100644 --- a/docs/mui-vale/styles/MUI/MuiBrandName.yml +++ b/docs/mui-vale/styles/MUI/MuiBrandName.yml @@ -3,7 +3,7 @@ # For example, Apple does this meticulously with their brand name: https://www.apple.com/macbook-air/. # Also read https://www.chrisdpeters.com/blog/using-non-breaking-spaces-to-help-with-branding/ for why. extends: substitution -message: Use a non-breaking space for brand name ('%s' instead of '%s') +message: Use a non-breaking space (option+space on Mac, Alt+0160 on Windows or AltGr+Space on Linux, instead of space) for brand name ('%s' instead of '%s') level: error ignorecase: true # swap maps tokens in form of bad: good diff --git a/docs/next.config.mjs b/docs/next.config.mjs index af21536fa13b78..825504dbeb620f 100644 --- a/docs/next.config.mjs +++ b/docs/next.config.mjs @@ -189,7 +189,7 @@ export default withDocsInfra({ // docs-infra LIB_VERSION: pkg.version, SOURCE_CODE_REPO: 'https://github.com/mui/material-ui', - SOURCE_GITHUB_BRANCH: 'master', // #default-branch-switch + SOURCE_GITHUB_BRANCH: 'next', // #default-branch-switch GITHUB_TEMPLATE_DOCS_FEEDBACK: '4.docs-feedback.yml', BUILD_ONLY_ENGLISH_LOCALE: String(buildOnlyEnglishLocale), // MUI Core related diff --git a/docs/notifications.json b/docs/notifications.json index 0a0682df5b747e..149da78cf1a4bf 100644 --- a/docs/notifications.json +++ b/docs/notifications.json @@ -17,6 +17,6 @@ { "id": 81, "title": "Introducing MUI X v7", - "text": "This new version is packed with new components, exciting features, improved usability, and developer experience. Check out the announcement blog post." + "text": "The new version is packed with new components, exciting features, improved usability, and developer experience. Check out the announcement blog post." } ] diff --git a/docs/package.json b/docs/package.json index 653dc392d2682b..d309a8556c2336 100644 --- a/docs/package.json +++ b/docs/package.json @@ -9,7 +9,7 @@ "build:clean": "rimraf .next && pnpm build", "build-sw": "node ./scripts/buildServiceWorker.js", "dev": "next dev", - "deploy": "git push -f material-ui-docs master:latest", + "deploy": "git push -f material-ui-docs next:next", "icons": "rimraf --glob public/static/icons/* && node ./scripts/buildIcons.js", "start": "next start", "create-playground": "cpy --cwd=scripts playground.template.tsx ../../pages/playground --rename=index.tsx", @@ -44,18 +44,18 @@ "@mui/system": "workspace:^", "@mui/types": "workspace:^", "@mui/utils": "workspace:^", - "@mui/x-charts": "6.19.5", - "@mui/x-data-grid": "7.0.0-beta.7", - "@mui/x-data-grid-generator": "7.0.0-beta.7", - "@mui/x-data-grid-premium": "7.0.0-beta.7", - "@mui/x-data-grid-pro": "7.0.0-beta.7", - "@mui/x-date-pickers": "6.19.7", - "@mui/x-date-pickers-pro": "6.19.7", + "@mui/x-charts": "6.19.8", + "@mui/x-data-grid": "7.0.0", + "@mui/x-data-grid-generator": "7.0.0", + "@mui/x-data-grid-premium": "7.0.0", + "@mui/x-data-grid-pro": "7.0.0", + "@mui/x-date-pickers": "6.19.8", + "@mui/x-date-pickers-pro": "6.19.8", "@mui/x-license-pro": "6.10.2", "@mui/x-tree-view": "6.17.0", "@popperjs/core": "^2.11.8", "@react-spring/web": "^9.7.3", - "autoprefixer": "^10.4.18", + "autoprefixer": "^10.4.19", "autosuggest-highlight": "^3.3.4", "babel-plugin-module-resolver": "^5.0.0", "babel-plugin-optimize-clsx": "^2.6.2", @@ -80,12 +80,12 @@ "jss-rtl": "^0.3.0", "lodash": "^4.17.21", "lz-string": "^1.5.0", - "markdown-to-jsx": "^7.4.3", + "markdown-to-jsx": "^7.4.5", "material-ui-popup-state": "^5.0.10", "next": "^13.5.1", "notistack": "3.0.1", "nprogress": "^0.2.0", - "postcss": "^8.4.35", + "postcss": "^8.4.38", "postcss-import": "^15.1.0", "prop-types": "^15.8.1", "react": "^18.2.0", @@ -119,11 +119,11 @@ "@mui/internal-scripts": "workspace:^", "@mui-internal/test-utils": "workspace:^", "@types/autosuggest-highlight": "^3.2.3", - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/css-mediaquery": "^0.1.4", "@types/json2mq": "^0.2.2", - "@types/node": "^18.19.25", - "@types/prop-types": "^15.7.11", + "@types/node": "^18.19.28", + "@types/prop-types": "^15.7.12", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "@types/react-swipeable-views": "^0.13.5", diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 1fde5b141d7e4d..368a3b67247530 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -171,6 +171,7 @@ function AppWrapper(props) { href: `https://next.mui.com${languagePrefix}/material-ui/getting-started/`, }, { text: `v${materialPkgJson.version}`, current: true }, + { text: `v5`, href: `https://mui.com${languagePrefix}/material-ui/getting-started/` }, { text: 'v4', href: `https://v4.mui.com${languagePrefix}/getting-started/installation/`, @@ -201,6 +202,7 @@ function AppWrapper(props) { href: `https://next.mui.com${languagePrefix}/system/getting-started/`, }, { text: `v${systemPkgJson.version}`, current: true }, + { text: 'v5', href: `https://mui.com${languagePrefix}/system/getting-started/` }, { text: 'v4', href: `https://v4.mui.com${languagePrefix}/system/basics/` }, { text: 'View all versions', diff --git a/docs/pages/_document.js b/docs/pages/_document.js index ecd5633bf5a5b3..a800959e8aa63b 100644 --- a/docs/pages/_document.js +++ b/docs/pages/_document.js @@ -9,7 +9,7 @@ import { getInitColorSchemeScript as getMuiInitColorSchemeScript } from '@mui/ma import { getInitColorSchemeScript as getJoyInitColorSchemeScript } from '@mui/joy/styles'; import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; import createEmotionCache from 'docs/src/createEmotionCache'; -import { getMetaThemeColor } from 'docs/src/modules/brandingTheme'; +import { getMetaThemeColor } from '@mui/docs/branding'; // You can find a benchmark of the available CSS minifiers under // https://github.com/GoalSmashers/css-minification-benchmark diff --git a/docs/pages/blog/2020.md b/docs/pages/blog/2020.md index 97e953f791cd04..ec3f7aee46de80 100644 --- a/docs/pages/blog/2020.md +++ b/docs/pages/blog/2020.md @@ -85,7 +85,7 @@ We will release the next major iteration of the library. A highlight of the key - Breaking changes on the API to make it more intuitive. - Add full support for React strict mode. We recommend to enable it. - Improve the performance of MUI System by a x3-x5 [factor](https://github.com/mui/material-ui/issues/21657#issuecomment-707140999). -- Reduce bundle size: split IE11 into a different bundle [-6kB](https://github.com/mui/material-ui/pull/22814#issuecomment-700995216), migrate to Emotion [-5kB](https://github.com/mui/material-ui/pull/23308#issuecomment-718748835), Popper.js v2 upgrade [-700B](https://github.com/mui/material-ui/pull/21761#issuecomment-657135498). +- Reduce bundle size: split IE 11 into a different bundle [-6kB](https://github.com/mui/material-ui/pull/22814#issuecomment-700995216), migrate to Emotion [-5kB](https://github.com/mui/material-ui/pull/23308#issuecomment-718748835), Popper.js v2 upgrade [-700B](https://github.com/mui/material-ui/pull/21761#issuecomment-657135498). - Improve the documentation website: search shortcut, page rating, fast material icons copy button, etc. And [much more](https://github.com/mui/material-ui/issues/20012). diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx index f4d2472df7dfa9..c1abb1f4579da4 100644 --- a/docs/pages/careers.tsx +++ b/docs/pages/careers.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled, alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Divider from '@mui/material/Divider'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import Stack from '@mui/material/Stack'; import Paper from '@mui/material/Paper'; import Button from '@mui/material/Button'; @@ -339,12 +339,13 @@ function RemoteAwardCard() { > {/* Perks & benefits */} -
+
- + - - - - - - - - {companyInfo.map(({ title, description, routeUrl }) => ( - - - {title} - - - {description} - - - Learn more{' '} - - - - ))} - - - + + + + {companyInfo.map(({ title, description, routeUrl }) => ( + + + {title} + + + {description} + + + Learn more{' '} + + + + ))} +
@@ -584,11 +588,11 @@ export default function Careers() { Frequently asked questions - + {renderFAQItem(0, true)} {renderFAQItem(1)} - + {renderFAQItem(2)} + + + + + +
diff --git a/docs/pages/material-ui/api/backdrop.json b/docs/pages/material-ui/api/backdrop.json index 318540dc332363..8f868d0823d1ac 100644 --- a/docs/pages/material-ui/api/backdrop.json +++ b/docs/pages/material-ui/api/backdrop.json @@ -14,11 +14,17 @@ }, "invisible": { "type": { "name": "bool" }, "default": "false" }, "slotProps": { - "type": { "name": "shape", "description": "{ root?: object }" }, + "type": { + "name": "shape", + "description": "{ root?: func
| object, transition?: func
| object }" + }, "default": "{}" }, "slots": { - "type": { "name": "shape", "description": "{ root?: elementType }" }, + "type": { + "name": "shape", + "description": "{ root?: elementType, transition?: elementType }" + }, "default": "{}" }, "sx": { @@ -28,7 +34,12 @@ }, "additionalInfo": { "sx": true } }, - "TransitionComponent": { "type": { "name": "elementType" }, "default": "Fade" }, + "TransitionComponent": { + "type": { "name": "elementType" }, + "default": "Fade", + "deprecated": true, + "deprecationInfo": "Use slots.transition instead. This prop will be removed in v7. How to migrate." + }, "transitionDuration": { "type": { "name": "union", @@ -41,18 +52,26 @@ "import Backdrop from '@mui/material/Backdrop';", "import { Backdrop } from '@mui/material';" ], + "slots": [ + { + "name": "root", + "description": "The component that renders the root.", + "default": "'div'", + "class": "MuiBackdrop-root" + }, + { + "name": "transition", + "description": "The component that renders the transition.\n[Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.", + "default": "Fade", + "class": null + } + ], "classes": [ { "key": "invisible", "className": "MuiBackdrop-invisible", "description": "Styles applied to the root element if `invisible={true}`.", "isGlobal": false - }, - { - "key": "root", - "className": "MuiBackdrop-root", - "description": "Styles applied to the root element.", - "isGlobal": false } ], "spread": true, diff --git a/docs/pages/material-ui/api/badge.json b/docs/pages/material-ui/api/badge.json index 8a4b1b694ac28f..9f3612604ff53f 100644 --- a/docs/pages/material-ui/api/badge.json +++ b/docs/pages/material-ui/api/badge.json @@ -20,14 +20,18 @@ "component": { "type": { "name": "elementType" } }, "components": { "type": { "name": "shape", "description": "{ Badge?: elementType, Root?: elementType }" }, - "default": "{}" + "default": "{}", + "deprecated": true, + "deprecationInfo": "use the slots prop instead. This prop will be removed in v7. How to migrate." }, "componentsProps": { "type": { "name": "shape", "description": "{ badge?: func
| object, root?: func
| object }" }, - "default": "{}" + "default": "{}", + "deprecated": true, + "deprecationInfo": "use the slotProps prop instead. This prop will be removed in v7. How to migrate." }, "invisible": { "type": { "name": "bool" }, "default": "false" }, "max": { "type": { "name": "number" }, "default": "99" }, diff --git a/docs/pages/material-ui/api/button-group.json b/docs/pages/material-ui/api/button-group.json index 16a90311dfbd13..88121829c7f353 100644 --- a/docs/pages/material-ui/api/button-group.json +++ b/docs/pages/material-ui/api/button-group.json @@ -47,6 +47,18 @@ "import { ButtonGroup } from '@mui/material';" ], "classes": [ + { + "key": "colorPrimary", + "className": "MuiButtonGroup-colorPrimary", + "description": "Styles applied to the root element if `color=\"primary\"`", + "isGlobal": false + }, + { + "key": "colorSecondary", + "className": "MuiButtonGroup-colorSecondary", + "description": "Styles applied to the root element if `color=\"secondary\"`", + "isGlobal": false + }, { "key": "contained", "className": "MuiButtonGroup-contained", @@ -87,102 +99,125 @@ "key": "groupedContained", "className": "MuiButtonGroup-groupedContained", "description": "Styles applied to the children if `variant=\"contained\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedContainedHorizontal", "className": "MuiButtonGroup-groupedContainedHorizontal", "description": "Styles applied to the children if `variant=\"contained\"` and `orientation=\"horizontal\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedContainedPrimary", "className": "MuiButtonGroup-groupedContainedPrimary", "description": "Styles applied to the children if `variant=\"contained\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedContainedSecondary", "className": "MuiButtonGroup-groupedContainedSecondary", "description": "Styles applied to the children if `variant=\"contained\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedContainedVertical", "className": "MuiButtonGroup-groupedContainedVertical", "description": "Styles applied to the children if `variant=\"contained\"` and `orientation=\"vertical\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedHorizontal", "className": "MuiButtonGroup-groupedHorizontal", "description": "Styles applied to the children if `orientation=\"horizontal\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedOutlined", "className": "MuiButtonGroup-groupedOutlined", "description": "Styles applied to the children if `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedOutlinedHorizontal", "className": "MuiButtonGroup-groupedOutlinedHorizontal", "description": "Styles applied to the children if `variant=\"outlined\"` and `orientation=\"horizontal\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedOutlinedPrimary", "className": "MuiButtonGroup-groupedOutlinedPrimary", "description": "Styles applied to the children if `variant=\"outlined\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedOutlinedSecondary", "className": "MuiButtonGroup-groupedOutlinedSecondary", "description": "Styles applied to the children if `variant=\"outlined\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedOutlinedVertical", "className": "MuiButtonGroup-groupedOutlinedVertical", "description": "Styles applied to the children if `variant=\"outlined\"` and `orientation=\"vertical\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedText", "className": "MuiButtonGroup-groupedText", "description": "Styles applied to the children if `variant=\"text\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedTextHorizontal", "className": "MuiButtonGroup-groupedTextHorizontal", "description": "Styles applied to the children if `variant=\"text\"` and `orientation=\"horizontal\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedTextPrimary", "className": "MuiButtonGroup-groupedTextPrimary", "description": "Styles applied to the children if `variant=\"text\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedTextSecondary", "className": "MuiButtonGroup-groupedTextSecondary", "description": "Styles applied to the children if `variant=\"text\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedTextVertical", "className": "MuiButtonGroup-groupedTextVertical", "description": "Styles applied to the children if `variant=\"text\"` and `orientation=\"vertical\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedVertical", "className": "MuiButtonGroup-groupedVertical", "description": "Styles applied to the children if `orientation=\"vertical\"`.", + "isGlobal": false, + "isDeprecated": true + }, + { + "key": "horizontal", + "className": "MuiButtonGroup-horizontal", + "description": "Styles applied to the root element if `orientation=\"horizontal\"`.", "isGlobal": false }, { diff --git a/docs/pages/material-ui/api/step-label.json b/docs/pages/material-ui/api/step-label.json index 2f77fe012d8ec7..cc855fad1f48fa 100644 --- a/docs/pages/material-ui/api/step-label.json +++ b/docs/pages/material-ui/api/step-label.json @@ -4,13 +4,19 @@ "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "componentsProps": { "type": { "name": "shape", "description": "{ label?: object }" }, - "default": "{}" + "default": "{}", + "deprecated": true, + "deprecationInfo": "use the slotProps prop instead. This prop will be removed in v7. How to migrate." }, "error": { "type": { "name": "bool" }, "default": "false" }, "icon": { "type": { "name": "node" } }, "optional": { "type": { "name": "node" } }, "slotProps": { - "type": { "name": "shape", "description": "{ label?: object }" }, + "type": { "name": "shape", "description": "{ label?: func
| object }" }, + "default": "{}" + }, + "slots": { + "type": { "name": "shape", "description": "{ label?: elementType }" }, "default": "{}" }, "StepIconComponent": { "type": { "name": "elementType" } }, @@ -28,6 +34,14 @@ "import StepLabel from '@mui/material/StepLabel';", "import { StepLabel } from '@mui/material';" ], + "slots": [ + { + "name": "label", + "description": "The component that renders the label.", + "default": "span", + "class": "MuiStepLabel-label" + } + ], "classes": [ { "key": "active", @@ -71,12 +85,6 @@ "description": "Styles applied to the `icon` container element.", "isGlobal": false }, - { - "key": "label", - "className": "MuiStepLabel-label", - "description": "Styles applied to the label element that wraps `children`.", - "isGlobal": false - }, { "key": "labelContainer", "className": "MuiStepLabel-labelContainer", diff --git a/docs/pages/material-ui/migration/migration-v5.js b/docs/pages/material-ui/migration/migration-v5.js new file mode 100644 index 00000000000000..abd12b1320853c --- /dev/null +++ b/docs/pages/material-ui/migration/migration-v5.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docs/data/material/migration/migration-v5/migration-v5.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/system/migration/migration-v5.js b/docs/pages/system/migration/migration-v5.js new file mode 100644 index 00000000000000..12a51489d3bcef --- /dev/null +++ b/docs/pages/system/migration/migration-v5.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docs/data/system/migration/migration-v5/migration-v5.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/public/static/branding/about/illustrations/team-globe-distribution-dark.png b/docs/public/static/branding/about/illustrations/team-globe-distribution-dark.png index 8b59dc339963b1..6fc3e470b0666c 100644 Binary files a/docs/public/static/branding/about/illustrations/team-globe-distribution-dark.png and b/docs/public/static/branding/about/illustrations/team-globe-distribution-dark.png differ diff --git a/docs/public/static/branding/about/illustrations/team-globe-distribution-light.png b/docs/public/static/branding/about/illustrations/team-globe-distribution-light.png index 57efc00531a072..69fa20cb434963 100644 Binary files a/docs/public/static/branding/about/illustrations/team-globe-distribution-light.png and b/docs/public/static/branding/about/illustrations/team-globe-distribution-light.png differ diff --git a/docs/public/static/images/templates/dashboard.png b/docs/public/static/images/templates/dashboard.png index f7144c30b4d471..2a10b08116f94f 100644 Binary files a/docs/public/static/images/templates/dashboard.png and b/docs/public/static/images/templates/dashboard.png differ diff --git a/docs/public/static/images/templates/sign-in-side.png b/docs/public/static/images/templates/sign-in-side.png index 4679e890e0c5d6..fb00a2d01160fb 100644 Binary files a/docs/public/static/images/templates/sign-in-side.png and b/docs/public/static/images/templates/sign-in-side.png differ diff --git a/docs/public/static/images/templates/sign-in.png b/docs/public/static/images/templates/sign-in.png index f84f919cd80139..597b57ae1d1356 100644 Binary files a/docs/public/static/images/templates/sign-in.png and b/docs/public/static/images/templates/sign-in.png differ diff --git a/docs/public/static/images/templates/sign-up.png b/docs/public/static/images/templates/sign-up.png index 4ca49c4f2f84b2..b92eca0b42a10a 100644 Binary files a/docs/public/static/images/templates/sign-up.png and b/docs/public/static/images/templates/sign-up.png differ diff --git a/docs/public/static/images/templates/templates-images/dark-background.png b/docs/public/static/images/templates/templates-images/dark-background.png new file mode 100644 index 00000000000000..eb7b1921cf0cc6 Binary files /dev/null and b/docs/public/static/images/templates/templates-images/dark-background.png differ diff --git a/docs/public/static/images/templates/templates-images/light-background.png b/docs/public/static/images/templates/templates-images/light-background.png new file mode 100644 index 00000000000000..0476ae5d66e50e Binary files /dev/null and b/docs/public/static/images/templates/templates-images/light-background.png differ diff --git a/docs/src/BrandingCssVarsProvider.tsx b/docs/src/BrandingCssVarsProvider.tsx index 8365b4a886caa6..6cd467f1c10f9d 100644 --- a/docs/src/BrandingCssVarsProvider.tsx +++ b/docs/src/BrandingCssVarsProvider.tsx @@ -7,7 +7,7 @@ import { } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; import { NextNProgressBar } from 'docs/src/modules/components/AppFrame'; -import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme'; +import { getDesignTokens, getThemedComponents } from '@mui/docs/branding'; import SkipLink from 'docs/src/modules/components/SkipLink'; import MarkdownLinks from 'docs/src/modules/components/MarkdownLinks'; diff --git a/docs/src/BrandingProvider.tsx b/docs/src/BrandingProvider.tsx index 7c5cf6a60d31b4..29f4ba3bcbcd72 100644 --- a/docs/src/BrandingProvider.tsx +++ b/docs/src/BrandingProvider.tsx @@ -1,19 +1,4 @@ -import * as React from 'react'; -import { ThemeProvider, useTheme } from '@mui/material/styles'; -import { brandingDarkTheme, brandingLightTheme } from 'docs/src/modules/brandingTheme'; +// Backwards compatibility for Toolpad and X. +// TODO: remove when Toolpad and X migrated to `@mui/docs/branding` -interface BrandingProviderProps { - children: React.ReactNode; - /** - * If not `undefined`, the provider is considered nesting and does not render NextNProgressBar & CssBaseline - */ - mode: 'light' | 'dark'; -} - -export default function BrandingProvider(props: BrandingProviderProps) { - const { children, mode: modeProp } = props; - const upperTheme = useTheme(); - const mode = modeProp || upperTheme.palette.mode; - const theme = mode === 'dark' ? brandingDarkTheme : brandingLightTheme; - return theme : theme}>{children}; -} +export { BrandingProvider as default } from '@mui/docs/branding'; diff --git a/docs/src/components/about/AboutEnd.tsx b/docs/src/components/about/AboutEnd.tsx index 02562b245b617a..cdb88fd0eb1e28 100644 --- a/docs/src/components/about/AboutEnd.tsx +++ b/docs/src/components/about/AboutEnd.tsx @@ -48,7 +48,7 @@ export default function AboutEnd() { alt="A map illustration with pins loosely positioned where team members from MUI are located." loading="lazy" sx={(theme) => ({ - mt: -8, + mt: -20, display: { xs: 'none', sm: 'block' }, width: '100%', aspectRatio: '231/145', diff --git a/docs/src/components/about/HowToSupport.tsx b/docs/src/components/about/HowToSupport.tsx index 3c01595592fe34..99bc248bd1db31 100644 --- a/docs/src/components/about/HowToSupport.tsx +++ b/docs/src/components/about/HowToSupport.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; @@ -12,7 +12,7 @@ import GradientText from 'docs/src/components/typography/GradientText'; import { Link } from '@mui/docs/Link'; import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; -import { GlowingIconContainer } from 'docs/src/components/action/InfoCard'; +import { GlowingIconContainer } from '@mui/docs/InfoCard'; function Widget({ children, @@ -72,7 +72,7 @@ export default function HowToSupport() { description="" /> - + } title="Give feedback" @@ -96,7 +96,7 @@ export default function HowToSupport() { - + } title="Join the community" @@ -157,7 +157,7 @@ export default function HowToSupport() { - + } title="Support us financially" diff --git a/docs/src/components/about/OurValues.tsx b/docs/src/components/about/OurValues.tsx index ad9db9243c4c73..bf29a93161d228 100644 --- a/docs/src/components/about/OurValues.tsx +++ b/docs/src/components/about/OurValues.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; @@ -70,7 +70,7 @@ export default function OurValues() { {values.map(({ title, description, darkIcon, lightIcon, height, width }) => ( - + ({ @@ -90,14 +90,14 @@ export default function OurValues() { > ({ background: `${lightIcon}`, ...theme.applyDarkStyles({ background: `${darkIcon}`, }), })} - width={width} - height={height} /> diff --git a/docs/src/components/about/Team.tsx b/docs/src/components/about/Team.tsx index 087e43d93fbb8f..38e49b5f9d112c 100644 --- a/docs/src/components/about/Team.tsx +++ b/docs/src/components/about/Team.tsx @@ -5,7 +5,7 @@ import Button from '@mui/material/Button'; import Container from '@mui/material/Container'; import Divider from '@mui/material/Divider'; import IconButton from '@mui/material/IconButton'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import Paper, { PaperProps } from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import Tooltip from '@mui/material/Tooltip'; @@ -369,7 +369,7 @@ export default function Team() { ...profileJson, }; return ( - + ); @@ -389,7 +389,7 @@ export default function Team() { {contributors.map((profile) => ( - + ))} @@ -404,7 +404,7 @@ export default function Team() { {emeriti.map((profile) => ( - + ))} diff --git a/docs/src/components/action/InfoCard.tsx b/docs/src/components/action/InfoCard.tsx index 45ba7e23cbfdb6..9dc1f1de938493 100644 --- a/docs/src/components/action/InfoCard.tsx +++ b/docs/src/components/action/InfoCard.tsx @@ -1,114 +1,5 @@ -import * as React from 'react'; -import { alpha } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Typography, { TypographyProps } from '@mui/material/Typography'; -import { Link, LinkProps } from '@mui/docs/Link'; +// Backwards compatibility for Toolpad and X. +// TODO: remove when Toolpad and X migrated to `@mui/docs/InfoCard` -interface GlowingIconContainerProps { - icon: React.ReactNode; -} - -export function GlowingIconContainer({ icon }: GlowingIconContainerProps) { - return ( - ({ - width: 40, - height: 40, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - flexShrink: 0, - borderRadius: 1, - border: '1px solid', - borderColor: 'primary.200', - bgcolor: 'primary.50', - boxShadow: `0px 1px 6px 0px ${alpha( - theme.palette.primary[500], - 0.4, - )}, 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset`, - ...theme.applyDarkStyles({ - borderColor: alpha(theme.palette.primary[400], 0.6), - bgcolor: 'primary.900', - boxShadow: `0 2px 6px 0 ${alpha( - theme.palette.primary[600], - 0.4, - )}, 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset`, - }), - })} - > - {icon} - - ); -} - -interface InfoCardProps { - classNameDescription?: string; - classNameTitle?: string; - dense?: boolean; - description?: string; - icon?: React.ReactNode; - link?: string; - prefetch?: LinkProps['prefetch']; - svg?: React.ReactNode; - title: string; - titleProps?: TypographyProps; -} - -export default function InfoCard(props: InfoCardProps) { - const { - classNameDescription, - classNameTitle, - dense, - description, - icon, - link, - svg, - title, - titleProps, - ...other - } = props; - return ( - ({ - p: dense ? 2.5 : 3.5, - height: '100%', - background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, - ...theme.applyDarkStyles({ - bgcolor: 'primaryDark.900', - background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, - borderColor: 'primaryDark.700', - }), - })} - {...other} - > - {svg && svg} - {icon && } - - {title} - - - {description} - - - ); -} +export * from '@mui/docs/InfoCard'; +export { InfoCard as default } from '@mui/docs/InfoCard'; diff --git a/docs/src/components/banner/AppFrameBanner.tsx b/docs/src/components/banner/AppFrameBanner.tsx index 139c369d36773b..de435e12058550 100644 --- a/docs/src/components/banner/AppFrameBanner.tsx +++ b/docs/src/components/banner/AppFrameBanner.tsx @@ -35,9 +35,9 @@ export default function AppFrameBanner() { fontWeight: 'medium', textWrap: 'nowrap', maxHeight: '34px', - backgroundColor: (theme.vars || theme).palette.primary[50], + backgroundColor: alpha(theme.palette.primary[50], 0.8), border: '1px solid', - borderColor: (theme.vars || theme).palette.grey[200], + borderColor: (theme.vars || theme).palette.divider, borderRadius: 1, transition: 'all 150ms ease', '&:hover, &:focus-visible': { @@ -47,11 +47,10 @@ export default function AppFrameBanner() { }), (theme) => theme.applyDarkStyles({ - backgroundColor: alpha(theme.palette.primary[900], 0.2), - borderColor: (theme.vars || theme).palette.primaryDark[700], + backgroundColor: alpha(theme.palette.primary[900], 0.15), '&:hover, &:focus-visible': { - backgroundColor: alpha(theme.palette.primary[900], 0.6), - borderColor: (theme.vars || theme).palette.primary[800], + backgroundColor: alpha(theme.palette.primary[900], 0.4), + borderColor: (theme.vars || theme).palette.primary[900], }, }), ]} diff --git a/docs/src/components/home/DiamondSponsors.tsx b/docs/src/components/home/DiamondSponsors.tsx index 2746ae899018e9..2f8bbcea77d127 100644 --- a/docs/src/components/home/DiamondSponsors.tsx +++ b/docs/src/components/home/DiamondSponsors.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useInView } from 'react-intersection-observer'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import Paper from '@mui/material/Paper'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; @@ -46,8 +46,8 @@ export default function DiamondSponsors() { sx={(theme) => ({ mt: 4, mb: 1.5, - background: `linear-gradient(90deg, ${(theme.vars || theme).palette.primary[400]} 50%, ${ - (theme.vars || theme).palette.primary[700] + background: `linear-gradient(45deg, ${(theme.vars || theme).palette.primary[400]} 50%, ${ + (theme.vars || theme).palette.primary[800] } 100%)`, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', @@ -57,12 +57,12 @@ export default function DiamondSponsors() { {DIAMONDs.map((item) => ( - + ))} {spotIsAvailable && ( - + {GOLDs.map((item) => ( - + ))} - + @@ -120,14 +121,6 @@ export default function GoldSponsors() { target="_blank" rel="noopener" color="primary" - sx={(theme) => ({ - mr: 2, - border: '1px solid', - borderColor: 'grey.300', - ...theme.applyDarkStyles({ - borderColor: 'primaryDark.600', - }), - })} > diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx index 6796c028965c8e..c83c844faec8c4 100644 --- a/docs/src/components/home/MaterialDesignComponents.tsx +++ b/docs/src/components/home/MaterialDesignComponents.tsx @@ -34,7 +34,7 @@ import VerifiedUserRounded from '@mui/icons-material/VerifiedUserRounded'; import HelpCenterRounded from '@mui/icons-material/HelpCenterRounded'; import ROUTES from 'docs/src/route'; import { Link } from '@mui/docs/Link'; -import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme'; +import { getDesignTokens, getThemedComponents } from '@mui/docs/branding'; const Grid = styled('div')(({ theme }) => [ { diff --git a/docs/src/components/home/ValueProposition.tsx b/docs/src/components/home/ValueProposition.tsx index ace718a99fa456..b66739a422fcdb 100644 --- a/docs/src/components/home/ValueProposition.tsx +++ b/docs/src/components/home/ValueProposition.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Typography from '@mui/material/Typography'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import InvertColorsRoundedIcon from '@mui/icons-material/InvertColorsRounded'; import HandymanRoundedIcon from '@mui/icons-material/HandymanRounded'; import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded'; @@ -8,7 +8,7 @@ import AccessibilityNewRounded from '@mui/icons-material/AccessibilityNewRounded import GradientText from 'docs/src/components/typography/GradientText'; import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; const content = [ { @@ -51,7 +51,7 @@ export default function ValueProposition() { /> {content.map(({ icon, title, description }) => ( - + ))} diff --git a/docs/src/components/productBaseUI/BaseUIEnd.tsx b/docs/src/components/productBaseUI/BaseUIEnd.tsx index c1c01797cfcbe2..7704cd55575665 100644 --- a/docs/src/components/productBaseUI/BaseUIEnd.tsx +++ b/docs/src/components/productBaseUI/BaseUIEnd.tsx @@ -6,7 +6,7 @@ import ListItem from '@mui/material/ListItem'; import Typography from '@mui/material/Typography'; import CompareIcon from '@mui/icons-material/Compare'; import StyleRoundedIcon from '@mui/icons-material/StyleRounded'; -import { GlowingIconContainer } from 'docs/src/components/action/InfoCard'; +import { GlowingIconContainer } from '@mui/docs/InfoCard'; import GetStartedButtons from 'docs/src/components/home/GetStartedButtons'; import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; diff --git a/docs/src/components/productBaseUI/BaseUISummary.tsx b/docs/src/components/productBaseUI/BaseUISummary.tsx index a7b98a436718f7..310b4e5a1d8c7a 100644 --- a/docs/src/components/productBaseUI/BaseUISummary.tsx +++ b/docs/src/components/productBaseUI/BaseUISummary.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import StyleRoundedIcon from '@mui/icons-material/StyleRounded'; import AccessibilityNewRounded from '@mui/icons-material/AccessibilityNewRounded'; import PhishingRoundedIcon from '@mui/icons-material/PhishingRounded'; import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; import GradientText from 'docs/src/components/typography/GradientText'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; const content = [ { @@ -50,7 +50,7 @@ export default function BaseUISummary() { {content.map(({ icon, title, description, link }) => ( - + ))} diff --git a/docs/src/components/productCore/CoreProducts.tsx b/docs/src/components/productCore/CoreProducts.tsx index 331e3c80228ff8..0ffb8a767b9261 100644 --- a/docs/src/components/productCore/CoreProducts.tsx +++ b/docs/src/components/productCore/CoreProducts.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Grid from '@mui/material/Grid'; import Section from 'docs/src/layouts/Section'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; // Note: All of the commented code will be put back in once logos for each Core product are done. diff --git a/docs/src/components/productDesignKit/DesignKitValues.tsx b/docs/src/components/productDesignKit/DesignKitValues.tsx index 06cb9895752d30..72bca07d667fdf 100644 --- a/docs/src/components/productDesignKit/DesignKitValues.tsx +++ b/docs/src/components/productDesignKit/DesignKitValues.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import Typography from '@mui/material/Typography'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import Palette from '@mui/icons-material/Palette'; import LibraryBooks from '@mui/icons-material/LibraryBooks'; import CodeRounded from '@mui/icons-material/CodeRounded'; import GradientText from 'docs/src/components/typography/GradientText'; import Section from 'docs/src/layouts/Section'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; const content = [ { @@ -41,7 +41,7 @@ function DesignKitValues() { {content.map(({ icon, title, description }) => ( - + ))} diff --git a/docs/src/components/productMaterial/MaterialEnd.tsx b/docs/src/components/productMaterial/MaterialEnd.tsx index 99d91ad0c83dd6..be40de0a8cfb73 100644 --- a/docs/src/components/productMaterial/MaterialEnd.tsx +++ b/docs/src/components/productMaterial/MaterialEnd.tsx @@ -6,7 +6,7 @@ import ListItem from '@mui/material/ListItem'; import Typography from '@mui/material/Typography'; import CompareIcon from '@mui/icons-material/Compare'; import StyleRoundedIcon from '@mui/icons-material/StyleRounded'; -import { GlowingIconContainer } from 'docs/src/components/action/InfoCard'; +import { GlowingIconContainer } from '@mui/docs/InfoCard'; import GetStartedButtons from 'docs/src/components/home/GetStartedButtons'; import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; diff --git a/docs/src/components/productMaterial/MaterialHero.tsx b/docs/src/components/productMaterial/MaterialHero.tsx index 0df46b622ac450..dd37121529358d 100644 --- a/docs/src/components/productMaterial/MaterialHero.tsx +++ b/docs/src/components/productMaterial/MaterialHero.tsx @@ -59,7 +59,7 @@ import IconImage from 'docs/src/components/icon/IconImage'; import HeroContainer from 'docs/src/layouts/HeroContainer'; import GetStartedButtons from 'docs/src/components/home/GetStartedButtons'; import GradientText from 'docs/src/components/typography/GradientText'; -import { getDesignTokens } from 'docs/src/modules/brandingTheme'; +import { getDesignTokens } from '@mui/docs/branding'; import { Link } from '@mui/docs/Link'; import ROUTES from 'docs/src/route'; diff --git a/docs/src/components/productX/XPlans.tsx b/docs/src/components/productX/XPlans.tsx index 2b5b04a6938f67..2d5c310ba47fdd 100644 --- a/docs/src/components/productX/XPlans.tsx +++ b/docs/src/components/productX/XPlans.tsx @@ -6,7 +6,7 @@ import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; import GradientText from 'docs/src/components/typography/GradientText'; import ROUTES from 'docs/src/route'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; import IconImage from 'docs/src/components/icon/IconImage'; import GetStartedButtons from 'docs/src/components/home/GetStartedButtons'; diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx index d8655f2d9cc87d..c0894f21ec8e3f 100644 --- a/docs/src/layouts/AppFooter.tsx +++ b/docs/src/layouts/AppFooter.tsx @@ -53,7 +53,7 @@ export default function AppFooter(props: AppFooterProps) { - + Keep up to date @@ -70,7 +70,7 @@ export default function AppFooter(props: AppFooterProps) { }} > - + Products @@ -93,7 +93,7 @@ export default function AppFooter(props: AppFooterProps) { - + Resources @@ -113,7 +113,7 @@ export default function AppFooter(props: AppFooterProps) { - + Explore @@ -133,7 +133,7 @@ export default function AppFooter(props: AppFooterProps) { - + Company diff --git a/docs/src/layouts/Section.tsx b/docs/src/layouts/Section.tsx index e15d60292d7586..ff7a0a4d837551 100644 --- a/docs/src/layouts/Section.tsx +++ b/docs/src/layouts/Section.tsx @@ -42,13 +42,13 @@ const Section = React.forwardRef(function Sectio (theme) => ({ ...(bg === 'gradient' ? { - background: `linear-gradient(180deg, #FFF 0%, ${ + background: `linear-gradient(#FFF 0%, ${ (theme.vars || theme).palette.primary[50] } 100%)`, ...theme.applyDarkStyles({ - background: `linear-gradient(180deg, ${ + background: `linear-gradient(${ (theme.vars || theme).palette.primaryDark[900] - } 0%, ${alpha(theme.palette.primary[900], 0.16)} 100%)`, + } 0%, ${alpha(theme.palette.primary[900], 0.2)} 100%)`, }), } : { diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index 763ea0e811bac0..b96d36bb7e25a1 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -1,1317 +1,4 @@ -import { CSSObject } from '@mui/system'; -import type {} from '@mui/material/themeCssVarsAugmentation'; -import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded'; -import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles'; +// Backwards compatibility for Toolpad and X. +// TODO: remove when Toolpad and X migrated to `@mui/docs/branding` -interface ApplyDarkStyles { - (scheme: CSSObject): CSSObject; -} - -declare module '@mui/material/styles' { - interface Theme { - applyDarkStyles: ApplyDarkStyles; - } -} - -declare module '@mui/material/styles/createPalette' { - interface ColorRange { - 50: string; - 100: string; - 200: string; - 300: string; - 400: string; - 500: string; - 600: string; - 700: string; - 800: string; - 900: string; - } - - interface PaletteColor extends ColorRange {} - - interface Palette { - primaryDark: PaletteColor; - gradients: { - lightGrayRadio: string; - stylizedRadio: string; - linearSubtle: string; - }; - } - - interface TypeText { - tertiary: string; - } -} - -declare module '@mui/material/styles/createTypography' { - interface TypographyOptions { - fontWeightSemiBold?: number; - fontWeightExtraBold?: number; - fontFamilyCode?: string; - fontFamilySystem?: string; - } - - interface Typography { - fontWeightSemiBold: number; - fontWeightExtraBold: number; - fontFamilyCode: string; - fontFamilySystem: string; - } -} - -declare module '@mui/material/Chip' { - interface ChipPropsColorOverrides { - grey: true; - } -} - -declare module '@mui/material/SvgIcon' { - interface SvgIconPropsColorOverrides { - danger: true; - } - interface SvgIconPropsSizeOverrides { - xs: true; - sm: true; - md: true; - lg: true; - xl: true; - xl2: true; - xl3: true; - xl4: true; - } -} - -// TODO: enable this once types conflict is fixed -// declare module '@mui/material/Button' { -// interface ButtonPropsVariantOverrides { -// code: true; -// } -// } - -const defaultTheme = createTheme(); - -export const blue = { - 50: '#EBF5FF', - 100: '#CCE5FF', - 200: '#99CCFF', - 300: '#66B2FF', - 400: '#3399FF', - main: '#0073E6', - 500: '#0073E6', - 600: '#006BD6', - 700: '#0061C2', - 800: '#004C99', - 900: '#003A75', -}; -export const blueDark = { - 50: '#EAEDF1', - 100: '#DAE0E7', - 200: '#ACBAC8', - 300: '#7B91A7', - main: '#7B91A7', - 400: '#4B5E71', - 500: '#3B4A59', - 600: '#2F3A46', - 700: '#1F262E', // contrast 13.64:1 - 800: '#141A1F', - 900: '#101418', -}; -export const grey = { - 50: '#F3F6F9', - 100: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C5D0E0', // vs blueDark 900: WCAG 11.6 AAA, APCA 78 Best for text - 400: '#AEBACB', // vs blueDark 900: WCAG 9 AAA, APCA 63.3 Ok for text - 500: '#99A7BB', // vs blueDark 900: WCAG 7.5 AAA, APCA 54.3 Only for large text - 600: '#6F7F95', // vs white bg: WCAG 4.1 AA, APCA 68.7 Ok for text - 700: '#576375', // vs white bg: WCAG 8.3 AAA, APCA 88.7 Best for text - 800: '#303740', // vs white bg: WCAG 11.9 AAA, APCA 97.3 Best for text - 900: '#1C2025', -}; -export const error = { - 50: '#FFF0F1', - 100: '#FFDBDE', - 200: '#FFBDC2', - 300: '#FF99A2', - 400: '#FF7A86', - 500: '#FF505F', - main: '#EB0014', // contrast 4.63:1 - 600: '#EB0014', - 700: '#C70011', - 800: '#94000D', - 900: '#570007', -}; -export const success = { - 50: '#E9FBF0', - 100: '#C6F6D9', - 200: '#9AEFBC', - 300: '#6AE79C', - 400: '#3EE07F', - 500: '#21CC66', - 600: '#1DB45A', - 700: '#1AA251', - 800: '#178D46', - 900: '#0F5C2E', -}; -export const warning = { - 50: '#FFF9EB', - 100: '#FFF3C1', - 200: '#FFECA1', - 300: '#FFDC48', // vs blueDark900: WCAG 10.4 AAA, APCA 72 Ok for text - 400: '#F4C000', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text - 500: '#DEA500', // vs blueDark900: WCAG 8 AAA normal, APCA 58 Only large text - main: '#DEA500', - 600: '#D18E00', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text - 700: '#AB6800', // vs white bg: WCAG 4.4 AA large, APCA 71 Ok for text - 800: '#8C5800', // vs white bg: WCAG 5.9 AAA large, APCA 80 Best for text - 900: '#5A3600', // vs white bg: WCAG 10.7 AAA, APCA 95 Best for text -}; -// context on the Advanced Perceptual Contrast Algorithm (APCA) used above here: https://github.com/w3c/wcag/issues/695 - -const systemFont = [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', -]; - -export const getMetaThemeColor = (mode: 'light' | 'dark') => { - const themeColor = { - light: blue[600], - dark: blueDark[900], - }; - return themeColor[mode]; -}; - -export const getDesignTokens = (mode: 'light' | 'dark') => - ({ - palette: { - primary: { - ...blue, - ...(mode === 'dark' && { - main: blue[400], - }), - }, - secondary: { - ...grey, - ...(mode === 'light' && { - main: blueDark[100], - contrastText: blueDark[600], - }), - ...(mode === 'dark' && { - main: blueDark[700], - contrastText: blueDark[600], - }), - }, - divider: mode === 'dark' ? alpha(blueDark[500], 0.2) : grey[100], - primaryDark: blueDark, - mode, - ...(mode === 'dark' && { - background: { - default: blueDark[900], - paper: alpha(blueDark[800], 0.8), - }, - }), - common: { - black: '#0B0D0E', - }, - text: { - ...(mode === 'light' && { - primary: grey[900], - secondary: grey[800], - tertiary: grey[700], - }), - ...(mode === 'dark' && { - primary: '#fff', - secondary: grey[400], - tertiary: grey[500], - }), - }, - grey: { - ...grey, - ...(mode === 'light' && { - main: grey[100], - contrastText: grey[600], - }), - ...(mode === 'dark' && { - main: grey[700], - contrastText: grey[600], - }), - }, - error, - success: { - ...success, - ...(mode === 'dark' && { - main: '#1DB45A', // contrast 6.17:1 (blueDark.800) - }), - ...(mode === 'light' && { - main: '#1AA251', // contrast 3.31:1 - }), - }, - warning, - gradients: { - lightGrayRadio: - 'radial-gradient(50% 50% at 50% 50%, #F0F7FF 0%, rgba(240, 247, 255, 0.05) 100%)', - stylizedRadio: - mode === 'dark' - ? 'linear-gradient(rgba(0 0 0 / 0.1), rgba(0 0 0 / 0.1)), linear-gradient(254.86deg, rgba(0, 58, 117, 0.18) 0%, rgba(11, 13, 14, 0.3) 49.98%, rgba(0, 76, 153, 0.21) 100.95%)' - : 'linear-gradient(rgba(255 255 255 / 0.3), rgba(255 255 255 / 0.3)), linear-gradient(254.86deg, rgba(194, 224, 255, 0.12) 0%, rgba(194, 224, 255, 0.12) 0%, rgba(255, 255, 255, 0.3) 49.98%, rgba(240, 247, 255, 0.3) 100.95%)', - linearSubtle: - mode === 'light' - ? `linear-gradient(to top right, ${alpha(blue[50], 0.3)} 40%, ${alpha( - grey[50], - 0.2, - )} 100%)` - : `linear-gradient(to top right, ${alpha(blue[900], 0.1)} 40%, ${alpha( - blueDark[800], - 0.2, - )} 100%)`, - }, - }, - shape: { - borderRadius: 12, - }, - spacing: 8, - typography: { - fontFamily: ['"IBM Plex Sans"', ...systemFont].join(','), - // Match VS Code - // https://github.com/microsoft/vscode/blob/b38691f611d1ce3ef437c67a1b047c757b7b4e53/src/vs/editor/common/config/editorOptions.ts#L4578-L4580 - // https://github.com/microsoft/vscode/blob/d950552131d7350a45dac8b59bf179469c36c2ac/src/vs/editor/standalone/browser/standalone-tokens.css#L10 - fontFamilyCode: [ - 'Menlo', // macOS - 'Consolas', // Windows - '"Droid Sans Mono"', // Linux - 'monospace', // fallback - ].join(','), - fontFamilyTagline: ['"General Sans"', ...systemFont].join(','), - fontFamilySystem: systemFont.join(','), - fontWeightSemiBold: 600, - fontWeightExtraBold: 800, - h1: { - fontFamily: ['"General Sans"', ...systemFont].join(','), - fontSize: 'clamp(2.5rem, 1.125rem + 3.5vw, 3.5em)', - fontWeight: 600, - lineHeight: 78 / 70, - letterSpacing: -0.2, - ...(mode === 'light' && { - color: blueDark[900], - }), - }, - h2: { - fontFamily: ['"General Sans"', ...systemFont].join(','), - fontSize: 'clamp(1.5rem, 0.9643rem + 1.4286vw, 2.25rem)', - fontWeight: 600, - lineHeight: 44 / 36, - letterSpacing: -0.2, - color: mode === 'dark' ? grey[100] : blueDark[700], - }, - h3: { - fontFamily: ['"General Sans"', ...systemFont].join(','), - fontSize: defaultTheme.typography.pxToRem(36), - lineHeight: 44 / 36, - letterSpacing: 0.2, - }, - h4: { - fontFamily: ['"General Sans"', ...systemFont].join(','), - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 42 / 28, - letterSpacing: 0.2, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(24), - lineHeight: 36 / 24, - letterSpacing: 0.1, - color: mode === 'dark' ? blue[300] : blue.main, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(20), - lineHeight: 30 / 20, - }, - button: { - textTransform: 'initial', - fontWeight: 700, - letterSpacing: 0, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - lineHeight: 24 / 18, - letterSpacing: 0, - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(16), // 16px - lineHeight: 24 / 16, - letterSpacing: 0, - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), // 14px - lineHeight: 21 / 14, - letterSpacing: 0, - }, - caption: { - display: 'inline-block', - fontSize: defaultTheme.typography.pxToRem(12), // 12px - lineHeight: 18 / 12, - letterSpacing: 0, - fontWeight: 700, - }, - allVariants: { - scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)', - }, - }, - /** - * This utility exists to help transitioning to CSS variables page by page (prevent dark mode flicker). - * It will use the proper styling method based on the theme because the component might be on the page that does not support CSS variables yet. - * - * 😓 Without this utility: - * { - * ...theme.vars ? { - * color: theme.vars.palette.primary.main, - * [theme.getColorScheme('dark')]: { - * color: '#fff', - * } - * } : { - * color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary.main, - * } - * } - * - * 🤩 Using the utility: - * { - * color: (theme.vars || theme).palette.primary.main, - * ...theme.applyDarkStyles({ - * color: '#fff', - * }), - * } - * - * ------------------------------------------------------------------------------------------------- - * 💡 This util should be used in an array if the styles contain pseudo classes or nested selectors: - * - * ❌ There is a chance that the upper selectors could be overridden - * { - * // the whole selector could be overridden - * '&::before': { - * color: ... - * }, - * ...theme.applyDarkStyles({ - * '&::before': { - * color: ... - * } - * }) - * } - * - * ✅ use an array (supports in both emotion and styled-components) - * Only the `color` will be overridden in dark mode. - * [ - * '&::before': { - * color: ... - * }, - * theme.applyDarkStyles({ - * '&::before': { - * color: ... - * } - * }) - * ] - */ - applyDarkStyles(css: Parameters[0]) { - return (this as Theme).applyStyles('dark', css); - }, - }) as ThemeOptions; - -export function getThemedComponents(): ThemeOptions { - return { - components: { - MuiAlert: { - styleOverrides: { - root: { - padding: '12px 16px', - }, - standardWarning: ({ theme }) => [ - { - backgroundColor: alpha(theme.palette.warning[50], 0.5), - color: (theme.vars || theme).palette.grey[900], - border: '1px solid', - borderColor: alpha(theme.palette.warning[600], 0.3), - '& .MuiAlert-icon': { - color: (theme.vars || theme).palette.warning[700], - }, - }, - theme.applyDarkStyles({ - backgroundColor: alpha(theme.palette.warning[700], 0.2), - color: (theme.vars || theme).palette.warning[50], - '& .MuiAlert-icon': { - color: (theme.vars || theme).palette.warning[200], - }, - }), - ], - icon: { - paddingTop: 12, - paddingBottom: 0, - }, - }, - }, - MuiButtonBase: { - defaultProps: { - disableTouchRipple: true, - disableRipple: true, - }, - styleOverrides: { - root: ({ theme }) => ({ - transition: 'all 100ms ease-in', - '&:focus-visible': { - outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - }, - }, - MuiButton: { - defaultProps: { - disableElevation: true, - }, - styleOverrides: { - root: ({ theme, ownerState }) => ({ - transition: 'all 120ms ease-in', - ...(ownerState.size === 'large' && { - ...theme.typography.body1, - lineHeight: 21 / 16, - padding: theme.spacing('8px', '10px', '10px', '12px'), - fontWeight: theme.typography.fontWeightSemiBold, - borderRadius: 10, - '& > span': { transition: '0.2s', marginLeft: 4 }, - '&:hover > span': { transform: 'translateX(2px)' }, - }), - ...(ownerState.size === 'medium' && { - fontSize: defaultTheme.typography.pxToRem(15), - padding: theme.spacing('8px', '12px', '8px', '14px'), - fontWeight: theme.typography.fontWeightSemiBold, - borderRadius: 8, - '& > span': { transition: '0.2s', marginLeft: 4 }, - '&:hover > span': { transform: 'translateX(2px)' }, - }), - ...(ownerState.size === 'small' && { - padding: theme.spacing('6px', 1), - fontFamily: theme.typography.fontFamily, - fontSize: defaultTheme.typography.pxToRem(13), - fontWeight: theme.typography.fontWeightSemiBold, - borderRadius: 8, - '& .MuiButton-startIcon': { - transition: '0.15s', - marginRight: 4, - marginLeft: -1, - }, - '& .MuiButton-endIcon': { - transition: '0.15s', - marginLeft: 4, - }, - '&:hover': { - '& .MuiButton-startIcon': { transform: 'translateX(-2px)' }, - '& .MuiButton-endIcon': { transform: 'translateX(2px)' }, - }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - color: (theme.vars || theme).palette.text.primary, - backgroundColor: alpha(theme.palette.primaryDark[50], 0.3), - borderColor: (theme.vars || theme).palette.primaryDark[100], - boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 2px 0.5px inset, ${alpha( - theme.palette.grey[100], - 0.5, - )} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`, - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primaryDark[50], - }, - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.primaryDark[100], - borderColor: alpha(theme.palette.primaryDark[600], 0.5), - backgroundColor: alpha(theme.palette.primaryDark[700], 0.4), - boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${alpha(theme.palette.primaryDark[900], 0.5)} 0 -2px 1px inset, ${theme.palette.common.black} 0 1px 2px 0`, - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primaryDark[700], - }, - }), - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'primary' && { - color: (theme.vars || theme).palette.primary[600], - backgroundColor: alpha(theme.palette.primary[50], 0.3), - borderColor: (theme.vars || theme).palette.primary[100], - boxShadow: `${theme.palette.primary[50]} 0 2px 0.5px inset, ${alpha( - theme.palette.primary[100], - 0.2, - )} 0 -3px 0 inset, ${alpha(theme.palette.primary[100], 0.3)} 0 1px 2px 0`, - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[50], - borderColor: (theme.vars || theme).palette.primary[300], - }, - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.primary[200], - borderColor: alpha(theme.palette.primary[900], 0.7), - backgroundColor: alpha(theme.palette.primary[900], 0.2), - boxShadow: `${alpha(theme.palette.primary[900], 0.1)} 0 2px 1px inset, ${alpha( - theme.palette.common.black, - 0.5, - )} 0 -3px 0 inset, ${theme.palette.common.black} 0 1px 2px 0`, - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[900], - borderColor: (theme.vars || theme).palette.primary[700], - }, - }), - }), - ...(ownerState.variant === 'contained' && - ownerState.color === 'primary' && { - color: '#fff', - textShadow: `0 1px 1px ${alpha(theme.palette.common.black, 0.6)}`, - backgroundColor: (theme.vars || theme).palette.primary[500], - backgroundImage: `linear-gradient(180deg, ${alpha( - theme.palette.primary[500], - 0.6, - )} 0%, ${theme.palette.primary[600]} 100%)`, - boxShadow: `${theme.palette.primary[400]} 0 2px 0.5px inset, ${theme.palette.primary[700]} 0 -3px 1px inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`, - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[700], - }, - '&:active': { - backgroundColor: (theme.vars || theme).palette.primaryDark[700], - }, - }), - ...(ownerState.variant === 'text' && { - color: (theme.vars || theme).palette.primary[600], - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.primary[300], - }), - }), - }), - }, - variants: [ - { - // @ts-ignore internal repo module augmentation issue - props: { variant: 'code' }, - style: ({ theme }) => [ - { - cursor: 'copy', - padding: 0, - width: 'max-content', - backgroundColor: 'transparent', - color: (theme.vars || theme).palette.grey[600], - fontFamily: theme.typography.fontFamilyCode, - fontWeight: 400, - fontSize: defaultTheme.typography.pxToRem(12), - lineHeight: 21 / 14, - letterSpacing: 0, - WebkitFontSmoothing: 'subpixel-antialiased', - '& .MuiButton-startIcon': { - color: (theme.vars || theme).palette.grey[400], - }, - '& .MuiButton-endIcon': { - display: 'inline-block', - position: 'absolute', - color: (theme.vars || theme).palette.primary.main, - right: -22, - top: -1, - opacity: 0, - transitionProperty: 'opacity', - transitionDuration: '100ms', - transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', - }, - '&:hover, &.Mui-focusVisible': { - backgroundColor: 'transparent', - color: (theme.vars || theme).palette.primary.main, - '& .MuiButton-endIcon': { - color: (theme.vars || theme).palette.primary.main, - opacity: 1, - }, - }, - }, - theme.applyDarkStyles({ - '& .MuiButton-endIcon': { - color: (theme.vars || theme).palette.primary[300], - }, - '&:hover, &.Mui-focusVisible': { - color: (theme.vars || theme).palette.primary[300], - '& .MuiButton-endIcon': { - opacity: 1, - }, - }, - }), - ], - }, - { - // @ts-ignore internal repo module augmentation issue - props: { variant: 'codeOutlined' }, - style: ({ theme }) => [ - { - display: 'inline-block', - justifyContent: 'start', - overflowX: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - position: 'relative', - border: '1px solid', - color: (theme.vars || theme).palette.grey[900], - backgroundColor: alpha(theme.palette.primary[50], 0.3), - borderColor: (theme.vars || theme).palette.grey[200], - boxShadow: `0px 2px 2px ${alpha( - theme.palette.primary[100], - 0.2, - )}, inset 0px 4px 4px ${alpha(theme.palette.primary[100], 0.2)}`, - fontFamily: theme.typography.fontFamilyCode, - fontWeight: 400, - fontSize: defaultTheme.typography.pxToRem(12), - lineHeight: 21 / 14, - letterSpacing: 0, - WebkitFontSmoothing: 'subpixel-antialiased', - '& .MuiButton-endIcon': { - display: 'inline-block', - position: 'absolute', - top: 12, - right: 0, - marginRight: 10, - color: (theme.vars || theme).palette.grey[600], - }, - '&:hover, &.Mui-focusVisible': { - borderColor: (theme.vars || theme).palette.primary.main, - backgroundColor: (theme.vars || theme).palette.primary[50], - color: (theme.vars || theme).palette.primary[600], - '& .MuiButton-endIcon': { - color: (theme.vars || theme).palette.primary.main, - }, - }, - } as const, - theme.applyDarkStyles({ - color: (theme.vars || theme).palette.grey[500], - borderColor: (theme.vars || theme).palette.primaryDark[600], - backgroundColor: (theme.vars || theme).palette.primaryDark[700], - boxShadow: '0px 2px 2px #0B0D0E, inset 0px 4px 4px rgba(20, 25, 31, 0.3)', - '& .MuiButton-endIcon': { - color: (theme.vars || theme).palette.grey[400], - }, - '&:hover, &.Mui-focusVisible': { - backgroundColor: (theme.vars || theme).palette.primary[900], - color: (theme.vars || theme).palette.primary[100], - '& .MuiButton-endIcon': { - color: (theme.vars || theme).palette.primary[300], - }, - }, - }), - ], - }, - { - // @ts-ignore internal repo module augmentation issue - props: { variant: 'link' }, - style: ({ theme }) => ({ - marginBottom: 1, - fontSize: theme.typography.pxToRem(14), - fontWeight: theme.typography.fontWeightBold, - color: (theme.vars || theme).palette.primary[600], - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[50], - }, - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.primary[300], - '&:hover': { - backgroundColor: alpha(theme.palette.primary[800], 0.3), - }, - }), - }), - }, - ], - }, - MuiIconButton: { - variants: [ - { - props: { color: 'primary' }, - style: ({ theme }) => [ - { - height: 34, - width: 34, - border: `1px solid`, - borderColor: (theme.vars || theme).palette.grey[200], - color: (theme.vars || theme).palette.primary[500], - borderRadius: theme.shape.borderRadius, - boxShadow: `inset 0 1px 2px ${ - (theme.vars || theme).palette.grey[50] - }, 0 1px 0.5px ${alpha(theme.palette.grey[100], 0.6)}`, - '&:hover': { - borderColor: (theme.vars || theme).palette.grey[300], - background: (theme.vars || theme).palette.grey[50], - }, - }, - theme.applyDarkStyles({ - borderColor: (theme.vars || theme).palette.primaryDark[700], - color: (theme.vars || theme).palette.primary[300], - boxShadow: `inset 0 1px 1px ${ - (theme.vars || theme).palette.primaryDark[900] - }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`, - '&:hover': { - borderColor: (theme.vars || theme).palette.primaryDark[600], - background: alpha(theme.palette.primaryDark[700], 0.4), - }, - }), - ], - }, - { - props: { color: 'info' }, - style: ({ theme }) => [ - { - height: 34, - width: 34, - border: `1px solid`, - borderColor: (theme.vars || theme).palette.grey[200], - color: (theme.vars || theme).palette.grey[600], - borderRadius: theme.shape.borderRadius, - boxShadow: `inset 0 1px 2px ${ - (theme.vars || theme).palette.grey[50] - }, 0 1px 0.5px ${alpha(theme.palette.grey[100], 0.6)}`, - '&:hover': { - color: (theme.vars || theme).palette.primary.main, - borderColor: (theme.vars || theme).palette.grey[300], - background: (theme.vars || theme).palette.grey[50], - }, - }, - theme.applyDarkStyles({ - borderColor: (theme.vars || theme).palette.primaryDark[700], - color: (theme.vars || theme).palette.grey[400], - boxShadow: `inset 0 1px 1px ${ - (theme.vars || theme).palette.primaryDark[900] - }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`, - '&:hover': { - color: (theme.vars || theme).palette.primary[400], - borderColor: (theme.vars || theme).palette.primaryDark[600], - background: alpha(theme.palette.primaryDark[700], 0.4), - }, - }), - ], - }, - ], - }, - MuiMenu: { - styleOverrides: { - paper: ({ theme }) => [ - { - minWidth: 160, - color: (theme.vars || theme).palette.text.secondary, - backgroundImage: 'none', - border: '1px solid', - backgroundColor: (theme.vars || theme).palette.background.paper, - borderColor: (theme.vars || theme).palette.grey[200], - '& .MuiMenuItem-root': { - fontSize: theme.typography.pxToRem(14), - fontWeight: 500, - '&:hover, &:focus': { - backgroundColor: (theme.vars || theme).palette.grey[50], - }, - '&:focus-visible': { - outline: 'none', - }, - '&.Mui-selected': { - fontWeight: 500, - color: (theme.vars || theme).palette.primary[600], - backgroundColor: alpha(theme.palette.primary[100], 0.6), - }, - }, - }, - theme.applyDarkStyles({ - backgroundColor: (theme.vars || theme).palette.primaryDark[900], - borderColor: (theme.vars || theme).palette.primaryDark[700], - '& .MuiMenuItem-root': { - '&:hover, &:focus': { - backgroundColor: (theme.vars || theme).palette.primaryDark[700], - }, - '&.Mui-selected': { - color: (theme.vars || theme).palette.primary[300], - backgroundColor: alpha(theme.palette.primary[900], 0.4), - }, - }, - }), - ], - }, - }, - MuiPopover: { - styleOverrides: { - paper: ({ theme }) => ({ - boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)', - ...theme.applyDarkStyles({ - boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)', - }), - }), - }, - }, - MuiDivider: { - styleOverrides: { - root: ({ theme }) => ({ - borderColor: (theme.vars || theme).palette.grey[100], - ...theme.applyDarkStyles({ - borderColor: alpha(theme.palette.primaryDark[700], 0.8), - }), - }), - }, - }, - MuiLink: { - defaultProps: { - underline: 'none', - }, - styleOverrides: { - root: ({ theme }) => ({ - display: 'inline-flex', - alignItems: 'center', - fontWeight: theme.typography.fontWeightSemiBold, - '&.MuiTypography-body1 > svg': { - marginTop: 2, - }, - '& svg:last-child': { - marginLeft: 2, - }, - '&:focus-visible': { - outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - }, - variants: [ - { - props: { color: 'primary' }, - style: ({ theme }) => [ - { - color: (theme.vars || theme).palette.primary[600], - '&:hover': { - color: (theme.vars || theme).palette.primary[700], - }, - }, - theme.applyDarkStyles({ - color: (theme.vars || theme).palette.primary[300], - '&:hover': { - color: (theme.vars || theme).palette.primary[200], - }, - }), - ], - }, - ], - }, - MuiChip: { - styleOverrides: { - root: ({ ownerState: { color, variant }, theme }) => ({ - fontWeight: theme.typography.fontWeightSemiBold, - paddingBottom: 0.2, - ...(variant === 'outlined' && - color === 'default' && { - backgroundColor: alpha(theme.palette.grey[50], 0.5), - color: (theme.vars || theme).palette.grey[900], - borderColor: (theme.vars || theme).palette.grey[200], - '&:hover': { - backgroundColor: (theme.vars || theme).palette.grey[100], - color: (theme.vars || theme).palette.grey[900], - }, - ...theme.applyDarkStyles({ - backgroundColor: alpha(theme.palette.primaryDark[700], 0.4), - color: (theme.vars || theme).palette.grey[300], - borderColor: alpha(theme.palette.primaryDark[500], 0.5), - '&:hover': { - color: (theme.vars || theme).palette.grey[300], - backgroundColor: (theme.vars || theme).palette.primaryDark[700], - }, - }), - }), - ...(variant === 'outlined' && - color === 'info' && { - backgroundColor: alpha(theme.palette.grey[50], 0.5), - color: (theme.vars || theme).palette.grey[900], - borderColor: (theme.vars || theme).palette.grey[200], - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.grey[300], - backgroundColor: alpha(theme.palette.primaryDark[700], 0.5), - borderColor: (theme.vars || theme).palette.primaryDark[600], - }), - }), - ...(variant === 'outlined' && - color === 'primary' && { - borderColor: (theme.vars || theme).palette.primary[100], - backgroundColor: (theme.vars || theme).palette.primary[50], - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.primary[300], - borderColor: alpha(theme.palette.primary[500], 0.2), - backgroundColor: alpha(theme.palette.primary[700], 0.2), - }), - }), - ...(variant === 'outlined' && - color === 'success' && { - borderColor: (theme.vars || theme).palette.success[100], - backgroundColor: (theme.vars || theme).palette.success[50], - color: (theme.vars || theme).palette.success[900], - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.success[300], - borderColor: alpha(theme.palette.success[300], 0.2), - background: alpha(theme.palette.success[800], 0.2), - }), - }), - ...(variant === 'filled' && { - ...(color === 'default' && { - border: '1px solid transparent', - color: (theme.vars || theme).palette.primary[700], - backgroundColor: alpha(theme.palette.primary[100], 0.5), - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[100], - }, - ...theme.applyDarkStyles({ - color: '#fff', - backgroundColor: alpha(theme.palette.primaryDark[500], 0.8), - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primaryDark[600], - }, - }), - }), - ...(color === 'primary' && { - color: (theme.vars || theme).palette.primary[600], - backgroundColor: alpha(theme.palette.primary[100], 0.4), - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[100], - }, - '& .MuiChip-deleteIcon': { - color: (theme.vars || theme).palette.primary[600], - '&:hover': { - color: (theme.vars || theme).palette.primary[700], - }, - }, - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.primary[100], - backgroundColor: alpha(theme.palette.primary[800], 0.5), - '&:hover': { - backgroundColor: alpha(theme.palette.primary[900], 0.5), - }, - '& .MuiChip-deleteIcon': { - color: (theme.vars || theme).palette.primary[100], - '&:hover': { - color: (theme.vars || theme).palette.primary[50], - }, - }, - }), - }), - }), - // for labelling product in the search - // @ts-ignore internal repo module augmentation issue - ...(variant === 'light' && { - ...(color === 'default' && { - color: (theme.vars || theme).palette.primary[700], - backgroundColor: alpha(theme.palette.primary[100], 0.3), - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.primary[200], - backgroundColor: alpha(theme.palette.primaryDark[700], 0.5), - }), - }), - ...(color === 'warning' && { - color: (theme.vars || theme).palette.warning[900], - backgroundColor: (theme.vars || theme).palette.warning[100], - ...theme.applyDarkStyles({ - color: '#fff', - backgroundColor: (theme.vars || theme).palette.warning[900], - }), - }), - ...(color === 'success' && { - color: (theme.vars || theme).palette.success[900], - backgroundColor: (theme.vars || theme).palette.success[100], - ...theme.applyDarkStyles({ - color: '#fff', - backgroundColor: (theme.vars || theme).palette.success[900], - }), - }), - }), - }), - }, - }, - MuiList: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, - MuiListItemButton: { - styleOverrides: { - root: ({ theme }) => [ - { - padding: '8px', - textTransform: 'none', - fontWeight: 500, - fontSize: theme.typography.pxToRem(14), - color: theme.palette.grey[700], - borderRadius: 0, - '&:hover': { - backgroundColor: theme.palette.grey[50], - }, - '&.Mui-selected': { - borderRadius: 10, - border: '1px solid', - color: (theme.vars || theme).palette.primary[500], - borderColor: `${(theme.vars || theme).palette.primary[500]} !important`, - backgroundColor: (theme.vars || theme).palette.primary[50], - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[100], - }, - }, - } as const, - theme.applyDarkStyles({ - color: theme.palette.grey[300], - '&:hover': { - backgroundColor: alpha(theme.palette.primaryDark[700], 0.4), - }, - '&.Mui-selected': { - color: '#fff', - borderColor: `${(theme.vars || theme).palette.primary[700]} !important`, - backgroundColor: (theme.vars || theme).palette.primaryDark[700], - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primaryDark[600], - }, - }, - }), - ], - }, - }, - MuiSelect: { - defaultProps: { - IconComponent: ArrowDropDownRounded, - }, - styleOverrides: { - iconFilled: { - top: 'calc(50% - .25em)', - }, - }, - }, - MuiTab: { - defaultProps: { - disableTouchRipple: true, - }, - }, - MuiPaper: { - styleOverrides: { - root: ({ theme, ownerState }) => [ - { - backgroundImage: 'none', - backgroundColor: '#fff', - '&[href]': { - textDecorationLine: 'none', - }, - transition: theme.transitions.create(['border', 'box-shadow'], { - duration: theme.transitions.duration.shortest, - }), - ...(ownerState.variant === 'outlined' && { - display: 'block', - borderColor: (theme.vars || theme).palette.grey[100], - '&[href]': { - textDecorationLine: 'none', - boxShadow: `inset 0 1px 2px ${ - (theme.vars || theme).palette.grey[50] - }, 0 1px 2px ${alpha(theme.palette.grey[100], 0.6)}`, - '&:hover': { - borderColor: (theme.vars || theme).palette.primary[200], - boxShadow: `0px 2px 8px ${(theme.vars || theme).palette.primary[100]}`, - }, - '&:focus-visible': { - outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, - outlineOffset: '2px', - }, - }, - ':is(a&), :is(button&)': { - '&:hover': { - borderColor: (theme.vars || theme).palette.primary[200], - boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`, - }, - }, - }), - }, - theme.applyDarkStyles({ - backgroundColor: (theme.vars || theme).palette.primaryDark[900], - ...(ownerState.variant === 'outlined' && { - borderColor: (theme.vars || theme).palette.primaryDark[700], - backgroundColor: alpha(theme.palette.primaryDark[800], 0.6), - '&[href]': { - textDecorationLine: 'none', - boxShadow: `inset 0 1px 1px ${ - (theme.vars || theme).palette.primaryDark[900] - }, 0 1px 2px ${(theme.vars || theme).palette.common.black}`, - '&:hover': { - borderColor: alpha(theme.palette.primary[600], 0.5), - boxShadow: `0px 2px 8px ${alpha(theme.palette.primary[900], 0.6)}`, - }, - }, - ':is(a&), :is(button&)': { - '&:hover': { - boxShadow: `0px 4px 24px ${(theme.vars || theme).palette.common.black}`, - }, - }, - }), - }), - ], - }, - }, - MuiTableCell: { - styleOverrides: { - root: ({ theme, ownerState }) => ({ - padding: theme.spacing(1, 2), - borderColor: (theme.vars || theme).palette.divider, - ...(ownerState.variant === 'head' && { - color: (theme.vars || theme).palette.text.primary, - fontWeight: 700, - }), - ...(ownerState.variant === 'body' && { - color: (theme.vars || theme).palette.text.secondary, - }), - }), - }, - }, - MuiToggleButtonGroup: { - styleOverrides: { - root: ({ theme }) => ({ - backgroundColor: '#fff', - ...theme.applyDarkStyles({ - backgroundColor: (theme.vars || theme).palette.primaryDark[900], - }), - }), - }, - }, - MuiToggleButton: { - styleOverrides: { - root: ({ theme, ownerState }) => [ - { - textTransform: 'none', - fontWeight: 'medium', - color: theme.palette.text.secondary, - borderColor: theme.palette.grey[200], - ...(ownerState.size === 'small' && { - padding: '0.375rem 0.75rem', - }), - '&.Mui-selected': { - color: (theme.vars || theme).palette.primary[700], - borderColor: `${(theme.vars || theme).palette.primary[500]} !important`, - backgroundColor: (theme.vars || theme).palette.primary[50], - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[100], - }, - }, - } as const, - theme.applyDarkStyles({ - borderColor: theme.palette.primaryDark[700], - '&:hover': { - backgroundColor: alpha(theme.palette.primaryDark[600], 0.2), - }, - '&.Mui-selected': { - color: (theme.vars || theme).palette.primary[200], - borderColor: `${(theme.vars || theme).palette.primary[700]} !important`, - backgroundColor: alpha(theme.palette.primary[900], 0.4), - '&:hover': { - backgroundColor: alpha(theme.palette.primary[900], 0.8), - borderColor: `${(theme.vars || theme).palette.primary[400]} !important`, - }, - }, - }), - ], - }, - }, - MuiTooltip: { - styleOverrides: { - tooltip: { - borderRadius: 6, - padding: '6px 12px', - }, - }, - }, - MuiSwitch: { - styleOverrides: { - root: { - width: 32, - height: 20, - padding: 0, - '& .MuiSwitch-switchBase': { - '&.Mui-checked': { - transform: 'translateX(11px)', - color: '#fff', - }, - }, - }, - switchBase: { - height: 20, - width: 20, - padding: 0, - color: '#fff', - '&.Mui-checked + .MuiSwitch-track': { - opacity: 1, - }, - }, - track: ({ theme }) => ({ - opacity: 1, - borderRadius: 32, - backgroundColor: theme.palette.grey[400], - ...theme.applyDarkStyles({ - backgroundColor: theme.palette.grey[800], - }), - }), - thumb: { - flexShrink: 0, - width: '14px', - height: '14px', - }, - }, - }, - MuiPaginationItem: { - styleOverrides: { - root: ({ theme }) => [ - { - textTransform: 'none', - fontWeight: theme.typography.fontWeightSemiBold, - color: theme.palette.grey[700], - borderColor: theme.palette.grey[200], - borderRadius: '8px', - '&.Mui-selected': { - color: (theme.vars || theme).palette.primary[500], - borderColor: `${(theme.vars || theme).palette.primary[500]} !important`, - backgroundColor: (theme.vars || theme).palette.primary[50], - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[100], - }, - }, - } as const, - theme.applyDarkStyles({ - color: theme.palette.grey[200], - borderColor: theme.palette.primaryDark[700], - '&.Mui-selected': { - color: theme.palette.primary[100], - borderColor: `${(theme.vars || theme).palette.primary[700]} !important`, - backgroundColor: alpha(theme.palette.primary[900], 0.5), - '&:hover': { - backgroundColor: alpha(theme.palette.primary[900], 0.8), - }, - }, - }), - ], - }, - }, - MuiCssBaseline: { - defaultProps: { - enableColorScheme: true, - }, - styleOverrides: { - html: { - overflowY: 'scroll', - // TODO add support for it, - // https://github.com/mui/material-ui/issues/40748 - // scrollbarGutter: 'stable', - }, - }, - }, - }, - }; -} - -export const brandingDarkTheme = createTheme({ - ...getDesignTokens('dark'), - ...getThemedComponents(), -}); - -export const brandingLightTheme = createTheme({ - ...getDesignTokens('light'), - ...getThemedComponents(), -}); +export * from '@mui/docs/branding'; diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js index 80781fd2724f25..abf1775d1768fd 100644 --- a/docs/src/modules/components/ApiPage.js +++ b/docs/src/modules/components/ApiPage.js @@ -13,7 +13,7 @@ import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs'; import Ad from 'docs/src/modules/components/Ad'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; import PropertiesSection, { getPropsToC, } from 'docs/src/modules/components/ApiPage/sections/PropertiesSection'; diff --git a/docs/src/modules/components/ApiPage/ApiWarning.tsx b/docs/src/modules/components/ApiPage/ApiWarning.tsx index f1b6a5dcd11f55..be5457e4e48a48 100644 --- a/docs/src/modules/components/ApiPage/ApiWarning.tsx +++ b/docs/src/modules/components/ApiPage/ApiWarning.tsx @@ -6,7 +6,7 @@ import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; const StyledAlert = styled(Alert)( ({ theme }) => ({ diff --git a/docs/src/modules/components/ApiPage/list/ClassesList.tsx b/docs/src/modules/components/ApiPage/list/ClassesList.tsx index d7366af1b60239..9923913965eeeb 100644 --- a/docs/src/modules/components/ApiPage/list/ClassesList.tsx +++ b/docs/src/modules/components/ApiPage/list/ClassesList.tsx @@ -10,7 +10,7 @@ import ExpandableApiItem, { import { brandingLightTheme as lightTheme, brandingDarkTheme as darkTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; import ApiWarning from 'docs/src/modules/components/ApiPage/ApiWarning'; const StyledApiItem = styled(ExpandableApiItem)( diff --git a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx index 5f5a076ea250dc..bf8d7ec1d833a0 100644 --- a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx +++ b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx @@ -7,7 +7,7 @@ import { Divider, IconButton, SxProps } from '@mui/material'; import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; type DescriptionType = 'props' | 'classes' | 'CSS' | 'slots'; diff --git a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx index 801349f37cc536..4b941670f15ae3 100644 --- a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx +++ b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx @@ -6,7 +6,7 @@ import { useTranslate } from '@mui/docs/i18n'; import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; import ExpandableApiItem, { ApiItemContaier, } from 'docs/src/modules/components/ApiPage/list/ExpandableApiItem'; diff --git a/docs/src/modules/components/ApiPage/list/SlotsList.tsx b/docs/src/modules/components/ApiPage/list/SlotsList.tsx index f205d62009f5fd..d05c5a859fa45e 100644 --- a/docs/src/modules/components/ApiPage/list/SlotsList.tsx +++ b/docs/src/modules/components/ApiPage/list/SlotsList.tsx @@ -4,7 +4,7 @@ import { styled, alpha } from '@mui/material/styles'; import { brandingLightTheme as lightTheme, brandingDarkTheme as darkTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; import { useTranslate } from '@mui/docs/i18n'; import ExpandableApiItem, { ApiItemContaier, diff --git a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx index f2546202208eb1..b0b687e10ad9a0 100644 --- a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx +++ b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx @@ -5,7 +5,7 @@ import { styled, alpha } from '@mui/material/styles'; import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; import { getHash } from 'docs/src/modules/components/ApiPage/list/ClassesList'; import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer'; import { useTranslate } from '@mui/docs/i18n'; diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx index cf52eef9036d60..b734f241b2c6ed 100644 --- a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx +++ b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx @@ -5,7 +5,7 @@ import { useTranslate } from '@mui/docs/i18n'; import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; import { Properties, getHash } from 'docs/src/modules/components/ApiPage/list/PropertiesList'; import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer'; import ApiWarning from 'docs/src/modules/components/ApiPage/ApiWarning'; diff --git a/docs/src/modules/components/ApiPage/table/SlotsTable.tsx b/docs/src/modules/components/ApiPage/table/SlotsTable.tsx index d08c3e68aa3133..bdaaf23ef987fe 100644 --- a/docs/src/modules/components/ApiPage/table/SlotsTable.tsx +++ b/docs/src/modules/components/ApiPage/table/SlotsTable.tsx @@ -5,7 +5,7 @@ import { styled, alpha } from '@mui/material/styles'; import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; import { SlotsFormatedParams, getHash } from 'docs/src/modules/components/ApiPage/list/SlotsList'; import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer'; diff --git a/docs/src/modules/components/ApiPage/table/StyledTableContainer.tsx b/docs/src/modules/components/ApiPage/table/StyledTableContainer.tsx index a9be6a2fa5150a..c0222301382202 100644 --- a/docs/src/modules/components/ApiPage/table/StyledTableContainer.tsx +++ b/docs/src/modules/components/ApiPage/table/StyledTableContainer.tsx @@ -1,5 +1,5 @@ import { styled, alpha } from '@mui/material/styles'; -import { brandingDarkTheme as darkTheme } from 'docs/src/modules/brandingTheme'; +import { brandingDarkTheme as darkTheme } from '@mui/docs/branding'; const StyledTableContainer = styled('div')( ({ theme }) => ({ diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js index 00e9cc24183998..0cf3f3da46828e 100644 --- a/docs/src/modules/components/AppSearch.js +++ b/docs/src/modules/components/AppSearch.js @@ -54,7 +54,7 @@ const SearchButton = styled('button')(({ theme }) => [ cursor: 'pointer', transitionProperty: 'all', transitionDuration: '150ms', - boxShadow: `inset 0 -1px 1px ${(theme.vars || theme).palette.grey[100]}, 0 1px 0.5px ${alpha( + boxShadow: `inset 0 -1px 0 ${(theme.vars || theme).palette.grey[100]}, 0 1px 0.5px ${alpha( theme.palette.grey[100], 0.6, )}`, diff --git a/docs/src/modules/components/AppSettingsDrawer.js b/docs/src/modules/components/AppSettingsDrawer.js index 8b04f7d36e3dd6..1bde4081dbfd62 100644 --- a/docs/src/modules/components/AppSettingsDrawer.js +++ b/docs/src/modules/components/AppSettingsDrawer.js @@ -66,14 +66,25 @@ export default function AppSettingsDrawer(props) { open={open} PaperProps={{ elevation: 0, - sx: { width: { xs: 310, sm: 360 }, borderRadius: '10px 0px 0px 10px' }, + sx: { + width: { xs: 310, sm: 360 }, + borderRadius: '10px 0px 0px 10px', + border: '1px solid', + borderColor: 'divider', + }, }} {...other} > - + {t('settings.settings')} @@ -157,8 +168,8 @@ export default function AppSettingsDrawer(props) { href="/material-ui/customization/color/#playground" data-ga-event-category="settings" data-ga-event-action="colors" - size="medium" variant="outlined" + size="small" fullWidth > {t('settings.editDocsColors')} diff --git a/docs/src/modules/components/BackToTop.tsx b/docs/src/modules/components/BackToTop.tsx index a3366f7f626fb4..38b35e541700e3 100644 --- a/docs/src/modules/components/BackToTop.tsx +++ b/docs/src/modules/components/BackToTop.tsx @@ -35,7 +35,13 @@ export default function BackToTop() { return ( - + ({ - backgroundColor: (theme.vars || theme).palette.primary[100], - boxShadow: `0px 4px 20px rgba(170, 180, 190, 0.3)`, - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[200], - }, - '&:active': { - boxShadow: `0px 4px 20px rgba(170, 180, 190, 0.6)`, - }, - }), - (theme) => - theme.applyDarkStyles({ - backgroundColor: (theme.vars || theme).palette.primaryDark[400], - boxShadow: `0px 4px 20px rgba(0, 0, 0, 0.5)`, - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primaryDark[500], - }, - '&:active': { - boxShadow: `0px 4px 20px rgba(0, 0, 0, 0.7)`, - }, - }), - ]} size="small" aria-label={t('backToTop')} onClick={handleClick} data-ga-event-category="docs" data-ga-event-action="click-back-to-top" + sx={(theme) => ({ + backgroundColor: (theme.vars || theme).palette.primary[50], + border: `1px solid ${(theme.vars || theme).palette.primary[200]}`, + boxShadow: `0px 4px 12px rgba(0, 0, 0, 0.1)`, + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[200], + }, + ...theme.applyDarkStyles({ + backgroundColor: (theme.vars || theme).palette.primary[900], + borderColor: (theme.vars || theme).palette.primary[700], + boxShadow: `0px 4px 12px rgba(0, 0, 0, 0.8)`, + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[800], + }, + }), + })} > ({ diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index 12cdd5d9c5e1d2..4bebe7324c9390 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -21,9 +21,8 @@ import { useCodeStyling } from 'docs/src/modules/utils/codeStylingSolution'; import { CODE_VARIANTS, CODE_STYLING } from 'docs/src/modules/constants'; import { useUserLanguage, useTranslate } from '@mui/docs/i18n'; import stylingSolutionMapping from 'docs/src/modules/utils/stylingSolutionMapping'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider, blue, blueDark, grey } from '@mui/docs/branding'; import DemoToolbarRoot from 'docs/src/modules/components/DemoToolbarRoot'; -import { blue, blueDark, grey } from 'docs/src/modules/brandingTheme'; /** * Removes leading spaces (indentation) present in the `.tsx` previews diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx index 8877685b09e47d..e32390019b3f63 100644 --- a/docs/src/modules/components/DemoEditor.tsx +++ b/docs/src/modules/components/DemoEditor.tsx @@ -8,7 +8,7 @@ import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; import CodeCopyButton from 'docs/src/modules/components/CodeCopyButton'; import { useTranslate } from '@mui/docs/i18n'; import { useCodeCopy } from 'docs/src/modules/utils/CodeCopy'; -import { blueDark } from 'docs/src/modules/brandingTheme'; +import { blueDark } from '@mui/docs/branding'; const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [ { diff --git a/docs/src/modules/components/DemoSandbox.js b/docs/src/modules/components/DemoSandbox.js index 57ebf0ace75a40..56134daf603efd 100644 --- a/docs/src/modules/components/DemoSandbox.js +++ b/docs/src/modules/components/DemoSandbox.js @@ -13,7 +13,7 @@ import { useTheme, styled, createTheme, ThemeProvider } from '@mui/material/styl import rtl from 'jss-rtl'; import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary'; import { useTranslate } from '@mui/docs/i18n'; -import { getDesignTokens } from 'docs/src/modules/brandingTheme'; +import { getDesignTokens } from '@mui/docs/branding'; import { highDensity } from 'docs/src/modules/components/ThemeContext'; const iframeDefaultJoyTheme = extendTheme({ diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js index 8e4b9d7d0f47ab..cdd753cb98009b 100644 --- a/docs/src/modules/components/DiamondSponsors.js +++ b/docs/src/modules/components/DiamondSponsors.js @@ -17,10 +17,7 @@ const NativeLink = styled('a')(({ theme }) => ({ border: '1px solid', borderColor: (theme.vars || theme).palette.divider, transition: theme.transitions.create(['color', 'border-color']), - boxShadow: `inset 0 1px 1px ${(theme.vars || theme).palette.grey[50]}, 0 1px 2px ${alpha( - theme.palette.grey[100], - 0.6, - )}`, + boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.3)} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`, '&:hover': { backgroundColor: (theme.vars || theme).palette.grey[50], }, @@ -32,9 +29,7 @@ const NativeLink = styled('a')(({ theme }) => ({ display: 'inline-block', }, ...theme.applyDarkStyles({ - boxShadow: `inset 0 1px 1px ${(theme.vars || theme).palette.primaryDark[900]}, 0 1px 0.5px ${ - (theme.vars || theme).palette.common.black - }`, + boxShadow: `${alpha(theme.palette.primaryDark[600], 0.15)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`, '&:hover': { backgroundColor: (theme.vars || theme).palette.primaryDark[800], borderColor: (theme.vars || theme).palette.primaryDark[600], @@ -127,24 +122,18 @@ export default function DiamondSponsors() { borderRadius: 1, border: '1px dashed', transition: theme.transitions.create(['color', 'border-color', 'background-color']), - backgroundColor: alpha(theme.palette.primary[50], 0.5), - borderColor: (theme.vars || theme).palette.grey[200], - boxShadow: `inset 0 1px 1px ${ - (theme.vars || theme).palette.grey[50] - }, 0 1px 2px ${alpha(theme.palette.grey[100], 0.5)}`, + backgroundColor: alpha(theme.palette.grey[50], 0.5), + borderColor: (theme.vars || theme).palette.grey[300], '&:hover': { backgroundColor: alpha(theme.palette.primary[100], 0.5), borderColor: (theme.vars || theme).palette.primary[300], }, ...theme.applyDarkStyles({ - backgroundColor: alpha(theme.palette.primary[700], 0.1), - borderColor: alpha(theme.palette.primary[400], 0.2), - boxShadow: `inset 0 1px 1px ${ - (theme.vars || theme).palette.primaryDark[800] - }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`, + backgroundColor: alpha(theme.palette.primaryDark[700], 0.2), + borderColor: (theme.vars || theme).palette.primaryDark[700], '&:hover': { backgroundColor: alpha(theme.palette.primary[700], 0.2), - borderColor: (theme.vars || theme).palette.primary[400], + borderColor: (theme.vars || theme).palette.primary[800], }, }), })} diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js index d8b16b3067ee3b..3136dcee771934 100644 --- a/docs/src/modules/components/EditPage.js +++ b/docs/src/modules/components/EditPage.js @@ -10,6 +10,12 @@ export default function EditPage(props) { const { sourceLocation } = props; const t = useTranslate(); const userLanguage = useUserLanguage(); + + if (!sourceLocation) { + // An empty div such that the footer layout stays unchanged. + return
; + } + const CROWDIN_ROOT_URL = 'https://crowdin.com/project/material-ui-docs/'; const crowdInLocale = LOCALES[userLanguage] || userLanguage; const crowdInPath = sourceLocation.substring(0, sourceLocation.lastIndexOf('/')); diff --git a/docs/src/modules/components/HighlightedCode.test.js b/docs/src/modules/components/HighlightedCode.test.js index 8129c9ee38def0..05f7f1b627a523 100644 --- a/docs/src/modules/components/HighlightedCode.test.js +++ b/docs/src/modules/components/HighlightedCode.test.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer } from '@mui-internal/test-utils'; import { ThemeProvider, createTheme } from '@mui/material/styles'; -import { getDesignTokens } from 'docs/src/modules/brandingTheme'; +import { getDesignTokens } from '@mui/docs/branding'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; describe('HighlightedCode', () => { diff --git a/docs/src/modules/components/JoyStartingLinksCollection.js b/docs/src/modules/components/JoyStartingLinksCollection.js index 78aaf32ef30167..fd789c58e134f9 100644 --- a/docs/src/modules/components/JoyStartingLinksCollection.js +++ b/docs/src/modules/components/JoyStartingLinksCollection.js @@ -3,7 +3,7 @@ import Grid from '@mui/material/Unstable_Grid2'; import InstallDesktopRoundedIcon from '@mui/icons-material/InstallDesktopRounded'; import WebRoundedIcon from '@mui/icons-material/WebRounded'; import DrawRoundedIcon from '@mui/icons-material/DrawRounded'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; const content = [ { diff --git a/docs/src/modules/components/JoyThemeBuilder.tsx b/docs/src/modules/components/JoyThemeBuilder.tsx index e668edbed5979e..fa274153726f15 100644 --- a/docs/src/modules/components/JoyThemeBuilder.tsx +++ b/docs/src/modules/components/JoyThemeBuilder.tsx @@ -60,7 +60,7 @@ import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined'; import DarkMode from '@mui/icons-material/DarkMode'; import LightMode from '@mui/icons-material/LightMode'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; import codeSandbox from 'docs/src/modules/sandbox/CodeSandbox'; import sourceJoyTemplates, { TemplateData } from 'docs/src/modules/joy/sourceJoyTemplates'; import extractTemplates from 'docs/src/modules/utils/extractTemplates'; diff --git a/docs/src/modules/components/JoyUsageDemo.tsx b/docs/src/modules/components/JoyUsageDemo.tsx index 3816f8cb40912c..8928e277af5ef7 100644 --- a/docs/src/modules/components/JoyUsageDemo.tsx +++ b/docs/src/modules/components/JoyUsageDemo.tsx @@ -18,7 +18,7 @@ import Select from '@mui/joy/Select'; import Sheet from '@mui/joy/Sheet'; import Switch from '@mui/joy/Switch'; import Typography from '@mui/joy/Typography'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; const shallowEqual = (item1: { [k: string]: any }, item2: { [k: string]: any }) => { diff --git a/docs/src/modules/components/JoyVariablesDemo.tsx b/docs/src/modules/components/JoyVariablesDemo.tsx index 2926d05efc4f63..2d4392d3059bf3 100644 --- a/docs/src/modules/components/JoyVariablesDemo.tsx +++ b/docs/src/modules/components/JoyVariablesDemo.tsx @@ -13,7 +13,7 @@ import Input, { inputClasses } from '@mui/joy/Input'; import ReplayRoundedIcon from '@mui/icons-material/ReplayRounded'; import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; interface DataItem { var: string; diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js index d97703653a0fd9..9d12aef4dad2c5 100644 --- a/docs/src/modules/components/MarkdownDocs.js +++ b/docs/src/modules/components/MarkdownDocs.js @@ -8,7 +8,7 @@ import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs'; import { useUserLanguage } from '@mui/docs/i18n'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; import Ad from 'docs/src/modules/components/Ad'; import AdGuest from 'docs/src/modules/components/AdGuest'; diff --git a/docs/src/modules/components/MarkdownDocsV2.js b/docs/src/modules/components/MarkdownDocsV2.js index 37cb3f4c931048..96d6f972945cc9 100644 --- a/docs/src/modules/components/MarkdownDocsV2.js +++ b/docs/src/modules/components/MarkdownDocsV2.js @@ -12,7 +12,7 @@ import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs'; import { useTranslate, useUserLanguage } from '@mui/docs/i18n'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; import Ad from 'docs/src/modules/components/Ad'; import { HEIGHT as AppFrameHeight } from 'docs/src/modules/components/AppFrame'; import { HEIGHT as TabsHeight } from 'docs/src/modules/components/ComponentPageTabs'; diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index e18b2ed63aefa8..1b2b6a0816f49c 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -5,7 +5,7 @@ import { alpha, darken, styled } from '@mui/material/styles'; import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; const Root = styled('div')( ({ theme }) => ({ diff --git a/docs/src/modules/components/MaterialStartingLinksCollection.js b/docs/src/modules/components/MaterialStartingLinksCollection.js index bd6e06ca553e3a..fe209a71381e6b 100644 --- a/docs/src/modules/components/MaterialStartingLinksCollection.js +++ b/docs/src/modules/components/MaterialStartingLinksCollection.js @@ -5,7 +5,7 @@ import WebRoundedIcon from '@mui/icons-material/WebRounded'; import DrawRoundedIcon from '@mui/icons-material/DrawRounded'; import PlayCircleFilledWhiteRoundedIcon from '@mui/icons-material/PlayCircleFilledWhiteRounded'; import DesignServicesRoundedIcon from '@mui/icons-material/DesignServicesRounded'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; const content = [ { diff --git a/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js b/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js index 254ad2fd0291c2..6bc020895cf542 100644 --- a/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js +++ b/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Grid from '@mui/material/Unstable_Grid2'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; import HighlightAltRoundedIcon from '@mui/icons-material/HighlightAltRounded'; import CssRoundedIcon from '@mui/icons-material/CssRounded'; import DnsRoundedIcon from '@mui/icons-material/DnsRounded'; diff --git a/docs/src/modules/components/MaterialUIDesignResources.js b/docs/src/modules/components/MaterialUIDesignResources.js index a88061cfd131b2..51f5affd1be9c0 100644 --- a/docs/src/modules/components/MaterialUIDesignResources.js +++ b/docs/src/modules/components/MaterialUIDesignResources.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Grid from '@mui/material/Unstable_Grid2'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; const content = [ { diff --git a/docs/src/modules/components/MaterialUIExampleCollection.js b/docs/src/modules/components/MaterialUIExampleCollection.js index 15fb508ee72374..d53eddf8147e59 100644 --- a/docs/src/modules/components/MaterialUIExampleCollection.js +++ b/docs/src/modules/components/MaterialUIExampleCollection.js @@ -13,78 +13,78 @@ const examples = [ name: 'Next.js App Router', label: 'View JS example', tsLabel: 'View TS example', - link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs', - tsLink: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts', + link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs', + tsLink: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs-ts', src: '/static/images/examples/next.svg', }, { name: 'Vite.js', label: 'View JS example', tsLabel: 'View TS example', - link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-vite', - tsLink: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-ts', + link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-vite', + tsLink: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-vite-ts', src: '/static/images/examples/vite.svg', }, { name: 'Next.js Pages Router', label: 'View JS example', tsLabel: 'View TS example', - link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router', + link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs-pages-router', tsLink: - 'https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router-ts', + 'https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs-pages-router-ts', src: '/static/images/examples/next.svg', }, { name: 'Remix', label: 'View TS example', - link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-remix-ts', + link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-remix-ts', src: '/static/images/examples/remix.svg', }, { name: 'Tailwind CSS + CRA', label: 'View TS example', - link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts', + link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-tailwind-ts', src: '/static/images/examples/tailwindcss.svg', }, { name: 'Create React App', label: 'View JS example', tsLabel: 'View TS example', - link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra', - tsLink: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-ts', + link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra', + tsLink: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-ts', src: '/static/images/examples/cra.svg', }, { name: 'styled-components', label: 'View JS example', tsLabel: 'View TS example', - link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components', + link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-styled-components', tsLink: - 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts', + 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-styled-components-ts', src: '/static/images/examples/styled.png', }, { name: 'Preact', label: 'View JS example', - link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-preact', + link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-preact', src: '/static/images/examples/preact.svg', }, { name: 'CDN', label: 'View JS example', - link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-via-cdn', + link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-via-cdn', src: , }, { name: 'Express.js (server-rendered)', label: 'View JS example', - link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-express-ssr', + link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-express-ssr', src: '/static/images/examples/express.png', }, { name: 'Gatsby', label: 'View JS example', - link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-gatsby', + link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-gatsby', src: '/static/images/examples/gatsby.svg', }, { diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js index 46713fcf715e8b..1ae7af3bea639c 100644 --- a/docs/src/modules/components/ThemeContext.js +++ b/docs/src/modules/components/ThemeContext.js @@ -10,11 +10,7 @@ import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/u import { getCookie } from 'docs/src/modules/utils/helpers'; import useLazyCSS from 'docs/src/modules/utils/useLazyCSS'; import { useUserLanguage } from '@mui/docs/i18n'; -import { - getDesignTokens, - getThemedComponents, - getMetaThemeColor, -} from 'docs/src/modules/brandingTheme'; +import { getDesignTokens, getThemedComponents, getMetaThemeColor } from '@mui/docs/branding'; import useMediaQuery from '@mui/material/useMediaQuery'; import useLocalStorageState from '@mui/utils/useLocalStorageState'; diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx index f709c8e4db8df3..6db97b5221fb91 100644 --- a/docs/src/modules/components/ThemeViewer.tsx +++ b/docs/src/modules/components/ThemeViewer.tsx @@ -6,7 +6,7 @@ import ExpandIcon from '@mui/icons-material/ExpandMore'; import CollapseIcon from '@mui/icons-material/ChevronRight'; import { TreeView } from '@mui/x-tree-view/TreeView'; import { TreeItem as MuiTreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem'; -import { blue, blueDark } from 'docs/src/modules/brandingTheme'; +import { blue, blueDark } from '@mui/docs/branding'; function getType(value: any) { if (Array.isArray(value)) { diff --git a/docs/src/modules/components/TopLayoutCareers.js b/docs/src/modules/components/TopLayoutCareers.js index 95daa634e83f0f..0c16563b87b4c7 100644 --- a/docs/src/modules/components/TopLayoutCareers.js +++ b/docs/src/modules/components/TopLayoutCareers.js @@ -29,7 +29,11 @@ export default function TopLayoutCareers(props) { return ( - + diff --git a/docs/src/modules/sandbox/CodeSandbox.test.js b/docs/src/modules/sandbox/CodeSandbox.test.js index 16f745b352da2a..16249c8dc4500c 100644 --- a/docs/src/modules/sandbox/CodeSandbox.test.js +++ b/docs/src/modules/sandbox/CodeSandbox.test.js @@ -33,7 +33,7 @@ describe('CodeSandbox', () => { 'https://github.com/mui/material-ui/blob/v5.7.0/docs/data/material/components/buttons/BasicButtons.js', dependencies: { react: 'latest', - '@mui/material': 'latest', + '@mui/material': 'next', 'react-dom': 'latest', '@emotion/react': 'latest', '@emotion/styled': 'latest', @@ -123,7 +123,7 @@ ReactDOM.createRoot(document.querySelector("#root")).render( 'https://github.com/mui/material-ui/blob/v5.7.0/docs/data/material/components/buttons/BasicButtons.tsx', dependencies: { react: 'latest', - '@mui/material': 'latest', + '@mui/material': 'next', 'react-dom': 'latest', '@emotion/react': 'latest', '@emotion/styled': 'latest', @@ -230,7 +230,7 @@ ReactDOM.createRoot(document.querySelector("#root")!).render( expect(result.dependencies).to.deep.equal({ '@emotion/react': 'latest', '@emotion/styled': 'latest', - '@mui/material': 'latest', + '@mui/material': 'next', '@types/react': 'latest', '@types/react-dom': 'latest', react: 'latest', diff --git a/docs/src/modules/sandbox/Dependencies.test.js b/docs/src/modules/sandbox/Dependencies.test.js index 71b4f6b1cba69b..94eca04aab7ac6 100644 --- a/docs/src/modules/sandbox/Dependencies.test.js +++ b/docs/src/modules/sandbox/Dependencies.test.js @@ -40,8 +40,8 @@ const styles = theme => ({ '@emotion/react': 'latest', '@emotion/styled': 'latest', '@foo-bar/bip': 'latest', - '@mui/material': 'latest', - '@mui/base': 'latest', + '@mui/material': 'next', + '@mui/base': 'next', 'prop-types': 'latest', }); }); @@ -71,7 +71,7 @@ const suggestions = [ 'react-dom': 'latest', '@emotion/react': 'latest', '@emotion/styled': 'latest', - '@mui/material': 'latest', + '@mui/material': 'next', '@unexisting/thing': 'latest', 'autosuggest-highlight': 'latest', 'prop-types': 'latest', @@ -100,8 +100,8 @@ import { LocalizationProvider as MuiPickersLocalizationProvider, KeyboardTimePic 'prop-types': 'latest', '@emotion/react': 'latest', '@emotion/styled': 'latest', - '@mui/material': 'latest', - '@mui/lab': 'latest', + '@mui/material': 'next', + '@mui/lab': 'next', }); }); @@ -127,8 +127,8 @@ import 'exceljs'; 'prop-types': 'latest', '@emotion/react': 'latest', '@emotion/styled': 'latest', - '@mui/material': 'latest', - '@mui/lab': 'latest', + '@mui/material': 'next', + '@mui/lab': 'next', exceljs: 'latest', }); }); @@ -146,8 +146,8 @@ import 'exceljs'; '@emotion/react': 'latest', '@emotion/styled': 'latest', '@foo-bar/bip': 'latest', - '@mui/material': 'latest', - '@mui/base': 'latest', + '@mui/material': 'next', + '@mui/base': 'next', '@types/foo-bar__bip': 'latest', '@types/prop-types': 'latest', '@types/react-dom': 'latest', @@ -167,7 +167,7 @@ import 'exceljs'; 'react-dom': 'latest', '@emotion/react': 'latest', '@emotion/styled': 'latest', - '@mui/material': 'latest', + '@mui/material': 'next', '@types/react-dom': 'latest', '@types/react': 'latest', typescript: 'latest', @@ -195,8 +195,8 @@ import { 'react-dom': 'latest', '@emotion/react': 'latest', '@emotion/styled': 'latest', - '@mui/material': 'latest', - '@mui/lab': 'latest', + '@mui/material': 'next', + '@mui/lab': 'next', }); }); @@ -215,8 +215,8 @@ import lab from '@mui/lab'; 'react-dom': 'latest', '@emotion/react': 'latest', '@emotion/styled': 'latest', - '@mui/material': 'latest', - '@mui/lab': 'latest', + '@mui/material': 'next', + '@mui/lab': 'next', }); }); @@ -517,10 +517,10 @@ export default function EmailExample() { 'react-dom': 'latest', '@emotion/react': 'latest', '@emotion/styled': 'latest', - '@mui/icons-material': 'latest', - '@mui/joy': 'latest', - '@mui/material': 'latest', - '@mui/system': 'latest', + '@mui/icons-material': 'next', + '@mui/joy': 'next', + '@mui/material': 'next', + '@mui/system': 'next', '@types/react': 'latest', '@types/react-dom': 'latest', typescript: 'latest', diff --git a/docs/src/modules/sandbox/Dependencies.ts b/docs/src/modules/sandbox/Dependencies.ts index 12f82f92ad9799..c943c19e0729f4 100644 --- a/docs/src/modules/sandbox/Dependencies.ts +++ b/docs/src/modules/sandbox/Dependencies.ts @@ -49,7 +49,7 @@ export default function SandboxDependencies( process.env.SOURCE_CODE_REPO !== 'https://github.com/mui/material-ui' ) { // #default-branch-switch - return 'latest'; + return 'next'; } const shortSha = commitRef.slice(0, 8); return `https://pkg.csb.dev/mui/material-ui/commit/${shortSha}/@mui/${packageName}`; diff --git a/docs/src/modules/sandbox/StackBlitz.test.js b/docs/src/modules/sandbox/StackBlitz.test.js index 0d25c2a95c77b7..67bc0625b4cf80 100644 --- a/docs/src/modules/sandbox/StackBlitz.test.js +++ b/docs/src/modules/sandbox/StackBlitz.test.js @@ -83,7 +83,7 @@ ReactDOM.createRoot(document.querySelector("#root")).render( }, dependencies: { react: 'latest', - '@mui/material': 'latest', + '@mui/material': 'next', 'react-dom': 'latest', '@emotion/react': 'latest', '@emotion/styled': 'latest', @@ -186,7 +186,7 @@ ReactDOM.createRoot(document.querySelector("#root")!).render( }, dependencies: { react: 'latest', - '@mui/material': 'latest', + '@mui/material': 'next', 'react-dom': 'latest', '@emotion/react': 'latest', '@emotion/styled': 'latest', diff --git a/docs/translations/api-docs/backdrop/backdrop.json b/docs/translations/api-docs/backdrop/backdrop.json index 3b9559dfff07b0..b439692f008532 100644 --- a/docs/translations/api-docs/backdrop/backdrop.json +++ b/docs/translations/api-docs/backdrop/backdrop.json @@ -16,12 +16,8 @@ "description": "If true, the backdrop is invisible. It can be used when rendering a popover or a custom select component." }, "open": { "description": "If true, the component is shown." }, - "slotProps": { - "description": "The extra props for the slot components. You can override the existing props or add new ones.
This prop is an alias for the componentsProps prop, which will be deprecated in the future." - }, - "slots": { - "description": "The components used for each slot inside.
This prop is an alias for the components prop, which will be deprecated in the future." - }, + "slotProps": { "description": "The props used for each slot inside." }, + "slots": { "description": "The components used for each slot inside." }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, @@ -37,7 +33,10 @@ "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "invisible={true}" - }, - "root": { "description": "Styles applied to the root element." } + } + }, + "slotDescriptions": { + "root": "The component that renders the root.", + "transition": "The component that renders the transition. Follow this guide to learn more about the requirements for this component." } } diff --git a/docs/translations/api-docs/badge/badge.json b/docs/translations/api-docs/badge/badge.json index 8b765118a3a5f6..cd14dae0e8c1b1 100644 --- a/docs/translations/api-docs/badge/badge.json +++ b/docs/translations/api-docs/badge/badge.json @@ -11,11 +11,9 @@ "component": { "description": "The component used for the root node. Either a string to use a HTML element or a component." }, - "components": { - "description": "The components used for each slot inside.
This prop is an alias for the slots prop. It's recommended to use the slots prop instead." - }, + "components": { "description": "The components used for each slot inside." }, "componentsProps": { - "description": "The extra props for the slot components. You can override the existing props or add new ones.
This prop is an alias for the slotProps prop. It's recommended to use the slotProps prop instead, as componentsProps will be deprecated in the future." + "description": "The extra props for the slot components. You can override the existing props or add new ones." }, "invisible": { "description": "If true, the badge is invisible." }, "max": { "description": "Max count to show." }, diff --git a/docs/translations/api-docs/button-group/button-group.json b/docs/translations/api-docs/button-group/button-group.json index a4d761a2f23f79..f3d4332d76ef50 100644 --- a/docs/translations/api-docs/button-group/button-group.json +++ b/docs/translations/api-docs/button-group/button-group.json @@ -30,6 +30,12 @@ "variant": { "description": "The variant to use." } }, "classDescriptions": { + "colorPrimary": { + "description": "Styles applied to the root element if color="primary"" + }, + "colorSecondary": { + "description": "Styles applied to the root element if color="secondary"" + }, "contained": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -58,87 +64,109 @@ "groupedContained": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"contained\"" + "conditions": "variant=\"contained\"", + "deprecationInfo": "Combine the .MuiButtonGroup-contained and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedContainedHorizontal": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"contained\" and orientation=\"horizontal\"" + "conditions": "variant=\"contained\" and orientation=\"horizontal\"", + "deprecationInfo": "Combine the .MuiButtonGroup-contained , .MuiButtonGroup-horizontal and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedContainedPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"contained\" and color=\"primary\"" + "conditions": "variant=\"contained\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButtonGroup-contained , .MuiButtonGroup-colorPrimary and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedContainedSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"contained\" and color=\"secondary\"" + "conditions": "variant=\"contained\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButtonGroup-contained , .MuiButtonGroup-colorSecondary and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedContainedVertical": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"contained\" and orientation=\"vertical\"" + "conditions": "variant=\"contained\" and orientation=\"vertical\"", + "deprecationInfo": "Combine the .MuiButtonGroup-contained , .MuiButtonGroup-vertical and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedHorizontal": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "orientation=\"horizontal\"" + "conditions": "orientation=\"horizontal\"", + "deprecationInfo": "Combine the .MuiButtonGroup-horizontal and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedOutlined": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"outlined\"" + "conditions": "variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiButtonGroup-outlined and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedOutlinedHorizontal": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"outlined\" and orientation=\"horizontal\"" + "conditions": "variant=\"outlined\" and orientation=\"horizontal\"", + "deprecationInfo": "Combine the .MuiButtonGroup-outlined , .MuiButtonGroup-horizontal and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedOutlinedPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"outlined\" and color=\"primary\"" + "conditions": "variant=\"outlined\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButtonGroup-outlined , .MuiButtonGroup-colorPrimary and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedOutlinedSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"outlined\" and color=\"secondary\"" + "conditions": "variant=\"outlined\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButtonGroup-outlined , .MuiButtonGroup-colorSecondary and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedOutlinedVertical": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"outlined\" and orientation=\"vertical\"" + "conditions": "variant=\"outlined\" and orientation=\"vertical\"", + "deprecationInfo": "Combine the .MuiButtonGroup-outlined , .MuiButtonGroup-vertical and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedText": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"text\"" + "conditions": "variant=\"text\"", + "deprecationInfo": "Combine the .MuiButtonGroup-text and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedTextHorizontal": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"text\" and orientation=\"horizontal\"" + "conditions": "variant=\"text\" and orientation=\"horizontal\"", + "deprecationInfo": "Combine the .MuiButtonGroup-text , .MuiButtonGroup-horizontal and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedTextPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"text\" and color=\"primary\"" + "conditions": "variant=\"text\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButtonGroup-text , .MuiButtonGroup-colorPrimary and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedTextSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"text\" and color=\"secondary\"" + "conditions": "variant=\"text\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButtonGroup-text , .MuiButtonGroup-colorSecondary and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedTextVertical": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "variant=\"text\" and orientation=\"vertical\"" + "conditions": "variant=\"text\" and orientation=\"vertical\"", + "deprecationInfo": "Combine the .MuiButtonGroup-text , .MuiButtonGroup-vertical and .MuiButtonGroup-grouped classes instead. How to migrate" }, "groupedVertical": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "orientation=\"vertical\"" + "conditions": "orientation=\"vertical\"", + "deprecationInfo": "Combine the .MuiButtonGroup-vertical and .MuiButtonGroup-grouped classes instead. How to migrate" + }, + "horizontal": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "orientation=\"horizontal\"" }, "lastButton": { "description": "Styles applied to {{nodeName}}.", diff --git a/docs/translations/api-docs/step-label/step-label.json b/docs/translations/api-docs/step-label/step-label.json index 48a77b4b7f3ade..7a68d574ce6f9d 100644 --- a/docs/translations/api-docs/step-label/step-label.json +++ b/docs/translations/api-docs/step-label/step-label.json @@ -10,6 +10,7 @@ "icon": { "description": "Override the default label of the step icon." }, "optional": { "description": "The optional node to display." }, "slotProps": { "description": "The props used for each slot inside." }, + "slots": { "description": "The components used for each slot inside." }, "StepIconComponent": { "description": "The component to render in place of the StepIcon." }, @@ -55,10 +56,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon container element" }, - "label": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the label element that wraps children" - }, "labelContainer": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the container element which wraps label and optional" @@ -69,5 +66,6 @@ "nodeName": "the root element", "conditions": "orientation=\"vertical\"" } - } + }, + "slotDescriptions": { "label": "The component that renders the label." } } diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 8f2b913c50c525..98890158834ba8 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -26,6 +26,8 @@ "/system/react-container": "Container", "/system/react-grid": "Grid", "/system/react-stack": "Stack", + "/system/migration": "Migration", + "/system/migration/migration-v5": "Migrating to v6", "/system/experimental-api": "Experimental APIs", "/system/experimental-api/configure-the-sx-prop": "Configure the sx prop", "/system/experimental-api/css-theme-variables": "CSS Theme Variables", @@ -235,7 +237,6 @@ "/material-ui/customization/z-index": "z-index", "/material-ui/customization/transitions": "Transitions", "/material-ui/guides": "How-to guides", - "/material-ui/guides/material-3-components": "Material Design 3 components", "/material-ui/guides/minimizing-bundle-size": "Minimizing bundle size", "/material-ui/guides/server-rendering": "Server rendering", "/material-ui/guides/responsive-ui": "Responsive UI", @@ -261,6 +262,8 @@ "/material-ui/migration/migrating-from-deprecated-apis": "Migrating from deprecated APIs", "/material-ui/migration/migration-grid-v2": "Migrating to Grid v2", "/material-ui/migration/pickers-migration": "Migration from @material-ui/pickers", + "Upgrade to v6": "Upgrade to v6", + "/material-ui/migration/migration-v5": "Migrating to v6", "Upgrade to v5": "Upgrade to v5", "/material-ui/migration/migration-v4": "Migrating to v5: getting started", "/material-ui/migration/v5-style-changes": "Breaking changes: style and theme", diff --git a/examples/.eslintrc.js b/examples/.eslintrc.js index 3b559e5a7c5b7a..1cfca7d337a8ca 100644 --- a/examples/.eslintrc.js +++ b/examples/.eslintrc.js @@ -12,4 +12,12 @@ module.exports = { // create-vite generates .jsx 'react/jsx-filename-extension': 'off', }, + overrides: [ + { + files: ['pigment-css-remix-ts/**/*.*'], + rules: { + 'react/react-in-jsx-scope': 'off', + }, + }, + ], }; diff --git a/examples/base-ui-cra-ts/README.md b/examples/base-ui-cra-ts/README.md index 7938f7fca126d0..2029b19cd297d5 100644 --- a/examples/base-ui-cra-ts/README.md +++ b/examples/base-ui-cra-ts/README.md @@ -11,7 +11,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/base-ui-cra-ts +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/base-ui-cra-ts cd base-ui-cra-ts ``` @@ -26,6 +26,6 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-ui-cra-ts) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/base-ui-cra-ts) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/base-ui-cra-ts) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/base-ui-cra-ts) diff --git a/examples/base-ui-cra-ts/package.json b/examples/base-ui-cra-ts/package.json index 427498085b9f0c..12a532a52261a3 100644 --- a/examples/base-ui-cra-ts/package.json +++ b/examples/base-ui-cra-ts/package.json @@ -3,7 +3,7 @@ "version": "5.0.0", "private": true, "dependencies": { - "@mui/base": "latest", + "@mui/base": "next", "@types/react": "latest", "@types/react-dom": "latest", "react": "latest", diff --git a/examples/base-ui-cra/README.md b/examples/base-ui-cra/README.md index b30905698d8d41..ba507114f7029d 100644 --- a/examples/base-ui-cra/README.md +++ b/examples/base-ui-cra/README.md @@ -11,7 +11,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/base-ui-cra +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/base-ui-cra cd base-ui-cra ``` @@ -26,6 +26,6 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-ui-cra) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/base-ui-cra) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/base-ui-cra) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/base-ui-cra) diff --git a/examples/base-ui-cra/package.json b/examples/base-ui-cra/package.json index b7367974062f6c..339c479c7ebfd0 100644 --- a/examples/base-ui-cra/package.json +++ b/examples/base-ui-cra/package.json @@ -3,7 +3,7 @@ "version": "5.0.0", "private": true, "dependencies": { - "@mui/base": "latest", + "@mui/base": "next", "react": "latest", "react-dom": "latest", "react-scripts": "latest" diff --git a/examples/base-ui-nextjs-tailwind-ts/README.md b/examples/base-ui-nextjs-tailwind-ts/README.md index 3f256ef21693d1..4810c38b4c01ea 100644 --- a/examples/base-ui-nextjs-tailwind-ts/README.md +++ b/examples/base-ui-nextjs-tailwind-ts/README.md @@ -9,7 +9,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/base-ui-nextjs-tailwind-ts +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/base-ui-nextjs-tailwind-ts cd base-ui-nextjs-tailwind-ts ``` @@ -24,9 +24,9 @@ or -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/base-ui-nextjs-tailwind-ts) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/base-ui-nextjs-tailwind-ts) ## Learn more diff --git a/examples/base-ui-nextjs-tailwind-ts/package.json b/examples/base-ui-nextjs-tailwind-ts/package.json index df7aa7bf90f276..9d0b4aa4b0c9cc 100644 --- a/examples/base-ui-nextjs-tailwind-ts/package.json +++ b/examples/base-ui-nextjs-tailwind-ts/package.json @@ -10,7 +10,7 @@ "post-update": "echo \"codesandbox preview only, need an update\" && pnpm update --latest" }, "dependencies": { - "@mui/base": "latest", + "@mui/base": "next", "clsx": "latest", "next": "latest", "react": "latest", diff --git a/examples/base-ui-vite-tailwind-ts/README.md b/examples/base-ui-vite-tailwind-ts/README.md index 4545337ebfed16..fb1f58b18a3714 100644 --- a/examples/base-ui-vite-tailwind-ts/README.md +++ b/examples/base-ui-vite-tailwind-ts/README.md @@ -10,8 +10,10 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): + + ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/base-ui-vite-tailwind-ts +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/base-ui-vite-tailwind-ts cd base-ui-vite-tailwind-ts ``` @@ -26,6 +28,6 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind-ts) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/base-ui-vite-tailwind-ts) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind-ts) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/next/master/examples/base-ui-vite-tailwind-ts) diff --git a/examples/base-ui-vite-tailwind-ts/package.json b/examples/base-ui-vite-tailwind-ts/package.json index 030161a63f0991..a3ae0ef04d711f 100644 --- a/examples/base-ui-vite-tailwind-ts/package.json +++ b/examples/base-ui-vite-tailwind-ts/package.json @@ -10,7 +10,7 @@ "preview": "vite preview" }, "dependencies": { - "@mui/base": "latest", + "@mui/base": "next", "react": "latest", "react-dom": "latest" }, diff --git a/examples/base-ui-vite-tailwind/README.md b/examples/base-ui-vite-tailwind/README.md index 37e997ae9ec3ee..c9eae3c65e2acc 100644 --- a/examples/base-ui-vite-tailwind/README.md +++ b/examples/base-ui-vite-tailwind/README.md @@ -10,8 +10,10 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): + + ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/base-ui-vite-tailwind +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/base-ui-vite-tailwind cd base-ui-vite-tailwind ``` @@ -26,6 +28,6 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/base-ui-vite-tailwind) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/base-ui-vite-tailwind) diff --git a/examples/base-ui-vite-tailwind/package.json b/examples/base-ui-vite-tailwind/package.json index eae01e51904be7..6f7b1369696907 100644 --- a/examples/base-ui-vite-tailwind/package.json +++ b/examples/base-ui-vite-tailwind/package.json @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@mui/base": "latest", + "@mui/base": "next", "react": "latest", "react-dom": "latest" }, diff --git a/examples/joy-ui-cra-ts/README.md b/examples/joy-ui-cra-ts/README.md index 01765382b76618..e0de9c863fc936 100644 --- a/examples/joy-ui-cra-ts/README.md +++ b/examples/joy-ui-cra-ts/README.md @@ -9,7 +9,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/joy-ui-cra-ts +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/joy-ui-cra-ts cd joy-ui-cra-ts ``` @@ -24,13 +24,13 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/joy-ui-cra-ts) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/joy-ui-cra-ts) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/joy-ui-cra-ts) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/joy-ui-cra-ts) ## What's next? You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/joy-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/joy-ui/getting-started/templates/) section. diff --git a/examples/joy-ui-cra-ts/package.json b/examples/joy-ui-cra-ts/package.json index f49142ca1fb58c..d49a7ef9051791 100644 --- a/examples/joy-ui-cra-ts/package.json +++ b/examples/joy-ui-cra-ts/package.json @@ -5,7 +5,7 @@ "dependencies": { "@emotion/react": "latest", "@emotion/styled": "latest", - "@mui/joy": "latest", + "@mui/joy": "next", "@types/react": "latest", "@types/react-dom": "latest", "react": "latest", diff --git a/examples/joy-ui-nextjs-ts/README.md b/examples/joy-ui-nextjs-ts/README.md index 796dc1137db89c..5be78719e54c3a 100644 --- a/examples/joy-ui-nextjs-ts/README.md +++ b/examples/joy-ui-nextjs-ts/README.md @@ -9,7 +9,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/joy-ui-nextjs-ts +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/joy-ui-nextjs-ts cd joy-ui-nextjs-ts ``` @@ -26,9 +26,9 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/joy-ui-nextjs-ts) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/joy-ui-nextjs-ts) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/joy-ui-nextjs-ts) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/joy-ui-nextjs-ts) ## Learn more @@ -42,4 +42,4 @@ To learn more about this example: You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/joy-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/joy-ui/getting-started/templates/) section. diff --git a/examples/joy-ui-nextjs-ts/package.json b/examples/joy-ui-nextjs-ts/package.json index 78e7e100f18cf0..8dd964dab2ca4e 100644 --- a/examples/joy-ui-nextjs-ts/package.json +++ b/examples/joy-ui-nextjs-ts/package.json @@ -13,7 +13,7 @@ "@emotion/cache": "latest", "@emotion/react": "latest", "@emotion/styled": "latest", - "@mui/joy": "latest", + "@mui/joy": "next", "next": "latest", "react": "latest", "react-dom": "latest" diff --git a/examples/joy-ui-vite-ts/README.md b/examples/joy-ui-vite-ts/README.md index d4132910765647..573ee7874108e2 100644 --- a/examples/joy-ui-vite-ts/README.md +++ b/examples/joy-ui-vite-ts/README.md @@ -8,8 +8,10 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): + + ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/joy-ui-vite-ts +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/joy-ui-vite-ts cd joy-ui-vite-ts ``` @@ -24,9 +26,9 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/joy-ui-vite-ts) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/joy-ui-vite-ts) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/joy-ui-vite-ts) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/joy-ui-vite-ts) ## The idea behind the example @@ -38,4 +40,4 @@ It includes `@mui/joy` and it's peer dependencies. You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/joy-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/joy-ui/getting-started/templates/) section. diff --git a/examples/joy-ui-vite-ts/package.json b/examples/joy-ui-vite-ts/package.json index a48b10f9b57a6d..b2ec5a6b0b3cab 100644 --- a/examples/joy-ui-vite-ts/package.json +++ b/examples/joy-ui-vite-ts/package.json @@ -12,7 +12,7 @@ "dependencies": { "@emotion/react": "latest", "@emotion/styled": "latest", - "@mui/joy": "latest", + "@mui/joy": "next", "react": "latest", "react-dom": "latest" }, diff --git a/examples/material-ui-cra-styled-components-ts/README.md b/examples/material-ui-cra-styled-components-ts/README.md index 4fa59826c2ab3b..e4fe2372157f31 100644 --- a/examples/material-ui-cra-styled-components-ts/README.md +++ b/examples/material-ui-cra-styled-components-ts/README.md @@ -23,7 +23,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-cra-styled-components-ts +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-cra-styled-components-ts cd material-ui-cra-styled-components-ts ``` @@ -40,7 +40,7 @@ npm start Note that CodeSandbox is not supporting react-app-rewired, yet you can [still see the code](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts). -The following link leverages this demo: https://mui.com/material-ui/integrations/interoperability/#change-the-default-styled-engine with Parcel's alias feature within the `package.json`. +The following link leverages this demo: https://next.mui.com/material-ui/integrations/interoperability/#change-the-default-styled-engine with Parcel's alias feature within the `package.json`. [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/styled-components-interoperability-w9z9d) @@ -57,4 +57,4 @@ Note, the version 5 of `@mui/styled-engine-sc` is compatible with version 5 of ` You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-cra-styled-components-ts/package.json b/examples/material-ui-cra-styled-components-ts/package.json index 966c65fe21652c..b1ebe2eec3f1ee 100644 --- a/examples/material-ui-cra-styled-components-ts/package.json +++ b/examples/material-ui-cra-styled-components-ts/package.json @@ -3,9 +3,9 @@ "version": "5.0.0", "private": true, "dependencies": { - "@mui/lab": "latest", - "@mui/material": "latest", - "@mui/styled-engine-sc": "^6.0.0", + "@mui/lab": "next", + "@mui/material": "next", + "@mui/styled-engine-sc": "next", "@testing-library/jest-dom": "latest", "@testing-library/react": "latest", "@testing-library/user-event": "latest", diff --git a/examples/material-ui-cra-styled-components/README.md b/examples/material-ui-cra-styled-components/README.md index e4a94251ed7bc8..b8f29298bc033a 100644 --- a/examples/material-ui-cra-styled-components/README.md +++ b/examples/material-ui-cra-styled-components/README.md @@ -7,7 +7,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-cra-styled-components +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-cra-styled-components cd material-ui-cra-styled-components ``` @@ -24,7 +24,7 @@ npm start Note that CodeSandbox is not supporting react-app-rewired, yet you can [still see the code](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-cra-styled-components). -The following link leverages this demo: https://mui.com/material-ui/integrations/interoperability/#change-the-default-styled-engine with Parcel's alias feature within the `package.json`. +The following link leverages this demo: https://next.mui.com/material-ui/integrations/interoperability/#change-the-default-styled-engine with Parcel's alias feature within the `package.json`. [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/styled-components-interoperability-w9z9d) @@ -41,4 +41,4 @@ Note, the version 5 of `@mui/styled-engine-sc` is compatible with version 5 of ` You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-cra-styled-components/package.json b/examples/material-ui-cra-styled-components/package.json index 1d4a7b240a15af..e0ab5b95a41d9e 100644 --- a/examples/material-ui-cra-styled-components/package.json +++ b/examples/material-ui-cra-styled-components/package.json @@ -3,9 +3,9 @@ "version": "5.0.0", "private": true, "dependencies": { - "@mui/material": "latest", - "@mui/lab": "latest", - "@mui/styled-engine-sc": "^6.0.0", + "@mui/material": "next", + "@mui/lab": "next", + "@mui/styled-engine-sc": "next", "@testing-library/jest-dom": "latest", "@testing-library/react": "latest", "@testing-library/user-event": "latest", diff --git a/examples/material-ui-cra-tailwind-ts/README.md b/examples/material-ui-cra-tailwind-ts/README.md index 79033b58047bc7..86a1d1a8421c0d 100644 --- a/examples/material-ui-cra-tailwind-ts/README.md +++ b/examples/material-ui-cra-tailwind-ts/README.md @@ -7,7 +7,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-cra-tailwind-ts +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-cra-tailwind-ts cd material-ui-cra-tailwind-ts ``` @@ -22,12 +22,10 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/material-ui-cra-tailwind-ts) ## The idea behind the example - - This example demonstrates how you can use [Tailwind CSS](https://tailwindcss.com/) and [Create React App](https://github.com/facebookincubator/create-react-app) together with Material UI. It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. @@ -36,4 +34,4 @@ It includes `@mui/material` and its peer dependencies, including [Emotion](https You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-cra-tailwind-ts/package.json b/examples/material-ui-cra-tailwind-ts/package.json index 7e5501badd283f..9eb5a216e038a9 100644 --- a/examples/material-ui-cra-tailwind-ts/package.json +++ b/examples/material-ui-cra-tailwind-ts/package.json @@ -5,7 +5,7 @@ "dependencies": { "@emotion/react": "latest", "@emotion/styled": "latest", - "@mui/material": "latest", + "@mui/material": "next", "@testing-library/jest-dom": "latest", "@testing-library/react": "latest", "@testing-library/user-event": "latest", diff --git a/examples/material-ui-cra-ts/README.md b/examples/material-ui-cra-ts/README.md index 61123d67d1aa92..fcceed26f12f77 100644 --- a/examples/material-ui-cra-ts/README.md +++ b/examples/material-ui-cra-ts/README.md @@ -7,7 +7,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-cra-ts +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-cra-ts cd material-ui-cra-ts ``` @@ -22,19 +22,19 @@ or: -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-cra-ts) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/material-ui-cra-ts) -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-cra-ts) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/material-ui-cra-ts) ## The idea behind the example This example demonstrates how you can use Material UI with [Create React App](https://github.com/facebookincubator/create-react-app) in [TypeScript](https://github.com/Microsoft/TypeScript). It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. -If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components). +If you prefer, you can [use styled-components instead](https://next.mui.com/material-ui/integrations/interoperability/#styled-components). ## What's next? You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-cra-ts/package.json b/examples/material-ui-cra-ts/package.json index 943a2266ee3186..3e67fb74443fe6 100644 --- a/examples/material-ui-cra-ts/package.json +++ b/examples/material-ui-cra-ts/package.json @@ -5,7 +5,7 @@ "dependencies": { "@emotion/react": "latest", "@emotion/styled": "latest", - "@mui/material": "latest", + "@mui/material": "next", "@types/react": "latest", "@types/react-dom": "latest", "react": "latest", diff --git a/examples/material-ui-cra/README.md b/examples/material-ui-cra/README.md index 8fb09165686f79..20998ef50776f6 100644 --- a/examples/material-ui-cra/README.md +++ b/examples/material-ui-cra/README.md @@ -7,7 +7,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-cra +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-cra cd material-ui-cra ``` @@ -22,9 +22,9 @@ or: -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-cra) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/material-ui-cra) -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-cra) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/material-ui-cra) ## The idea behind the example @@ -32,11 +32,11 @@ or: This example demonstrates how you can use [Create React App](https://github.com/facebookincubator/create-react-app) with Material UI. It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. -If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components). +If you prefer, you can [use styled-components instead](https://next.mui.com/material-ui/integrations/interoperability/#styled-components). ## What's next? You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-cra/package.json b/examples/material-ui-cra/package.json index b7490d21c0d880..e564d3c240a503 100644 --- a/examples/material-ui-cra/package.json +++ b/examples/material-ui-cra/package.json @@ -11,7 +11,7 @@ "dependencies": { "@emotion/react": "latest", "@emotion/styled": "latest", - "@mui/material": "latest", + "@mui/material": "next", "react": "latest", "react-dom": "latest", "react-scripts": "latest" diff --git a/examples/material-ui-express-ssr/README.md b/examples/material-ui-express-ssr/README.md index f82396af5d50b3..5618dc2949c70e 100644 --- a/examples/material-ui-express-ssr/README.md +++ b/examples/material-ui-express-ssr/README.md @@ -7,7 +7,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-express-ssr +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-express-ssr cd material-ui-express-ssr ``` @@ -22,20 +22,20 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-express-ssr) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/material-ui-express-ssr) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-express-ssr) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/material-ui-express-ssr) ## The idea behind the example -This is the reference implementation of the [Server Rendering tutorial](https://mui.com/material-ui/guides/server-rendering/). +This is the reference implementation of the [Server Rendering tutorial](https://next.mui.com/material-ui/guides/server-rendering/). The example project includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. -If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components). +If you prefer, you can [use styled-components instead](https://next.mui.com/material-ui/integrations/interoperability/#styled-components). ## What's next? You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-express-ssr/package.json b/examples/material-ui-express-ssr/package.json index 70631b8b2b9155..247b74df4cc922 100644 --- a/examples/material-ui-express-ssr/package.json +++ b/examples/material-ui-express-ssr/package.json @@ -15,7 +15,7 @@ "@emotion/react": "latest", "@emotion/styled": "latest", "@emotion/server": "latest", - "@mui/material": "latest", + "@mui/material": "next", "babel-loader": "latest", "cross-env": "latest", "express": "latest", diff --git a/examples/material-ui-gatsby/README.md b/examples/material-ui-gatsby/README.md index f08f8e84e91f87..35bd45b72b4750 100644 --- a/examples/material-ui-gatsby/README.md +++ b/examples/material-ui-gatsby/README.md @@ -7,7 +7,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-gatsby +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-gatsby cd material-ui-gatsby ``` @@ -22,11 +22,11 @@ npm run develop The project uses [Gatsby](https://github.com/gatsbyjs/gatsby), which is a static site generator for React. It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. -If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components). +If you prefer, you can [use styled-components instead](https://next.mui.com/material-ui/integrations/interoperability/#styled-components). ## What's next? You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-gatsby/package.json b/examples/material-ui-gatsby/package.json index a705fd375a4fed..817e3e8e4d1b30 100644 --- a/examples/material-ui-gatsby/package.json +++ b/examples/material-ui-gatsby/package.json @@ -10,7 +10,7 @@ "@emotion/react": "latest", "@emotion/server": "latest", "@emotion/styled": "latest", - "@mui/material": "latest", + "@mui/material": "next", "gatsby": "latest", "gatsby-plugin-react-helmet": "latest", "react": "latest", diff --git a/examples/material-ui-nextjs-pages-router-ts/README.md b/examples/material-ui-nextjs-pages-router-ts/README.md index d3adb3fd4065f6..905124355f1d42 100644 --- a/examples/material-ui-nextjs-pages-router-ts/README.md +++ b/examples/material-ui-nextjs-pages-router-ts/README.md @@ -7,7 +7,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-nextjs-pages-router-ts +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-nextjs-pages-router-ts cd material-ui-nextjs-pages-router-ts ``` @@ -22,27 +22,27 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router-ts) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/material-ui-nextjs-pages-router-ts) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router-ts) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/material-ui-nextjs-pages-router-ts) ## The idea behind the example **Note:** This example is set up to use the Next.js Pages Router. As of Next.js 13.4, the newer App Router pattern is stable. -We recommend starting new projects with the [Material UI with Next.js (App Router) example](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts) unless you need (or prefer) the Pages Router. +We recommend starting new projects with the [Material UI with Next.js (App Router) example](https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs-ts) unless you need (or prefer) the Pages Router. The project uses [Next.js](https://github.com/vercel/next.js), which is a framework for server-rendered React apps. -It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components). +It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. If you prefer, you can [use styled-components instead](https://next.mui.com/material-ui/integrations/interoperability/#styled-components). ## The link component The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/pages/api-reference/components/link) with Material UI. -More information [in the documentation](https://mui.com/material-ui/integrations/routing/#next-js-pages-router). +More information [in the documentation](https://next.mui.com/material-ui/integrations/routing/#next-js-pages-router). ## What's next? You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-nextjs-pages-router-ts/package.json b/examples/material-ui-nextjs-pages-router-ts/package.json index 1b522774bc1e53..269e388c33e9b0 100644 --- a/examples/material-ui-nextjs-pages-router-ts/package.json +++ b/examples/material-ui-nextjs-pages-router-ts/package.json @@ -14,9 +14,9 @@ "@emotion/react": "latest", "@emotion/server": "latest", "@emotion/styled": "latest", - "@mui/icons-material": "latest", - "@mui/material": "latest", - "@mui/material-nextjs": "latest", + "@mui/icons-material": "next", + "@mui/material": "next", + "@mui/material-nextjs": "next", "next": "latest", "react": "latest", "react-dom": "latest" diff --git a/examples/material-ui-nextjs-pages-router/README.md b/examples/material-ui-nextjs-pages-router/README.md index 5aaa617e16a4fa..116dc4659fd8a6 100644 --- a/examples/material-ui-nextjs-pages-router/README.md +++ b/examples/material-ui-nextjs-pages-router/README.md @@ -7,7 +7,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-nextjs-pages-router +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-nextjs-pages-router cd material-ui-nextjs-pages-router ``` @@ -22,28 +22,28 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/material-ui-nextjs-pages-router) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/material-ui-nextjs-pages-router) ## The idea behind the example **Note:** This example is set up to use the Next.js Pages Router. As of Next.js 13.4, the newer App Router pattern is stable. -We recommend starting new projects with the [Material UI with Next.js (App Router) example](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs) unless you need (or prefer) the Pages Router. +We recommend starting new projects with the [Material UI with Next.js (App Router) example](https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs) unless you need (or prefer) the Pages Router. The project uses [Next.js](https://github.com/vercel/next.js), which is a framework for server-rendered React apps. It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. -If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components). +If you prefer, you can [use styled-components instead](https://next.mui.com/material-ui/integrations/interoperability/#styled-components). ## The Link component The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/pages/api-reference/components/link) with Material UI. -More information [in the documentation](https://mui.com/material-ui/integrations/routing/#next-js-pages-router). +More information [in the documentation](https://next.mui.com/material-ui/integrations/routing/#next-js-pages-router). ## What's next? You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-nextjs-pages-router/package.json b/examples/material-ui-nextjs-pages-router/package.json index a246af69d94433..c092584d7e7da0 100644 --- a/examples/material-ui-nextjs-pages-router/package.json +++ b/examples/material-ui-nextjs-pages-router/package.json @@ -14,9 +14,9 @@ "@emotion/react": "latest", "@emotion/server": "latest", "@emotion/styled": "latest", - "@mui/icons-material": "latest", - "@mui/material": "latest", - "@mui/material-nextjs": "latest", + "@mui/icons-material": "next", + "@mui/material": "next", + "@mui/material-nextjs": "next", "next": "latest", "prop-types": "latest", "react": "latest", diff --git a/examples/material-ui-nextjs-ts-v4-v5-migration/README.md b/examples/material-ui-nextjs-ts-v4-v5-migration/README.md index 45c5bd369f2ed0..7226e5db8251e2 100644 --- a/examples/material-ui-nextjs-ts-v4-v5-migration/README.md +++ b/examples/material-ui-nextjs-ts-v4-v5-migration/README.md @@ -7,7 +7,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-nextjs-ts-v4-v5-migration +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-nextjs-ts-v4-v5-migration cd material-ui-nextjs-ts-v4-v5-migration ``` @@ -22,21 +22,21 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts-v4-v5-migration) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/material-ui-nextjs-ts-v4-v5-migration) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts-v4-v5-migration) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/material-ui-nextjs-ts-v4-v5-migration) ## The idea behind the example The project uses [Next.js](https://github.com/vercel/next.js), which is a framework for server-rendered React apps. -It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components). +It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. If you prefer, you can [use styled-components instead](https://next.mui.com/material-ui/integrations/interoperability/#styled-components). It also includes `@mui/styles`, the legacy styling solution that uses JSS as an engine. It provides all the necessary config for working with both Emotion and JSS for server-side rendering. The project is intended as a basic starter for migrating your application from v4 to v5, as it lets the JSS style overrides take precedence over the default styles passed to the components by Emotion. -It demonstrates what results after handling v5's breaking changes to the [theme](https://mui.com/material-ui/migration/v5-style-changes/) and [components](https://mui.com/material-ui/migration/v5-component-changes/). +It demonstrates what results after handling v5's breaking changes to the [theme](https://next.mui.com/material-ui/migration/v5-style-changes/) and [components](https://next.mui.com/material-ui/migration/v5-component-changes/). ## The Link component Next.js Pages Router has [a custom Link component](https://nextjs.org/docs/pages/api-reference/components/link). The example folder provides adapters for usage with Material UI. -You can find more information [in the documentation](https://mui.com/material-ui/integrations/routing/#next-js-pages-router). +You can find more information [in the documentation](https://next.mui.com/material-ui/integrations/routing/#next-js-pages-router). diff --git a/examples/material-ui-nextjs-ts-v4-v5-migration/package.json b/examples/material-ui-nextjs-ts-v4-v5-migration/package.json index a67c1d3d9aebd5..5de92715b5ff57 100644 --- a/examples/material-ui-nextjs-ts-v4-v5-migration/package.json +++ b/examples/material-ui-nextjs-ts-v4-v5-migration/package.json @@ -14,9 +14,9 @@ "@emotion/react": "latest", "@emotion/server": "latest", "@emotion/styled": "latest", - "@mui/icons-material": "latest", - "@mui/material": "latest", - "@mui/material-nextjs": "latest", + "@mui/icons-material": "next", + "@mui/material": "next", + "@mui/material-nextjs": "next", "@mui/styles": "latest", "autoprefixer": "latest", "clean-css": "latest", diff --git a/examples/material-ui-nextjs-ts/README.md b/examples/material-ui-nextjs-ts/README.md index df5d86c065a2a4..976964f5bf95b0 100644 --- a/examples/material-ui-nextjs-ts/README.md +++ b/examples/material-ui-nextjs-ts/README.md @@ -9,7 +9,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-nextjs-ts +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-nextjs-ts cd material-ui-nextjs-ts ``` @@ -26,9 +26,9 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/material-ui-nextjs-ts) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/material-ui-nextjs-ts) ## Learn more @@ -42,4 +42,4 @@ To learn more about this example: You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-nextjs-ts/package.json b/examples/material-ui-nextjs-ts/package.json index 429d960765034e..77fe396f077013 100644 --- a/examples/material-ui-nextjs-ts/package.json +++ b/examples/material-ui-nextjs-ts/package.json @@ -13,9 +13,9 @@ "@emotion/cache": "latest", "@emotion/react": "latest", "@emotion/styled": "latest", - "@mui/icons-material": "latest", - "@mui/material": "latest", - "@mui/material-nextjs": "latest", + "@mui/icons-material": "next", + "@mui/material": "next", + "@mui/material-nextjs": "next", "next": "latest", "react": "latest", "react-dom": "latest" diff --git a/examples/material-ui-nextjs/README.md b/examples/material-ui-nextjs/README.md index 98ea0fabe4fc94..13eacf4492aac3 100644 --- a/examples/material-ui-nextjs/README.md +++ b/examples/material-ui-nextjs/README.md @@ -9,7 +9,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-nextjs +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-nextjs cd material-ui-nextjs ``` @@ -26,20 +26,20 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/material-ui-nextjs) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-nextjs) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/material-ui-nextjs) ## Learn more To learn more about this example: - [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Customizing Material UI](https://mui.com/material-ui/customization/how-to-customize/) - approaches to customizing Material UI. +- [Customizing Material UI](https://next.mui.com/material-ui/customization/how-to-customize/) - approaches to customizing Material UI. ## What's next? You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-nextjs/package.json b/examples/material-ui-nextjs/package.json index af1228ce229f01..b7429c67bf7080 100644 --- a/examples/material-ui-nextjs/package.json +++ b/examples/material-ui-nextjs/package.json @@ -12,9 +12,9 @@ "@emotion/cache": "latest", "@emotion/react": "latest", "@emotion/styled": "latest", - "@mui/icons-material": "latest", - "@mui/material": "latest", - "@mui/material-nextjs": "latest", + "@mui/icons-material": "next", + "@mui/material": "next", + "@mui/material-nextjs": "next", "eslint": "latest", "eslint-config-next": "latest", "next": "latest", diff --git a/examples/material-ui-preact/README.md b/examples/material-ui-preact/README.md index 9bc17eb026f674..a712c3bf6be9db 100644 --- a/examples/material-ui-preact/README.md +++ b/examples/material-ui-preact/README.md @@ -7,7 +7,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-preact +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-preact cd material-ui-preact ``` @@ -28,11 +28,11 @@ It includes `@mui/material` and its peer dependencies, including [Emotion](https -If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components). +If you prefer, you can [use styled-components instead](https://next.mui.com/material-ui/integrations/interoperability/#styled-components). ## What's next? You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-preact/package.json b/examples/material-ui-preact/package.json index 47394d072c47b6..1c055c4c6ecc12 100644 --- a/examples/material-ui-preact/package.json +++ b/examples/material-ui-preact/package.json @@ -6,7 +6,7 @@ "@babel/helper-builder-react-jsx": "latest", "@emotion/react": "latest", "@emotion/styled": "latest", - "@mui/material": "latest", + "@mui/material": "next", "@testing-library/jest-dom": "latest", "@testing-library/react": "latest", "@testing-library/user-event": "latest", diff --git a/examples/material-ui-remix-ts/README.md b/examples/material-ui-remix-ts/README.md index 2f2fd82886d918..147b6bce1f7066 100644 --- a/examples/material-ui-remix-ts/README.md +++ b/examples/material-ui-remix-ts/README.md @@ -7,7 +7,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-remix-ts +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-remix-ts cd material-ui-remix-ts ``` @@ -22,19 +22,19 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-remix-ts) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/material-ui-remix-ts) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-remix-ts) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/material-ui-remix-ts) ## The idea behind the example The project uses [Remix](https://remix.run/), which is a full stack web framework. It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. -If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components). +If you prefer, you can [use styled-components instead](https://next.mui.com/material-ui/integrations/interoperability/#styled-components). ## What's next? You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-remix-ts/package.json b/examples/material-ui-remix-ts/package.json index 53bb95073a3688..e32d75a114d90d 100644 --- a/examples/material-ui-remix-ts/package.json +++ b/examples/material-ui-remix-ts/package.json @@ -13,7 +13,7 @@ "@emotion/react": "latest", "@emotion/server": "latest", "@emotion/styled": "latest", - "@mui/material": "latest", + "@mui/material": "next", "@remix-run/css-bundle": "latest", "@remix-run/node": "latest", "@remix-run/react": "latest", diff --git a/examples/material-ui-via-cdn/README.md b/examples/material-ui-via-cdn/README.md index 5034856a72f0c7..fea6b75a3cce21 100644 --- a/examples/material-ui-via-cdn/README.md +++ b/examples/material-ui-via-cdn/README.md @@ -4,8 +4,10 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): + + ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-via-cdn +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-via-cdn cd material-ui-via-cdn ``` @@ -23,7 +25,7 @@ The client has to download the entire library, regardless of which components ar -[The live preview.](https://rawcdn.githack.com/mui/material-ui/master/examples/material-ui-via-cdn/index.html) +[The live preview.](https://rawcdn.githack.com/mui/material-ui/next/examples/material-ui-via-cdn/index.html) ## UMD releases @@ -37,6 +39,6 @@ We are providing two Universal Module Definition (UMD) files: ## What's next? You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-vite-ts/README.md b/examples/material-ui-vite-ts/README.md index a0cf054adef4c5..65838939855f34 100644 --- a/examples/material-ui-vite-ts/README.md +++ b/examples/material-ui-vite-ts/README.md @@ -7,7 +7,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-vite-ts +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-vite-ts cd material-ui-vite-ts ``` @@ -22,9 +22,9 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-vite-ts) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/material-ui-vite-ts) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-vite-ts) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/material-ui-vite-ts) ## The idea behind the example @@ -36,4 +36,4 @@ It includes `@mui/material` and its peer dependencies, including [Emotion](https You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-vite-ts/package.json b/examples/material-ui-vite-ts/package.json index f8b6eefe8053d1..82545735254b39 100644 --- a/examples/material-ui-vite-ts/package.json +++ b/examples/material-ui-vite-ts/package.json @@ -11,8 +11,8 @@ "dependencies": { "@emotion/react": "latest", "@emotion/styled": "latest", - "@mui/icons-material": "latest", - "@mui/material": "latest", + "@mui/icons-material": "next", + "@mui/material": "next", "react": "latest", "react-dom": "latest" }, diff --git a/examples/material-ui-vite/README.md b/examples/material-ui-vite/README.md index 4ef312c42b8b84..5dea6e71b7c2b8 100644 --- a/examples/material-ui-vite/README.md +++ b/examples/material-ui-vite/README.md @@ -7,7 +7,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-vite +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-vite cd material-ui-vite ``` @@ -22,9 +22,9 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-vite) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/material-ui-vite) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-vite) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/material-ui-vite) ## The idea behind the example @@ -36,4 +36,4 @@ It includes `@mui/material` and its peer dependencies, including [Emotion](https You now have a working example project. -You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. +You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/material-ui-vite/package.json b/examples/material-ui-vite/package.json index 71c02e87add914..7ad6bbab50d540 100644 --- a/examples/material-ui-vite/package.json +++ b/examples/material-ui-vite/package.json @@ -10,7 +10,7 @@ "dependencies": { "@emotion/react": "latest", "@emotion/styled": "latest", - "@mui/material": "latest", + "@mui/material": "next", "react": "latest", "react-dom": "latest" }, diff --git a/examples/pigment-css-nextjs-ts/README.md b/examples/pigment-css-nextjs-ts/README.md index a8a18cd92a5f6b..2f8b866e4d9fe8 100644 --- a/examples/pigment-css-nextjs-ts/README.md +++ b/examples/pigment-css-nextjs-ts/README.md @@ -9,7 +9,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/pigment-css-nextjs-ts +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/pigment-css-nextjs-ts cd pigment-css-nextjs-ts ``` @@ -26,13 +26,13 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/pigment-css-nextjs-ts) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/pigment-css-nextjs-ts) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/pigment-css-nextjs-ts) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/pigment-css-nextjs-ts) ## Learn more To learn more about this example: -- [Pigment CSS documentation](https://github.com/mui/material-ui/blob/master/packages/pigment-css-react/README.md) - learn more about Pigment CSS features and APIs. +- [Pigment CSS documentation](https://github.com/mui/material-ui/blob/next/packages/pigment-css-react/README.md) - learn more about Pigment CSS features and APIs. - [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and APIs. diff --git a/examples/pigment-css-nextjs-ts/package.json b/examples/pigment-css-nextjs-ts/package.json index b2579629a61906..f0cbed14e0dc94 100644 --- a/examples/pigment-css-nextjs-ts/package.json +++ b/examples/pigment-css-nextjs-ts/package.json @@ -10,13 +10,13 @@ "post-update": "echo \"codesandbox preview only, need an update\" && pnpm update --latest" }, "dependencies": { - "@pigment-css/react": "latest", + "@pigment-css/react": "next", "react": "latest", "react-dom": "latest", "next": "latest" }, "devDependencies": { - "@pigment-css/nextjs-plugin": "latest", + "@pigment-css/nextjs-plugin": "next", "@types/node": "latest", "@types/react": "latest", "@types/react-dom": "latest", diff --git a/examples/pigment-css-remix-ts/.gitignore b/examples/pigment-css-remix-ts/.gitignore new file mode 100644 index 00000000000000..80ec311f4ff554 --- /dev/null +++ b/examples/pigment-css-remix-ts/.gitignore @@ -0,0 +1,5 @@ +node_modules + +/.cache +/build +.env diff --git a/examples/pigment-css-remix-ts/.stackblitzrc b/examples/pigment-css-remix-ts/.stackblitzrc new file mode 100644 index 00000000000000..09e22c0da2fc3a --- /dev/null +++ b/examples/pigment-css-remix-ts/.stackblitzrc @@ -0,0 +1,3 @@ +{ + "startCommand": "npm run dev" +} diff --git a/examples/pigment-css-remix-ts/README.md b/examples/pigment-css-remix-ts/README.md new file mode 100644 index 00000000000000..b4f664d958df04 --- /dev/null +++ b/examples/pigment-css-remix-ts/README.md @@ -0,0 +1,34 @@ +# Pigment CSS - Remix with TypeScript example project + +## How to use + +Download the example [or clone the repo](https://github.com/mui/material-ui): + + + +```bash +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/pigment-css-remix-ts +cd pigment-css-remix-ts +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +or: + + + +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/pigment-css-remix-ts) + +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/pigment-css-remix-ts) + +## Learn more + +To learn more about this example: + +- [Pigment CSS documentation](https://github.com/mui/material-ui/blob/next/packages/pigment-css-react/README.md) - learn more about Pigment CSS features and APIs. +- [Remix documentation](https://remix.run/docs) - learn about Remix features and APIs. diff --git a/examples/pigment-css-remix-ts/app/augment.d.ts b/examples/pigment-css-remix-ts/app/augment.d.ts new file mode 100644 index 00000000000000..f4b2cbccbac936 --- /dev/null +++ b/examples/pigment-css-remix-ts/app/augment.d.ts @@ -0,0 +1,18 @@ +import type { ExtendTheme } from '@pigment-css/react/theme'; + +declare module '@pigment-css/react/theme' { + export interface ThemeArgs { + theme: ExtendTheme<{ + colorScheme: 'light' | 'dark'; + tokens: { + palette: { + background: string; + foreground: string; + primary: string; + primaryForeground: string; + border: string; + }; + }; + }>; + } +} diff --git a/examples/pigment-css-remix-ts/app/entry.client.tsx b/examples/pigment-css-remix-ts/app/entry.client.tsx new file mode 100644 index 00000000000000..9285c83c7d4495 --- /dev/null +++ b/examples/pigment-css-remix-ts/app/entry.client.tsx @@ -0,0 +1,18 @@ +/** + * By default, Remix will handle hydrating your app on the client for you. + * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨ + * For more information, see https://remix.run/file-conventions/entry.client + */ + +import { RemixBrowser } from '@remix-run/react'; +import * as React from 'react'; +import * as ReactDOMClient from 'react-dom/client'; + +React.startTransition(() => { + ReactDOMClient.hydrateRoot( + document, + + + , + ); +}); diff --git a/examples/pigment-css-remix-ts/app/entry.server.tsx b/examples/pigment-css-remix-ts/app/entry.server.tsx new file mode 100644 index 00000000000000..7f7421885a0f38 --- /dev/null +++ b/examples/pigment-css-remix-ts/app/entry.server.tsx @@ -0,0 +1,122 @@ +/** + * By default, Remix will handle generating the HTTP Response for you. + * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨ + * For more information, see https://remix.run/file-conventions/entry.server + */ + +import { PassThrough } from 'node:stream'; + +import type { AppLoadContext, EntryContext } from '@remix-run/node'; +import { createReadableStreamFromReadable } from '@remix-run/node'; +import { RemixServer } from '@remix-run/react'; +import { isbot } from 'isbot'; +import * as ReactDOMServer from 'react-dom/server'; + +const ABORT_DELAY = 5_000; + +export default function handleRequest( + request: Request, + responseStatusCode: number, + responseHeaders: Headers, + remixContext: EntryContext, + // This is ignored so we can keep it in the template for visibility. Feel + // free to delete this parameter in your app if you're not using it! + // eslint-disable-next-line @typescript-eslint/no-unused-vars + loadContext: AppLoadContext, +) { + return isbot(request.headers.get('user-agent') || '') + ? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext) + : handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext); +} + +function handleBotRequest( + request: Request, + responseStatusCode: number, + responseHeaders: Headers, + remixContext: EntryContext, +) { + return new Promise((resolve, reject) => { + let shellRendered = false; + const { pipe, abort } = renderToPipeableStream( + , + { + onAllReady() { + shellRendered = true; + const body = new PassThrough(); + const stream = createReadableStreamFromReadable(body); + + responseHeaders.set('Content-Type', 'text/html'); + + resolve( + new Response(stream, { + headers: responseHeaders, + status: responseStatusCode, + }), + ); + + pipe(body); + }, + onShellError(error: unknown) { + reject(error); + }, + onError(error: unknown) { + responseStatusCode = 500; + // Log streaming rendering errors from inside the shell. Don't log + // errors encountered during initial shell rendering since they'll + // reject and get logged in handleDocumentRequest. + if (shellRendered) { + console.error(error); + } + }, + }, + ); + + setTimeout(abort, ABORT_DELAY); + }); +} + +function handleBrowserRequest( + request: Request, + responseStatusCode: number, + responseHeaders: Headers, + remixContext: EntryContext, +) { + return new Promise((resolve, reject) => { + let shellRendered = false; + const { pipe, abort } = ReactDOMServer.renderToPipeableStream( + , + { + onShellReady() { + shellRendered = true; + const body = new PassThrough(); + const stream = createReadableStreamFromReadable(body); + + responseHeaders.set('Content-Type', 'text/html'); + + resolve( + new Response(stream, { + headers: responseHeaders, + status: responseStatusCode, + }), + ); + + pipe(body); + }, + onShellError(error: unknown) { + reject(error); + }, + onError(error: unknown) { + responseStatusCode = 500; + // Log streaming rendering errors from inside the shell. Don't log + // errors encountered during initial shell rendering since they'll + // reject and get logged in handleDocumentRequest. + if (shellRendered) { + console.error(error); + } + }, + }, + ); + + setTimeout(abort, ABORT_DELAY); + }); +} diff --git a/examples/pigment-css-remix-ts/app/root.tsx b/examples/pigment-css-remix-ts/app/root.tsx new file mode 100644 index 00000000000000..bc08b4c113bfc4 --- /dev/null +++ b/examples/pigment-css-remix-ts/app/root.tsx @@ -0,0 +1,31 @@ +import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'; +import { css } from '@pigment-css/react'; +import '@pigment-css/react/styles.css'; + +export function Layout({ children }: { children: React.ReactNode }) { + return ( + + + + + + + + + + {children} + + + + + ); +} + +export default function App() { + return ; +} diff --git a/examples/pigment-css-remix-ts/app/routes/_index.tsx b/examples/pigment-css-remix-ts/app/routes/_index.tsx new file mode 100644 index 00000000000000..845e6c7b4e6c09 --- /dev/null +++ b/examples/pigment-css-remix-ts/app/routes/_index.tsx @@ -0,0 +1,201 @@ +import type { MetaFunction } from '@remix-run/node'; +import { styled, css, keyframes } from '@pigment-css/react'; + +export const meta: MetaFunction = () => [ + { + title: 'Pigment CSS + Remix + Typescript Example', + }, + { name: 'description', content: 'Welcome to Pigment CSS demo with Remix!' }, +]; + +const scale = keyframes({ + to: { scale: 'var(--s2)' }, +}); + +const Link = styled.a(({ theme }) => ({ + fontSize: '1rem', + background: 'rgba(0 0 0 / 0.04)', + padding: '0.8rem 1rem', + letterSpacing: '1px', + borderRadius: '8px', + textAlign: 'center', + ...theme.applyStyles('dark', { + background: 'rgba(255 255 255 / 0.1)', + }), + variants: [ + { + props: { outlined: true }, + style: { + background: 'transparent', + color: `hsl(${theme.vars.palette.primary})`, + border: `1px solid hsl(${theme.vars.palette.border})`, + }, + }, + ], +})); + +const Bubble = styled('span')({ + height: 'var(--size, 100%)', + aspectRatio: '1', + background: 'radial-gradient(hsl(var(--h) 100% 70%) 25%, transparent 50%)', + position: 'absolute', + display: 'inline-block', + left: 'var(--x, 0)', + top: 'var(--y, 0)', + scale: '0', + translate: '-50% -50%', + mixBlendMode: 'multiply', + filter: 'blur(2px)', + animation: `${scale} var(--s, 2s) var(--d, 0s) infinite alternate`, +}); + +function randomBetween(min: number, max: number) { + return Math.floor(Math.random() * (max - min + 1) + min); +} + +function generateBubbleVars() { + return ` + --x: ${randomBetween(10, 90)}%; + --y: ${randomBetween(15, 85)}%; + --h: ${randomBetween(0, 360)}; + --s2: ${randomBetween(2, 6)}; + --d: -${randomBetween(250, 400) / 1000}s; + --s: ${randomBetween(3, 6)}s; + `; +} + +export default function Index() { + return ( +
+

({ + fontFamily: 'system-ui, sans-serif', + fontSize: '4rem', + fontWeight: 500, + textAlign: 'center', + position: 'relative', + display: 'flex', + alignItems: 'center', + color: '#888', + marginBottom: '1rem', + ...theme.applyStyles('dark', { color: '#fff' }), + }))}`} + > + Pigment CSS + ({ + position: 'absolute', + inset: '0', + background: 'white', + mixBlendMode: 'color-burn', + overflow: 'hidden', + pointerEvents: 'none', + ...theme.applyStyles('dark', { + mixBlendMode: 'darken', + filter: 'brightness(2)', + }), + }))} + > + + + + + + + + + + + +

+
+ CSS-in-JS library with static extraction +
+
+ + Documentation + + + Roadmap + +
+
+ ); +} diff --git a/examples/pigment-css-remix-ts/package.json b/examples/pigment-css-remix-ts/package.json new file mode 100644 index 00000000000000..21fbee6451ff9d --- /dev/null +++ b/examples/pigment-css-remix-ts/package.json @@ -0,0 +1,33 @@ +{ + "name": "pigment-css-remix-ts", + "private": true, + "sideEffects": false, + "type": "module", + "scripts": { + "build": "remix vite:build", + "dev": "remix vite:dev", + "start": "remix-serve ./build/server/index.js", + "typecheck": "tsc" + }, + "dependencies": { + "@pigment-css/react": "next", + "@remix-run/node": "latest", + "@remix-run/react": "latest", + "@remix-run/serve": "latest", + "isbot": "latest", + "react": "latest", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@pigment-css/vite-plugin": "next", + "@remix-run/dev": "latest", + "@types/react": "latest", + "@types/react-dom": "latest", + "typescript": "latest", + "vite": "latest", + "vite-tsconfig-paths": "latest" + }, + "engines": { + "node": ">=18.0.0" + } +} diff --git a/examples/pigment-css-remix-ts/public/favicon.ico b/examples/pigment-css-remix-ts/public/favicon.ico new file mode 100644 index 00000000000000..8830cf6821b354 Binary files /dev/null and b/examples/pigment-css-remix-ts/public/favicon.ico differ diff --git a/examples/pigment-css-remix-ts/tsconfig.json b/examples/pigment-css-remix-ts/tsconfig.json new file mode 100644 index 00000000000000..9d87dd378f5cb1 --- /dev/null +++ b/examples/pigment-css-remix-ts/tsconfig.json @@ -0,0 +1,32 @@ +{ + "include": [ + "**/*.ts", + "**/*.tsx", + "**/.server/**/*.ts", + "**/.server/**/*.tsx", + "**/.client/**/*.ts", + "**/.client/**/*.tsx" + ], + "compilerOptions": { + "lib": ["DOM", "DOM.Iterable", "ES2022"], + "types": ["@remix-run/node", "vite/client"], + "isolatedModules": true, + "esModuleInterop": true, + "jsx": "react-jsx", + "module": "ESNext", + "moduleResolution": "Bundler", + "resolveJsonModule": true, + "target": "ES2022", + "strict": true, + "allowJs": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "baseUrl": ".", + "paths": { + "~/*": ["./app/*"] + }, + + // Vite takes care of building everything, not tsc. + "noEmit": true + } +} diff --git a/examples/pigment-css-remix-ts/vite.config.ts b/examples/pigment-css-remix-ts/vite.config.ts new file mode 100644 index 00000000000000..698e3d23838048 --- /dev/null +++ b/examples/pigment-css-remix-ts/vite.config.ts @@ -0,0 +1,39 @@ +import { vitePlugin as remix } from '@remix-run/dev'; +import { installGlobals } from '@remix-run/node'; +import { defineConfig } from 'vite'; +import tsconfigPaths from 'vite-tsconfig-paths'; +import { pigment, extendTheme } from '@pigment-css/vite-plugin'; + +installGlobals(); + +// To learn more about theming, visit https://github.com/mui/material-ui/blob/master/packages/zero-runtime/README.md#theming +const theme = extendTheme({ + colorSchemes: { + light: { + palette: { + background: '0 0% 100%', + foreground: '240 10% 3.9%', + primary: '240 5.9% 10%', + border: '240 5.9% 90%', + }, + }, + dark: { + palette: { + background: '240 10% 3.9%', + foreground: '0 0% 80%', + primary: '0 0% 98%', + border: '240 3.7% 15.9%', + }, + }, + }, +}); + +export default defineConfig({ + plugins: [ + pigment({ + theme, + }), + remix(), + tsconfigPaths(), + ], +}); diff --git a/examples/pigment-css-vite-ts/README.md b/examples/pigment-css-vite-ts/README.md index 662397d8bc6778..dc7a1f1f540190 100644 --- a/examples/pigment-css-vite-ts/README.md +++ b/examples/pigment-css-vite-ts/README.md @@ -7,7 +7,7 @@ Download the example [or clone the repo](https://github.com/mui/material-ui): ```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/pigment-css-vite-ts +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/pigment-css-vite-ts cd pigment-css-vite-ts ``` @@ -22,13 +22,13 @@ or: -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/pigment-css-vite-ts) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/pigment-css-vite-ts) -[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/pigment-css-vite-ts) +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/pigment-css-vite-ts) ## Learn more To learn more about this example: -- [Pigment CSS documentation](https://github.com/mui/material-ui/blob/master/packages/pigment-css-react/README.md) - learn more about Pigment CSS features and APIs. +- [Pigment CSS documentation](https://github.com/mui/material-ui/blob/next/packages/pigment-css-react/README.md) - learn more about Pigment CSS features and APIs. - [Vite documentation](https://vitejs.dev/guide/) - learn about Vite features and APIs. diff --git a/examples/pigment-css-vite-ts/package.json b/examples/pigment-css-vite-ts/package.json index 8b61ac52d46cb2..a4691ef62945f3 100644 --- a/examples/pigment-css-vite-ts/package.json +++ b/examples/pigment-css-vite-ts/package.json @@ -9,12 +9,12 @@ "preview": "vite preview" }, "dependencies": { - "@pigment-css/react": "latest", + "@pigment-css/react": "next", "react": "latest", "react-dom": "latest" }, "devDependencies": { - "@pigment-css/vite-plugin": "latest", + "@pigment-css/vite-plugin": "next", "@types/react": "latest", "@types/react-dom": "latest", "@vitejs/plugin-react": "latest", diff --git a/nx.json b/nx.json index 89b57c7c1b8295..4734b4e6ba4a52 100644 --- a/nx.json +++ b/nx.json @@ -9,7 +9,10 @@ "build": { "cache": true, "dependsOn": ["copy-license", "^build"], - "outputs": ["{projectRoot}/build"] + "outputs": ["{projectRoot}/build", "{projectRoot}/dist", "{projectRoot}/.next"] + }, + "preview": { + "dependsOn": ["^build"] } } } diff --git a/package.json b/package.json index a140a2732576fc..1ab7e120974cb2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mui/monorepo", - "version": "5.15.14", + "version": "6.0.0-alpha.0", "private": true, "scripts": { "preinstall": "npx only-allow pnpm", @@ -16,8 +16,8 @@ "release:version": "lerna version --no-changelog --no-push --no-git-tag-version --no-private --force-publish=@mui/core-downloads-tracker", "release:build": "lerna run --concurrency 8 --no-private build --skip-nx-cache", "release:changelog": "node scripts/releaseChangelog.mjs", - "release:publish": "pnpm publish --recursive --tag latest", - "release:publish:dry-run": "pnpm publish --recursive --tag latest --registry=\"http://localhost:4873/\"", + "release:publish": "pnpm publish --recursive --tag next", + "release:publish:dry-run": "pnpm publish --recursive --tag next --registry=\"http://localhost:4873/\"", "release:tag": "node scripts/releaseTag.mjs", "docs:api": "rimraf --glob ./docs/pages/**/api-docs ./docs/pages/**/api && pnpm docs:api:build", "docs:api:build": "tsx ./scripts/buidApiDocs/index.ts", @@ -47,7 +47,7 @@ "stylelint": "stylelint --reportInvalidScopeDisables --reportNeedlessDisables \"docs/**/*.{js,ts,tsx}\"", "markdownlint": "markdownlint-cli2 \"**/*.md\"", "valelint": "git ls-files | grep -h \".md$\" | xargs vale --filter='.Level==\"error\"'", - "prettier": "pretty-quick --ignore-path .eslintignore", + "prettier": "pretty-quick --ignore-path .eslintignore --branch next", "prettier:all": "prettier --write . --ignore-path .eslintignore", "size:snapshot": "node --max-old-space-size=4096 ./scripts/sizeSnapshot/create", "size:why": "pnpm size:snapshot --analyze", @@ -74,7 +74,7 @@ "test:regressions:run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.js'", "test:regressions:server": "serve test/regressions -p 5001", "test:umd": "node packages/mui-material/test/umd/run.js", - "test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'", + "test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' --exclude 'packages/pigment-css-react/**/*.test.{js,ts,tsx}' && pnpm test:pigment-css-react:ci", "test:argos": "node ./scripts/pushArgos.mjs", "typescript": "lerna run --no-bail --parallel typescript", "typescript:ci": "lerna run --concurrency 3 --no-bail --no-sort typescript", @@ -115,14 +115,14 @@ "@mui/material": "workspace:^", "@mui/utils": "workspace:^", "@pigment-css/react": "workspace:^", - "@next/eslint-plugin-next": "^14.1.3", + "@next/eslint-plugin-next": "^14.1.4", "@octokit/rest": "^20.0.2", "@playwright/test": "1.42.1", "@types/enzyme": "^3.10.18", "@types/fs-extra": "^11.0.4", "@types/lodash": "^4.17.0", "@types/mocha": "^10.0.6", - "@types/node": "^18.19.25", + "@types/node": "^18.19.28", "@types/prettier": "^2.7.3", "@types/react": "^18.2.55", "@types/yargs": "^17.0.32", @@ -142,7 +142,7 @@ "cross-env": "^7.0.3", "danger": "^11.3.1", "enzyme": "^3.11.0", - "eslint": "^8.56.0", + "eslint": "^8.57.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-base": "^15.0.0", "eslint-config-airbnb-typescript": "^17.1.0", @@ -187,13 +187,13 @@ "terser-webpack-plugin": "^5.3.10", "tsup": "^8.0.2", "tsx": "^4.7.1", - "typescript": "^5.3.3", + "typescript": "^5.4.3", "webpack": "^5.90.3", "webpack-bundle-analyzer": "^4.10.1", "webpack-cli": "^5.1.4", "yargs": "^17.7.2" }, - "packageManager": "pnpm@8.15.4", + "packageManager": "pnpm@8.15.5", "resolutions": { "@babel/core": "^7.23.9", "@babel/code-frame": "^7.23.5", @@ -212,8 +212,8 @@ "@definitelytyped/header-parser": "^0.2.8", "@definitelytyped/typescript-versions": "^0.1.1", "@definitelytyped/utils": "^0.1.5", - "@types/node": "^18.19.25", - "@types/react": "^18.2.55", + "@types/node": "^18.19.28", + "@types/react": "18.2.55", "@types/react-dom": "18.2.19", "cross-fetch": "^4.0.0" }, diff --git a/packages-internal/docs-utils/package.json b/packages-internal/docs-utils/package.json index 7ddabfa3a217fa..c0ac779a5cf3f5 100644 --- a/packages-internal/docs-utils/package.json +++ b/packages-internal/docs-utils/package.json @@ -22,7 +22,7 @@ }, "dependencies": { "rimraf": "^5.0.5", - "typescript": "^5.3.3" + "typescript": "^5.4.3" }, "publishConfig": { "access": "public" diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json index 391eca25d51455..ea8086d170db3a 100644 --- a/packages-internal/scripts/package.json +++ b/packages-internal/scripts/package.json @@ -1,13 +1,13 @@ { "name": "@mui/internal-scripts", - "version": "1.0.3", + "version": "1.0.4", "author": "MUI Team", "description": "Utilities supporting MUI libraries build and docs generation. This is an internal package not meant for general use.", "main": "build/index.js", "exports": { "./typescript-to-proptypes": { - "default": "./build/typescript-to-proptypes/index.js", - "types": "./build/typescript-to-proptypes/index.d.ts" + "types": "./build/typescript-to-proptypes/index.d.ts", + "default": "./build/typescript-to-proptypes/index.js" } }, "repository": { @@ -33,16 +33,16 @@ "@mui/internal-docs-utils": "workspace:^", "doctrine": "^3.0.0", "lodash": "^4.17.21", - "typescript": "^5.3.3", + "typescript": "^5.4.3", "uuid": "^9.0.1" }, "devDependencies": { "@babel/register": "^7.23.7", "@types/babel__core": "^7.20.5", - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/doctrine": "^0.0.9", "@types/lodash": "^4.17.0", - "@types/node": "^18.19.25", + "@types/node": "^18.19.28", "@types/prettier": "^2.7.3", "@types/react": "^18.2.55", "@types/uuid": "^9.0.8", diff --git a/packages/api-docs-builder-core/package.json b/packages/api-docs-builder-core/package.json index 1d50e34a43e4d6..a819ced75abe2d 100644 --- a/packages/api-docs-builder-core/package.json +++ b/packages/api-docs-builder-core/package.json @@ -15,12 +15,12 @@ "lodash": "^4.17.21" }, "devDependencies": { - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/mocha": "^10.0.6", - "@types/node": "^18.19.25", + "@types/node": "^18.19.28", "@types/sinon": "^10.0.20", "chai": "^4.4.1", "sinon": "^15.2.0", - "typescript": "^5.3.3" + "typescript": "^5.4.3" } } diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json index 6d50457c687aa7..196734580b15b2 100644 --- a/packages/api-docs-builder/package.json +++ b/packages/api-docs-builder/package.json @@ -22,17 +22,17 @@ "react-docgen": "^5.4.3", "recast": "^0.23.6", "remark": "^13.0.0", - "typescript": "^5.3.3", + "typescript": "^5.4.3", "unist-util-visit": "^2.0.3" }, "devDependencies": { "@types/babel__core": "^7.20.5", "@types/babel__traverse": "^7.20.5", - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/doctrine": "^0.0.9", "@types/mdast": "4.0.3", "@types/mocha": "^10.0.6", - "@types/node": "^18.19.25", + "@types/node": "^18.19.28", "@types/react-docgen": "workspace:*", "@types/sinon": "^10.0.20", "chai": "^4.4.1", diff --git a/packages/eslint-plugin-material-ui/package.json b/packages/eslint-plugin-material-ui/package.json index 834e870fb2c16b..5901037dd8812a 100644 --- a/packages/eslint-plugin-material-ui/package.json +++ b/packages/eslint-plugin-material-ui/package.json @@ -8,9 +8,9 @@ "emoji-regex": "^10.3.0" }, "devDependencies": { - "@types/eslint": "^8.56.2", + "@types/eslint": "^8.56.6", "@typescript-eslint/parser": "^6.19.1", - "eslint": "^8.56.0" + "eslint": "^8.57.0" }, "peerDependencies": { "eslint": "^8.47.0" diff --git a/packages/feedback/package.json b/packages/feedback/package.json index 3b4bb3be53e22c..0fdc0f95914824 100644 --- a/packages/feedback/package.json +++ b/packages/feedback/package.json @@ -25,6 +25,6 @@ "claudia": "^5.14.1" }, "optionalDependencies": { - "aws-sdk": "^2.1579.0" + "aws-sdk": "^2.1589.0" } } diff --git a/packages/markdown/package.json b/packages/markdown/package.json index 5a7b0373e8311c..f62b53d362f052 100644 --- a/packages/markdown/package.json +++ b/packages/markdown/package.json @@ -26,7 +26,7 @@ "prismjs": "^1.29.0" }, "devDependencies": { - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "chai": "^4.4.1" }, "publishConfig": { diff --git a/packages/mui-babel-macros/package.json b/packages/mui-babel-macros/package.json index cb422a56c3ec48..81d369122291af 100644 --- a/packages/mui-babel-macros/package.json +++ b/packages/mui-babel-macros/package.json @@ -30,9 +30,9 @@ "devDependencies": { "@mui/internal-babel-macros": "workspace:*", "@types/babel-plugin-macros": "^3.1.3", - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/mocha": "^10.0.6", - "@types/node": "^18.19.25", + "@types/node": "^18.19.28", "babel-plugin-tester": "^11.0.4", "chai": "^4.4.1" }, diff --git a/packages/mui-base/README.md b/packages/mui-base/README.md index d84f270367e381..45b919f6e3c34b 100644 --- a/packages/mui-base/README.md +++ b/packages/mui-base/README.md @@ -1,6 +1,6 @@

- Base UI logo + Base UI logo

Base UI

@@ -11,15 +11,17 @@ Base UI is a library of headless ("unstyled") React components and low-level ho Install the package in your project directory with: + + ```bash -npm install @mui/base +npm install @mui/base@next ``` ## Documentation -Visit [https://mui.com/base-ui/](https://mui.com/base-ui/) to view the full documentation. +Visit [https://next.mui.com/base-ui/](https://next.mui.com/base-ui/) to view the full documentation. ## Questions @@ -28,14 +30,14 @@ Use the "base-ui" tag on Stack Overflow to make it easier for the community to ## Examples -Our documentation features [a collection of example projects using Base UI](https://github.com/mui/material-ui/tree/master/examples). +Our documentation features [a collection of example projects using Base UI](https://github.com/mui/material-ui/tree/next/examples). ## Contributing Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes. Contributing to Base UI is about more than just issues and pull requests! -There are many other ways to [support Base UI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base. +There are many other ways to [support Base UI](https://next.mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base. ## Changelog @@ -43,7 +45,7 @@ The [changelog](https://github.com/mui/material-ui/releases) is regularly update ## Roadmap -Future plans and high-priority features and enhancements can be found in the [roadmap](https://mui.com/material-ui/discover-more/roadmap/). +Future plans and high-priority features and enhancements can be found in the [roadmap](https://next.mui.com/material-ui/discover-more/roadmap/). ## License diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 350c356217b117..f85da5038350b7 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -1,6 +1,6 @@ { "name": "@mui/base", - "version": "5.0.0-beta.40", + "version": "5.0.0-beta.41", "private": false, "author": "MUI Team", "description": "Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.", @@ -53,10 +53,10 @@ "@mui-internal/test-utils": "workspace:^", "@mui/internal-babel-macros": "workspace:^", "@mui/types": "workspace:^", - "@testing-library/react": "^14.2.1", + "@testing-library/react": "^14.2.2", "@testing-library/user-event": "^14.5.2", - "@types/chai": "^4.3.12", - "@types/prop-types": "^15.7.11", + "@types/chai": "^4.3.14", + "@types/prop-types": "^15.7.12", "@types/react": "18.2.55", "@types/react-dom": "18.2.19", "@types/sinon": "^10.0.20", diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 179e3aa09cb422..6f2d0529c45f45 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -14,7 +14,7 @@ Some of the codemods also run [postcss](https://github.com/postcss/postcss) plug ```bash -npx @mui/codemod@latest +npx @mui/codemod@next Applies a `@mui/codemod` to the specified paths @@ -34,10 +34,10 @@ Options: --jscodeshift [string] [default: false] Examples: - npx @mui/codemod@latest v4.0.0/theme-spacing-api src - npx @mui/codemod@latest v5.0.0/component-rename-prop src -- + npx @mui/codemod@next v4.0.0/theme-spacing-api src + npx @mui/codemod@next v5.0.0/component-rename-prop src -- --component=Grid --from=prop --to=newProp - npx @mui/codemod@latest v5.0.0/preset-safe src --parser=flow + npx @mui/codemod@next v5.0.0/preset-safe src --parser=flow ``` ### jscodeshift options @@ -45,7 +45,7 @@ Examples: To pass more options directly to jscodeshift, use `--jscodeshift="..."`. For example: ```bash -npx @mui/codemod@latest --jscodeshift="--run-in-band --verbose=2" +npx @mui/codemod@next --jscodeshift="--run-in-band --verbose=2" ``` See all available options [here](https://github.com/facebook/jscodeshift#usage-cli). @@ -56,12 +56,13 @@ Options to [recast](https://github.com/benjamn/recast)'s printer can be provided through jscodeshift's `printOptions` command line argument ```bash -npx @mui/codemod@latest --jscodeshift="--printOptions='{\"quote\":\"double\"}'" +npx @mui/codemod@next --jscodeshift="--printOptions='{\"quote\":\"double\"}'" ``` ## Included scripts - [Deprecation](#deprecations) +- [v6](#v600) - [v5](#v500) - [v4](#v400) - [v1](#v100) @@ -70,7 +71,7 @@ npx @mui/codemod@latest --jscodeshift="--printOptions='{\"quo ### Deprecations ```bash -npx @mui/codemod@latest deprecations/all +npx @mui/codemod@next deprecations/all ``` #### `all` @@ -89,7 +90,7 @@ A combination of all deprecations. ``` ```bash -npx @mui/codemod@latest deprecations/accordion-props +npx @mui/codemod@next deprecations/accordion-props ``` #### `accordion-summary-classes` @@ -133,7 +134,7 @@ CSS transforms: ``` ```bash -npx @mui/codemod@latest deprecations/accordion-summary-classes +npx @mui/codemod@next deprecations/accordion-summary-classes ``` #### `alert-classes` @@ -229,7 +230,7 @@ CSS transforms: ``` ```bash -npx @mui/codemod@latest deprecations/alert-classes +npx @mui/codemod@next deprecations/alert-classes ``` #### `alert-props` @@ -255,7 +256,7 @@ npx @mui/codemod@latest deprecations/alert-classes ``` ```bash -npx @mui/codemod@latest deprecations/alert-props +npx @mui/codemod@next deprecations/alert-props ``` #### `avatar-props` @@ -274,6 +275,45 @@ npx @mui/codemod@latest deprecations/alert-props />; ``` +#### `backdrop-props` + +```diff + +``` + +```bash +npx @mui/codemod@next deprecations/backdrop-props +``` + +#### `badge-props` + +```diff + +``` + +```diff + MuiBadge: { + defaultProps: { +- components: { Root: CustomRoot } ++ slots: { root: CustomRoot }, +- componentsProps: { root: { testid: 'test-id' }} ++ slotProps: { root: { testid: 'test-id' } }, + }, + }, +``` + +```bash +npx @mui/codemod@next deprecations/badge-props +``` + #### `button-classes` JS transforms: @@ -494,7 +534,133 @@ CSS transforms: ``` ```bash -npx @mui/codemod@latest deprecations/button-classes +npx @mui/codemod@next deprecations/button-classes +``` + +#### `button-group-classes` + +JS transforms: + +```diff + import { buttonGroupClasses } from '@mui/material/ButtonGroup'; + + MuiButtonGroup: { + styleOverrides: { + root: { +- [`& .${buttonGroupClasses.groupedHorizontal}`]: { ++ [`&.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedVertical}`]: { ++ [`&.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedText}`]: { ++ [`&.${buttonGroupClasses.text} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedTextHorizontal}`]: { ++ [`&.${buttonGroupClasses.text}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedTextVertical}`]: { ++ [`&.${buttonGroupClasses.text}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedTextPrimary}`]: { ++ [`&.${buttonGroupClasses.text}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedTextSecondary}`]: { ++ [`&.${buttonGroupClasses.text}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlined}`]: { ++ [`&.${buttonGroupClasses.outlined} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlinedHorizontal}`]: { ++ [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlinedVertical}`]: { ++ [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlinedPrimary}`]: { ++ [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedOutlinedSecondary}`]: { ++ [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContained}`]: { ++ [`&.${buttonGroupClasses.contained} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContainedHorizontal}`]: { ++ [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContainedVertical}`]: { ++ [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContainedPrimary}`]: { ++ [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${buttonGroupClasses.groupedContainedSecondary}`]: { ++ [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`]: { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +-.MuiButtonGroup-root .MuiButtonGroup-groupedHorizontal ++.MuiButtonGroup-root.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedVertical ++.MuiButtonGroup-root.MuiButtonGroup-vertical > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedText ++.MuiButtonGroup-root.MuiButtonGroup-text > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedTextHorizontal ++.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedTextVertical ++.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-vertical > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedTextPrimary ++.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedTextSecondary ++.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlined ++.MuiButtonGroup-root.MuiButtonGroup-outlined > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedHorizontal ++.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedVertical ++.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-vertical > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedPrimary ++.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedSecondary ++.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContained ++.MuiButtonGroup-root.MuiButtonGroup-contained > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedHorizontal ++.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedVertical ++.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-vertical > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedPrimary ++.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped +-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedSecondary ++.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped +``` + +```bash +npx @mui/codemod@latest deprecations/button-group-classes ``` #### `chip-classes` @@ -676,7 +842,7 @@ CSS transforms: ``` ```bash -npx @mui/codemod@latest deprecations/chip-classes +npx @mui/codemod@next deprecations/chip-classes ``` #### `divider-props` @@ -689,7 +855,7 @@ npx @mui/codemod@latest deprecations/chip-classes ``` ```bash -npx @mui/codemod@latest deprecations/divider-props +npx @mui/codemod@next deprecations/divider-props ``` #### `pagination-item-classes` @@ -750,11 +916,10 @@ CSS transforms: +.MuiPaginationItem-outlined.MuiPaginationItem-primary -.MuiPaginationItem-outlinedSecondary +.MuiPaginationItem-outlined.MuiPaginationItem-secondary - /> ``` ```bash -npx @mui/codemod@latest deprecations/pagination-item-classes +npx @mui/codemod@next deprecations/pagination-item-classes ``` #### `slider-props` @@ -780,9 +945,34 @@ npx @mui/codemod@latest deprecations/pagination-item-classes ``` ```bash -npx @mui/codemod@latest deprecations/slider-props +npx @mui/codemod@next deprecations/slider-props +``` + +#### `step-label-props` + +```diff + +``` + +```diff + MuiStepLabel: { + defaultProps: { +- componentsProps={{ label: labelProps }} ++ slotProps={{ label: labelProps }} + }, + }, +``` + +```bash +npx @mui/codemod@latest deprecations/step-label-props + ``` +### v6.0.0 + ### v5.0.0 #### `base-use-named-exports` @@ -801,7 +991,7 @@ This codemod updates the import and re-export statements. ``` ```bash -npx @mui/codemod@latest v5.0.0/base-use-named-exports +npx @mui/codemod@next v5.0.0/base-use-named-exports ``` #### `base-remove-unstyled-suffix` @@ -814,7 +1004,7 @@ The `Unstyled` suffix has been removed from all Base UI component names, includ ``` ```bash -npx @mui/codemod@latest v5.0.0/base-remove-unstyled-suffix +npx @mui/codemod@next v5.0.0/base-remove-unstyled-suffix ``` #### `base-remove-component-prop` @@ -829,7 +1019,7 @@ This change only affects Base UI components. ``` ```bash -npx @mui/codemod@latest v5.0.0/base-remove-component-prop +npx @mui/codemod@next v5.0.0/base-remove-component-prop ``` #### `rename-css-variables` @@ -844,7 +1034,7 @@ Updates the names of the CSS variables of the Joy UI components to adapt to the ``` ```bash -npx @mui/codemod@latest v5.0.0/rename-css-variables +npx @mui/codemod@next v5.0.0/rename-css-variables ``` #### `base-hook-imports` @@ -857,7 +1047,7 @@ Updates the sources of the imports of the Base UI hooks to adapt to the new dir ``` ```bash -npx @mui/codemod@latest v5.0.0/base-hook-imports +npx @mui/codemod@next v5.0.0/base-hook-imports ``` #### `joy-rename-classname-prefix` @@ -872,7 +1062,7 @@ Renames the classname prefix from `'Joy'` to `'Mui'` for Joy UI components. ``` ```bash -npx @mui/codemod@latest v5.0.0/joy-rename-classname-prefix +npx @mui/codemod@next v5.0.0/joy-rename-classname-prefix ``` #### `joy-rename-row-prop` @@ -887,7 +1077,7 @@ Transforms `row` prop to `orientation` prop across `Card`, `List` and `RadioGrou ``` ```bash -npx @mui/codemod@latest v5.0.0/joy-rename-row-prop +npx @mui/codemod@next v5.0.0/joy-rename-row-prop ``` #### `joy-avatar-remove-imgProps` @@ -905,7 +1095,7 @@ This change only affects Joy UI Avatar component. ``` ```bash -npx @mui/codemod@latest v5.0.0/joy-avatar-remove-imgProps +npx @mui/codemod@next v5.0.0/joy-avatar-remove-imgProps ``` #### `joy-text-field-to-input` @@ -963,7 +1153,7 @@ This change only affects Joy UI components. ``` ```bash -npx @mui/codemod@latest v5.0.0/joy-text-field-to-input +npx @mui/codemod@next v5.0.0/joy-text-field-to-input ``` #### `joy-rename-components-to-slots` @@ -982,7 +1172,7 @@ This change only affects Joy UI components. ``` ```bash -npx @mui/codemod@latest v5.0.0/joy-rename-components-to-slots +npx @mui/codemod@next v5.0.0/joy-rename-components-to-slots ``` The associated breaking change was done in [#34997](https://github.com/mui/material-ui/pull/34997). @@ -992,7 +1182,7 @@ The associated breaking change was done in [#34997](https://github.com/mui/mater Rename the imports of Date and Time Pickers from `@mui/lab` to `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`. ```bash -npx @mui/codemod@latest v5.0.0/date-pickers-moved-to-x +npx @mui/codemod@next v5.0.0/date-pickers-moved-to-x ``` #### `tree-view-moved-to-x` @@ -1000,7 +1190,7 @@ npx @mui/codemod@latest v5.0.0/date-pickers-moved-to-x Rename the imports of Tree View from `@mui/lab` to `@mui/x-tree-view`. ```bash -npx @mui/codemod@latest v5.0.0/tree-view-moved-to-x +npx @mui/codemod@next v5.0.0/tree-view-moved-to-x ``` #### 🚀 `preset-safe` @@ -1008,7 +1198,7 @@ npx @mui/codemod@latest v5.0.0/tree-view-moved-to-x A combination of all important transformers for migrating v4 to v5. ⚠️ This codemod should be run only once. ```bash -npx @mui/codemod@latest v5.0.0/preset-safe +npx @mui/codemod@next v5.0.0/preset-safe ``` The list includes these transformers @@ -1075,7 +1265,7 @@ Imports and inserts `adaptV4Theme` into `createTheme` (or `createMuiTheme`) ``` ```bash -npx @mui/codemod@latest v5.0.0/adapter-v4 +npx @mui/codemod@next v5.0.0/adapter-v4 ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#theme). @@ -1092,7 +1282,7 @@ Renames `Autocomplete`'s `closeIcon` prop to `clearIcon`. ```bash -npx @mui/codemod@latest v5.0.0/autocomplete-rename-closeicon +npx @mui/codemod@next v5.0.0/autocomplete-rename-closeicon ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#autocomplete). @@ -1111,7 +1301,7 @@ Renames `Autocomplete`'s `getOptionSelected` to `isOptionEqualToValue`. ```bash -npx @mui/codemod@latest v5.0.0/autocomplete-rename-option +npx @mui/codemod@next v5.0.0/autocomplete-rename-option ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#autocomplete). @@ -1130,7 +1320,7 @@ Updates the `Avatar`'s `variant` value and `classes` key from 'circle' to 'circu ```bash -npx @mui/codemod@latest v5.0.0/avatar-circle-circular +npx @mui/codemod@next v5.0.0/avatar-circle-circular ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#avatar). @@ -1165,7 +1355,7 @@ Renames the badge's props. ```bash -npx @mui/codemod@latest v5.0.0/badge-overlap-value +npx @mui/codemod@next v5.0.0/badge-overlap-value ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#badge). @@ -1189,7 +1379,7 @@ This change only affects Base UI components. ```bash -npx @mui/codemod@latest v5.0.0/base-rename-components-to-slots +npx @mui/codemod@next v5.0.0/base-rename-components-to-slots ``` The associated breaking change was done in [#34693](https://github.com/mui/material-ui/pull/34693). @@ -1208,7 +1398,7 @@ Updates the Box API from separate system props to `sx`. ```bash -npx @mui/codemod@latest v5.0.0/box-borderradius-values +npx @mui/codemod@next v5.0.0/box-borderradius-values ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#box). @@ -1223,7 +1413,7 @@ Renames the Box `css` prop to `sx` ``` ```bash -npx @mui/codemod@latest v5.0.0/box-rename-css +npx @mui/codemod@next v5.0.0/box-rename-css ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#box). @@ -1244,7 +1434,7 @@ Renames the Box `grid*Gap` props. ```bash -npx @mui/codemod@latest v5.0.0/box-rename-gap +npx @mui/codemod@next v5.0.0/box-rename-gap ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#box). @@ -1261,7 +1451,7 @@ Removes the outdated `color` prop values. ```bash -npx @mui/codemod@latest v5.0.0/button-color-prop +npx @mui/codemod@next v5.0.0/button-color-prop ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#button). @@ -1278,7 +1468,7 @@ Removes the Chip `variant` prop if the value is `"default"`. ```bash -npx @mui/codemod@latest v5.0.0/chip-variant-prop +npx @mui/codemod@next v5.0.0/chip-variant-prop ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#chip). @@ -1295,7 +1485,7 @@ Renames the CircularProgress `static` variant to `determinate`. ```bash -npx @mui/codemod@latest v5.0.0/circularprogress-variant +npx @mui/codemod@next v5.0.0/circularprogress-variant ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#circularprogress). @@ -1314,7 +1504,7 @@ Renames `Collapse`'s `collapsedHeight` prop to `collapsedSize`. ```bash -npx @mui/codemod@latest v5.0.0/collapse-rename-collapsedheight +npx @mui/codemod@next v5.0.0/collapse-rename-collapsedheight ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#collapse). @@ -1333,7 +1523,7 @@ A generic codemod to rename any component prop. ```bash -npx @mui/codemod@latest v5.0.0/component-rename-prop -- --component=Grid --from=prop --to=newProp +npx @mui/codemod@next v5.0.0/component-rename-prop -- --component=Grid --from=prop --to=newProp ``` #### `core-styles-import` @@ -1346,7 +1536,7 @@ Renames private import from `core/styles/*` to `core/styles` ``` ```bash -npx @mui/codemod@latest v5.0.0/core-styles-import +npx @mui/codemod@next v5.0.0/core-styles-import ``` #### `create-theme` @@ -1359,7 +1549,7 @@ Renames the function `createMuiTheme` to `createTheme` ``` ```bash -npx @mui/codemod@latest v5.0.0/create-theme +npx @mui/codemod@next v5.0.0/create-theme ``` #### `dialog-props` @@ -1372,7 +1562,7 @@ Remove `disableBackdropClick` prop from `` ``` ```bash -npx @mui/codemod@latest v5.0.0/dialog-props +npx @mui/codemod@next v5.0.0/dialog-props ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#dialog). @@ -1387,7 +1577,7 @@ Remove `disableTypography` prop from `` ``` ```bash -npx @mui/codemod@latest v5.0.0/dialog-title-props +npx @mui/codemod@next v5.0.0/dialog-title-props ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#dialog). @@ -1404,7 +1594,7 @@ Adds `prepend: true` to Emotion `createCache` ``` ```bash -npx @mui/codemod@latest v5.0.0/create-theme +npx @mui/codemod@next v5.0.0/create-theme ``` #### `expansion-panel-component` @@ -1412,7 +1602,7 @@ npx @mui/codemod@latest v5.0.0/create-theme Renames `ExpansionPanel*` to `Accordion*` ```bash -npx @mui/codemod@latest v5.0.0/expansion-panel-component +npx @mui/codemod@next v5.0.0/expansion-panel-component ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#expansionpanel). @@ -1425,7 +1615,7 @@ You can find more details about this breaking change in [the migration guide](ht ``` ```bash -npx @mui/codemod@latest v5.0.0/fab-variant +npx @mui/codemod@next v5.0.0/fab-variant ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#fab). @@ -1445,7 +1635,7 @@ Renames the `fade` style utility import and calls to `alpha`. ```bash -npx @mui/codemod@latest v5.0.0/fade-rename-alpha +npx @mui/codemod@next v5.0.0/fade-rename-alpha ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#styles). @@ -1462,7 +1652,7 @@ Renames `Grid`'s `justify` prop to `justifyContent`. ```bash -npx @mui/codemod@latest v5.0.0/grid-justify-justifycontent +npx @mui/codemod@next v5.0.0/grid-justify-justifycontent ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#grid). @@ -1472,7 +1662,7 @@ You can find more details about this breaking change in [the migration guide](ht Renames `GridList*` to `ImageList*` ```bash -npx @mui/codemod@latest v5.0.0/grid-list-component +npx @mui/codemod@next v5.0.0/grid-list-component ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#gridlist). @@ -1489,7 +1679,7 @@ Adds `size="large"` if `size` is not defined to get the same appearance as v4. ``` ```bash -npx @mui/codemod@latest v5.0.0/icon-button-size +npx @mui/codemod@next v5.0.0/icon-button-size ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#iconbutton). @@ -1554,7 +1744,7 @@ Replace JSS styling with `makeStyles` or `withStyles` to `styled` API. ``` ```bash -npx @mui/codemod@latest v5.0.0/jss-to-styled +npx @mui/codemod@next v5.0.0/jss-to-styled ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#1-use-styled-or-sx-api). @@ -1626,7 +1816,7 @@ Migrate JSS styling with `makeStyles` or `withStyles` to the corresponding `tss- ``` ```bash -npx @mui/codemod@latest v5.0.0/jss-to-tss-react +npx @mui/codemod@next v5.0.0/jss-to-tss-react ``` The following scenarios are not currently handled by this codemod and will be marked with a @@ -1654,7 +1844,7 @@ Apply `underline="hover"` to `` that does not define `underline` prop (t ``` ```bash -npx @mui/codemod@latest v5.0.0/link-underline-hover +npx @mui/codemod@next v5.0.0/link-underline-hover ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#link). @@ -1692,7 +1882,7 @@ Moves JSS imports to `@material-ui/styles` ``` ```bash -npx @mui/codemod@latest v5.0.0/material-ui-styles +npx @mui/codemod@next v5.0.0/material-ui-styles ``` #### `material-ui-types` @@ -1705,7 +1895,7 @@ Renames `Omit` import from `@material-ui/types` to `DistributiveOmit` ``` ```bash -npx @mui/codemod@latest v5.0.0/material-ui-types +npx @mui/codemod@next v5.0.0/material-ui-types ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#material-ui-types). @@ -1722,7 +1912,7 @@ Removes `disableBackdropClick` and `onEscapeKeyDown` from `` ``` ```bash -npx @mui/codemod@latest v5.0.0/modal-props +npx @mui/codemod@next v5.0.0/modal-props ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#modal). @@ -1746,7 +1936,7 @@ or ```bash -npx @mui/codemod@latest v5.0.0/moved-lab-modules +npx @mui/codemod@next v5.0.0/moved-lab-modules ``` You can find more details about this breaking change in the migration guide. @@ -1771,7 +1961,7 @@ Renames `Pagination*`'s `shape` values from 'round' to 'circular'. ``` ```bash -npx @mui/codemod@latest v5.0.0/pagination-round-circular +npx @mui/codemod@next v5.0.0/pagination-round-circular ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#pagination). @@ -1790,7 +1980,7 @@ Fix private import paths. ```bash -npx @mui/codemod@latest v5.0.0/optimal-imports +npx @mui/codemod@next v5.0.0/optimal-imports ``` #### `root-ref` @@ -1798,7 +1988,7 @@ npx @mui/codemod@latest v5.0.0/optimal-imports Removes `RootRef` from the codebase. ```bash -npx @mui/codemod@latest v5.0.0/root-ref +npx @mui/codemod@next v5.0.0/root-ref ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#rootref). @@ -1813,7 +2003,7 @@ You can find more details about this breaking change in [the migration guide](ht ``` ```bash -npx @mui/codemod@latest v5.0.0/skeleton-variant +npx @mui/codemod@next v5.0.0/skeleton-variant ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#skeleton). @@ -1823,7 +2013,7 @@ You can find more details about this breaking change in [the migration guide](ht Applies `StyledEngineProvider` to the files that contains `ThemeProvider`. ```bash -npx @mui/codemod@latest v5.0.0/styled-engine-provider +npx @mui/codemod@next v5.0.0/styled-engine-provider ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-style-changes/#style-library). @@ -1849,7 +2039,7 @@ Renames props in `Table*` components. ``` ```bash -npx @mui/codemod@latest v5.0.0/table-props +npx @mui/codemod@next v5.0.0/table-props ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#table). @@ -1868,7 +2058,7 @@ Renames the `Tabs`'s `scrollButtons` prop values. ``` ```bash -npx @mui/codemod@latest v5.0.0/tabs-scroll-buttons +npx @mui/codemod@next v5.0.0/tabs-scroll-buttons ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#tabs). @@ -1887,7 +2077,7 @@ Renames `TextField`'s rows props. ``` ```bash -npx @mui/codemod@latest v5.0.0/textarea-minmax-rows +npx @mui/codemod@next v5.0.0/textarea-minmax-rows ``` You can find more details about this breaking change in the migration guide. @@ -1900,7 +2090,7 @@ You can find more details about this breaking change in the migration guide. Adds `DefaultTheme` module augmentation to TypeScript projects. ```bash -npx @mui/codemod@latest v5.0.0/theme-augment +npx @mui/codemod@next v5.0.0/theme-augment ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#material-ui-styles). @@ -1919,7 +2109,7 @@ Updates breakpoint values to match new logic. ⚠️ This mod is not idempotent, ```bash -npx @mui/codemod@latest v5.0.0/theme-breakpoints +npx @mui/codemod@next v5.0.0/theme-breakpoints ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#theme). @@ -1929,7 +2119,7 @@ You can find more details about this breaking change in [the migration guide](ht Renames `theme.breakpoints.width('md')` to `theme.breakpoints.values.md`. ```bash -npx @mui/codemod@latest v5.0.0/theme-breakpoints-width +npx @mui/codemod@next v5.0.0/theme-breakpoints-width ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#theme). @@ -1942,7 +2132,7 @@ You can find more details about this breaking change in [the migration guide](ht ``` ```bash -npx @mui/codemod@latest v5.0.0/theme-options +npx @mui/codemod@next v5.0.0/theme-options ``` #### `theme-palette-mode` @@ -1964,7 +2154,7 @@ Renames `type` to `mode`. ``` ```bash -npx @mui/codemod@latest v5.0.0/theme-palette-mode +npx @mui/codemod@next v5.0.0/theme-palette-mode ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#theme). @@ -1974,7 +2164,7 @@ You can find more details about this breaking change in [the migration guide](ht Renames `MuiThemeProvider` to `ThemeProvider`. ```bash -npx @mui/codemod@latest v5.0.0/theme-provider +npx @mui/codemod@next v5.0.0/theme-provider ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#material-ui-core-styles). @@ -1993,7 +2183,7 @@ Removes the 'px' suffix from some template strings. ```bash -npx @mui/codemod@latest v5.0.0/theme-spacing +npx @mui/codemod@next v5.0.0/theme-spacing ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#theme). @@ -2008,7 +2198,7 @@ Renames `theme.typography.round($number)` to `Math.round($number * 1e5) / 1e5`. ``` ```bash -npx @mui/codemod@latest v5.0.0/theme-typography-round +npx @mui/codemod@next v5.0.0/theme-typography-round ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#theme). @@ -2026,7 +2216,7 @@ Converts all `@mui/material` submodule imports to the root module: ```bash -npx @mui/codemod@latest v5.0.0/top-level-imports +npx @mui/codemod@next v5.0.0/top-level-imports ``` Head to https://mui.com/guides/minimizing-bundle-size/ to understand when it's useful. @@ -2036,7 +2226,7 @@ Head to https://mui.com/guides/minimizing-bundle-size/ to understand when it's u Renames import `transitions` to `createTransitions` ```bash -npx @mui/codemod@latest v5.0.0/transitions +npx @mui/codemod@next v5.0.0/transitions ``` #### `use-autocomplete` @@ -2049,7 +2239,7 @@ Renames `useAutocomplete` related import from lab to core ``` ```bash -npx @mui/codemod@latest v5.0.0/use-autocomplete +npx @mui/codemod@next v5.0.0/use-autocomplete ``` #### `use-transitionprops` @@ -2078,7 +2268,7 @@ Updates Dialog, Menu, Popover, and Snackbar to use the `TransitionProps` prop to ```bash -npx @mui/codemod@latest v5.0.0/use-transitionprops +npx @mui/codemod@next v5.0.0/use-transitionprops ``` You can find more details about this breaking change in [the migration guide](/material-ui/migration/v5-component-changes/#dialog). @@ -2108,7 +2298,7 @@ The diff should look like this: ```bash -npx @mui/codemod@latest v5.0.0/variant-prop +npx @mui/codemod@next v5.0.0/variant-prop ``` #### `with-mobile-dialog` @@ -2122,7 +2312,7 @@ Removes imported `withMobileDialog`, and inserts hardcoded version to prevent ap ``` ```bash -npx @mui/codemod@latest v5.0.0/with-mobile-dialog +npx @mui/codemod@next v5.0.0/with-mobile-dialog ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#dialog). @@ -2138,7 +2328,7 @@ Removes `withWidth` import, and inserts hardcoded version to prevent application ``` ```bash -npx @mui/codemod@latest v5.0.0/with-width +npx @mui/codemod@next v5.0.0/with-width ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-style-changes/#material-ui-core-styles). @@ -2199,7 +2389,7 @@ Replace every occurrence of `material-ui` related package with the new package n ``` ```bash -npx @mui/codemod@latest v5.0.0/mui-replace +npx @mui/codemod@next v5.0.0/mui-replace ``` You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/migration-v4/#update-material-ui-version). @@ -2219,7 +2409,7 @@ The diff should look like this: ```bash -npx @mui/codemod@latest v4.0.0/theme-spacing-api +npx @mui/codemod@next v4.0.0/theme-spacing-api ``` This codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation. @@ -2246,7 +2436,7 @@ Converts all `@material-ui/core` imports more than 1 level deep to the optimal f ```bash -npx @mui/codemod@latest v4.0.0/optimal-imports +npx @mui/codemod@next v4.0.0/optimal-imports ``` Head to https://mui.com/guides/minimizing-bundle-size/ to understand when it's useful. @@ -2264,7 +2454,7 @@ Converts all `@material-ui/core` submodule imports to the root module: ```bash -npx @mui/codemod@latest v4.0.0/top-level-imports +npx @mui/codemod@next v4.0.0/top-level-imports ``` Head to https://mui.com/guides/minimizing-bundle-size/ to understand when it's useful. @@ -2285,7 +2475,7 @@ The diff should look like this: ```bash -npx @mui/codemod@latest v1.0.0/import-path +npx @mui/codemod@next v1.0.0/import-path ``` **Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.: @@ -2312,7 +2502,7 @@ The diff should look like this: ```bash -npx @mui/codemod@latest v1.0.0/color-imports +npx @mui/codemod@next v1.0.0/color-imports ``` **additional options** @@ -2320,7 +2510,7 @@ npx @mui/codemod@latest v1.0.0/color-imports ```bash -npx @mui/codemod@latest v1.0.0/color-imports -- --importPath='mui/styles/colors' --targetPath='mui/colors' +npx @mui/codemod@next v1.0.0/color-imports -- --importPath='mui/styles/colors' --targetPath='mui/colors' ``` #### `svg-icon-imports` @@ -2338,7 +2528,7 @@ The diff should look like this: ```bash -npx @mui/codemod@latest v1.0.0/svg-icon-imports +npx @mui/codemod@next v1.0.0/svg-icon-imports ``` #### `menu-item-primary-text` @@ -2356,7 +2546,7 @@ The diff should look like this: ```bash -npx @mui/codemod@latest v1.0.0/menu-item-primary-text +npx @mui/codemod@next v1.0.0/menu-item-primary-text ``` ### v0.15.0 @@ -2380,5 +2570,5 @@ The diff should look like this: ```bash -npx @mui/codemod@latest v0.15.0/import-path +npx @mui/codemod@next v0.15.0/import-path ``` diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json index 0b8512b7042c33..98bad4c9ffb08b 100644 --- a/packages/mui-codemod/package.json +++ b/packages/mui-codemod/package.json @@ -1,6 +1,6 @@ { "name": "@mui/codemod", - "version": "5.15.14", + "version": "6.0.0-alpha.0", "bin": "./codemod.js", "private": false, "author": "MUI Team", @@ -35,12 +35,12 @@ "@babel/traverse": "^7.23.9", "jscodeshift": "^0.13.1", "jscodeshift-add-imports": "^1.0.10", - "postcss": "^8.4.35", + "postcss": "^8.4.38", "postcss-cli": "^8.3.1", "yargs": "^17.7.2" }, "devDependencies": { - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/jscodeshift": "0.11.5", "chai": "^4.4.1" }, diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index a360b241125539..cfb4dee847f12c 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -3,9 +3,12 @@ import transformAvatarProps from '../avatar-props'; import transformDividerProps from '../divider-props'; import transformAccordionClasses from '../accordion-summary-classes'; import transformButtonClasses from '../button-classes'; +import transformButtonGroupClasses from '../button-group-classes'; import transformChipClasses from '../chip-classes'; import transformPaginationItemClasses from '../pagination-item-classes'; import transformAlertClasses from '../alert-classes'; +import transformStepLabelProps from '../step-label-props'; +import transformBackdropProps from '../backdrop-props'; /** * @param {import('jscodeshift').FileInfo} file @@ -17,9 +20,12 @@ export default function deprecationsAll(file, api, options) { file.source = transformDividerProps(file, api, options); file.source = transformAccordionClasses(file, api, options); file.source = transformButtonClasses(file, api, options); + file.source = transformButtonGroupClasses(file, api, options); file.source = transformChipClasses(file, api, options); file.source = transformPaginationItemClasses(file, api, options); file.source = transformAlertClasses(file, api, options); + file.source = transformStepLabelProps(file, api, options); + file.source = transformBackdropProps(file, api, options); return file.source; } diff --git a/packages/mui-codemod/src/deprecations/all/postcss.config.js b/packages/mui-codemod/src/deprecations/all/postcss.config.js index 9673a34e2131fd..67d88d6ac1e777 100644 --- a/packages/mui-codemod/src/deprecations/all/postcss.config.js +++ b/packages/mui-codemod/src/deprecations/all/postcss.config.js @@ -3,6 +3,7 @@ const { } = require('../accordion-summary-classes/postcss-plugin'); const { plugin: alertClassesPlugin } = require('../alert-classes/postcss-plugin'); const { plugin: buttonClassesPlugin } = require('../button-classes/postcss-plugin'); +const { plugin: buttonGroupClassesPlugin } = require('../button-group-classes/postcss-plugin'); const { plugin: chipClassesPlugin } = require('../chip-classes/postcss-plugin'); const { plugin: paginationItemClassesPlugin, @@ -13,6 +14,7 @@ module.exports = { accordionSummaryClassesPlugin, alertClassesPlugin, buttonClassesPlugin, + buttonGroupClassesPlugin, chipClassesPlugin, paginationItemClassesPlugin, ], diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.js b/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.js new file mode 100644 index 00000000000000..c444dfc97b1004 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.js @@ -0,0 +1,84 @@ +import findComponentJSX from '../../util/findComponentJSX'; +import assignObject from '../../util/assignObject'; +import appendAttribute from '../../util/appendAttribute'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + + findComponentJSX(j, { root, componentName: 'Backdrop' }, (elementPath) => { + const index = elementPath.node.openingElement.attributes.findIndex( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'TransitionComponent', + ); + + if (index !== -1) { + const removed = elementPath.node.openingElement.attributes.splice(index, 1); + let hasNode = false; + elementPath.node.openingElement.attributes.forEach((attr) => { + if (attr.name?.name === 'slots') { + hasNode = true; + assignObject(j, { + target: attr, + key: 'transition', + expression: removed[0].value.expression, + }); + } + }); + + if (!hasNode) { + appendAttribute(j, { + target: elementPath.node, + attributeName: 'slots', + expression: j.objectExpression([ + j.objectProperty(j.identifier('transition'), removed[0].value.expression), + ]), + }); + } + } + }); + + root.find(j.ObjectProperty, { key: { name: 'TransitionComponent' } }).forEach((path) => { + if (path.parent?.parent?.parent?.parent?.node.key?.name === 'MuiBackdrop') { + const { properties: defaultPropsProperties } = path.parent.value; + + const existingSlots = defaultPropsProperties.find((prop) => prop.key.name === 'slots'); + const slots = existingSlots + ? existingSlots.value.properties.reduce((acc, prop) => { + return { ...acc, [prop.key.name]: prop.value }; + }, {}) + : {}; + + const transitionComponent = + defaultPropsProperties.find((prop) => prop.key.name === 'TransitionComponent') ?? {}; + + const updatedSlots = j.objectExpression( + Object.entries({ + transition: transitionComponent?.value, + ...slots, + }).map(([slot, value]) => { + return j.objectProperty(j.identifier(slot), value); + }), + ); + + if (existingSlots) { + existingSlots.value = updatedSlots; + path.prune(); + } else { + path.replace( + j.property( + 'init', + j.identifier('slots'), + j.objectExpression([j.objectProperty(j.identifier('transition'), path.node.value)]), + ), + ); + } + } + }); + + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.test.js b/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.test.js new file mode 100644 index 00000000000000..4d825b0076014a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.test.js @@ -0,0 +1,53 @@ +import path from 'path'; +import { expect } from 'chai'; +import { jscodeshift } from '../../../testUtils'; +import transform from './backdrop-props'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('backdrop-props', () => { + it('transforms props as needed', () => { + const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('[theme] backdrop-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/theme.actual.js') }, + { jscodeshift }, + { printOptions: { trailingComma: true } }, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/theme.expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/index.js b/packages/mui-codemod/src/deprecations/backdrop-props/index.js new file mode 100644 index 00000000000000..e73b413d4be88f --- /dev/null +++ b/packages/mui-codemod/src/deprecations/backdrop-props/index.js @@ -0,0 +1 @@ +export { default } from './backdrop-props'; diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/actual.js new file mode 100644 index 00000000000000..8cca730fda99e4 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/actual.js @@ -0,0 +1,25 @@ +import Backdrop from '@mui/material/Backdrop'; +import { Backdrop as MyBackdrop } from '@mui/material'; + +; +; +; +; +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/expected.js new file mode 100644 index 00000000000000..ca22506cedab88 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/expected.js @@ -0,0 +1,27 @@ +import Backdrop from '@mui/material/Backdrop'; +import { Backdrop as MyBackdrop } from '@mui/material'; + +; +; +; +; +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.actual.js new file mode 100644 index 00000000000000..a8e62bd3583647 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.actual.js @@ -0,0 +1,18 @@ +fn({ + MuiBackdrop: { + defaultProps: { + TransitionComponent: CustomTransition, + }, + }, +}); + +fn({ + MuiBackdrop: { + defaultProps: { + TransitionComponent: CustomTransition, + slots: { + root: 'div', + }, + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.expected.js new file mode 100644 index 00000000000000..ccc52bc558129d --- /dev/null +++ b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.expected.js @@ -0,0 +1,20 @@ +fn({ + MuiBackdrop: { + defaultProps: { + slots: { + transition: CustomTransition, + }, + }, + }, +}); + +fn({ + MuiBackdrop: { + defaultProps: { + slots: { + transition: CustomTransition, + root: 'div', + }, + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/badge-props/badge-props.js b/packages/mui-codemod/src/deprecations/badge-props/badge-props.js new file mode 100644 index 00000000000000..9564f50a60c087 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/badge-props.js @@ -0,0 +1,15 @@ +import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + + replaceComponentsWithSlots(j, { root, componentName: 'Badge' }); + + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/badge-props/badge-props.test.js b/packages/mui-codemod/src/deprecations/badge-props/badge-props.test.js new file mode 100644 index 00000000000000..5da03e1b1e20c5 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/badge-props.test.js @@ -0,0 +1,53 @@ +import path from 'path'; +import { expect } from 'chai'; +import { jscodeshift } from '../../../testUtils'; +import transform from './badge-props'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('badge-props', () => { + it('transforms props as needed', () => { + const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('[theme] badge-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/theme.actual.js') }, + { jscodeshift }, + { printOptions: { trailingComma: false } }, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/theme.expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/badge-props/index.js b/packages/mui-codemod/src/deprecations/badge-props/index.js new file mode 100644 index 00000000000000..e14cf61291d62e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/index.js @@ -0,0 +1 @@ +export { default } from './badge-props'; diff --git a/packages/mui-codemod/src/deprecations/badge-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/badge-props/test-cases/actual.js new file mode 100644 index 00000000000000..7075b1d041785d --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/test-cases/actual.js @@ -0,0 +1,24 @@ +import { Badge } from '@mui/material'; + +; + +; + +; + +; diff --git a/packages/mui-codemod/src/deprecations/badge-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/badge-props/test-cases/expected.js new file mode 100644 index 00000000000000..532e2720d4b094 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/test-cases/expected.js @@ -0,0 +1,32 @@ +import { Badge } from '@mui/material'; + +; + +; + +; + +; diff --git a/packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.actual.js new file mode 100644 index 00000000000000..2517a8a9a2ca08 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.actual.js @@ -0,0 +1,42 @@ +fn({ + MuiBadge: { + defaultProps: { + components: { root: ComponentsRoot }, + componentsProps: { root: componentsRootProps }, + }, + }, +}); + +fn({ + MuiBadge: { + defaultProps: { + components: { root: ComponentsRoot }, + slots: { badge: SlotsBadge }, + componentsProps: { root: componentsRootProps }, + slotProps: { badge: slotsBadgeProps }, + }, + }, +}); + +fn({ + MuiBadge: { + defaultProps: { + components: { root: ComponentsRoot }, + slots: { badge: SlotsBadge, root: SlotsRoot }, + componentsProps: { root: componentsRootProps }, + slotProps: { root: slotsRootProps, badge: slotsBadgeProps }, + }, + }, +}); + +fn({ + MuiBadge: { + defaultProps: { + components: { root: ComponentsRoot }, + slots: { badge: SlotsBadge, root: SlotsRoot }, + componentsProps: { root: componentsRootProps, badge: componentsBadgeProps }, + slotProps: { badge: slotsBadgeProps, root: slotsRootProps }, + }, + }, +}); + diff --git a/packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.expected.js new file mode 100644 index 00000000000000..e3c05284951fdc --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.expected.js @@ -0,0 +1,73 @@ +fn({ + MuiBadge: { + defaultProps: { + slots: { + root: ComponentsRoot + }, + + slotProps: { + root: componentsRootProps + } + }, + }, +}); + +fn({ + MuiBadge: { + defaultProps: { + slots: { + root: ComponentsRoot, + badge: SlotsBadge + }, + + slotProps: { + root: componentsRootProps, + badge: slotsBadgeProps + } + }, + }, +}); + +fn({ + MuiBadge: { + defaultProps: { + slots: { + root: SlotsRoot, + badge: SlotsBadge + }, + + slotProps: { + root: { + ...componentsRootProps, + ...slotsRootProps + }, + + badge: slotsBadgeProps + } + }, + }, +}); + +fn({ + MuiBadge: { + defaultProps: { + slots: { + root: SlotsRoot, + badge: SlotsBadge + }, + + slotProps: { + root: { + ...componentsRootProps, + ...slotsRootProps + }, + + badge: { + ...componentsBadgeProps, + ...slotsBadgeProps + } + } + }, + }, +}); + diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.js b/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.js new file mode 100644 index 00000000000000..cffe90a28e2599 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.js @@ -0,0 +1,127 @@ +import { classes } from './postcss-plugin'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + classes.forEach(({ deprecatedClass, replacementSelector }) => { + const replacementSelectorPrefix = '&'; + root + .find(j.ImportDeclaration) + .filter((path) => path.node.source.value.match(/^@mui\/material\/ButtonGroup$/)) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if ( + specifier.type === 'ImportSpecifier' && + specifier.imported.name === 'buttonGroupClasses' + ) { + const deprecatedAtomicClass = deprecatedClass.replace( + `${deprecatedClass.split('-')[0]}-`, + '', + ); + root + .find(j.MemberExpression, { + object: { name: specifier.local.name }, + property: { name: deprecatedAtomicClass }, + }) + .forEach((memberExpression) => { + const parent = memberExpression.parentPath.parentPath.value; + if (parent.type === j.TemplateLiteral.name) { + const memberExpressionIndex = parent.expressions.findIndex( + (expression) => expression === memberExpression.value, + ); + const precedingTemplateElement = parent.quasis[memberExpressionIndex]; + const atomicClasses = replacementSelector + .replaceAll('MuiButtonGroup-', '') + .replaceAll(replacementSelectorPrefix, '') + .replaceAll(' > ', '') + .split('.') + .filter(Boolean); + + if ( + precedingTemplateElement.value.raw.endsWith( + deprecatedClass.startsWith(' ') + ? `${replacementSelectorPrefix} .` + : `${replacementSelectorPrefix}.`, + ) + ) { + const atomicClassesArgs = [ + memberExpressionIndex, + 1, + ...atomicClasses.map((atomicClass) => + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClass), + ), + ), + ]; + parent.expressions.splice(...atomicClassesArgs); + + if (replacementSelector.includes(' > ')) { + const quasisArgs = [ + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw.replace(' ', ''), + cooked: precedingTemplateElement.value.cooked.replace(' ', ''), + }, + false, + ), + j.templateElement({ raw: ' > .', cooked: ' > .' }, false), + ]; + + if (atomicClasses.length === 3) { + quasisArgs.splice( + 3, + 0, + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + + parent.quasis.splice(...quasisArgs); + } else { + parent.quasis.splice( + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw, + cooked: precedingTemplateElement.value.cooked, + }, + false, + ), + + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + } + } + }); + } + }); + }); + + const selectorRegex = new RegExp(`${replacementSelectorPrefix}${deprecatedClass}$`); + root + .find( + j.Literal, + (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex), + ) + .forEach((path) => { + path.replace( + j.literal( + path.value.value.replace( + selectorRegex, + `${replacementSelectorPrefix}${replacementSelector}`, + ), + ), + ); + }); + }); + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.test.js b/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.test.js new file mode 100644 index 00000000000000..f01fec88ccb4a4 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.test.js @@ -0,0 +1,78 @@ +import path from 'path'; +import { expect } from 'chai'; +import postcss from 'postcss'; +import { jscodeshift } from '../../../testUtils'; +import jsTransform from './button-group-classes'; +import { plugin as postcssPlugin } from './postcss-plugin'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +const postcssProcessor = postcss([postcssPlugin]); + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('button-group-classes', () => { + describe('js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/actual.js') }, + { jscodeshift }, + { printOptions: { quote: 'double', trailingComma: true } }, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('css-transform', () => { + it('transforms classes as needed', async () => { + const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', async () => { + const actual = await postcssProcessor.process(read('./test-cases/expected.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('test-cases', () => { + it('should not be the same', () => { + const actualJS = read('./test-cases/actual.js'); + const expectedJS = read('./test-cases/expected.js'); + expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different'); + + const actualCSS = read('./test-cases/actual.css'); + const expectedCSS = read('./test-cases/expected.css'); + expect(actualCSS).not.to.equal( + expectedCSS, + 'The actual and expected should be different', + ); + }); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/index.js b/packages/mui-codemod/src/deprecations/button-group-classes/index.js new file mode 100644 index 00000000000000..61090001f8f759 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/index.js @@ -0,0 +1 @@ +export { default } from './button-group-classes'; diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/button-group-classes/postcss-plugin.js new file mode 100644 index 00000000000000..1d3ebf4054fead --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/postcss-plugin.js @@ -0,0 +1,103 @@ +const classes = [ + { + deprecatedClass: ' .MuiButtonGroup-groupedHorizontal', + replacementSelector: '.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedVertical', + replacementSelector: '.MuiButtonGroup-vertical > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedText', + replacementSelector: '.MuiButtonGroup-text > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedTextHorizontal', + replacementSelector: '.MuiButtonGroup-text.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedTextVertical', + replacementSelector: '.MuiButtonGroup-text.MuiButtonGroup-vertical > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedTextPrimary', + replacementSelector: + '.MuiButtonGroup-text.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedTextSecondary', + replacementSelector: + '.MuiButtonGroup-text.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedOutlined', + replacementSelector: '.MuiButtonGroup-outlined > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedOutlinedHorizontal', + replacementSelector: + '.MuiButtonGroup-outlined.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedOutlinedVertical', + replacementSelector: + '.MuiButtonGroup-outlined.MuiButtonGroup-vertical > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedOutlinedPrimary', + replacementSelector: + '.MuiButtonGroup-outlined.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedOutlinedSecondary', + replacementSelector: + '.MuiButtonGroup-outlined.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedContained', + replacementSelector: '.MuiButtonGroup-contained > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedContainedHorizontal', + replacementSelector: + '.MuiButtonGroup-contained.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedContainedVertical', + replacementSelector: + '.MuiButtonGroup-contained.MuiButtonGroup-vertical > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedContainedPrimary', + replacementSelector: + '.MuiButtonGroup-contained.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiButtonGroup-groupedContainedSecondary', + replacementSelector: + '.MuiButtonGroup-contained.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped', + }, +]; + +const plugin = () => { + return { + postcssPlugin: `Replace deperecated ButtonGroup classes with new classes`, + Rule(rule) { + const { selector } = rule; + + classes.forEach(({ deprecatedClass, replacementSelector }) => { + const selectorRegex = new RegExp(`${deprecatedClass}$`); + + if (selector.match(selectorRegex)) { + rule.selector = selector.replace(selectorRegex, replacementSelector); + } + }); + }, + }; +}; +plugin.postcss = true; + +module.exports = { + plugin, + classes, +}; diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/button-group-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/postcss.config.js @@ -0,0 +1,5 @@ +const { plugin } = require('./postcss-plugin'); + +module.exports = { + plugins: [plugin], +}; diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/actual.css new file mode 100644 index 00000000000000..776ac7444db6e6 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/actual.css @@ -0,0 +1,67 @@ +.MuiButtonGroup-root .MuiButtonGroup-groupedHorizontal { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedVertical { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedText { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedTextHorizontal { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedTextVertical { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedTextPrimary { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedTextSecondary { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedOutlined { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedHorizontal { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedVertical { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedPrimary { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedSecondary { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedContained { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedContainedHorizontal { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedContainedVertical { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedContainedPrimary { + color: red; +} + +.MuiButtonGroup-root .MuiButtonGroup-groupedContainedSecondary { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/actual.js new file mode 100644 index 00000000000000..a01fc2611a63ac --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/actual.js @@ -0,0 +1,36 @@ +import { buttonGroupClasses } from '@mui/material/ButtonGroup'; + +('& .MuiButtonGroup-groupedHorizontal'); +('& .MuiButtonGroup-groupedVertical'); +('& .MuiButtonGroup-groupedText'); +('& .MuiButtonGroup-groupedTextHorizontal'); +('& .MuiButtonGroup-groupedTextVertical'); +('& .MuiButtonGroup-groupedTextPrimary'); +('& .MuiButtonGroup-groupedTextSecondary'); +('& .MuiButtonGroup-groupedOutlined'); +('& .MuiButtonGroup-groupedOutlinedHorizontal'); +('& .MuiButtonGroup-groupedOutlinedVertical'); +('& .MuiButtonGroup-groupedOutlinedPrimary'); +('& .MuiButtonGroup-groupedOutlinedSecondary'); +('& .MuiButtonGroup-groupedContained'); +('& .MuiButtonGroup-groupedContainedHorizontal'); +('& .MuiButtonGroup-groupedContainedVertical'); +('& .MuiButtonGroup-groupedContainedPrimary'); +('& .MuiButtonGroup-groupedContainedSecondary'); +`& .${buttonGroupClasses.groupedHorizontal}`; +`& .${buttonGroupClasses.groupedVertical}`; +`& .${buttonGroupClasses.groupedText}`; +`& .${buttonGroupClasses.groupedTextHorizontal}`; +`& .${buttonGroupClasses.groupedTextVertical}`; +`& .${buttonGroupClasses.groupedTextPrimary}`; +`& .${buttonGroupClasses.groupedTextSecondary}`; +`& .${buttonGroupClasses.groupedOutlined}`; +`& .${buttonGroupClasses.groupedOutlinedHorizontal}`; +`& .${buttonGroupClasses.groupedOutlinedVertical}`; +`& .${buttonGroupClasses.groupedOutlinedPrimary}`; +`& .${buttonGroupClasses.groupedOutlinedSecondary}`; +`& .${buttonGroupClasses.groupedContained}`; +`& .${buttonGroupClasses.groupedContainedHorizontal}`; +`& .${buttonGroupClasses.groupedContainedVertical}`; +`& .${buttonGroupClasses.groupedContainedPrimary}`; +`& .${buttonGroupClasses.groupedContainedSecondary}`; diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/expected.css new file mode 100644 index 00000000000000..304f77cbcabb29 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/expected.css @@ -0,0 +1,67 @@ +.MuiButtonGroup-root.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-vertical > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-text > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-vertical > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-outlined > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-vertical > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-contained > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-vertical > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped { + color: red; +} + +.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/expected.js new file mode 100644 index 00000000000000..809d1ecfba446b --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/expected.js @@ -0,0 +1,36 @@ +import { buttonGroupClasses } from '@mui/material/ButtonGroup'; + +("&.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-vertical > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-text > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-text.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-text.MuiButtonGroup-vertical > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-text.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-text.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-outlined > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-outlined.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-outlined.MuiButtonGroup-vertical > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-outlined.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-outlined.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-contained > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-contained.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-contained.MuiButtonGroup-vertical > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-contained.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-contained.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped"); +`&.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.text} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.text}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.text}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.text}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.text}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.outlined} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.contained} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.contained}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.contained}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.contained}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.contained}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`; diff --git a/packages/mui-codemod/src/deprecations/step-label-props/index.js b/packages/mui-codemod/src/deprecations/step-label-props/index.js new file mode 100644 index 00000000000000..dacfd195c56c35 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-label-props/index.js @@ -0,0 +1 @@ +export { default } from './step-label-props'; diff --git a/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.js b/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.js new file mode 100644 index 00000000000000..d71fbba3a84810 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.js @@ -0,0 +1,15 @@ +import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + + replaceComponentsWithSlots(j, { root, componentName: 'StepLabel' }); + + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.test.js b/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.test.js new file mode 100644 index 00000000000000..90edfeab7791e4 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.test.js @@ -0,0 +1,53 @@ +import path from 'path'; +import { expect } from 'chai'; +import { jscodeshift } from '../../../testUtils'; +import transform from './step-label-props'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('step-label-props', () => { + it('transforms props as needed', () => { + const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('[theme] step-label-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/theme.actual.js') }, + { jscodeshift }, + { printOptions: { trailingComma: false } }, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/theme.expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/step-label-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/actual.js new file mode 100644 index 00000000000000..9caf4e5a411080 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/actual.js @@ -0,0 +1,8 @@ +import StepLabel from '@mui/material/StepLabel'; + +; +; diff --git a/packages/mui-codemod/src/deprecations/step-label-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/expected.js new file mode 100644 index 00000000000000..b26c217086b36d --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/expected.js @@ -0,0 +1,9 @@ +import StepLabel from '@mui/material/StepLabel'; + +; +; diff --git a/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.actual.js new file mode 100644 index 00000000000000..4f68c1fe687871 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.actual.js @@ -0,0 +1,16 @@ +fn({ + MuiStepLabel: { + defaultProps: { + componentsProps: { label: componentsLabelProps }, + }, + }, +}); + +fn({ + MuiStepLabel: { + defaultProps: { + componentsProps: { label: componentsLabelProps }, + slotProps: { label: slotLabelProps }, + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.expected.js new file mode 100644 index 00000000000000..c8874c72137cab --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.expected.js @@ -0,0 +1,22 @@ +fn({ + MuiStepLabel: { + defaultProps: { + slotProps: { + label: componentsLabelProps + } + }, + }, +}); + +fn({ + MuiStepLabel: { + defaultProps: { + slotProps: { + label: { + ...componentsLabelProps, + ...slotLabelProps + } + } + }, + }, +}); diff --git a/packages/mui-codemod/src/v6.0.0/all/index.js b/packages/mui-codemod/src/v6.0.0/all/index.js new file mode 100644 index 00000000000000..71f4320d0a686f --- /dev/null +++ b/packages/mui-codemod/src/v6.0.0/all/index.js @@ -0,0 +1 @@ +export { default } from './v6-all'; diff --git a/packages/mui-codemod/src/v6.0.0/all/postcss.config.js b/packages/mui-codemod/src/v6.0.0/all/postcss.config.js new file mode 100644 index 00000000000000..a6b37928a0d10c --- /dev/null +++ b/packages/mui-codemod/src/v6.0.0/all/postcss.config.js @@ -0,0 +1,7 @@ +// Currently empty, when adding the first codemod: +// - Read mui-codemod/CONTRIBUTING.md +// - Follow mui-codemod/src/deprecations/all/postcss.config.js as a guide +// - Remove this comment +module.exports = { + plugins: [], +}; diff --git a/packages/mui-codemod/src/v6.0.0/all/v6-all.js b/packages/mui-codemod/src/v6.0.0/all/v6-all.js new file mode 100644 index 00000000000000..77c8e343a4b08a --- /dev/null +++ b/packages/mui-codemod/src/v6.0.0/all/v6-all.js @@ -0,0 +1,11 @@ +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function v6All(file) { + // Currently empty, when adding the first codemod: + // - Read mui-codemod/CONTRIBUTING.md + // - Follow mui-codemod/src/deprecations/all/deprecations-all.js as a guide + // - Remove this comment + return file.source; +} diff --git a/packages/mui-core-downloads-tracker/package.json b/packages/mui-core-downloads-tracker/package.json index 8c2ff52575ebfe..50d462045792c9 100644 --- a/packages/mui-core-downloads-tracker/package.json +++ b/packages/mui-core-downloads-tracker/package.json @@ -1,6 +1,6 @@ { "name": "@mui/core-downloads-tracker", - "version": "5.15.14", + "version": "6.0.0-alpha.0", "private": false, "author": "MUI Team", "description": "Internal package to track number of downloads of our design system libraries", diff --git a/packages/mui-docs/.npmignore b/packages/mui-docs/.npmignore index 81f0fda795522a..43370fa915f41f 100644 --- a/packages/mui-docs/.npmignore +++ b/packages/mui-docs/.npmignore @@ -1 +1 @@ -.tsbuildinfo +*.tsbuildinfo diff --git a/packages/mui-docs/README.md b/packages/mui-docs/README.md index 00b0d507a3e6cf..562368dcd515b3 100644 --- a/packages/mui-docs/README.md +++ b/packages/mui-docs/README.md @@ -6,15 +6,19 @@ This package hosts the documentation building blocks. Install the package in your project directory with: + + ```bash -npm install @mui/docs +npm install @mui/docs@next ``` The docs has a peer dependency on the core components. If you are not already using Material UI in your project, you can add it with: + + ```bash -npm install @mui/material +npm install @mui/material@next ``` ## Documentation diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json index 773cad1039afdb..d7cfe6c19c84b8 100644 --- a/packages/mui-docs/package.json +++ b/packages/mui-docs/package.json @@ -1,6 +1,6 @@ { "name": "@mui/docs", - "version": "5.15.14", + "version": "6.0.0-alpha.0", "private": false, "author": "MUI Team", "description": "MUI Docs - Documentation building blocks.", @@ -29,30 +29,33 @@ "build:node": "node ../../scripts/build.mjs node", "build:stable": "node ../../scripts/build.mjs stable", "build:types": "node ../../scripts/buildTypes.mjs", - "build:copy-files": "node ../../scripts/copyFiles.mjs ./src/translations/translations.json:./translations/translations.json", + "build:copy-files": "node ../../scripts/copyFiles.mjs ./src/translations/translations.json:./translations/translations.json ./src/translations/translations.json:./node/translations/translations.json", "prebuild": "rimraf build", "release": "pnpm build && pnpm publish", "test": "exit 0" }, "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/base": "workspace:*", - "@mui/utils": "workspace:^", "clsx": "^2.1.0", "nprogress": "^0.2.0", "prop-types": "^15.8.1" }, "devDependencies": { - "@types/node": "^18.19.25", - "@types/prop-types": "^15.7.11", + "@mui/material": "workspace:*", + "@mui/icons-material": "workspace:*", + "@types/node": "^18.19.28", + "@types/prop-types": "^15.7.12", "@types/react": "^18.2.55", "next": "^13.5.1", "react": "^18.2.0" }, "peerDependencies": { - "@mui/material": "workspace:^", + "@mui/material": "^5.0.0", + "@mui/base": "*", + "@mui/icons-material": "^5.0.0", + "@mui/system": "^5.0.0", "@types/react": "^17.0.0 || ^18.0.0", - "next": "^13.5.1", + "next": "^13.5.1 || ^14", "react": "^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { diff --git a/packages/mui-docs/src/InfoCard/InfoCard.tsx b/packages/mui-docs/src/InfoCard/InfoCard.tsx new file mode 100644 index 00000000000000..d686fd4f268ee2 --- /dev/null +++ b/packages/mui-docs/src/InfoCard/InfoCard.tsx @@ -0,0 +1,108 @@ +import * as React from 'react'; +import { alpha } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import Typography, { TypographyProps } from '@mui/material/Typography'; +import { Link, LinkProps } from '../Link'; + +interface GlowingIconContainerProps { + icon: React.ReactNode; +} + +export function GlowingIconContainer({ icon }: GlowingIconContainerProps) { + return ( + ({ + width: 40, + height: 40, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + flexShrink: 0, + borderRadius: 1, + border: '1px solid', + borderColor: 'primary.200', + bgcolor: 'primary.50', + boxShadow: `0px 1px 6px 0px ${alpha(theme.palette.primary[500], 0.2)}, 0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset`, + ...theme.applyDarkStyles({ + borderColor: alpha(theme.palette.primary[400], 0.25), + bgcolor: alpha(theme.palette.primary[900], 0.25), + boxShadow: `0 2px 6px 0 ${alpha(theme.palette.primary[600], 0.3)}, 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset`, + }), + })} + > + {icon} + + ); +} + +interface InfoCardProps { + classNameDescription?: string; + classNameTitle?: string; + dense?: boolean; + description?: string; + icon?: React.ReactNode; + link?: string; + prefetch?: LinkProps['prefetch']; + svg?: React.ReactNode; + title: string; + titleProps?: TypographyProps; +} + +export function InfoCard(props: InfoCardProps) { + const { + classNameDescription, + classNameTitle, + dense, + description, + icon, + link, + svg, + title, + titleProps, + ...other + } = props; + return ( + ({ + p: dense ? 2.5 : 3.5, + height: '100%', + background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, + ...theme.applyDarkStyles({ + bgcolor: 'primaryDark.900', + background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, + borderColor: 'primaryDark.700', + }), + })} + {...other} + > + {svg && svg} + {icon && } + + {title} + + + {description} + + + ); +} diff --git a/packages/mui-docs/src/InfoCard/index.ts b/packages/mui-docs/src/InfoCard/index.ts new file mode 100644 index 00000000000000..c02f552081da9d --- /dev/null +++ b/packages/mui-docs/src/InfoCard/index.ts @@ -0,0 +1 @@ +export * from './InfoCard'; diff --git a/packages/mui-docs/src/branding/BrandingProvider.tsx b/packages/mui-docs/src/branding/BrandingProvider.tsx new file mode 100644 index 00000000000000..235cac1821f175 --- /dev/null +++ b/packages/mui-docs/src/branding/BrandingProvider.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { ThemeProvider, useTheme } from '@mui/material/styles'; +import { brandingDarkTheme, brandingLightTheme } from './brandingTheme'; + +export interface BrandingProviderProps { + children: React.ReactNode; + /** + * If not `undefined`, the provider is considered nesting and does not render NextNProgressBar & CssBaseline + */ + mode: 'light' | 'dark'; +} + +export function BrandingProvider(props: BrandingProviderProps) { + const { children, mode: modeProp } = props; + const upperTheme = useTheme(); + const mode = modeProp || upperTheme.palette.mode; + const theme = mode === 'dark' ? brandingDarkTheme : brandingLightTheme; + return theme : theme}>{children}; +} diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts new file mode 100644 index 00000000000000..e28e76c6bda058 --- /dev/null +++ b/packages/mui-docs/src/branding/brandingTheme.ts @@ -0,0 +1,1291 @@ +import type { CSSObject } from '@mui/system'; +import type {} from '@mui/material/themeCssVarsAugmentation'; +import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded'; +import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles'; + +interface ApplyDarkStyles { + (scheme: CSSObject): CSSObject; +} + +declare module '@mui/material/styles' { + interface Theme { + applyDarkStyles: ApplyDarkStyles; + } +} + +declare module '@mui/material/styles/createPalette' { + interface ColorRange { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + } + + interface PaletteColor extends ColorRange {} + + interface Palette { + primaryDark: PaletteColor; + gradients: { + lightGrayRadio: string; + stylizedRadio: string; + linearSubtle: string; + }; + } + + interface TypeText { + tertiary: string; + } +} + +declare module '@mui/material/styles/createTypography' { + interface TypographyOptions { + fontWeightSemiBold?: number; + fontWeightExtraBold?: number; + fontFamilyCode?: string; + fontFamilySystem?: string; + } + + interface Typography { + fontWeightSemiBold: number; + fontWeightExtraBold: number; + fontFamilyCode: string; + fontFamilySystem: string; + } +} + +declare module '@mui/material/Chip' { + interface ChipPropsColorOverrides { + grey: true; + } +} + +declare module '@mui/material/SvgIcon' { + interface SvgIconPropsColorOverrides { + danger: true; + } + interface SvgIconPropsSizeOverrides { + xs: true; + sm: true; + md: true; + lg: true; + xl: true; + xl2: true; + xl3: true; + xl4: true; + } +} + +// TODO: enable this once types conflict is fixed +// declare module '@mui/material/Button' { +// interface ButtonPropsVariantOverrides { +// code: true; +// } +// } + +const defaultTheme = createTheme(); + +export const blue = { + 50: '#EBF5FF', + 100: '#CCE5FF', + 200: '#99CCFF', + 300: '#66B2FF', + 400: '#3399FF', + main: '#0073E6', + 500: '#0073E6', + 600: '#006BD6', + 700: '#0061C2', + 800: '#004C99', + 900: '#003A75', +}; +export const blueDark = { + 50: '#EAEDF1', + 100: '#DAE0E7', + 200: '#ACBAC8', + 300: '#7B91A7', + main: '#7B91A7', + 400: '#4B5E71', + 500: '#3B4A59', + 600: '#2F3A46', + 700: '#1F262E', // contrast 13.64:1 + 800: '#141A1F', + 900: '#101418', +}; +export const grey = { + 50: '#F3F6F9', + 100: '#E5EAF2', + 200: '#DAE2ED', + 300: '#C5D0E0', // vs blueDark 900: WCAG 11.6 AAA, APCA 78 Best for text + 400: '#AEBACB', // vs blueDark 900: WCAG 9 AAA, APCA 63.3 Ok for text + 500: '#99A7BB', // vs blueDark 900: WCAG 7.5 AAA, APCA 54.3 Only for large text + 600: '#6F7F95', // vs white bg: WCAG 4.1 AA, APCA 68.7 Ok for text + 700: '#576375', // vs white bg: WCAG 8.3 AAA, APCA 88.7 Best for text + 800: '#303740', // vs white bg: WCAG 11.9 AAA, APCA 97.3 Best for text + 900: '#1C2025', +}; +export const error = { + 50: '#FFF0F1', + 100: '#FFDBDE', + 200: '#FFBDC2', + 300: '#FF99A2', + 400: '#FF7A86', + 500: '#FF505F', + main: '#EB0014', // contrast 4.63:1 + 600: '#EB0014', + 700: '#C70011', + 800: '#94000D', + 900: '#570007', +}; +export const success = { + 50: '#E9FBF0', + 100: '#C6F6D9', + 200: '#9AEFBC', + 300: '#6AE79C', + 400: '#3EE07F', + 500: '#21CC66', + 600: '#1DB45A', + 700: '#1AA251', + 800: '#178D46', + 900: '#0F5C2E', +}; +export const warning = { + 50: '#FFF9EB', + 100: '#FFF3C1', + 200: '#FFECA1', + 300: '#FFDC48', // vs blueDark900: WCAG 10.4 AAA, APCA 72 Ok for text + 400: '#F4C000', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text + 500: '#DEA500', // vs blueDark900: WCAG 8 AAA normal, APCA 58 Only large text + main: '#DEA500', + 600: '#D18E00', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text + 700: '#AB6800', // vs white bg: WCAG 4.4 AA large, APCA 71 Ok for text + 800: '#8C5800', // vs white bg: WCAG 5.9 AAA large, APCA 80 Best for text + 900: '#5A3600', // vs white bg: WCAG 10.7 AAA, APCA 95 Best for text +}; +// context on the Advanced Perceptual Contrast Algorithm (APCA) used above here: https://github.com/w3c/wcag/issues/695 + +const systemFont = [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', +]; + +export const getMetaThemeColor = (mode: 'light' | 'dark') => { + const themeColor = { + light: blue[600], + dark: blueDark[900], + }; + return themeColor[mode]; +}; + +export const getDesignTokens = (mode: 'light' | 'dark') => + ({ + palette: { + primary: { + ...blue, + ...(mode === 'dark' && { + main: blue[400], + }), + }, + secondary: { + ...grey, + ...(mode === 'light' && { + main: blueDark[100], + contrastText: blueDark[600], + }), + ...(mode === 'dark' && { + main: blueDark[700], + contrastText: blueDark[600], + }), + }, + divider: mode === 'dark' ? alpha(blueDark[500], 0.2) : grey[100], + primaryDark: blueDark, + mode, + ...(mode === 'dark' && { + background: { + default: blueDark[900], + paper: alpha(blueDark[800], 0.8), + }, + }), + common: { + black: '#0B0D0E', + }, + text: { + ...(mode === 'light' && { + primary: grey[900], + secondary: grey[800], + tertiary: grey[700], + }), + ...(mode === 'dark' && { + primary: '#fff', + secondary: grey[400], + tertiary: grey[500], + }), + }, + grey: { + ...grey, + ...(mode === 'light' && { + main: grey[100], + contrastText: grey[600], + }), + ...(mode === 'dark' && { + main: grey[700], + contrastText: grey[600], + }), + }, + error, + success: { + ...success, + ...(mode === 'dark' && { + main: '#1DB45A', // contrast 6.17:1 (blueDark.800) + }), + ...(mode === 'light' && { + main: '#1AA251', // contrast 3.31:1 + }), + }, + warning, + gradients: { + lightGrayRadio: + 'radial-gradient(50% 50% at 50% 50%, #F0F7FF 0%, rgba(240, 247, 255, 0.05) 100%)', + stylizedRadio: + mode === 'dark' + ? 'linear-gradient(rgba(0 0 0 / 0.1), rgba(0 0 0 / 0.1)), linear-gradient(254.86deg, rgba(0, 58, 117, 0.18) 0%, rgba(11, 13, 14, 0.3) 49.98%, rgba(0, 76, 153, 0.21) 100.95%)' + : 'linear-gradient(rgba(255 255 255 / 0.3), rgba(255 255 255 / 0.3)), linear-gradient(254.86deg, rgba(194, 224, 255, 0.12) 0%, rgba(194, 224, 255, 0.12) 0%, rgba(255, 255, 255, 0.3) 49.98%, rgba(240, 247, 255, 0.3) 100.95%)', + linearSubtle: + mode === 'light' + ? `linear-gradient(to bottom right, ${alpha(blue[50], 0.3)} 25%, ${alpha(grey[50], 0.2)} 100%)` + : `linear-gradient(to bottom right, ${alpha(blue[900], 0.1)} 25%, ${alpha(blueDark[800], 0.2)} 100%)`, + }, + }, + shape: { + borderRadius: 12, + }, + spacing: 8, + typography: { + fontFamily: ['"IBM Plex Sans"', ...systemFont].join(','), + // Match VS Code + // https://github.com/microsoft/vscode/blob/b38691f611d1ce3ef437c67a1b047c757b7b4e53/src/vs/editor/common/config/editorOptions.ts#L4578-L4580 + // https://github.com/microsoft/vscode/blob/d950552131d7350a45dac8b59bf179469c36c2ac/src/vs/editor/standalone/browser/standalone-tokens.css#L10 + fontFamilyCode: [ + 'Menlo', // macOS + 'Consolas', // Windows + '"Droid Sans Mono"', // Linux + 'monospace', // fallback + ].join(','), + fontFamilyTagline: ['"General Sans"', ...systemFont].join(','), + fontFamilySystem: systemFont.join(','), + fontWeightSemiBold: 600, + fontWeightExtraBold: 800, + h1: { + fontFamily: ['"General Sans"', ...systemFont].join(','), + fontSize: 'clamp(2.5rem, 1.125rem + 3.5vw, 3.5em)', + fontWeight: 600, + lineHeight: 78 / 70, + letterSpacing: -0.2, + ...(mode === 'light' && { + color: blueDark[900], + }), + }, + h2: { + fontFamily: ['"General Sans"', ...systemFont].join(','), + fontSize: 'clamp(1.5rem, 0.9643rem + 1.4286vw, 2.25rem)', + fontWeight: 600, + lineHeight: 44 / 36, + letterSpacing: -0.2, + color: mode === 'dark' ? grey[100] : blueDark[700], + }, + h3: { + fontFamily: ['"General Sans"', ...systemFont].join(','), + fontSize: defaultTheme.typography.pxToRem(36), + lineHeight: 44 / 36, + letterSpacing: 0.2, + }, + h4: { + fontFamily: ['"General Sans"', ...systemFont].join(','), + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 42 / 28, + letterSpacing: 0.2, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(24), + lineHeight: 36 / 24, + letterSpacing: 0.1, + color: mode === 'dark' ? blue[300] : blue.main, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(20), + lineHeight: 30 / 20, + }, + button: { + textTransform: 'initial', + fontWeight: 700, + letterSpacing: 0, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + lineHeight: 24 / 18, + letterSpacing: 0, + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(16), // 16px + lineHeight: 24 / 16, + letterSpacing: 0, + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), // 14px + lineHeight: 21 / 14, + letterSpacing: 0, + }, + caption: { + display: 'inline-block', + fontSize: defaultTheme.typography.pxToRem(12), // 12px + lineHeight: 18 / 12, + letterSpacing: 0, + fontWeight: 700, + }, + allVariants: { + scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)', + }, + }, + /** + * This utility exists to help transitioning to CSS variables page by page (prevent dark mode flicker). + * It will use the proper styling method based on the theme because the component might be on the page that does not support CSS variables yet. + * + * 😓 Without this utility: + * { + * ...theme.vars ? { + * color: theme.vars.palette.primary.main, + * [theme.getColorScheme('dark')]: { + * color: '#fff', + * } + * } : { + * color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary.main, + * } + * } + * + * 🤩 Using the utility: + * { + * color: (theme.vars || theme).palette.primary.main, + * ...theme.applyDarkStyles({ + * color: '#fff', + * }), + * } + * + * ------------------------------------------------------------------------------------------------- + * 💡 This util should be used in an array if the styles contain pseudo classes or nested selectors: + * + * ❌ There is a chance that the upper selectors could be overridden + * { + * // the whole selector could be overridden + * '&::before': { + * color: ... + * }, + * ...theme.applyDarkStyles({ + * '&::before': { + * color: ... + * } + * }) + * } + * + * ✅ use an array (supports in both emotion and styled-components) + * Only the `color` will be overridden in dark mode. + * [ + * '&::before': { + * color: ... + * }, + * theme.applyDarkStyles({ + * '&::before': { + * color: ... + * } + * }) + * ] + */ + applyDarkStyles(css: Parameters[0]) { + return (this as Theme).applyStyles('dark', css); + }, + }) as ThemeOptions; + +export function getThemedComponents(): ThemeOptions { + return { + components: { + MuiAlert: { + styleOverrides: { + root: { + padding: '12px 16px', + }, + standardWarning: ({ theme }) => [ + { + backgroundColor: alpha(theme.palette.warning[50], 0.5), + color: (theme.vars || theme).palette.grey[900], + border: '1px solid', + borderColor: alpha(theme.palette.warning[600], 0.3), + '& .MuiAlert-icon': { + color: (theme.vars || theme).palette.warning[700], + }, + }, + theme.applyDarkStyles({ + backgroundColor: alpha(theme.palette.warning[700], 0.2), + color: (theme.vars || theme).palette.warning[50], + '& .MuiAlert-icon': { + color: (theme.vars || theme).palette.warning[200], + }, + }), + ], + icon: { + paddingTop: 12, + paddingBottom: 0, + }, + }, + }, + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }, + }, + MuiButton: { + defaultProps: { + disableElevation: true, + }, + styleOverrides: { + root: ({ theme, ownerState }) => ({ + transition: 'all 120ms ease-in', + ...(ownerState.size === 'large' && { + ...theme.typography.body1, + lineHeight: 21 / 16, + padding: theme.spacing('8px', '10px', '10px', '12px'), + fontWeight: theme.typography.fontWeightSemiBold, + borderRadius: 10, + '& > span': { transition: '0.2s', marginLeft: 4 }, + '&:hover > span': { transform: 'translateX(2px)' }, + }), + ...(ownerState.size === 'medium' && { + fontSize: defaultTheme.typography.pxToRem(15), + padding: theme.spacing('8px', '12px', '8px', '14px'), + fontWeight: theme.typography.fontWeightSemiBold, + borderRadius: 8, + '& > span': { transition: '0.2s', marginLeft: 4 }, + '&:hover > span': { transform: 'translateX(2px)' }, + }), + ...(ownerState.size === 'small' && { + padding: theme.spacing('6px', 1), + fontFamily: theme.typography.fontFamily, + fontSize: defaultTheme.typography.pxToRem(13), + fontWeight: theme.typography.fontWeightSemiBold, + borderRadius: 8, + '& .MuiButton-startIcon': { + transition: '0.15s', + marginRight: 4, + marginLeft: -1, + }, + '& .MuiButton-endIcon': { + transition: '0.15s', + marginLeft: 4, + }, + '&:hover': { + '& .MuiButton-startIcon': { transform: 'translateX(-2px)' }, + '& .MuiButton-endIcon': { transform: 'translateX(2px)' }, + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + color: (theme.vars || theme).palette.text.primary, + backgroundColor: alpha(theme.palette.primaryDark[50], 0.1), + borderColor: (theme.vars || theme).palette.primaryDark[100], + boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`, + '&:hover': { + backgroundColor: (theme.vars || theme).palette.grey[50], + }, + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primaryDark[100], + borderColor: alpha(theme.palette.primaryDark[600], 0.5), + backgroundColor: alpha(theme.palette.primaryDark[700], 0.2), + boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`, + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primaryDark[700], + borderColor: (theme.vars || theme).palette.primaryDark[600], + }, + }), + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'primary' && { + color: (theme.vars || theme).palette.primary[600], + backgroundColor: alpha(theme.palette.primary[50], 0.2), + borderColor: (theme.vars || theme).palette.primary[100], + boxShadow: `${alpha(theme.palette.primary[50], 0.8)} 0 2px 0 inset, ${alpha(theme.palette.primary[100], 0.4)} 0 -2px 0 inset, ${alpha(theme.palette.primary[100], 0.5)} 0 1px 2px 0`, + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[50], + borderColor: (theme.vars || theme).palette.primary[200], + }, + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primary[200], + borderColor: alpha(theme.palette.primary[900], 0.7), + backgroundColor: alpha(theme.palette.primary[900], 0.2), + boxShadow: `${alpha(theme.palette.primary[900], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`, + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[900], + borderColor: (theme.vars || theme).palette.primary[700], + }, + }), + }), + ...(ownerState.variant === 'contained' && + ownerState.color === 'primary' && { + color: '#fff', + textShadow: `0 1px 1px ${alpha(theme.palette.common.black, 0.6)}`, + backgroundColor: (theme.vars || theme).palette.primary[500], + backgroundImage: `linear-gradient(180deg, ${alpha(theme.palette.primary[500], 0.6)} 0%, ${theme.palette.primary[600]} 100%)`, + boxShadow: `${theme.palette.primary[400]} 0 2px 0 inset, ${theme.palette.primary[700]} 0 -2px 0 inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`, + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[700], + }, + '&:active': { + backgroundColor: (theme.vars || theme).palette.primaryDark[700], + }, + }), + ...(ownerState.variant === 'text' && { + color: (theme.vars || theme).palette.primary[600], + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primary[300], + }), + }), + }), + }, + variants: [ + { + // @ts-ignore internal repo module augmentation issue + props: { variant: 'code' }, + style: ({ theme }) => [ + { + cursor: 'copy', + padding: 0, + width: 'max-content', + backgroundColor: 'transparent', + color: (theme.vars || theme).palette.grey[600], + fontFamily: theme.typography.fontFamilyCode, + fontWeight: 400, + fontSize: defaultTheme.typography.pxToRem(12), + lineHeight: 21 / 14, + letterSpacing: 0, + WebkitFontSmoothing: 'subpixel-antialiased', + '& .MuiButton-startIcon': { + color: (theme.vars || theme).palette.grey[400], + }, + '& .MuiButton-endIcon': { + display: 'inline-block', + position: 'absolute', + color: (theme.vars || theme).palette.primary.main, + right: -22, + top: -1, + opacity: 0, + transitionProperty: 'opacity', + transitionDuration: '100ms', + transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', + }, + '&:hover, &.Mui-focusVisible': { + backgroundColor: 'transparent', + color: (theme.vars || theme).palette.primary.main, + '& .MuiButton-endIcon': { + color: (theme.vars || theme).palette.primary.main, + opacity: 1, + }, + }, + }, + theme.applyDarkStyles({ + '& .MuiButton-endIcon': { + color: (theme.vars || theme).palette.primary[300], + }, + '&:hover, &.Mui-focusVisible': { + color: (theme.vars || theme).palette.primary[300], + '& .MuiButton-endIcon': { + opacity: 1, + }, + }, + }), + ], + }, + { + // @ts-ignore internal repo module augmentation issue + props: { variant: 'codeOutlined' }, + style: ({ theme }) => [ + { + display: 'inline-block', + justifyContent: 'start', + overflowX: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + position: 'relative', + border: '1px solid', + color: (theme.vars || theme).palette.grey[900], + backgroundColor: alpha(theme.palette.primary[50], 0.3), + borderColor: (theme.vars || theme).palette.grey[200], + boxShadow: `0px 2px 2px ${alpha( + theme.palette.primary[100], + 0.2, + )}, inset 0px 4px 4px ${alpha(theme.palette.primary[100], 0.2)}`, + fontFamily: theme.typography.fontFamilyCode, + fontWeight: 400, + fontSize: defaultTheme.typography.pxToRem(12), + lineHeight: 21 / 14, + letterSpacing: 0, + WebkitFontSmoothing: 'subpixel-antialiased', + '& .MuiButton-endIcon': { + display: 'inline-block', + position: 'absolute', + top: 12, + right: 0, + marginRight: 10, + color: (theme.vars || theme).palette.grey[600], + }, + '&:hover, &.Mui-focusVisible': { + borderColor: (theme.vars || theme).palette.primary.main, + backgroundColor: (theme.vars || theme).palette.primary[50], + color: (theme.vars || theme).palette.primary[600], + '& .MuiButton-endIcon': { + color: (theme.vars || theme).palette.primary.main, + }, + }, + } as const, + theme.applyDarkStyles({ + color: (theme.vars || theme).palette.grey[500], + borderColor: (theme.vars || theme).palette.primaryDark[600], + backgroundColor: (theme.vars || theme).palette.primaryDark[700], + boxShadow: '0px 2px 2px #0B0D0E, inset 0px 4px 4px rgba(20, 25, 31, 0.3)', + '& .MuiButton-endIcon': { + color: (theme.vars || theme).palette.grey[400], + }, + '&:hover, &.Mui-focusVisible': { + backgroundColor: (theme.vars || theme).palette.primary[900], + color: (theme.vars || theme).palette.primary[100], + '& .MuiButton-endIcon': { + color: (theme.vars || theme).palette.primary[300], + }, + }, + }), + ], + }, + { + // @ts-ignore internal repo module augmentation issue + props: { variant: 'link' }, + style: ({ theme }) => ({ + marginBottom: 1, + fontSize: theme.typography.pxToRem(14), + fontWeight: theme.typography.fontWeightBold, + color: (theme.vars || theme).palette.primary[600], + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[50], + }, + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primary[300], + '&:hover': { + backgroundColor: alpha(theme.palette.primary[800], 0.3), + }, + }), + }), + }, + ], + }, + MuiIconButton: { + variants: [ + { + props: { color: 'primary' }, + style: ({ theme }) => [ + { + height: 34, + width: 34, + border: `1px solid`, + borderRadius: theme.shape.borderRadius, + color: (theme.vars || theme).palette.primary.main, + backgroundColor: alpha(theme.palette.primaryDark[50], 0.1), + borderColor: (theme.vars || theme).palette.primaryDark[100], + boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`, + '&:hover': { + borderColor: (theme.vars || theme).palette.grey[300], + background: (theme.vars || theme).palette.grey[50], + }, + }, + theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primary[300], + borderColor: alpha(theme.palette.primaryDark[600], 0.5), + backgroundColor: alpha(theme.palette.primaryDark[700], 0.2), + boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`, + '&:hover': { + borderColor: (theme.vars || theme).palette.primaryDark[500], + background: alpha(theme.palette.primaryDark[700], 0.4), + }, + }), + ], + }, + { + props: { color: 'info' }, + style: ({ theme }) => [ + { + height: 34, + width: 34, + color: (theme.vars || theme).palette.text.tertiary, + borderRadius: theme.shape.borderRadius, + border: `1px solid`, + backgroundColor: alpha(theme.palette.primaryDark[50], 0.1), + borderColor: (theme.vars || theme).palette.primaryDark[100], + boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`, + '&:hover': { + color: (theme.vars || theme).palette.primary.main, + borderColor: (theme.vars || theme).palette.grey[300], + background: (theme.vars || theme).palette.grey[50], + }, + }, + theme.applyDarkStyles({ + borderColor: alpha(theme.palette.primaryDark[600], 0.5), + backgroundColor: alpha(theme.palette.primaryDark[700], 0.2), + boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`, + '&:hover': { + color: (theme.vars || theme).palette.primary[400], + borderColor: (theme.vars || theme).palette.primaryDark[500], + background: alpha(theme.palette.primaryDark[700], 0.4), + }, + }), + ], + }, + ], + }, + MuiMenu: { + styleOverrides: { + paper: ({ theme }) => [ + { + minWidth: 160, + color: (theme.vars || theme).palette.text.secondary, + backgroundImage: 'none', + border: '1px solid', + backgroundColor: (theme.vars || theme).palette.background.paper, + borderColor: (theme.vars || theme).palette.grey[200], + '& .MuiMenuItem-root': { + fontSize: theme.typography.pxToRem(14), + fontWeight: 500, + '&:hover, &:focus': { + backgroundColor: (theme.vars || theme).palette.grey[50], + }, + '&:focus-visible': { + outline: 'none', + }, + '&.Mui-selected': { + fontWeight: 500, + color: (theme.vars || theme).palette.primary[600], + backgroundColor: alpha(theme.palette.primary[100], 0.6), + }, + }, + }, + theme.applyDarkStyles({ + backgroundColor: (theme.vars || theme).palette.primaryDark[900], + borderColor: (theme.vars || theme).palette.primaryDark[700], + '& .MuiMenuItem-root': { + '&:hover, &:focus': { + backgroundColor: (theme.vars || theme).palette.primaryDark[700], + }, + '&.Mui-selected': { + color: (theme.vars || theme).palette.primary[300], + backgroundColor: alpha(theme.palette.primary[900], 0.4), + }, + }, + }), + ], + }, + }, + MuiPopover: { + styleOverrides: { + paper: ({ theme }) => ({ + boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)', + ...theme.applyDarkStyles({ + boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)', + }), + }), + }, + }, + MuiDivider: { + styleOverrides: { + root: ({ theme }) => ({ + borderColor: (theme.vars || theme).palette.grey[100], + ...theme.applyDarkStyles({ + borderColor: alpha(theme.palette.primaryDark[700], 0.8), + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + display: 'inline-flex', + alignItems: 'center', + fontWeight: theme.typography.fontWeightSemiBold, + '&.MuiTypography-body1 > svg': { + marginTop: 2, + }, + '& svg:last-child': { + marginLeft: 2, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }, + variants: [ + { + props: { color: 'primary' }, + style: ({ theme }) => [ + { + color: (theme.vars || theme).palette.primary[600], + '&:hover': { + color: (theme.vars || theme).palette.primary[700], + }, + }, + theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primary[300], + '&:hover': { + color: (theme.vars || theme).palette.primary[200], + }, + }), + ], + }, + ], + }, + MuiChip: { + styleOverrides: { + root: ({ ownerState: { color, variant }, theme }) => ({ + fontWeight: theme.typography.fontWeightSemiBold, + paddingBottom: 0.2, + ...(variant === 'outlined' && + color === 'default' && { + backgroundColor: alpha(theme.palette.grey[50], 0.5), + color: (theme.vars || theme).palette.grey[900], + borderColor: (theme.vars || theme).palette.grey[200], + '&:hover': { + backgroundColor: (theme.vars || theme).palette.grey[100], + color: (theme.vars || theme).palette.grey[900], + }, + ...theme.applyDarkStyles({ + backgroundColor: alpha(theme.palette.primaryDark[700], 0.4), + color: (theme.vars || theme).palette.grey[300], + borderColor: alpha(theme.palette.primaryDark[500], 0.5), + '&:hover': { + color: (theme.vars || theme).palette.grey[300], + backgroundColor: (theme.vars || theme).palette.primaryDark[700], + }, + }), + }), + ...(variant === 'outlined' && + color === 'info' && { + backgroundColor: alpha(theme.palette.grey[50], 0.5), + color: (theme.vars || theme).palette.grey[900], + borderColor: (theme.vars || theme).palette.grey[200], + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.grey[300], + backgroundColor: alpha(theme.palette.primaryDark[700], 0.5), + borderColor: (theme.vars || theme).palette.primaryDark[600], + }), + }), + ...(variant === 'outlined' && + color === 'primary' && { + borderColor: (theme.vars || theme).palette.primary[100], + backgroundColor: (theme.vars || theme).palette.primary[50], + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primary[300], + borderColor: alpha(theme.palette.primary[500], 0.2), + backgroundColor: alpha(theme.palette.primary[700], 0.2), + }), + }), + ...(variant === 'outlined' && + color === 'success' && { + borderColor: (theme.vars || theme).palette.success[100], + backgroundColor: (theme.vars || theme).palette.success[50], + color: (theme.vars || theme).palette.success[900], + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.success[300], + borderColor: alpha(theme.palette.success[300], 0.2), + background: alpha(theme.palette.success[800], 0.2), + }), + }), + ...(variant === 'filled' && { + ...(color === 'default' && { + border: '1px solid transparent', + color: (theme.vars || theme).palette.primary[700], + backgroundColor: alpha(theme.palette.primary[100], 0.5), + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[100], + }, + ...theme.applyDarkStyles({ + color: '#fff', + backgroundColor: alpha(theme.palette.primaryDark[500], 0.8), + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primaryDark[600], + }, + }), + }), + ...(color === 'primary' && { + color: (theme.vars || theme).palette.primary[600], + backgroundColor: alpha(theme.palette.primary[100], 0.4), + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[100], + }, + '& .MuiChip-deleteIcon': { + color: (theme.vars || theme).palette.primary[600], + '&:hover': { + color: (theme.vars || theme).palette.primary[700], + }, + }, + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primary[100], + backgroundColor: alpha(theme.palette.primary[800], 0.5), + '&:hover': { + backgroundColor: alpha(theme.palette.primary[900], 0.5), + }, + '& .MuiChip-deleteIcon': { + color: (theme.vars || theme).palette.primary[100], + '&:hover': { + color: (theme.vars || theme).palette.primary[50], + }, + }, + }), + }), + }), + // for labelling product in the search + // @ts-ignore internal repo module augmentation issue + ...(variant === 'light' && { + ...(color === 'default' && { + color: (theme.vars || theme).palette.primary[700], + backgroundColor: alpha(theme.palette.primary[100], 0.3), + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primary[200], + backgroundColor: alpha(theme.palette.primaryDark[700], 0.5), + }), + }), + ...(color === 'warning' && { + color: (theme.vars || theme).palette.warning[900], + backgroundColor: (theme.vars || theme).palette.warning[100], + ...theme.applyDarkStyles({ + color: '#fff', + backgroundColor: (theme.vars || theme).palette.warning[900], + }), + }), + ...(color === 'success' && { + color: (theme.vars || theme).palette.success[900], + backgroundColor: (theme.vars || theme).palette.success[100], + ...theme.applyDarkStyles({ + color: '#fff', + backgroundColor: (theme.vars || theme).palette.success[900], + }), + }), + }), + }), + }, + }, + MuiList: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiListItemButton: { + styleOverrides: { + root: ({ theme }) => [ + { + padding: '8px', + textTransform: 'none', + fontWeight: 500, + fontSize: theme.typography.pxToRem(14), + color: theme.palette.grey[700], + borderRadius: 0, + '&:hover': { + backgroundColor: theme.palette.grey[50], + }, + '&.Mui-selected': { + borderRadius: 10, + border: '1px solid', + color: (theme.vars || theme).palette.primary[500], + borderColor: `${(theme.vars || theme).palette.primary[500]} !important`, + backgroundColor: (theme.vars || theme).palette.primary[50], + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[100], + }, + }, + } as const, + theme.applyDarkStyles({ + color: theme.palette.grey[300], + '&:hover': { + backgroundColor: alpha(theme.palette.primaryDark[700], 0.4), + }, + '&.Mui-selected': { + color: '#fff', + borderColor: `${(theme.vars || theme).palette.primary[700]} !important`, + backgroundColor: (theme.vars || theme).palette.primaryDark[700], + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primaryDark[600], + }, + }, + }), + ], + }, + }, + MuiSelect: { + defaultProps: { + IconComponent: ArrowDropDownRounded, + }, + styleOverrides: { + iconFilled: { + top: 'calc(50% - .25em)', + }, + }, + }, + MuiTab: { + defaultProps: { + disableTouchRipple: true, + }, + }, + MuiPaper: { + styleOverrides: { + root: ({ theme, ownerState }) => [ + { + backgroundImage: 'none', + backgroundColor: '#fff', + '&[href]': { + textDecorationLine: 'none', + }, + transition: theme.transitions.create(['border', 'box-shadow'], { + duration: theme.transitions.duration.shortest, + }), + ...(ownerState.variant === 'outlined' && { + display: 'block', + borderColor: (theme.vars || theme).palette.grey[100], + '&[href]': { + textDecorationLine: 'none', + boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.3)} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`, + '&:hover': { + borderColor: (theme.vars || theme).palette.primary[200], + boxShadow: `0px 2px 8px ${(theme.vars || theme).palette.primary[100]}`, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, + outlineOffset: '2px', + }, + }, + ':is(a&), :is(button&)': { + '&:hover': { + borderColor: (theme.vars || theme).palette.primary[200], + boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`, + }, + }, + }), + }, + theme.applyDarkStyles({ + backgroundColor: (theme.vars || theme).palette.primaryDark[900], + ...(ownerState.variant === 'outlined' && { + borderColor: (theme.vars || theme).palette.primaryDark[700], + backgroundColor: alpha(theme.palette.primaryDark[800], 0.6), + '&[href]': { + textDecorationLine: 'none', + boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`, + '&:hover': { + borderColor: alpha(theme.palette.primary[600], 0.5), + boxShadow: `0px 2px 8px ${alpha(theme.palette.primary[900], 0.6)}`, + }, + }, + ':is(a&), :is(button&)': { + '&:hover': { + boxShadow: `0px 4px 24px ${(theme.vars || theme).palette.common.black}`, + }, + }, + }), + }), + ], + }, + }, + MuiTableCell: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + padding: theme.spacing(1, 2), + borderColor: (theme.vars || theme).palette.divider, + ...(ownerState.variant === 'head' && { + color: (theme.vars || theme).palette.text.primary, + fontWeight: 700, + }), + ...(ownerState.variant === 'body' && { + color: (theme.vars || theme).palette.text.secondary, + }), + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: '#fff', + ...theme.applyDarkStyles({ + backgroundColor: (theme.vars || theme).palette.primaryDark[900], + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme, ownerState }) => [ + { + textTransform: 'none', + fontWeight: theme.typography.fontWeightMedium, + color: theme.palette.text.secondary, + borderColor: theme.palette.grey[200], + ...(ownerState.size === 'small' && { + padding: '0.375rem 0.75rem', + }), + '&.Mui-selected': { + color: (theme.vars || theme).palette.primary[700], + borderColor: `${(theme.vars || theme).palette.primary[500]} !important`, + backgroundColor: (theme.vars || theme).palette.primary[50], + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[100], + }, + }, + } as const, + theme.applyDarkStyles({ + borderColor: theme.palette.primaryDark[700], + '&:hover': { + backgroundColor: alpha(theme.palette.primaryDark[600], 0.2), + }, + '&.Mui-selected': { + color: (theme.vars || theme).palette.primary[200], + borderColor: `${(theme.vars || theme).palette.primary[700]} !important`, + backgroundColor: alpha(theme.palette.primary[900], 0.4), + '&:hover': { + backgroundColor: alpha(theme.palette.primary[900], 0.8), + borderColor: `${(theme.vars || theme).palette.primary[400]} !important`, + }, + }, + }), + ], + }, + }, + MuiTooltip: { + styleOverrides: { + tooltip: { + borderRadius: 6, + padding: '6px 12px', + }, + }, + }, + MuiSwitch: { + styleOverrides: { + root: { + width: 32, + height: 20, + padding: 0, + '& .MuiSwitch-switchBase': { + '&.Mui-checked': { + transform: 'translateX(11px)', + color: '#fff', + }, + }, + }, + switchBase: { + height: 20, + width: 20, + padding: 0, + color: '#fff', + '&.Mui-checked + .MuiSwitch-track': { + opacity: 1, + }, + }, + track: ({ theme }) => ({ + opacity: 1, + borderRadius: 32, + backgroundColor: theme.palette.grey[400], + ...theme.applyDarkStyles({ + backgroundColor: theme.palette.grey[800], + }), + }), + thumb: { + flexShrink: 0, + width: '14px', + height: '14px', + }, + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => [ + { + textTransform: 'none', + fontWeight: theme.typography.fontWeightSemiBold, + color: theme.palette.grey[700], + borderColor: theme.palette.grey[200], + borderRadius: '8px', + '&.Mui-selected': { + color: (theme.vars || theme).palette.primary[500], + borderColor: `${(theme.vars || theme).palette.primary[500]} !important`, + backgroundColor: (theme.vars || theme).palette.primary[50], + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[100], + }, + }, + } as const, + theme.applyDarkStyles({ + color: theme.palette.grey[200], + borderColor: theme.palette.primaryDark[700], + '&.Mui-selected': { + color: theme.palette.primary[100], + borderColor: `${(theme.vars || theme).palette.primary[700]} !important`, + backgroundColor: alpha(theme.palette.primary[900], 0.5), + '&:hover': { + backgroundColor: alpha(theme.palette.primary[900], 0.8), + }, + }, + }), + ], + }, + }, + MuiCssBaseline: { + defaultProps: { + enableColorScheme: true, + }, + styleOverrides: { + html: { + overflowY: 'scroll', + // TODO add support for it, + // https://github.com/mui/material-ui/issues/40748 + // scrollbarGutter: 'stable', + }, + }, + }, + }, + }; +} + +export const brandingDarkTheme = createTheme({ + ...getDesignTokens('dark'), + ...getThemedComponents(), +}); + +export const brandingLightTheme = createTheme({ + ...getDesignTokens('light'), + ...getThemedComponents(), +}); diff --git a/packages/mui-docs/src/branding/index.ts b/packages/mui-docs/src/branding/index.ts new file mode 100644 index 00000000000000..50621de654fd0a --- /dev/null +++ b/packages/mui-docs/src/branding/index.ts @@ -0,0 +1,2 @@ +export * from './brandingTheme'; +export * from './BrandingProvider'; diff --git a/packages/mui-docs/tsconfig.build.json b/packages/mui-docs/tsconfig.build.json index e51a26ab34c9e5..6ecc42731f24fc 100644 --- a/packages/mui-docs/tsconfig.build.json +++ b/packages/mui-docs/tsconfig.build.json @@ -13,5 +13,8 @@ }, "include": ["src/**/*.ts*", "src/**/*.json"], "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"], - "references": [{ "path": "../mui-material/tsconfig.build.json" }] + "references": [ + { "path": "../mui-material/tsconfig.build.json" }, + { "path": "../mui-system/tsconfig.build.json" } + ] } diff --git a/packages/mui-envinfo/package.json b/packages/mui-envinfo/package.json index 32ddd5668876cf..6df16c363800eb 100644 --- a/packages/mui-envinfo/package.json +++ b/packages/mui-envinfo/package.json @@ -23,7 +23,7 @@ "envinfo": "^7.11.1" }, "devDependencies": { - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "chai": "^4.4.1", "fs-extra": "^11.2.0" }, diff --git a/packages/mui-icons-material/README.md b/packages/mui-icons-material/README.md index cf532bffeb018a..cf7d2d539d0db7 100644 --- a/packages/mui-icons-material/README.md +++ b/packages/mui-icons-material/README.md @@ -9,17 +9,19 @@ Install the package in your project directory with: ```bash -npm install @mui/icons-material +npm install @mui/icons-material@next ``` -These components use the Material UI's [SvgIcon](https://mui.com/material-ui/api/svg-icon) component to render the SVG path for each icon. +These components use the Material UI's [SvgIcon](https://next.mui.com/material-ui/api/svg-icon) component to render the SVG path for each icon. If you are not already using Material UI in your project, you can add it with: + + ```bash -npm install @mui/material +npm install @mui/material@next ``` ## Documentation diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json index 7e444974b82cec..506199c74a360c 100644 --- a/packages/mui-icons-material/package.json +++ b/packages/mui-icons-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/icons-material", - "version": "5.15.14", + "version": "6.0.0-alpha.0", "private": false, "author": "MUI Team", "description": "Material Design icons distributed as SVG React components.", @@ -52,7 +52,7 @@ "@mui/icons-material": "workspace:*", "@mui/internal-waterfall": "workspace:^", "@mui/material": "workspace:^", - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/react": "^18.2.55", "chai": "^4.4.1", "chalk": "^5.3.0", @@ -68,7 +68,7 @@ "yargs": "^17.7.2" }, "peerDependencies": { - "@mui/material": "^5.0.0", + "@mui/material": "workspace:^", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0" }, diff --git a/packages/mui-joy/README.md b/packages/mui-joy/README.md index 4921f8a288f6af..30fdd7c1f9011a 100644 --- a/packages/mui-joy/README.md +++ b/packages/mui-joy/README.md @@ -11,8 +11,10 @@ Joy UI is an open-source React component library that implements MUI's own desi Install the package in your project directory with: + + ```bash -npm install @mui/joy @emotion/react @emotion/styled +npm install @mui/joy@next @emotion/react @emotion/styled ``` ## Documentation diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json index 9501e9774a071a..e0b4746c399d5b 100644 --- a/packages/mui-joy/package.json +++ b/packages/mui-joy/package.json @@ -1,6 +1,6 @@ { "name": "@mui/joy", - "version": "5.0.0-beta.32", + "version": "5.0.0-beta.33", "private": false, "author": "MUI Team", "description": "Joy UI is an open-source React component library that implements MUI's own design principles. It's comprehensive and can be used in production out of the box.", @@ -50,8 +50,8 @@ "devDependencies": { "@mui-internal/test-utils": "workspace:^", "@mui/material": "workspace:^", - "@types/chai": "^4.3.12", - "@types/prop-types": "^15.7.11", + "@types/chai": "^4.3.14", + "@types/prop-types": "^15.7.12", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "@types/sinon": "^10.0.20", diff --git a/packages/mui-joy/src/Typography/Typography.test.tsx b/packages/mui-joy/src/Typography/Typography.test.tsx index e407bc7e8a12d0..0b721f3a5dc024 100644 --- a/packages/mui-joy/src/Typography/Typography.test.tsx +++ b/packages/mui-joy/src/Typography/Typography.test.tsx @@ -98,7 +98,10 @@ describe('', () => { }); }); - it('combines system properties with the sx prop', () => { + it('combines system properties with the sx prop', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } const { container } = render(); expect(container.firstChild).toHaveComputedStyle({ diff --git a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx index 7a71401aaa3e7d..024699b3368a71 100644 --- a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx +++ b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx @@ -526,7 +526,7 @@ describe('[Joy] CssVarsProvider', () => { , ); - expect(container.firstChild?.textContent).to.equal('16px'); + expect(container.firstChild?.textContent).to.equal('calc(2 * var(--joy-spacing))'); }); }); diff --git a/packages/mui-joy/src/styles/defaultTheme.test.js b/packages/mui-joy/src/styles/defaultTheme.test.js index f45402d3a1629a..25469909a49cd6 100644 --- a/packages/mui-joy/src/styles/defaultTheme.test.js +++ b/packages/mui-joy/src/styles/defaultTheme.test.js @@ -5,6 +5,9 @@ describe('defaultTheme', () => { it('the output contains required fields', () => { Object.keys(defaultTheme).forEach((field) => { expect([ + 'attribute', + 'colorSchemeSelector', + 'defaultColorScheme', 'breakpoints', 'components', 'colorSchemes', @@ -17,6 +20,7 @@ describe('defaultTheme', () => { 'palette', 'shadowRing', 'shadowChannel', + 'shadowOpacity', 'getCssVar', 'spacing', 'radius', @@ -30,7 +34,9 @@ describe('defaultTheme', () => { 'unstable_sxConfig', 'unstable_sx', 'shouldSkipGeneratingVar', - 'generateCssVars', + 'generateStyleSheets', + 'generateThemeVars', + 'generateSpacing', 'applyStyles', ]).to.includes(field); }); diff --git a/packages/mui-joy/src/styles/extendTheme.test.js b/packages/mui-joy/src/styles/extendTheme.test.js index 5a5986a8473319..c13f29d5c99315 100644 --- a/packages/mui-joy/src/styles/extendTheme.test.js +++ b/packages/mui-joy/src/styles/extendTheme.test.js @@ -8,9 +8,12 @@ describe('extendTheme', () => { const result = extendTheme(); Object.keys(result).forEach((field) => { expect([ + 'attribute', 'breakpoints', + 'colorSchemeSelector', 'components', 'colorSchemes', + 'defaultColorScheme', 'focus', 'fontSize', 'fontFamily', @@ -20,6 +23,9 @@ describe('extendTheme', () => { 'spacing', 'radius', 'shadow', + 'shadowRing', + 'shadowChannel', + 'shadowOpacity', 'zIndex', 'typography', 'variants', @@ -30,7 +36,9 @@ describe('extendTheme', () => { 'unstable_sxConfig', 'unstable_sx', 'shouldSkipGeneratingVar', - 'generateCssVars', + 'generateStyleSheets', + 'generateThemeVars', + 'generateSpacing', 'applyStyles', ]).to.includes(field); }); @@ -99,6 +107,51 @@ describe('extendTheme', () => { }); }); + describe('spacing', () => { + it('produce spacing token by default', () => { + const theme = extendTheme(); + expect(theme.vars.spacing).to.equal('var(--joy-spacing, 8px)'); + expect(theme.spacing(2)).to.equal('calc(2 * var(--joy-spacing, 8px))'); + }); + + it('turn number to pixel', () => { + const theme = extendTheme({ spacing: 4 }); + expect(theme.vars.spacing).to.equal('var(--joy-spacing, 4px)'); + expect(theme.spacing(2)).to.equal('calc(2 * var(--joy-spacing, 4px))'); + }); + + it('can be customized as a string', () => { + const theme = extendTheme({ spacing: '0.5rem' }); + expect(theme.vars.spacing).to.equal('var(--joy-spacing, 0.5rem)'); + expect(theme.spacing(2)).to.equal('calc(2 * var(--joy-spacing, 0.5rem))'); + }); + + it('uses the provided value if it is a string', () => { + const theme = extendTheme({ spacing: '0.5rem' }); + expect(theme.spacing('1rem')).to.equal('1rem'); + }); + + it('can be customized as an array', () => { + const theme = extendTheme({ spacing: [0, 1, 2, 4, 8, 16, 32] }); + expect(theme.vars.spacing).to.deep.equal([ + 'var(--joy-spacing-0, 0px)', + 'var(--joy-spacing-1, 1px)', + 'var(--joy-spacing-2, 2px)', + 'var(--joy-spacing-3, 4px)', + 'var(--joy-spacing-4, 8px)', + 'var(--joy-spacing-5, 16px)', + 'var(--joy-spacing-6, 32px)', + ]); + expect(theme.spacing(2)).to.equal('var(--joy-spacing-2, 2px)'); + }); + + it('can be customized as a function', () => { + const theme = extendTheme({ spacing: (factor) => `${0.25 * factor}rem` }); + expect(theme.vars.spacing).to.deep.equal('var(--joy-spacing, 0.25rem)'); + expect(theme.spacing(2)).to.equal('calc(2 * var(--joy-spacing, 0.25rem))'); + }); + }); + describe('theme.unstable_sx', () => { const { render } = createRenderer(); diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts index b1e85193334932..7404c27310ef29 100644 --- a/packages/mui-joy/src/styles/extendTheme.ts +++ b/packages/mui-joy/src/styles/extendTheme.ts @@ -11,6 +11,7 @@ import { SxConfig, } from '@mui/system'; import { unstable_applyStyles as applyStyles } from '@mui/system/createTheme'; +import { createUnarySpacing } from '@mui/system/spacing'; import defaultSxConfig from './sxConfig'; import colors from '../colors'; import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar'; @@ -43,6 +44,22 @@ type Partial3Level = { }; }; +function getSpacingVal(spacingInput: SpacingOptions | string | undefined) { + if (typeof spacingInput === 'number') { + return `${spacingInput}px`; + } + if (typeof spacingInput === 'string') { + return spacingInput; + } + if (typeof spacingInput === 'function') { + return getSpacingVal(spacingInput(1)); + } + if (Array.isArray(spacingInput)) { + return spacingInput; + } + return '8px'; +} + export type ColorSystemOptions = Partial3Level< MergeDefault > & { @@ -81,6 +98,26 @@ export interface CssVarsThemeOptions extends Partial2Level { * value = 'var(--test)' */ shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean; + /** + * If provided, it will be used to create a selector for the color scheme. + * This is useful if you want to use class or data-* attributes to apply the color scheme. + * + * The callback receives the colorScheme with the possible values of: + * - undefined: the selector for tokens that are not color scheme dependent + * - string: the selector for the color scheme + * + * @example + * // class selector + * (colorScheme) => colorScheme !== 'light' ? `.theme-${colorScheme}` : ":root" + * + * @example + * // data-* attribute selector + * (colorScheme) => colorScheme !== 'light' ? `[data-theme="${colorScheme}"`] : ":root" + */ + getSelector?: ( + colorScheme: SupportedColorScheme | undefined, + css: Record, + ) => string | Record; } export const createGetCssVar = (cssVarPrefix = 'joy') => @@ -94,6 +131,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { components: componentsInput, variants: variantsInput, shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar, + getSelector, ...scalesInput } = themeOptions || {}; const getCssVar = createGetCssVar(cssVarPrefix); @@ -523,6 +561,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { const theme = { colorSchemes, + defaultColorScheme: 'light', ...mergedScales, breakpoints: createBreakpoints(breakpoints ?? {}), components: deepmerge( @@ -564,8 +603,8 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { ), cssVarPrefix, getCssVar, - spacing: createSpacing(spacing), - } as unknown as Theme; // Need type casting due to module augmentation inside the repo + spacing: getSpacingVal(spacing), + } as unknown as Theme & { attribute: string; colorSchemeSelector: string }; // Need type casting due to module augmentation inside the repo /** Color channels generation @@ -610,15 +649,32 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { const parserConfig = { prefix: cssVarPrefix, shouldSkipGeneratingVar, + getSelector: + getSelector || + ((colorScheme) => { + if (theme.defaultColorScheme === colorScheme) { + return `${theme.colorSchemeSelector}, [${theme.attribute}="${colorScheme}"]`; + } + if (colorScheme) { + return `[${theme.attribute}="${colorScheme}"]`; + } + return theme.colorSchemeSelector; + }), }; - const { vars: themeVars, generateCssVars } = prepareCssVars( - // @ts-ignore property truDark is missing from colorSchemes - { colorSchemes, ...mergedScales }, + const { vars, generateThemeVars, generateStyleSheets } = prepareCssVars( + theme, parserConfig, ); - theme.vars = themeVars; - theme.generateCssVars = generateCssVars; + theme.attribute = 'data-joy-color-scheme'; + theme.colorSchemeSelector = ':root'; + theme.vars = vars; + theme.generateThemeVars = generateThemeVars; + theme.generateStyleSheets = generateStyleSheets; + theme.generateSpacing = function generateSpacing() { + return createSpacing(spacing, createUnarySpacing(this)); + }; + theme.spacing = theme.generateSpacing(); theme.unstable_sxConfig = { ...defaultSxConfig, ...themeOptions?.unstable_sxConfig, @@ -630,9 +686,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { }); }; theme.getColorSchemeSelector = (colorScheme: SupportedColorScheme) => - colorScheme === 'light' - ? '&' - : `&[data-joy-color-scheme="${colorScheme}"], [data-joy-color-scheme="${colorScheme}"] &`; + `[${theme.attribute}="${colorScheme}"] &`; const createVariantInput = { getCssVar, palette: theme.colorSchemes.light.palette }; theme.variants = deepmerge( @@ -657,6 +711,10 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { variantsInput, ); + Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(([key, value]) => { + // @ts-ignore + theme[key] = value; + }); theme.palette = { ...theme.colorSchemes.light.palette, colorScheme: 'light', diff --git a/packages/mui-joy/src/styles/styleUtils.test.js b/packages/mui-joy/src/styles/styleUtils.test.js index 336e818a0badfd..b5d20ca0899ecf 100644 --- a/packages/mui-joy/src/styles/styleUtils.test.js +++ b/packages/mui-joy/src/styles/styleUtils.test.js @@ -58,13 +58,13 @@ describe('getThemeValue', () => { it('return correct value if shorthand is provided', () => { expect( resolveSxValue({ theme: defaultTheme, ownerState: { sx: { p: 2 } } }, ['p']), - ).to.deep.equal({ p: '16px' }); // default theme.spacing(2) = '16px' + ).to.deep.equal({ p: 'calc(2 * var(--joy-spacing, 8px))' }); }); it('return correct value if number is provided', () => { expect( resolveSxValue({ theme: defaultTheme, ownerState: { sx: { padding: 2 } } }, ['padding']), - ).to.deep.equal({ padding: '16px' }); + ).to.deep.equal({ padding: 'calc(2 * var(--joy-spacing, 8px))' }); }); it('return correct value if css value is provided', () => { diff --git a/packages/mui-joy/src/styles/types/theme.ts b/packages/mui-joy/src/styles/types/theme.ts index c5a711544383e3..a75ec6487cba59 100644 --- a/packages/mui-joy/src/styles/types/theme.ts +++ b/packages/mui-joy/src/styles/types/theme.ts @@ -97,6 +97,7 @@ export type ThemeCssVar = OverridableStringUnion, Theme export interface Theme extends ThemeScales, RuntimeColorSystem { colorSchemes: Record; + defaultColorScheme: DefaultColorScheme | ExtendedColorScheme; focus: Focus; typography: TypographySystem; variants: Variants; @@ -106,10 +107,9 @@ export interface Theme extends ThemeScales, RuntimeColorSystem { vars: ThemeVars; getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string; getColorSchemeSelector: (colorScheme: DefaultColorScheme | ExtendedColorScheme) => string; - generateCssVars: (colorScheme?: DefaultColorScheme | ExtendedColorScheme) => { - css: Record; - vars: ThemeVars; - }; + generateThemeVars: () => ThemeVars; + generateStyleSheets: () => Record[]; + generateSpacing: () => Spacing; /** * A function to determine if the key, value should be attached as CSS Variable * `keys` is an array that represents the object path keys. diff --git a/packages/mui-lab/README.md b/packages/mui-lab/README.md index 3a38ed547576ff..09600169c250d9 100644 --- a/packages/mui-lab/README.md +++ b/packages/mui-lab/README.md @@ -9,7 +9,7 @@ Install the package in your project directory with: ```bash -npm install @mui/lab +npm install @mui/lab@next ``` The lab has peer dependencies on the Material Design components and on the Emotion library. @@ -18,11 +18,11 @@ If you are not already using them in your project, you can install with: ```bash -npm install @mui/material @emotion/react @emotion/styled +npm install @mui/material@next @emotion/react @emotion/styled ``` ## Documentation -Visit [https://mui.com/material-ui/about-the-lab/](https://mui.com/material-ui/about-the-lab/) to view the full documentation. +Visit [https://next.mui.com/material-ui/about-the-lab/](https://next.mui.com/material-ui/about-the-lab/) to view the full documentation. diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json index 0bb25dd837357b..3692630ab025ed 100644 --- a/packages/mui-lab/package.json +++ b/packages/mui-lab/package.json @@ -1,6 +1,6 @@ { "name": "@mui/lab", - "version": "5.0.0-alpha.169", + "version": "6.0.0-alpha.0", "private": false, "author": "MUI Team", "description": "Laboratory for new MUI modules.", @@ -51,8 +51,9 @@ }, "devDependencies": { "@mui-internal/test-utils": "workspace:^", - "@types/chai": "^4.3.12", - "@types/prop-types": "^15.7.11", + "@mui/material": "workspace:*", + "@types/chai": "^4.3.14", + "@types/prop-types": "^15.7.12", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "@types/sinon": "^10.0.20", @@ -64,7 +65,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material": ">=5.15.0", + "@mui/material": "workspace:^", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json index a52e29c461030d..32ea01247a202c 100644 --- a/packages/mui-material-nextjs/package.json +++ b/packages/mui-material-nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material-nextjs", - "version": "5.15.11", + "version": "6.0.0-alpha.0", "private": false, "author": "MUI Team", "description": "Collection of utilities for integration between Material UI and Next.js.", @@ -50,7 +50,7 @@ "peerDependencies": { "@emotion/cache": "^11.11.0", "@emotion/server": "^11.11.0", - "@mui/material": "^5.0.0", + "@mui/material": "workspace:^", "@types/react": "^17.0.0 || ^18.0.0", "next": "^13.0.0 || ^14.0.0", "react": "^17.0.0 || ^18.0.0" diff --git a/packages/mui-material/README.md b/packages/mui-material/README.md index 13b6dee92b9573..9e5719c35d785b 100644 --- a/packages/mui-material/README.md +++ b/packages/mui-material/README.md @@ -11,8 +11,10 @@ Material UI is an open-source React component library that implements Google's Install the package in your project directory with: + + ```bash -npm install @mui/material @emotion/react @emotion/styled +npm install @mui/material@next @emotion/react @emotion/styled ``` ## Documentation diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index bb840b2d534dec..357a50c47b34fe 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material", - "version": "5.15.14", + "version": "6.0.0-alpha.0", "private": false, "author": "MUI Team", "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.", @@ -62,14 +62,14 @@ "@rollup/plugin-replace": "^5.0.5", "@testing-library/dom": "^9.3.4", "@testing-library/user-event": "^14.5.2", - "@types/chai": "^4.3.12", - "@types/prop-types": "^15.7.11", + "@types/chai": "^4.3.14", + "@types/prop-types": "^15.7.12", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "@types/sinon": "^10.0.20", "chai": "^4.4.1", "css-mediaquery": "^0.1.2", - "express": "^4.18.3", + "express": "^4.19.2", "fast-glob": "^3.3.2", "fs-extra": "^11.2.0", "lodash": "^4.17.21", diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js index fec36c2e635a3d..ddc0befd8e9286 100644 --- a/packages/mui-material/src/AppBar/AppBar.js +++ b/packages/mui-material/src/AppBar/AppBar.js @@ -3,12 +3,13 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import capitalize from '../utils/capitalize'; import Paper from '../Paper'; import { getAppBarUtilityClass } from './appBarClasses'; +const useThemeProps = createUseThemeProps('MuiAppBar'); + const useUtilityClasses = (ownerState) => { const { color, position, classes } = ownerState; @@ -35,107 +36,134 @@ const AppBarRoot = styled(Paper, { styles[`color${capitalize(ownerState.color)}`], ]; }, -})(({ theme, ownerState }) => { - const backgroundColorDefault = - theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]; - - return { - display: 'flex', - flexDirection: 'column', - width: '100%', - boxSizing: 'border-box', // Prevent padding issue with the Modal and fixed positioned AppBar. - flexShrink: 0, - ...(ownerState.position === 'fixed' && { - position: 'fixed', - zIndex: (theme.vars || theme).zIndex.appBar, - top: 0, - left: 'auto', - right: 0, - '@media print': { - // Prevent the app bar to be visible on each printed page. +})(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + width: '100%', + boxSizing: 'border-box', // Prevent padding issue with the Modal and fixed positioned AppBar. + flexShrink: 0, + variants: [ + { + props: { position: 'fixed' }, + style: { + position: 'fixed', + zIndex: (theme.vars || theme).zIndex.appBar, + top: 0, + left: 'auto', + right: 0, + '@media print': { + // Prevent the app bar to be visible on each printed page. + position: 'absolute', + }, + }, + }, + { + props: { position: 'absolute' }, + style: { position: 'absolute', + zIndex: (theme.vars || theme).zIndex.appBar, + top: 0, + left: 'auto', + right: 0, + }, + }, + { + props: { position: 'sticky' }, + style: { + // ⚠️ sticky is not supported by IE11. + position: 'sticky', + zIndex: (theme.vars || theme).zIndex.appBar, + top: 0, + left: 'auto', + right: 0, }, - }), - ...(ownerState.position === 'absolute' && { - position: 'absolute', - zIndex: (theme.vars || theme).zIndex.appBar, - top: 0, - left: 'auto', - right: 0, - }), - ...(ownerState.position === 'sticky' && { - // ⚠️ sticky is not supported by IE11. - position: 'sticky', - zIndex: (theme.vars || theme).zIndex.appBar, - top: 0, - left: 'auto', - right: 0, - }), - ...(ownerState.position === 'static' && { - position: 'static', - }), - ...(ownerState.position === 'relative' && { - position: 'relative', - }), - ...(!theme.vars && { - ...(ownerState.color === 'default' && { - backgroundColor: backgroundColorDefault, - color: theme.palette.getContrastText(backgroundColorDefault), - }), - ...(ownerState.color && - ownerState.color !== 'default' && - ownerState.color !== 'inherit' && - ownerState.color !== 'transparent' && { - backgroundColor: theme.palette[ownerState.color].main, - color: theme.palette[ownerState.color].contrastText, + }, + { + props: { position: 'static' }, + style: { + position: 'static', + }, + }, + { + props: { position: 'relative' }, + style: { + position: 'relative', + }, + }, + { + props: { color: 'inherit' }, + style: { + '--AppBar-color': 'inherit', + }, + }, + { + props: { color: 'default' }, + style: { + '--AppBar-background': theme.vars + ? theme.vars.palette.AppBar.defaultBg + : theme.palette.grey[100], + '--AppBar-color': theme.vars + ? theme.vars.palette.text.primary + : theme.palette.getContrastText(theme.palette.grey[100]), + ...theme.applyStyles('dark', { + '--AppBar-background': theme.vars + ? theme.vars.palette.AppBar.defaultBg + : theme.palette.grey[900], + '--AppBar-color': theme.vars + ? theme.vars.palette.text.primary + : theme.palette.getContrastText(theme.palette.grey[900]), }), - ...(ownerState.color === 'inherit' && { - color: 'inherit', - }), - ...(theme.palette.mode === 'dark' && - !ownerState.enableColorOnDark && { - backgroundColor: null, - color: null, + }, + }, + ...Object.keys((theme.vars ?? theme).palette) + .filter( + (key) => + (theme.vars ?? theme).palette[key].main && + (theme.vars ?? theme).palette[key].contrastText, + ) + .map((color) => ({ + props: { color }, + style: { + '--AppBar-background': (theme.vars ?? theme).palette[color].main, + '--AppBar-color': (theme.vars ?? theme).palette[color].contrastText, + }, + })), + { + props: { enableColorOnDark: true }, + style: { + backgroundColor: 'var(--AppBar-background)', + color: 'var(--AppBar-color)', + }, + }, + { + props: { enableColorOnDark: false }, + style: { + backgroundColor: 'var(--AppBar-background)', + color: 'var(--AppBar-color)', + ...theme.applyStyles('dark', { + backgroundColor: theme.vars + ? joinVars(theme.vars.palette.AppBar.darkBg, 'var(--AppBar-background)') + : null, + color: theme.vars + ? joinVars(theme.vars.palette.AppBar.darkColor, 'var(--AppBar-color)') + : null, }), - ...(ownerState.color === 'transparent' && { - backgroundColor: 'transparent', - color: 'inherit', - ...(theme.palette.mode === 'dark' && { + }, + }, + { + props: { color: 'transparent' }, + style: { + '--AppBar-background': 'transparent', + '--AppBar-color': 'inherit', + backgroundColor: 'var(--AppBar-background)', + color: 'var(--AppBar-color)', + ...theme.applyStyles('dark', { backgroundImage: 'none', }), - }), - }), - ...(theme.vars && { - ...(ownerState.color === 'default' && { - '--AppBar-background': ownerState.enableColorOnDark - ? theme.vars.palette.AppBar.defaultBg - : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg), - '--AppBar-color': ownerState.enableColorOnDark - ? theme.vars.palette.text.primary - : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary), - }), - ...(ownerState.color && - !ownerState.color.match(/^(default|inherit|transparent)$/) && { - '--AppBar-background': ownerState.enableColorOnDark - ? theme.vars.palette[ownerState.color].main - : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main), - '--AppBar-color': ownerState.enableColorOnDark - ? theme.vars.palette[ownerState.color].contrastText - : joinVars( - theme.vars.palette.AppBar.darkColor, - theme.vars.palette[ownerState.color].contrastText, - ), - }), - backgroundColor: 'var(--AppBar-background)', - color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)', - ...(ownerState.color === 'transparent' && { - backgroundImage: 'none', - backgroundColor: 'transparent', - color: 'inherit', - }), - }), - }; -}); + }, + }, + ], +})); const AppBar = React.forwardRef(function AppBar(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiAppBar' }); diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index 5fcfc3d7abcad5..2aea5bf347fb6b 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -630,7 +630,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { ); let autocompletePopper = null; - if (!loading && groupedOptions.length > 0) { + if (groupedOptions.length > 0) { autocompletePopper = renderAutocompletePopperChildren( ', () => { fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' }); expect(document.querySelector(`.${classes.paper}`).textContent).to.equal('Loading…'); }); + + it('should show supplied options to the "options" prop even when loading', () => { + render( + } + />, + ); + + fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' }); + expect(document.querySelector(`.${classes.paper}`).textContent).not.to.equal('Loading…'); + + const listbox = screen.getByRole('listbox'); + const htmlOptions = listbox.querySelectorAll('li'); + expect(htmlOptions[0].innerHTML).to.equal('one'); + }); }); describe('prop: autoHighlight', () => { diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.js index 84babf704c59e8..1f6221e06a02ab 100644 --- a/packages/mui-material/src/AvatarGroup/AvatarGroup.js +++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.js @@ -5,16 +5,17 @@ import { isFragment } from 'react-is'; import clsx from 'clsx'; import chainPropTypes from '@mui/utils/chainPropTypes'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import Avatar, { avatarClasses } from '../Avatar'; import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses'; const SPACINGS = { small: -16, - medium: null, + medium: -8, }; +const useThemeProps = createUseThemeProps('MuiAlert'); + const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -33,25 +34,18 @@ const AvatarGroupRoot = styled('div', { [`& .${avatarGroupClasses.avatar}`]: styles.avatar, ...styles.root, }), -})(({ theme, ownerState }) => { - const marginValue = - ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined - ? SPACINGS[ownerState.spacing] - : -ownerState.spacing; - - return { - [`& .${avatarClasses.root}`]: { - border: `2px solid ${(theme.vars || theme).palette.background.default}`, - boxSizing: 'content-box', - marginLeft: marginValue ?? -8, - '&:last-child': { - marginLeft: 0, - }, +})(({ theme }) => ({ + display: 'flex', + flexDirection: 'row-reverse', + [`& .${avatarClasses.root}`]: { + border: `2px solid ${(theme.vars || theme).palette.background.default}`, + boxSizing: 'content-box', + marginLeft: 'var(--AvatarGroup-spacing, -8px)', + '&:last-child': { + marginLeft: 0, }, - display: 'flex', - flexDirection: 'row-reverse', - }; -}); + }, +})); const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) { const props = useThemeProps({ @@ -113,6 +107,11 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) { const additionalAvatarSlotProps = slotProps.additionalAvatar ?? componentsProps.additionalAvatar; + const marginValue = + ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined + ? SPACINGS[ownerState.spacing] + : -ownerState.spacing || -8; + return ( {extraAvatarsElement} @@ -215,6 +218,10 @@ AvatarGroup.propTypes /* remove-proptypes */ = { * @default 'medium' */ spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]), + /** + * @ignore + */ + style: PropTypes.object, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/mui-material/src/Backdrop/Backdrop.d.ts b/packages/mui-material/src/Backdrop/Backdrop.d.ts index f383995b8a2cbc..41380fe5e6532b 100644 --- a/packages/mui-material/src/Backdrop/Backdrop.d.ts +++ b/packages/mui-material/src/Backdrop/Backdrop.d.ts @@ -5,10 +5,46 @@ import { TransitionProps } from '../transitions/transition'; import { Theme } from '../styles'; import { BackdropClasses } from './backdropClasses'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; +import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; +export interface BackdropSlots { + /** + * The component that renders the root. + * @default 'div' + */ + root?: React.ElementType; + /** + * The component that renders the transition. + * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + * @default Fade + */ + transition?: React.JSXElementConstructor< + TransitionProps & { children: React.ReactElement } + >; +} export interface BackdropComponentsPropsOverrides {} -export interface BackdropOwnProps extends Partial> { +export interface BackdropTransitionSlotPropsOverrides {} + +export type BackdropSlotsAndSlotProps = CreateSlotsAndSlotProps< + BackdropSlots, + { + root: SlotProps< + React.ElementType, + BackdropComponentsPropsOverrides, + BackdropOwnerState + >; + transition: SlotProps< + React.JSXElementConstructor, + BackdropTransitionSlotPropsOverrides, + BackdropOwnerState + >; + } +>; + +export interface BackdropOwnProps + extends Partial>, + BackdropSlotsAndSlotProps { /** * The content of the component. */ @@ -50,27 +86,6 @@ export interface BackdropOwnProps extends Partial> { * If `true`, the component is shown. */ open: boolean; - /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * - * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future. - * - * @default {} - */ - slotProps?: { - root?: React.HTMLAttributes & BackdropComponentsPropsOverrides; - }; - /** - * The components used for each slot inside. - * - * This prop is an alias for the `components` prop, which will be deprecated in the future. - * - * @default {} - */ - slots?: { - root?: React.ElementType; - }; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ @@ -84,6 +99,7 @@ export interface BackdropOwnProps extends Partial> { * The component used for the transition. * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. * @default Fade + * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ TransitionComponent?: React.JSXElementConstructor< TransitionProps & { @@ -124,4 +140,6 @@ export type BackdropProps< component?: React.ElementType; }; +export interface BackdropOwnerState extends BackdropProps {} + export default Backdrop; diff --git a/packages/mui-material/src/Backdrop/Backdrop.js b/packages/mui-material/src/Backdrop/Backdrop.js index 1221de8bc3db64..6d667d72f8aa0b 100644 --- a/packages/mui-material/src/Backdrop/Backdrop.js +++ b/packages/mui-material/src/Backdrop/Backdrop.js @@ -3,11 +3,13 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; +import useSlot from '../utils/useSlot'; import Fade from '../Fade'; import { getBackdropUtilityClass } from './backdropClasses'; +const useThemeProps = createUseThemeProps('MuiBackdrop'); + const useUtilityClasses = (ownerState) => { const { classes, invisible } = ownerState; @@ -26,7 +28,7 @@ const BackdropRoot = styled('div', { return [styles.root, ownerState.invisible && styles.invisible]; }, -})(({ ownerState }) => ({ +})({ position: 'fixed', display: 'flex', alignItems: 'center', @@ -37,10 +39,15 @@ const BackdropRoot = styled('div', { left: 0, backgroundColor: 'rgba(0, 0, 0, 0.5)', WebkitTapHighlightColor: 'transparent', - ...(ownerState.invisible && { - backgroundColor: 'transparent', - }), -})); + variants: [ + { + props: { invisible: true }, + style: { + backgroundColor: 'transparent', + }, + }, + ], +}); const Backdrop = React.forwardRef(function Backdrop(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiBackdrop' }); @@ -48,13 +55,13 @@ const Backdrop = React.forwardRef(function Backdrop(inProps, ref) { children, className, component = 'div', - components = {}, - componentsProps = {}, invisible = false, open, + components = {}, + componentsProps = {}, slotProps = {}, slots = {}, - TransitionComponent = Fade, + TransitionComponent: TransitionComponentProp, transitionDuration, ...other } = props; @@ -67,22 +74,38 @@ const Backdrop = React.forwardRef(function Backdrop(inProps, ref) { const classes = useUtilityClasses(ownerState); - const rootSlotProps = slotProps.root ?? componentsProps.root; + const backwardCompatibleSlots = { + transition: TransitionComponentProp, + root: components.Root, + ...slots, + }; + const backwardCompatibleSlotProps = { ...componentsProps, ...slotProps }; + const externalForwardedProps = { + slots: backwardCompatibleSlots, + slotProps: backwardCompatibleSlotProps, + }; + + const [RootSlot, rootProps] = useSlot('root', { + elementType: BackdropRoot, + externalForwardedProps, + className: clsx(classes.root, className), + ownerState, + }); + + const [TransitionSlot, transitionProps] = useSlot('transition', { + elementType: Fade, + externalForwardedProps, + ownerState, + }); + + delete transitionProps.ownerState; return ( - - + + {children} - - + + ); }); @@ -142,25 +165,20 @@ Backdrop.propTypes /* remove-proptypes */ = { */ open: PropTypes.bool.isRequired, /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * - * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future. - * + * The props used for each slot inside. * @default {} */ slotProps: PropTypes.shape({ - root: PropTypes.object, + root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), }), /** * The components used for each slot inside. - * - * This prop is an alias for the `components` prop, which will be deprecated in the future. - * * @default {} */ slots: PropTypes.shape({ root: PropTypes.elementType, + transition: PropTypes.elementType, }), /** * The system prop that allows defining system overrides as well as additional CSS styles. @@ -174,6 +192,7 @@ Backdrop.propTypes /* remove-proptypes */ = { * The component used for the transition. * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. * @default Fade + * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ TransitionComponent: PropTypes.elementType, /** diff --git a/packages/mui-material/src/Backdrop/Backdrop.test.js b/packages/mui-material/src/Backdrop/Backdrop.test.js index 08e5d122eed6bc..a5bb505cb0f071 100644 --- a/packages/mui-material/src/Backdrop/Backdrop.test.js +++ b/packages/mui-material/src/Backdrop/Backdrop.test.js @@ -16,18 +16,19 @@ describe('', () => { refInstanceof: window.HTMLDivElement, muiName: 'MuiBackdrop', testVariantProps: { invisible: true }, - testLegacyComponentsProp: true, slots: { root: { expectedClassName: classes.root, }, + transition: { + testWithElement: null, + }, }, skip: [ 'componentProp', 'componentsProp', // react-transition-group issue 'reactTestRenderer', - 'slotPropsCallback', // not supported yet ], })); diff --git a/packages/mui-material/src/Badge/Badge.d.ts b/packages/mui-material/src/Badge/Badge.d.ts index 5ca85710f17459..af36329aab4029 100644 --- a/packages/mui-material/src/Badge/Badge.d.ts +++ b/packages/mui-material/src/Badge/Badge.d.ts @@ -72,8 +72,7 @@ export interface BadgeOwnProps { * The extra props for the slot components. * You can override the existing props or add new ones. * - * This prop is an alias for the `slotProps` prop. - * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. + * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * * @default {} */ @@ -81,8 +80,7 @@ export interface BadgeOwnProps { /** * The components used for each slot inside. * - * This prop is an alias for the `slots` prop. - * It's recommended to use the `slots` prop instead. + * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * * @default {} */ diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index f38326e038e5a9..04dbe38d85d041 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -398,8 +398,7 @@ Badge.propTypes /* remove-proptypes */ = { /** * The components used for each slot inside. * - * This prop is an alias for the `slots` prop. - * It's recommended to use the `slots` prop instead. + * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * * @default {} */ @@ -411,8 +410,7 @@ Badge.propTypes /* remove-proptypes */ = { * The extra props for the slot components. * You can override the existing props or add new ones. * - * This prop is an alias for the `slotProps` prop. - * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. + * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * * @default {} */ diff --git a/packages/mui-material/src/BottomNavigation/BottomNavigation.js b/packages/mui-material/src/BottomNavigation/BottomNavigation.js index 86eb69a517aec6..0d6ce8ed1f964e 100755 --- a/packages/mui-material/src/BottomNavigation/BottomNavigation.js +++ b/packages/mui-material/src/BottomNavigation/BottomNavigation.js @@ -4,10 +4,11 @@ import { isFragment } from 'react-is'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import { getBottomNavigationUtilityClass } from './bottomNavigationClasses'; +const useThemeProps = createUseThemeProps('MuiBottomNavigation'); + const useUtilityClasses = (ownerState) => { const { classes } = ownerState; diff --git a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js index caedc7018e73b3..e583152be06596 100644 --- a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js @@ -3,14 +3,15 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import ButtonBase from '../ButtonBase'; import unsupportedProp from '../utils/unsupportedProp'; import bottomNavigationActionClasses, { getBottomNavigationActionUtilityClass, } from './bottomNavigationActionClasses'; +const useThemeProps = createUseThemeProps('MuiBottomNavigationAction'); + const useUtilityClasses = (ownerState) => { const { classes, showLabel, selected } = ownerState; @@ -30,7 +31,7 @@ const BottomNavigationActionRoot = styled(ButtonBase, { return [styles.root, !ownerState.showLabel && !ownerState.selected && styles.iconOnly]; }, -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ transition: theme.transitions.create(['color', 'padding-top'], { duration: theme.transitions.duration.short, }), @@ -40,38 +41,47 @@ const BottomNavigationActionRoot = styled(ButtonBase, { color: (theme.vars || theme).palette.text.secondary, flexDirection: 'column', flex: '1', - ...(!ownerState.showLabel && - !ownerState.selected && { - paddingTop: 14, - }), - ...(!ownerState.showLabel && - !ownerState.selected && - !ownerState.label && { - paddingTop: 0, - }), [`&.${bottomNavigationActionClasses.selected}`]: { color: (theme.vars || theme).palette.primary.main, }, + variants: [ + { + props: ({ showLabel, selected }) => !showLabel && !selected, + style: { + paddingTop: 14, + }, + }, + { + props: ({ showLabel, selected, label }) => !showLabel && !selected && !label, + style: { + paddingTop: 0, + }, + }, + ], })); const BottomNavigationActionLabel = styled('span', { name: 'MuiBottomNavigationAction', slot: 'Label', overridesResolver: (props, styles) => styles.label, -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ fontFamily: theme.typography.fontFamily, fontSize: theme.typography.pxToRem(12), opacity: 1, transition: 'font-size 0.2s, opacity 0.2s', transitionDelay: '0.1s', - ...(!ownerState.showLabel && - !ownerState.selected && { - opacity: 0, - transitionDelay: '0s', - }), [`&.${bottomNavigationActionClasses.selected}`]: { fontSize: theme.typography.pxToRem(14), }, + variants: [ + { + props: ({ showLabel, selected }) => !showLabel && !selected, + style: { + opacity: 0, + transitionDelay: '0s', + }, + }, + ], })); const BottomNavigationAction = React.forwardRef(function BottomNavigationAction(inProps, ref) { diff --git a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js index 6d9ffc22b684d4..ae105db224e248 100644 --- a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js +++ b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js @@ -6,12 +6,13 @@ import clsx from 'clsx'; import integerPropType from '@mui/utils/integerPropType'; import { useSlotProps } from '@mui/base/utils'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import Typography from '../Typography'; import BreadcrumbCollapsed from './BreadcrumbCollapsed'; import breadcrumbsClasses, { getBreadcrumbsUtilityClass } from './breadcrumbsClasses'; +const useThemeProps = createUseThemeProps('MuiBreadcrumbs'); + const useUtilityClasses = (ownerState) => { const { classes } = ownerState; diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 483ed0d99fe0e1..822a5a7ca3ad7d 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -5,14 +5,16 @@ import clsx from 'clsx'; import resolveProps from '@mui/utils/resolveProps'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; -import styled, { rootShouldForwardProp } from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { rootShouldForwardProp } from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; import buttonClasses, { getButtonUtilityClass } from './buttonClasses'; import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext'; import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext'; +const useThemeProps = createUseThemeProps('MuiButton'); + const useUtilityClasses = (ownerState) => { const { color, disableElevation, fullWidth, size, variant, classes } = ownerState; @@ -40,23 +42,32 @@ const useUtilityClasses = (ownerState) => { }; }; -const commonIconStyles = (ownerState) => ({ - ...(ownerState.size === 'small' && { - '& > *:nth-of-type(1)': { - fontSize: 18, +const commonIconStyles = [ + { + props: { size: 'small' }, + style: { + '& > *:nth-of-type(1)': { + fontSize: 18, + }, }, - }), - ...(ownerState.size === 'medium' && { - '& > *:nth-of-type(1)': { - fontSize: 20, + }, + { + props: { size: 'medium' }, + style: { + '& > *:nth-of-type(1)': { + fontSize: 20, + }, }, - }), - ...(ownerState.size === 'large' && { - '& > *:nth-of-type(1)': { - fontSize: 22, + }, + { + props: { size: 'large' }, + style: { + '& > *:nth-of-type(1)': { + fontSize: 22, + }, }, - }), -}); + }, +]; const ButtonRoot = styled(ButtonBase, { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes', @@ -76,189 +87,218 @@ const ButtonRoot = styled(ButtonBase, { ownerState.fullWidth && styles.fullWidth, ]; }, -})( - ({ theme, ownerState }) => { - const inheritContainedBackgroundColor = - theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800]; - - const inheritContainedHoverBackgroundColor = - theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700]; +})(({ theme }) => { + const inheritContainedBackgroundColor = + theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800]; - return { - ...theme.typography.button, - minWidth: 64, - padding: '6px 16px', - borderRadius: (theme.vars || theme).shape.borderRadius, - transition: theme.transitions.create( - ['background-color', 'box-shadow', 'border-color', 'color'], - { - duration: theme.transitions.duration.short, - }, - ), - '&:hover': { - textDecoration: 'none', - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` - : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - ...(ownerState.variant === 'text' && - ownerState.color !== 'inherit' && { - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${ - theme.vars.palette.action.hoverOpacity - })` - : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color !== 'inherit' && { - border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`, - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${ - theme.vars.palette.action.hoverOpacity - })` - : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity), + const inheritContainedHoverBackgroundColor = + theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700]; + return { + ...theme.typography.button, + minWidth: 64, + padding: '6px 16px', + border: 0, + borderRadius: (theme.vars || theme).shape.borderRadius, + transition: theme.transitions.create( + ['background-color', 'box-shadow', 'border-color', 'color'], + { + duration: theme.transitions.duration.short, + }, + ), + '&:hover': { + textDecoration: 'none', + }, + [`&.${buttonClasses.disabled}`]: { + color: (theme.vars || theme).palette.action.disabled, + }, + variants: [ + { + props: { variant: 'contained' }, + style: { + color: `var(--variant-containedColor)`, + backgroundColor: `var(--variant-containedBg)`, + boxShadow: (theme.vars || theme).shadows[2], + '&:hover': { + boxShadow: (theme.vars || theme).shadows[4], // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { - backgroundColor: 'transparent', + boxShadow: (theme.vars || theme).shadows[2], }, - }), - ...(ownerState.variant === 'contained' && { - backgroundColor: theme.vars - ? theme.vars.palette.Button.inheritContainedHoverBg - : inheritContainedHoverBackgroundColor, - boxShadow: (theme.vars || theme).shadows[4], - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - boxShadow: (theme.vars || theme).shadows[2], - backgroundColor: (theme.vars || theme).palette.grey[300], }, - }), - ...(ownerState.variant === 'contained' && - ownerState.color !== 'inherit' && { - backgroundColor: (theme.vars || theme).palette[ownerState.color].dark, - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: (theme.vars || theme).palette[ownerState.color].main, - }, - }), + '&:active': { + boxShadow: (theme.vars || theme).shadows[8], + }, + [`&.${buttonClasses.focusVisible}`]: { + boxShadow: (theme.vars || theme).shadows[6], + }, + [`&.${buttonClasses.disabled}`]: { + color: (theme.vars || theme).palette.action.disabled, + boxShadow: (theme.vars || theme).shadows[0], + backgroundColor: (theme.vars || theme).palette.action.disabledBackground, + }, + }, }, - '&:active': { - ...(ownerState.variant === 'contained' && { - boxShadow: (theme.vars || theme).shadows[8], - }), + { + props: { variant: 'outlined' }, + style: { + padding: '5px 15px', + border: '1px solid currentColor', + borderColor: `var(--variant-outlinedBorder, currentColor)`, + backgroundColor: `var(--variant-outlinedBg)`, + color: `var(--variant-outlinedColor)`, + [`&.${buttonClasses.disabled}`]: { + border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`, + }, + }, }, - [`&.${buttonClasses.focusVisible}`]: { - ...(ownerState.variant === 'contained' && { - boxShadow: (theme.vars || theme).shadows[6], - }), + { + props: { variant: 'text' }, + style: { + padding: '6px 8px', + color: `var(--variant-textColor)`, + backgroundColor: `var(--variant-textBg)`, + }, }, - [`&.${buttonClasses.disabled}`]: { - color: (theme.vars || theme).palette.action.disabled, - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`, - }), - ...(ownerState.variant === 'contained' && { - color: (theme.vars || theme).palette.action.disabled, - boxShadow: (theme.vars || theme).shadows[0], - backgroundColor: (theme.vars || theme).palette.action.disabledBackground, - }), + ...Object.entries(theme.palette) + .filter(([, palette]) => palette.main && palette.dark && palette.contrastText) + .map(([color]) => ({ + props: { color }, + style: { + '--variant-textColor': (theme.vars || theme).palette[color].main, + '--variant-outlinedColor': (theme.vars || theme).palette[color].main, + '--variant-outlinedBorder': theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` + : alpha(theme.palette[color].main, 0.5), + '--variant-containedColor': (theme.vars || theme).palette[color].contrastText, + '--variant-containedBg': (theme.vars || theme).palette[color].main, + '@media (hover: hover)': { + '&:hover': { + '--variant-containedBg': (theme.vars || theme).palette[color].dark, + '--variant-textBg': theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` + : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity), + '--variant-outlinedBorder': (theme.vars || theme).palette[color].main, + '--variant-outlinedBg': theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` + : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity), + }, + }, + }, + })), + { + props: { + color: 'inherit', + }, + style: { + '--variant-containedColor': theme.vars + ? // this is safe because grey does not change between default light/dark mode + theme.vars.palette.text.primary + : theme.palette.getContrastText?.(inheritContainedBackgroundColor), + '--variant-containedBg': theme.vars + ? theme.vars.palette.Button.inheritContainedBg + : inheritContainedBackgroundColor, + '@media (hover: hover)': { + '&:hover': { + '--variant-containedBg': theme.vars + ? theme.vars.palette.Button.inheritContainedHoverBg + : inheritContainedHoverBackgroundColor, + '--variant-textBg': theme.vars + ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` + : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity), + '--variant-outlinedBg': theme.vars + ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` + : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity), + }, + }, + }, }, - ...(ownerState.variant === 'text' && { - padding: '6px 8px', - }), - ...(ownerState.variant === 'text' && - ownerState.color !== 'inherit' && { - color: (theme.vars || theme).palette[ownerState.color].main, - }), - ...(ownerState.variant === 'outlined' && { - padding: '5px 15px', - border: '1px solid currentColor', - }), - ...(ownerState.variant === 'outlined' && - ownerState.color !== 'inherit' && { - color: (theme.vars || theme).palette[ownerState.color].main, - border: theme.vars - ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` - : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`, - }), - ...(ownerState.variant === 'contained' && { - color: theme.vars - ? // this is safe because grey does not change between default light/dark mode - theme.vars.palette.text.primary - : theme.palette.getContrastText?.(theme.palette.grey[300]), - backgroundColor: theme.vars - ? theme.vars.palette.Button.inheritContainedBg - : inheritContainedBackgroundColor, - boxShadow: (theme.vars || theme).shadows[2], - }), - ...(ownerState.variant === 'contained' && - ownerState.color !== 'inherit' && { - color: (theme.vars || theme).palette[ownerState.color].contrastText, - backgroundColor: (theme.vars || theme).palette[ownerState.color].main, - }), - ...(ownerState.color === 'inherit' && { - color: 'inherit', - borderColor: 'currentColor', - }), - ...(ownerState.size === 'small' && - ownerState.variant === 'text' && { + { + props: { + size: 'small', + variant: 'text', + }, + style: { padding: '4px 5px', fontSize: theme.typography.pxToRem(13), - }), - ...(ownerState.size === 'large' && - ownerState.variant === 'text' && { + }, + }, + { + props: { + size: 'large', + variant: 'text', + }, + style: { padding: '8px 11px', fontSize: theme.typography.pxToRem(15), - }), - ...(ownerState.size === 'small' && - ownerState.variant === 'outlined' && { + }, + }, + { + props: { + size: 'small', + variant: 'outlined', + }, + style: { padding: '3px 9px', fontSize: theme.typography.pxToRem(13), - }), - ...(ownerState.size === 'large' && - ownerState.variant === 'outlined' && { + }, + }, + { + props: { + size: 'large', + variant: 'outlined', + }, + style: { padding: '7px 21px', fontSize: theme.typography.pxToRem(15), - }), - ...(ownerState.size === 'small' && - ownerState.variant === 'contained' && { + }, + }, + { + props: { + size: 'small', + variant: 'contained', + }, + style: { padding: '4px 10px', fontSize: theme.typography.pxToRem(13), - }), - ...(ownerState.size === 'large' && - ownerState.variant === 'contained' && { + }, + }, + { + props: { + size: 'large', + variant: 'contained', + }, + style: { padding: '8px 22px', fontSize: theme.typography.pxToRem(15), - }), - ...(ownerState.fullWidth && { - width: '100%', - }), - }; - }, - ({ ownerState }) => - ownerState.disableElevation && { - boxShadow: 'none', - '&:hover': { - boxShadow: 'none', - }, - [`&.${buttonClasses.focusVisible}`]: { - boxShadow: 'none', + }, }, - '&:active': { - boxShadow: 'none', + { + props: { + disableElevation: true, + }, + style: { + boxShadow: 'none', + '&:hover': { + boxShadow: 'none', + }, + [`&.${buttonClasses.focusVisible}`]: { + boxShadow: 'none', + }, + '&:active': { + boxShadow: 'none', + }, + [`&.${buttonClasses.disabled}`]: { + boxShadow: 'none', + }, + }, }, - [`&.${buttonClasses.disabled}`]: { - boxShadow: 'none', + { + props: { fullWidth: true }, + style: { width: '100%' }, }, - }, -); + ], + }; +}); const ButtonStartIcon = styled('span', { name: 'MuiButton', @@ -268,14 +308,19 @@ const ButtonStartIcon = styled('span', { return [styles.startIcon, styles[`iconSize${capitalize(ownerState.size)}`]]; }, -})(({ ownerState }) => ({ +})(() => ({ display: 'inherit', marginRight: 8, marginLeft: -4, - ...(ownerState.size === 'small' && { - marginLeft: -2, - }), - ...commonIconStyles(ownerState), + variants: [ + { + props: { size: 'small' }, + style: { + marginLeft: -2, + }, + }, + ...commonIconStyles, + ], })); const ButtonEndIcon = styled('span', { @@ -286,14 +331,19 @@ const ButtonEndIcon = styled('span', { return [styles.endIcon, styles[`iconSize${capitalize(ownerState.size)}`]]; }, -})(({ ownerState }) => ({ +})(() => ({ display: 'inherit', marginRight: -4, marginLeft: 8, - ...(ownerState.size === 'small' && { - marginRight: -2, - }), - ...commonIconStyles(ownerState), + variants: [ + { + props: { size: 'small' }, + style: { + marginRight: -2, + }, + }, + ...commonIconStyles, + ], })); const Button = React.forwardRef(function Button(inProps, ref) { diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.js b/packages/mui-material/src/ButtonBase/ButtonBase.js index bad1a0f69f2891..e023daddf594a6 100644 --- a/packages/mui-material/src/ButtonBase/ButtonBase.js +++ b/packages/mui-material/src/ButtonBase/ButtonBase.js @@ -5,14 +5,15 @@ import clsx from 'clsx'; import refType from '@mui/utils/refType'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import useForkRef from '../utils/useForkRef'; import useEventCallback from '../utils/useEventCallback'; import useIsFocusVisible from '../utils/useIsFocusVisible'; import TouchRipple from './TouchRipple'; import buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses'; +const useThemeProps = createUseThemeProps('MuiButtonBase'); + const useUtilityClasses = (ownerState) => { const { disabled, focusVisible, focusVisibleClassName, classes } = ownerState; diff --git a/packages/mui-material/src/ButtonBase/Ripple.js b/packages/mui-material/src/ButtonBase/Ripple.js index 7daadb96618fac..edcf4caddfa7d9 100644 --- a/packages/mui-material/src/ButtonBase/Ripple.js +++ b/packages/mui-material/src/ButtonBase/Ripple.js @@ -57,7 +57,7 @@ function Ripple(props) { ); } -Ripple.propTypes = { +Ripple.propTypes /* remove-proptypes */ = { /** * Override or extend the styles applied to the component. */ diff --git a/packages/mui-material/src/ButtonBase/TouchRipple.js b/packages/mui-material/src/ButtonBase/TouchRipple.js index 6834650d85fc06..0d4fc84c9aa6ac 100644 --- a/packages/mui-material/src/ButtonBase/TouchRipple.js +++ b/packages/mui-material/src/ButtonBase/TouchRipple.js @@ -3,13 +3,13 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { TransitionGroup } from 'react-transition-group'; import clsx from 'clsx'; -import { keyframes } from '@mui/system'; import useTimeout from '@mui/utils/useTimeout'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { keyframes, styled, createUseThemeProps } from '../zero-styled'; import Ripple from './Ripple'; import touchRippleClasses from './touchRippleClasses'; +const useThemeProps = createUseThemeProps('MuiTouchRipple'); + const DURATION = 550; export const DELAY_RIPPLE = 80; @@ -316,7 +316,7 @@ const TouchRipple = React.forwardRef(function TouchRipple(inProps, ref) { ); }); -TouchRipple.propTypes = { +TouchRipple.propTypes /* remove-proptypes */ = { /** * If `true`, the ripple starts at the center of the component * rather than at the point of interaction. diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index 8dc5c7aa6e1855..179dec4ae71074 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -6,12 +6,13 @@ import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import getValidReactChildren from '@mui/utils/getValidReactChildren'; import capitalize from '../utils/capitalize'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses'; import ButtonGroupContext from './ButtonGroupContext'; import ButtonGroupButtonContext from './ButtonGroupButtonContext'; +const useThemeProps = createUseThemeProps('MuiButtonGroup'); + const overridesResolver = (props, styles) => { const { ownerState } = props; @@ -54,9 +55,10 @@ const useUtilityClasses = (ownerState) => { root: [ 'root', variant, - orientation === 'vertical' && 'vertical', + orientation, fullWidth && 'fullWidth', disableElevation && 'disableElevation', + `color${capitalize(color)}`, ], grouped: [ 'grouped', @@ -78,123 +80,169 @@ const ButtonGroupRoot = styled('div', { name: 'MuiButtonGroup', slot: 'Root', overridesResolver, -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ display: 'inline-flex', borderRadius: (theme.vars || theme).shape.borderRadius, - ...(ownerState.variant === 'contained' && { - boxShadow: (theme.vars || theme).shadows[2], - }), - ...(ownerState.disableElevation && { - boxShadow: 'none', - }), - ...(ownerState.fullWidth && { - width: '100%', - }), - ...(ownerState.orientation === 'vertical' && { - flexDirection: 'column', - }), - [`& .${buttonGroupClasses.grouped}`]: { - minWidth: 40, - '&:hover': { - ...(ownerState.variant === 'contained' && { + variants: [ + { + props: { variant: 'contained' }, + style: { + boxShadow: (theme.vars || theme).shadows[2], + }, + }, + { + props: { disableElevation: true }, + style: { boxShadow: 'none', - }), + }, }, - ...(ownerState.variant === 'contained' && { - boxShadow: 'none', - }), - }, - [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { - ...(ownerState.orientation === 'horizontal' && { - borderTopRightRadius: 0, - borderBottomRightRadius: 0, - }), - ...(ownerState.orientation === 'vertical' && { - borderBottomRightRadius: 0, - borderBottomLeftRadius: 0, - }), - ...(ownerState.variant === 'text' && - ownerState.orientation === 'horizontal' && { - borderRight: theme.vars - ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` - : `1px solid ${ - theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, - [`&.${buttonGroupClasses.disabled}`]: { - borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + { + props: { fullWidth: true }, + style: { + width: '100%', + }, + }, + { + props: { orientation: 'vertical' }, + style: { + flexDirection: 'column', + [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { + borderTopRightRadius: 0, + borderTopLeftRadius: 0, }, - }), - ...(ownerState.variant === 'text' && - ownerState.orientation === 'vertical' && { - borderBottom: theme.vars - ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` - : `1px solid ${ - theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, - [`&.${buttonGroupClasses.disabled}`]: { - borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderBottomRightRadius: 0, + borderBottomLeftRadius: 0, }, - }), - ...(ownerState.variant === 'text' && - ownerState.color !== 'inherit' && { - borderColor: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` - : alpha(theme.palette[ownerState.color].main, 0.5), - }), - ...(ownerState.variant === 'outlined' && - ownerState.orientation === 'horizontal' && { - borderRightColor: 'transparent', - }), - ...(ownerState.variant === 'outlined' && - ownerState.orientation === 'vertical' && { - borderBottomColor: 'transparent', - }), - ...(ownerState.variant === 'contained' && - ownerState.orientation === 'horizontal' && { - borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`, - [`&.${buttonGroupClasses.disabled}`]: { - borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + }, + }, + { + props: { orientation: 'horizontal' }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, }, - }), - ...(ownerState.variant === 'contained' && - ownerState.orientation === 'vertical' && { - borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`, - [`&.${buttonGroupClasses.disabled}`]: { - borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, }, - }), - ...(ownerState.variant === 'contained' && - ownerState.color !== 'inherit' && { - borderColor: (theme.vars || theme).palette[ownerState.color].dark, - }), - '&:hover': { - ...(ownerState.variant === 'outlined' && - ownerState.orientation === 'horizontal' && { - borderRightColor: 'currentColor', - }), - ...(ownerState.variant === 'outlined' && - ownerState.orientation === 'vertical' && { - borderBottomColor: 'currentColor', - }), + }, + }, + { + props: { variant: 'text', orientation: 'horizontal' }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderRight: theme.vars + ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` + : `1px solid ${ + theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' + }`, + [`&.${buttonGroupClasses.disabled}`]: { + borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + }, + }, + }, + }, + { + props: { variant: 'text', orientation: 'vertical' }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderBottom: theme.vars + ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` + : `1px solid ${ + theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' + }`, + [`&.${buttonGroupClasses.disabled}`]: { + borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + }, + }, + }, + }, + ...Object.entries(theme.palette) + .filter(([, value]) => value.main) + .flatMap(([color]) => [ + { + props: { variant: 'text', color }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderColor: theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` + : alpha(theme.palette[color].main, 0.5), + }, + }, + }, + ]), + { + props: { variant: 'outlined', orientation: 'horizontal' }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderRightColor: 'transparent', + '&:hover': { + borderRightColor: 'currentColor', + }, + }, + [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { + marginLeft: -1, + }, + }, + }, + { + props: { variant: 'outlined', orientation: 'vertical' }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderBottomColor: 'transparent', + '&:hover': { + borderBottomColor: 'currentColor', + }, + }, + [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { + marginTop: -1, + }, + }, + }, + { + props: { variant: 'contained', orientation: 'horizontal' }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`, + [`&.${buttonGroupClasses.disabled}`]: { + borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + }, + }, + }, + }, + { + props: { variant: 'contained', orientation: 'vertical' }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`, + [`&.${buttonGroupClasses.disabled}`]: { + borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + }, + }, + }, + }, + ...Object.entries(theme.palette) + .filter(([, value]) => value.dark) + .map(([color]) => ({ + props: { variant: 'contained', color }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderColor: (theme.vars || theme).palette[color].dark, + }, + }, + })), + ], + [`& .${buttonGroupClasses.grouped}`]: { + minWidth: 40, + boxShadow: 'none', + props: { variant: 'contained' }, + style: { + '&:hover': { + boxShadow: 'none', + }, }, - }, - [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { - ...(ownerState.orientation === 'horizontal' && { - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - }), - ...(ownerState.orientation === 'vertical' && { - borderTopRightRadius: 0, - borderTopLeftRadius: 0, - }), - ...(ownerState.variant === 'outlined' && - ownerState.orientation === 'horizontal' && { - marginLeft: -1, - }), - ...(ownerState.variant === 'outlined' && - ownerState.orientation === 'vertical' && { - marginTop: -1, - }), }, })); diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js index bfe0a0f0965543..65387b240d46ef 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js @@ -38,6 +38,28 @@ describe('', () => { expect(buttonGroup).not.to.have.class(classes.fullWidth); }); + it('should have colorPrimary, horizontal class', () => { + const { container } = render( + + + , + ); + const buttonGroup = container.firstChild; + expect(buttonGroup).to.have.class(classes.colorPrimary); + expect(buttonGroup).to.have.class(classes.horizontal); + }); + + it('should have colorSecondary class', () => { + const { container } = render( + + + , + ); + + const buttonGroup = container.firstChild; + expect(buttonGroup).to.have.class(classes.colorSecondary); + }); + it('should render an outlined button', () => { const { getByRole } = render( diff --git a/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts b/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts index de0223228fa273..89f93aaf8d8ad3 100644 --- a/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts +++ b/packages/mui-material/src/ButtonGroup/buttonGroupClasses.ts @@ -18,43 +18,83 @@ export interface ButtonGroupClasses { firstButton: string; /** Styles applied to the root element if `fullWidth={true}`. */ fullWidth: string; + /** Styles applied to the root element if `orientation="horizontal"`. */ + horizontal: string; /** Styles applied to the root element if `orientation="vertical"`. */ vertical: string; /** Styles applied to the children. */ grouped: string; - /** Styles applied to the children if `orientation="horizontal"`. */ + /** Styles applied to the root element if `color="primary"` */ + colorPrimary: string; + /** Styles applied to the root element if `color="secondary"` */ + colorSecondary: string; + /** Styles applied to the children if `orientation="horizontal"`. + * @deprecated Combine the [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedHorizontal: string; - /** Styles applied to the children if `orientation="vertical"`. */ + /** Styles applied to the children if `orientation="vertical"`. + * @deprecated Combine the [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedVertical: string; - /** Styles applied to the children if `variant="text"`. */ + /** Styles applied to the children if `variant="text"`. + * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedText: string; - /** Styles applied to the children if `variant="text"` and `orientation="horizontal"`. */ + /** Styles applied to the children if `variant="text"` and `orientation="horizontal"`. + * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedTextHorizontal: string; - /** Styles applied to the children if `variant="text"` and `orientation="vertical"`. */ + /** Styles applied to the children if `variant="text"` and `orientation="vertical"`. + * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedTextVertical: string; - /** Styles applied to the children if `variant="text"` and `color="primary"`. */ + /** Styles applied to the children if `variant="text"` and `color="primary"`. + * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedTextPrimary: string; - /** Styles applied to the children if `variant="text"` and `color="secondary"`. */ + /** Styles applied to the children if `variant="text"` and `color="secondary"`. + * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedTextSecondary: string; - /** Styles applied to the children if `variant="outlined"`. */ + /** Styles applied to the children if `variant="outlined"`. + * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedOutlined: string; - /** Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`. */ + /** Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`. + * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedOutlinedHorizontal: string; - /** Styles applied to the children if `variant="outlined"` and `orientation="vertical"`. */ + /** Styles applied to the children if `variant="outlined"` and `orientation="vertical"`. + * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedOutlinedVertical: string; - /** Styles applied to the children if `variant="outlined"` and `color="primary"`. */ + /** Styles applied to the children if `variant="outlined"` and `color="primary"`. + * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedOutlinedPrimary: string; - /** Styles applied to the children if `variant="outlined"` and `color="secondary"`. */ + /** Styles applied to the children if `variant="outlined"` and `color="secondary"`. + * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedOutlinedSecondary: string; - /** Styles applied to the children if `variant="contained"`. */ + /** Styles applied to the children if `variant="contained"`. + * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedContained: string; - /** Styles applied to the children if `variant="contained"` and `orientation="horizontal"`. */ + /** Styles applied to the children if `variant="contained"` and `orientation="horizontal"`. + * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedContainedHorizontal: string; - /** Styles applied to the children if `variant="contained"` and `orientation="vertical"`. */ + /** Styles applied to the children if `variant="contained"` and `orientation="vertical"`. + * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedContainedVertical: string; - /** Styles applied to the children if `variant="contained"` and `color="primary"`. */ + /** Styles applied to the children if `variant="contained"` and `color="primary"`. + * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedContainedPrimary: string; - /** Styles applied to the children if `variant="contained"` and `color="secondary"`. */ + /** Styles applied to the children if `variant="contained"` and `color="secondary"`. + * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedContainedSecondary: string; /** Styles applied to the last button in the button group. */ lastButton: string; @@ -77,7 +117,10 @@ const buttonGroupClasses: ButtonGroupClasses = generateUtilityClasses('MuiButton 'disabled', 'firstButton', 'fullWidth', + 'horizontal', 'vertical', + 'colorPrimary', + 'colorSecondary', 'grouped', 'groupedHorizontal', 'groupedVertical', diff --git a/packages/mui-material/src/Card/Card.js b/packages/mui-material/src/Card/Card.js index 76fec05f8f4399..6491c1499e6a0b 100644 --- a/packages/mui-material/src/Card/Card.js +++ b/packages/mui-material/src/Card/Card.js @@ -4,11 +4,12 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import chainPropTypes from '@mui/utils/chainPropTypes'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import Paper from '../Paper'; import { getCardUtilityClass } from './cardClasses'; +const useThemeProps = createUseThemeProps('MuiCard'); + const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -23,10 +24,8 @@ const CardRoot = styled(Paper, { name: 'MuiCard', slot: 'Root', overridesResolver: (props, styles) => styles.root, -})(() => { - return { - overflow: 'hidden', - }; +})({ + overflow: 'hidden', }); const Card = React.forwardRef(function Card(inProps, ref) { diff --git a/packages/mui-material/src/CardActionArea/CardActionArea.js b/packages/mui-material/src/CardActionArea/CardActionArea.js index 55cf85f103b9f0..4100818481d347 100644 --- a/packages/mui-material/src/CardActionArea/CardActionArea.js +++ b/packages/mui-material/src/CardActionArea/CardActionArea.js @@ -3,11 +3,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import useThemeProps from '../styles/useThemeProps'; -import styled from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; import cardActionAreaClasses, { getCardActionAreaUtilityClass } from './cardActionAreaClasses'; import ButtonBase from '../ButtonBase'; +const useThemeProps = createUseThemeProps('MuiCardActionArea'); + const useUtilityClasses = (ownerState) => { const { classes } = ownerState; diff --git a/packages/mui-material/src/CardActions/CardActions.js b/packages/mui-material/src/CardActions/CardActions.js index c20972400583d5..9d320165213fd3 100644 --- a/packages/mui-material/src/CardActions/CardActions.js +++ b/packages/mui-material/src/CardActions/CardActions.js @@ -3,10 +3,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import { getCardActionsUtilityClass } from './cardActionsClasses'; +const useThemeProps = createUseThemeProps('MuiCardActions'); + const useUtilityClasses = (ownerState) => { const { classes, disableSpacing } = ownerState; @@ -25,16 +26,21 @@ const CardActionsRoot = styled('div', { return [styles.root, !ownerState.disableSpacing && styles.spacing]; }, -})(({ ownerState }) => ({ +})({ display: 'flex', alignItems: 'center', padding: 8, - ...(!ownerState.disableSpacing && { - '& > :not(style) ~ :not(style)': { - marginLeft: 8, + variants: [ + { + props: { disableSpacing: false }, + style: { + '& > :not(style) ~ :not(style)': { + marginLeft: 8, + }, + }, }, - }), -})); + ], +}); const CardActions = React.forwardRef(function CardActions(inProps, ref) { const props = useThemeProps({ diff --git a/packages/mui-material/src/CardContent/CardContent.js b/packages/mui-material/src/CardContent/CardContent.js index 2021d480c12177..860be046db369d 100644 --- a/packages/mui-material/src/CardContent/CardContent.js +++ b/packages/mui-material/src/CardContent/CardContent.js @@ -3,10 +3,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import { getCardContentUtilityClass } from './cardContentClasses'; +const useThemeProps = createUseThemeProps('MuiCardContent'); + const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -21,13 +22,11 @@ const CardContentRoot = styled('div', { name: 'MuiCardContent', slot: 'Root', overridesResolver: (props, styles) => styles.root, -})(() => { - return { - padding: 16, - '&:last-child': { - paddingBottom: 24, - }, - }; +})({ + padding: 16, + '&:last-child': { + paddingBottom: 24, + }, }); const CardContent = React.forwardRef(function CardContent(inProps, ref) { diff --git a/packages/mui-material/src/CardHeader/CardHeader.js b/packages/mui-material/src/CardHeader/CardHeader.js index 1ac7c5e80ad7fa..694784cca9a52e 100644 --- a/packages/mui-material/src/CardHeader/CardHeader.js +++ b/packages/mui-material/src/CardHeader/CardHeader.js @@ -4,10 +4,11 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import Typography from '../Typography'; -import useThemeProps from '../styles/useThemeProps'; -import styled from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; import cardHeaderClasses, { getCardHeaderUtilityClass } from './cardHeaderClasses'; +const useThemeProps = createUseThemeProps('MuiCardHeader'); + const useUtilityClasses = (ownerState) => { const { classes } = ownerState; diff --git a/packages/mui-material/src/CardMedia/CardMedia.js b/packages/mui-material/src/CardMedia/CardMedia.js index 6cf26c3cba1f38..a721e873db1b42 100644 --- a/packages/mui-material/src/CardMedia/CardMedia.js +++ b/packages/mui-material/src/CardMedia/CardMedia.js @@ -4,10 +4,11 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import chainPropTypes from '@mui/utils/chainPropTypes'; import composeClasses from '@mui/utils/composeClasses'; -import useThemeProps from '../styles/useThemeProps'; -import styled from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; import { getCardMediaUtilityClass } from './cardMediaClasses'; +const useThemeProps = createUseThemeProps('MuiCardMedia'); + const useUtilityClasses = (ownerState) => { const { classes, isMediaComponent, isImageComponent } = ownerState; @@ -27,19 +28,27 @@ const CardMediaRoot = styled('div', { return [styles.root, isMediaComponent && styles.media, isImageComponent && styles.img]; }, -})(({ ownerState }) => ({ +})({ display: 'block', backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: 'center', - ...(ownerState.isMediaComponent && { - width: '100%', - }), - ...(ownerState.isImageComponent && { - // ⚠️ object-fit is not supported by IE11. - objectFit: 'cover', - }), -})); + variants: [ + { + props: { isMediaComponent: true }, + style: { + width: '100%', + }, + }, + { + props: { isImageComponent: true }, + style: { + // ⚠️ object-fit is not supported by IE11. + objectFit: 'cover', + }, + }, + ], +}); const MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img']; const IMAGE_COMPONENTS = ['picture', 'img']; diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js index a8ffaf70cf30d8..3e66a758d40a05 100644 --- a/packages/mui-material/src/Chip/Chip.js +++ b/packages/mui-material/src/Chip/Chip.js @@ -9,10 +9,11 @@ import useForkRef from '../utils/useForkRef'; import unsupportedProp from '../utils/unsupportedProp'; import capitalize from '../utils/capitalize'; import ButtonBase from '../ButtonBase'; -import useThemeProps from '../styles/useThemeProps'; -import styled from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; import chipClasses, { getChipUtilityClass } from './chipClasses'; +const useThemeProps = createUseThemeProps('MuiChip'); + const useUtilityClasses = (ownerState) => { const { classes, disabled, size, color, iconColor, onDelete, clickable, variant } = ownerState; @@ -75,224 +76,259 @@ const ChipRoot = styled('div', { styles[`${variant}${capitalize(color)}`], ]; }, -})( - ({ theme, ownerState }) => { - const textColor = - theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300]; - return { - maxWidth: '100%', - fontFamily: theme.typography.fontFamily, - fontSize: theme.typography.pxToRem(13), - display: 'inline-flex', - alignItems: 'center', - justifyContent: 'center', - height: 32, - color: (theme.vars || theme).palette.text.primary, - backgroundColor: (theme.vars || theme).palette.action.selected, - borderRadius: 32 / 2, - whiteSpace: 'nowrap', - transition: theme.transitions.create(['background-color', 'box-shadow']), - // reset cursor explicitly in case ButtonBase is used - cursor: 'unset', - // We disable the focus ring for mouse, touch and keyboard users. - outline: 0, - textDecoration: 'none', - border: 0, // Remove `button` border - padding: 0, // Remove `button` padding - verticalAlign: 'middle', - boxSizing: 'border-box', - [`&.${chipClasses.disabled}`]: { - opacity: (theme.vars || theme).palette.action.disabledOpacity, - pointerEvents: 'none', - }, - [`& .${chipClasses.avatar}`]: { - marginLeft: 5, - marginRight: -6, - width: 24, - height: 24, - color: theme.vars ? theme.vars.palette.Chip.defaultAvatarColor : textColor, - fontSize: theme.typography.pxToRem(12), - }, - [`& .${chipClasses.avatarColorPrimary}`]: { - color: (theme.vars || theme).palette.primary.contrastText, - backgroundColor: (theme.vars || theme).palette.primary.dark, - }, - [`& .${chipClasses.avatarColorSecondary}`]: { - color: (theme.vars || theme).palette.secondary.contrastText, - backgroundColor: (theme.vars || theme).palette.secondary.dark, +})(({ theme }) => { + const textColor = + theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300]; + return { + maxWidth: '100%', + fontFamily: theme.typography.fontFamily, + fontSize: theme.typography.pxToRem(13), + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + height: 32, + color: (theme.vars || theme).palette.text.primary, + backgroundColor: (theme.vars || theme).palette.action.selected, + borderRadius: 32 / 2, + whiteSpace: 'nowrap', + transition: theme.transitions.create(['background-color', 'box-shadow']), + // reset cursor explicitly in case ButtonBase is used + cursor: 'unset', + // We disable the focus ring for mouse, touch and keyboard users. + outline: 0, + textDecoration: 'none', + border: 0, // Remove `button` border + padding: 0, // Remove `button` padding + verticalAlign: 'middle', + boxSizing: 'border-box', + [`&.${chipClasses.disabled}`]: { + opacity: (theme.vars || theme).palette.action.disabledOpacity, + pointerEvents: 'none', + }, + [`& .${chipClasses.avatar}`]: { + marginLeft: 5, + marginRight: -6, + width: 24, + height: 24, + color: theme.vars ? theme.vars.palette.Chip.defaultAvatarColor : textColor, + fontSize: theme.typography.pxToRem(12), + }, + [`& .${chipClasses.avatarColorPrimary}`]: { + color: (theme.vars || theme).palette.primary.contrastText, + backgroundColor: (theme.vars || theme).palette.primary.dark, + }, + [`& .${chipClasses.avatarColorSecondary}`]: { + color: (theme.vars || theme).palette.secondary.contrastText, + backgroundColor: (theme.vars || theme).palette.secondary.dark, + }, + [`& .${chipClasses.avatarSmall}`]: { + marginLeft: 4, + marginRight: -4, + width: 18, + height: 18, + fontSize: theme.typography.pxToRem(10), + }, + [`& .${chipClasses.icon}`]: { + marginLeft: 5, + marginRight: -6, + }, + [`& .${chipClasses.deleteIcon}`]: { + WebkitTapHighlightColor: 'transparent', + color: theme.vars + ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` + : alpha(theme.palette.text.primary, 0.26), + fontSize: 22, + cursor: 'pointer', + margin: '0 5px 0 -6px', + '&:hover': { + color: theme.vars + ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` + : alpha(theme.palette.text.primary, 0.4), }, - [`& .${chipClasses.avatarSmall}`]: { - marginLeft: 4, - marginRight: -4, - width: 18, - height: 18, - fontSize: theme.typography.pxToRem(10), + }, + variants: [ + { + props: { size: 'small' }, + style: { + height: 24, + [`& .${chipClasses.icon}`]: { + fontSize: 18, + marginLeft: 4, + marginRight: -4, + }, + [`& .${chipClasses.deleteIcon}`]: { + fontSize: 16, + marginRight: 4, + marginLeft: -4, + }, + }, }, - [`& .${chipClasses.icon}`]: { - marginLeft: 5, - marginRight: -6, - ...(ownerState.size === 'small' && { - fontSize: 18, - marginLeft: 4, - marginRight: -4, + ...Object.entries(theme.palette) + .filter(([, value]) => value.main && value.contrastText) + .map(([color]) => { + return { + props: { color }, + style: { + backgroundColor: (theme.vars || theme).palette[color].main, + color: (theme.vars || theme).palette[color].contrastText, + [`& .${chipClasses.deleteIcon}`]: { + color: theme.vars + ? `rgba(${theme.vars.palette[color].contrastTextChannel} / 0.7)` + : alpha(theme.palette[color].contrastText, 0.7), + '&:hover, &:active': { + color: (theme.vars || theme).palette[color].contrastText, + }, + }, + }, + }; }), - ...(ownerState.iconColor === ownerState.color && { - color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor, - ...(ownerState.color !== 'default' && { + { + props: (props) => props.iconColor === props.color, + style: { + [`& .${chipClasses.icon}`]: { + color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor, + }, + }, + }, + { + props: (props) => props.iconColor === props.color && props.color !== 'default', + style: { + [`& .${chipClasses.icon}`]: { color: 'inherit', - }), - }), + }, + }, }, - [`& .${chipClasses.deleteIcon}`]: { - WebkitTapHighlightColor: 'transparent', - color: theme.vars - ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` - : alpha(theme.palette.text.primary, 0.26), - fontSize: 22, - cursor: 'pointer', - margin: '0 5px 0 -6px', - '&:hover': { - color: theme.vars - ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` - : alpha(theme.palette.text.primary, 0.4), + { + props: { onDelete: true }, + style: { + [`&.${chipClasses.focusVisible}`]: { + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` + : alpha( + theme.palette.action.selected, + theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, + ), + }, }, - ...(ownerState.size === 'small' && { - fontSize: 16, - marginRight: 4, - marginLeft: -4, + }, + ...Object.entries(theme.palette) + .filter(([, value]) => value.dark) + .map(([color]) => { + return { + props: { color, onDelete: true }, + style: { + [`&.${chipClasses.focusVisible}`]: { + background: (theme.vars || theme).palette[color].dark, + }, + }, + }; }), - ...(ownerState.color !== 'default' && { - color: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` - : alpha(theme.palette[ownerState.color].contrastText, 0.7), - '&:hover, &:active': { - color: (theme.vars || theme).palette[ownerState.color].contrastText, + { + props: { clickable: true }, + style: { + userSelect: 'none', + WebkitTapHighlightColor: 'transparent', + cursor: 'pointer', + '&:hover': { + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` + : alpha( + theme.palette.action.selected, + theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity, + ), }, - }), - }, - ...(ownerState.size === 'small' && { - height: 24, - }), - ...(ownerState.color !== 'default' && { - backgroundColor: (theme.vars || theme).palette[ownerState.color].main, - color: (theme.vars || theme).palette[ownerState.color].contrastText, - }), - ...(ownerState.onDelete && { - [`&.${chipClasses.focusVisible}`]: { - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` - : alpha( - theme.palette.action.selected, - theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, - ), - }, - }), - ...(ownerState.onDelete && - ownerState.color !== 'default' && { [`&.${chipClasses.focusVisible}`]: { - backgroundColor: (theme.vars || theme).palette[ownerState.color].dark, + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` + : alpha( + theme.palette.action.selected, + theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, + ), + }, + '&:active': { + boxShadow: (theme.vars || theme).shadows[1], }, - }), - }; - }, - ({ theme, ownerState }) => ({ - ...(ownerState.clickable && { - userSelect: 'none', - WebkitTapHighlightColor: 'transparent', - cursor: 'pointer', - '&:hover': { - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` - : alpha( - theme.palette.action.selected, - theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity, - ), - }, - [`&.${chipClasses.focusVisible}`]: { - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` - : alpha( - theme.palette.action.selected, - theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, - ), - }, - '&:active': { - boxShadow: (theme.vars || theme).shadows[1], - }, - }), - ...(ownerState.clickable && - ownerState.color !== 'default' && { - [`&:hover, &.${chipClasses.focusVisible}`]: { - backgroundColor: (theme.vars || theme).palette[ownerState.color].dark, }, - }), - }), - ({ theme, ownerState }) => ({ - ...(ownerState.variant === 'outlined' && { - backgroundColor: 'transparent', - border: theme.vars - ? `1px solid ${theme.vars.palette.Chip.defaultBorder}` - : `1px solid ${ - theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700] - }`, - [`&.${chipClasses.clickable}:hover`]: { - backgroundColor: (theme.vars || theme).palette.action.hover, - }, - [`&.${chipClasses.focusVisible}`]: { - backgroundColor: (theme.vars || theme).palette.action.focus, - }, - [`& .${chipClasses.avatar}`]: { - marginLeft: 4, - }, - [`& .${chipClasses.avatarSmall}`]: { - marginLeft: 2, - }, - [`& .${chipClasses.icon}`]: { - marginLeft: 4, }, - [`& .${chipClasses.iconSmall}`]: { - marginLeft: 2, - }, - [`& .${chipClasses.deleteIcon}`]: { - marginRight: 5, - }, - [`& .${chipClasses.deleteIconSmall}`]: { - marginRight: 3, - }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color !== 'default' && { - color: (theme.vars || theme).palette[ownerState.color].main, - border: `1px solid ${ - theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` - : alpha(theme.palette[ownerState.color].main, 0.7) - }`, - [`&.${chipClasses.clickable}:hover`]: { - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${ - theme.vars.palette.action.hoverOpacity - })` - : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity), - }, - [`&.${chipClasses.focusVisible}`]: { - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${ - theme.vars.palette.action.focusOpacity - })` - : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity), - }, - [`& .${chipClasses.deleteIcon}`]: { - color: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` - : alpha(theme.palette[ownerState.color].main, 0.7), - '&:hover, &:active': { - color: (theme.vars || theme).palette[ownerState.color].main, + ...Object.entries(theme.palette) + .filter(([, value]) => value.dark) + .map(([color]) => ({ + props: { color, clickable: true }, + style: { + [`&:hover, &.${chipClasses.focusVisible}`]: { + backgroundColor: (theme.vars || theme).palette[color].dark, + }, + }, + })), + { + props: { variant: 'outlined' }, + style: { + backgroundColor: 'transparent', + border: theme.vars + ? `1px solid ${theme.vars.palette.Chip.defaultBorder}` + : `1px solid ${ + theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700] + }`, + [`&.${chipClasses.clickable}:hover`]: { + backgroundColor: (theme.vars || theme).palette.action.hover, + }, + [`&.${chipClasses.focusVisible}`]: { + backgroundColor: (theme.vars || theme).palette.action.focus, + }, + [`& .${chipClasses.avatar}`]: { + marginLeft: 4, + }, + [`& .${chipClasses.avatarSmall}`]: { + marginLeft: 2, + }, + [`& .${chipClasses.icon}`]: { + marginLeft: 4, + }, + [`& .${chipClasses.iconSmall}`]: { + marginLeft: 2, + }, + [`& .${chipClasses.deleteIcon}`]: { + marginRight: 5, + }, + [`& .${chipClasses.deleteIconSmall}`]: { + marginRight: 3, }, }, - }), - }), -); + }, + ...Object.entries(theme.palette) + .filter(([, value]) => value.main) // no need to check for mainChannel as it's calculated from main + .map(([color]) => ({ + props: { variant: 'outlined', color }, + style: { + color: (theme.vars || theme).palette[color].main, + border: `1px solid ${ + theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / 0.7)` + : alpha(theme.palette[color].main, 0.7) + }`, + [`&.${chipClasses.clickable}:hover`]: { + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` + : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity), + }, + [`&.${chipClasses.focusVisible}`]: { + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` + : alpha(theme.palette[color].main, theme.palette.action.focusOpacity), + }, + [`& .${chipClasses.deleteIcon}`]: { + color: theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / 0.7)` + : alpha(theme.palette[color].main, 0.7), + '&:hover, &:active': { + color: (theme.vars || theme).palette[color].main, + }, + }, + }, + })), + ], + }; +}); const ChipLabel = styled('span', { name: 'MuiChip', @@ -303,26 +339,36 @@ const ChipLabel = styled('span', { return [styles.label, styles[`label${capitalize(size)}`]]; }, -})(({ ownerState }) => ({ +})({ overflow: 'hidden', textOverflow: 'ellipsis', paddingLeft: 12, paddingRight: 12, whiteSpace: 'nowrap', - ...(ownerState.variant === 'outlined' && { - paddingLeft: 11, - paddingRight: 11, - }), - ...(ownerState.size === 'small' && { - paddingLeft: 8, - paddingRight: 8, - }), - ...(ownerState.size === 'small' && - ownerState.variant === 'outlined' && { - paddingLeft: 7, - paddingRight: 7, - }), -})); + variants: [ + { + props: { variant: 'outlined' }, + style: { + paddingLeft: 11, + paddingRight: 11, + }, + }, + { + props: { size: 'small' }, + style: { + paddingLeft: 8, + paddingRight: 8, + }, + }, + { + props: { size: 'small', variant: 'outlined' }, + style: { + paddingLeft: 7, + paddingRight: 7, + }, + }, + ], +}); function isDeleteKeyboardEvent(keyboardEvent) { return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete'; diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js index 80aefb09bbe3c6..47debc2df86f05 100644 --- a/packages/mui-material/src/Divider/Divider.js +++ b/packages/mui-material/src/Divider/Divider.js @@ -4,10 +4,11 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import { getDividerUtilityClass } from './dividerClasses'; +const useThemeProps = createUseThemeProps('MuiDivider'); + const useUtilityClasses = (ownerState) => { const { absolute, children, classes, flexItem, light, orientation, textAlign, variant } = ownerState; @@ -54,100 +55,140 @@ const DividerRoot = styled('div', { styles.textAlignLeft, ]; }, -})( - ({ theme, ownerState }) => ({ - margin: 0, // Reset browser default style. - flexShrink: 0, - borderWidth: 0, - borderStyle: 'solid', - borderColor: (theme.vars || theme).palette.divider, - borderBottomWidth: 'thin', - ...(ownerState.absolute && { - position: 'absolute', - bottom: 0, - left: 0, - width: '100%', - }), - ...(ownerState.light && { - borderColor: theme.vars - ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` - : alpha(theme.palette.divider, 0.08), - }), - ...(ownerState.variant === 'inset' && { - marginLeft: 72, - }), - ...(ownerState.variant === 'middle' && - ownerState.orientation === 'horizontal' && { +})(({ theme }) => ({ + margin: 0, // Reset browser default style. + flexShrink: 0, + borderWidth: 0, + borderStyle: 'solid', + borderColor: (theme.vars || theme).palette.divider, + borderBottomWidth: 'thin', + variants: [ + { + props: { + absolute: true, + }, + style: { + position: 'absolute', + bottom: 0, + left: 0, + width: '100%', + }, + }, + { + props: { + light: true, + }, + style: { + borderColor: theme.vars + ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` + : alpha(theme.palette.divider, 0.08), + }, + }, + { + props: { + variant: 'inset', + }, + style: { + marginLeft: 72, + }, + }, + { + props: { + variant: 'middle', + orientation: 'horizontal', + }, + style: { marginLeft: theme.spacing(2), marginRight: theme.spacing(2), - }), - ...(ownerState.variant === 'middle' && - ownerState.orientation === 'vertical' && { + }, + }, + { + props: { + variant: 'middle', + orientation: 'vertical', + }, + style: { marginTop: theme.spacing(1), marginBottom: theme.spacing(1), - }), - ...(ownerState.orientation === 'vertical' && { - height: '100%', - borderBottomWidth: 0, - borderRightWidth: 'thin', - }), - ...(ownerState.flexItem && { - alignSelf: 'stretch', - height: 'auto', - }), - }), - ({ ownerState }) => ({ - ...(ownerState.children && { - display: 'flex', - whiteSpace: 'nowrap', - textAlign: 'center', - border: 0, - '&::before, &::after': { - content: '""', - alignSelf: 'center', }, - }), - }), - ({ theme, ownerState }) => ({ - ...(ownerState.children && - ownerState.orientation !== 'vertical' && { + }, + { + props: { + orientation: 'vertical', + }, + style: { + height: '100%', + borderBottomWidth: 0, + borderRightWidth: 'thin', + }, + }, + { + props: { + flexItem: true, + }, + style: { + alignSelf: 'stretch', + height: 'auto', + }, + }, + { + props: ({ ownerState }) => !!ownerState.children, + style: { + display: 'flex', + whiteSpace: 'nowrap', + textAlign: 'center', + border: 0, + '&::before, &::after': { + content: '""', + alignSelf: 'center', + }, + }, + }, + { + props: ({ ownerState }) => ownerState.children && ownerState.orientation !== 'vertical', + style: { '&::before, &::after': { width: '100%', borderTop: `thin solid ${(theme.vars || theme).palette.divider}`, }, - }), - }), - ({ theme, ownerState }) => ({ - ...(ownerState.children && - ownerState.orientation === 'vertical' && { + }, + }, + { + props: ({ ownerState }) => ownerState.orientation === 'vertical' && ownerState.children, + style: { flexDirection: 'column', '&::before, &::after': { height: '100%', borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`, }, - }), - }), - ({ ownerState }) => ({ - ...(ownerState.textAlign === 'right' && - ownerState.orientation !== 'vertical' && { + }, + }, + { + props: ({ ownerState }) => + ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical', + style: { '&::before': { width: '90%', }, '&::after': { width: '10%', }, - }), - ...(ownerState.textAlign === 'left' && - ownerState.orientation !== 'vertical' && { + }, + }, + { + props: ({ ownerState }) => + ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical', + style: { '&::before': { width: '10%', }, '&::after': { width: '90%', }, - }), - }), -); + }, + }, + ], +})); const DividerWrapper = styled('span', { name: 'MuiDivider', @@ -157,14 +198,21 @@ const DividerWrapper = styled('span', { return [styles.wrapper, ownerState.orientation === 'vertical' && styles.wrapperVertical]; }, -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ display: 'inline-block', paddingLeft: `calc(${theme.spacing(1)} * 1.2)`, paddingRight: `calc(${theme.spacing(1)} * 1.2)`, - ...(ownerState.orientation === 'vertical' && { - paddingTop: `calc(${theme.spacing(1)} * 1.2)`, - paddingBottom: `calc(${theme.spacing(1)} * 1.2)`, - }), + variants: [ + { + props: { + orientation: 'vertical', + }, + style: { + paddingTop: `calc(${theme.spacing(1)} * 1.2)`, + paddingBottom: `calc(${theme.spacing(1)} * 1.2)`, + }, + }, + ], })); const Divider = React.forwardRef(function Divider(inProps, ref) { @@ -219,7 +267,9 @@ const Divider = React.forwardRef(function Divider(inProps, ref) { * The following flag is used to ensure that this component isn't tabbable i.e. * does not get highlight/focus inside of MUI List. */ -Divider.muiSkipListHighlight = true; +if (Divider) { + Divider.muiSkipListHighlight = true; +} Divider.propTypes /* remove-proptypes */ = { // ┌────────────────────────────── Warning ──────────────────────────────┐ diff --git a/packages/mui-material/src/FormControl/FormControl.js b/packages/mui-material/src/FormControl/FormControl.js index ce8353db232aa5..e4b79ab62b9ecf 100644 --- a/packages/mui-material/src/FormControl/FormControl.js +++ b/packages/mui-material/src/FormControl/FormControl.js @@ -3,14 +3,15 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import useThemeProps from '../styles/useThemeProps'; -import styled from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; import { isFilled, isAdornedStart } from '../InputBase/utils'; import capitalize from '../utils/capitalize'; import isMuiElement from '../utils/isMuiElement'; import FormControlContext from './FormControlContext'; import { getFormControlUtilityClasses } from './formControlClasses'; +const useThemeProps = createUseThemeProps('MuiFormControl'); + const useUtilityClasses = (ownerState) => { const { classes, margin, fullWidth } = ownerState; const slots = { @@ -30,7 +31,7 @@ const FormControlRoot = styled('div', { ...(ownerState.fullWidth && styles.fullWidth), }; }, -})(({ ownerState }) => ({ +})({ display: 'inline-flex', flexDirection: 'column', position: 'relative', @@ -40,18 +41,29 @@ const FormControlRoot = styled('div', { margin: 0, border: 0, verticalAlign: 'top', // Fix alignment issue on Safari. - ...(ownerState.margin === 'normal' && { - marginTop: 16, - marginBottom: 8, - }), - ...(ownerState.margin === 'dense' && { - marginTop: 8, - marginBottom: 4, - }), - ...(ownerState.fullWidth && { - width: '100%', - }), -})); + variants: [ + { + props: { margin: 'normal' }, + style: { + marginTop: 16, + marginBottom: 8, + }, + }, + { + props: { margin: 'dense' }, + style: { + marginTop: 8, + marginBottom: 4, + }, + }, + { + props: { fullWidth: true }, + style: { + width: '100%', + }, + }, + ], +}); /** * Provides context such as filled/focused/error/required for form inputs. diff --git a/packages/mui-material/src/FormControlLabel/FormControlLabel.js b/packages/mui-material/src/FormControlLabel/FormControlLabel.js index d6d215eb661ca8..a83c2c8b455504 100644 --- a/packages/mui-material/src/FormControlLabel/FormControlLabel.js +++ b/packages/mui-material/src/FormControlLabel/FormControlLabel.js @@ -5,16 +5,17 @@ import clsx from 'clsx'; import refType from '@mui/utils/refType'; import composeClasses from '@mui/utils/composeClasses'; import { useFormControl } from '../FormControl'; +import { styled, createUseThemeProps } from '../zero-styled'; import Stack from '../Stack'; import Typography from '../Typography'; import capitalize from '../utils/capitalize'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; import formControlLabelClasses, { getFormControlLabelUtilityClasses, } from './formControlLabelClasses'; import formControlState from '../FormControl/formControlState'; +const useThemeProps = createUseThemeProps('MuiFormControlLabel'); + const useUtilityClasses = (ownerState) => { const { classes, disabled, labelPlacement, error, required } = ownerState; const slots = { @@ -44,7 +45,7 @@ export const FormControlLabelRoot = styled('label', { styles[`labelPlacement${capitalize(ownerState.labelPlacement)}`], ]; }, -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ display: 'inline-flex', alignItems: 'center', cursor: 'pointer', @@ -56,24 +57,39 @@ export const FormControlLabelRoot = styled('label', { [`&.${formControlLabelClasses.disabled}`]: { cursor: 'default', }, - ...(ownerState.labelPlacement === 'start' && { - flexDirection: 'row-reverse', - marginLeft: 16, // used for row presentation of radio/checkbox - marginRight: -11, - }), - ...(ownerState.labelPlacement === 'top' && { - flexDirection: 'column-reverse', - marginLeft: 16, - }), - ...(ownerState.labelPlacement === 'bottom' && { - flexDirection: 'column', - marginLeft: 16, - }), [`& .${formControlLabelClasses.label}`]: { [`&.${formControlLabelClasses.disabled}`]: { color: (theme.vars || theme).palette.text.disabled, }, }, + variants: [ + { + props: { labelPlacement: 'start' }, + style: { + flexDirection: 'row-reverse', + marginRight: -11, + }, + }, + { + props: { labelPlacement: 'top' }, + style: { + flexDirection: 'column-reverse', + }, + }, + { + props: { labelPlacement: 'bottom' }, + style: { + flexDirection: 'column', + }, + }, + { + props: ({ labelPlacement }) => + labelPlacement === 'start' || labelPlacement === 'top' || labelPlacement === 'bottom', + style: { + marginLeft: 16, // used for row presentation of radio/checkbox + }, + }, + ], })); const AsteriskComponent = styled('span', { diff --git a/packages/mui-material/src/FormGroup/FormGroup.js b/packages/mui-material/src/FormGroup/FormGroup.js index 7a908ea680476c..0912b1aabd7b08 100644 --- a/packages/mui-material/src/FormGroup/FormGroup.js +++ b/packages/mui-material/src/FormGroup/FormGroup.js @@ -3,12 +3,13 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import { getFormGroupUtilityClass } from './formGroupClasses'; import useFormControl from '../FormControl/useFormControl'; import formControlState from '../FormControl/formControlState'; +const useThemeProps = createUseThemeProps('MuiFormGroup'); + const useUtilityClasses = (ownerState) => { const { classes, row, error } = ownerState; @@ -27,14 +28,19 @@ const FormGroupRoot = styled('div', { return [styles.root, ownerState.row && styles.row]; }, -})(({ ownerState }) => ({ +})({ display: 'flex', flexDirection: 'column', flexWrap: 'wrap', - ...(ownerState.row && { - flexDirection: 'row', - }), -})); + variants: [ + { + props: { row: true }, + style: { + flexDirection: 'row', + }, + }, + ], +}); /** * `FormGroup` wraps controls such as `Checkbox` and `Switch`. diff --git a/packages/mui-material/src/Grid/Grid.js b/packages/mui-material/src/Grid/Grid.js index 62900dc203ac44..7d8935e4395b74 100644 --- a/packages/mui-material/src/Grid/Grid.js +++ b/packages/mui-material/src/Grid/Grid.js @@ -27,6 +27,9 @@ import gridClasses, { getGridUtilityClass } from './gridClasses'; function getOffset(val) { const parse = parseFloat(val); + if (Number.isNaN(parse)) { + return val; + } return `${parse}${String(val).replace(String(parse), '') || 'px'}`; } diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.js b/packages/mui-material/src/MobileStepper/MobileStepper.js index fbf543479f5e3f..4bda0efad9c004 100644 --- a/packages/mui-material/src/MobileStepper/MobileStepper.js +++ b/packages/mui-material/src/MobileStepper/MobileStepper.js @@ -7,10 +7,12 @@ import composeClasses from '@mui/utils/composeClasses'; import Paper from '../Paper'; import capitalize from '../utils/capitalize'; import LinearProgress from '../LinearProgress'; -import useThemeProps from '../styles/useThemeProps'; -import styled, { slotShouldForwardProp } from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; +import slotShouldForwardProp from '../styles/slotShouldForwardProp'; import { getMobileStepperUtilityClass } from './mobileStepperClasses'; +const useThemeProps = createUseThemeProps('MuiMobileStepper'); + const useUtilityClasses = (ownerState) => { const { classes, position } = ownerState; @@ -33,39 +35,49 @@ const MobileStepperRoot = styled(Paper, { return [styles.root, styles[`position${capitalize(ownerState.position)}`]]; }, -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', background: (theme.vars || theme).palette.background.default, padding: 8, - ...(ownerState.position === 'bottom' && { - position: 'fixed', - bottom: 0, - left: 0, - right: 0, - zIndex: (theme.vars || theme).zIndex.mobileStepper, - }), - ...(ownerState.position === 'top' && { - position: 'fixed', - top: 0, - left: 0, - right: 0, - zIndex: (theme.vars || theme).zIndex.mobileStepper, - }), + variants: [ + { + props: ({ position }) => position === 'top' || position === 'bottom', + style: { + position: 'fixed', + left: 0, + right: 0, + zIndex: (theme.vars || theme).zIndex.mobileStepper, + }, + }, + { + props: { position: 'top' }, + style: { top: 0 }, + }, + { + props: { position: 'bottom' }, + style: { bottom: 0 }, + }, + ], })); const MobileStepperDots = styled('div', { name: 'MuiMobileStepper', slot: 'Dots', overridesResolver: (props, styles) => styles.dots, -})(({ ownerState }) => ({ - ...(ownerState.variant === 'dots' && { - display: 'flex', - flexDirection: 'row', - }), -})); +})({ + variants: [ + { + props: { variant: 'dots' }, + style: { + display: 'flex', + flexDirection: 'row', + }, + }, + ], +}); const MobileStepperDot = styled('div', { name: 'MuiMobileStepper', @@ -76,31 +88,44 @@ const MobileStepperDot = styled('div', { return [styles.dot, dotActive && styles.dotActive]; }, -})(({ theme, ownerState, dotActive }) => ({ - ...(ownerState.variant === 'dots' && { - transition: theme.transitions.create('background-color', { - duration: theme.transitions.duration.shortest, - }), - backgroundColor: (theme.vars || theme).palette.action.disabled, - borderRadius: '50%', - width: 8, - height: 8, - margin: '0 2px', - ...(dotActive && { - backgroundColor: (theme.vars || theme).palette.primary.main, - }), - }), +})(({ theme }) => ({ + variants: [ + { + props: { variant: 'dots' }, + style: { + transition: theme.transitions.create('background-color', { + duration: theme.transitions.duration.shortest, + }), + backgroundColor: (theme.vars || theme).palette.action.disabled, + borderRadius: '50%', + width: 8, + height: 8, + margin: '0 2px', + }, + }, + { + props: { variant: 'dots', dotActive: true }, + style: { + backgroundColor: (theme.vars || theme).palette.primary.main, + }, + }, + ], })); const MobileStepperProgress = styled(LinearProgress, { name: 'MuiMobileStepper', slot: 'Progress', overridesResolver: (props, styles) => styles.progress, -})(({ ownerState }) => ({ - ...(ownerState.variant === 'progress' && { - width: '50%', - }), -})); +})({ + variants: [ + { + props: { variant: 'progress' }, + style: { + width: '50%', + }, + }, + ], +}); const MobileStepper = React.forwardRef(function MobileStepper(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiMobileStepper' }); diff --git a/packages/mui-material/src/Modal/Modal.js b/packages/mui-material/src/Modal/Modal.js index 69b85c5bf6d7b4..801585fcca45c1 100644 --- a/packages/mui-material/src/Modal/Modal.js +++ b/packages/mui-material/src/Modal/Modal.js @@ -9,11 +9,12 @@ import { unstable_useModal as useModal } from '@mui/base/unstable_useModal'; import composeClasses from '@mui/utils/composeClasses'; import FocusTrap from '../Unstable_TrapFocus'; import Portal from '../Portal'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import Backdrop from '../Backdrop'; import { getModalUtilityClass } from './modalClasses'; +const useThemeProps = createUseThemeProps('MuiModal'); + const useUtilityClasses = (ownerState) => { const { open, exited, classes } = ownerState; @@ -33,17 +34,21 @@ const ModalRoot = styled('div', { return [styles.root, !ownerState.open && ownerState.exited && styles.hidden]; }, -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ position: 'fixed', zIndex: (theme.vars || theme).zIndex.modal, right: 0, bottom: 0, top: 0, left: 0, - ...(!ownerState.open && - ownerState.exited && { - visibility: 'hidden', - }), + variants: [ + { + props: ({ ownerState }) => !ownerState.open && ownerState.exited, + style: { + visibility: 'hidden', + }, + }, + ], })); const ModalBackdrop = styled(Backdrop, { diff --git a/packages/mui-material/src/Popover/Popover.js b/packages/mui-material/src/Popover/Popover.js index 3edef3441101c5..0dfe594895c8a9 100644 --- a/packages/mui-material/src/Popover/Popover.js +++ b/packages/mui-material/src/Popover/Popover.js @@ -9,8 +9,7 @@ import refType from '@mui/utils/refType'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import integerPropType from '@mui/utils/integerPropType'; import chainPropTypes from '@mui/utils/chainPropTypes'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import debounce from '../utils/debounce'; import ownerDocument from '../utils/ownerDocument'; import ownerWindow from '../utils/ownerWindow'; @@ -20,6 +19,8 @@ import Modal from '../Modal'; import PaperBase from '../Paper'; import { getPopoverUtilityClass } from './popoverClasses'; +const useThemeProps = createUseThemeProps('MuiPopover'); + export function getOffsetTop(rect, vertical) { let offset = 0; diff --git a/packages/mui-material/src/Step/Step.js b/packages/mui-material/src/Step/Step.js index 40010102fb5d05..61bd9567935007 100644 --- a/packages/mui-material/src/Step/Step.js +++ b/packages/mui-material/src/Step/Step.js @@ -6,10 +6,11 @@ import integerPropType from '@mui/utils/integerPropType'; import composeClasses from '@mui/utils/composeClasses'; import StepperContext from '../Stepper/StepperContext'; import StepContext from './StepContext'; -import useThemeProps from '../styles/useThemeProps'; -import styled from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; import { getStepUtilityClass } from './stepClasses'; +const useThemeProps = createUseThemeProps('MuiStep'); + const useUtilityClasses = (ownerState) => { const { classes, orientation, alternativeLabel, completed } = ownerState; @@ -33,16 +34,24 @@ const StepRoot = styled('div', { ownerState.completed && styles.completed, ]; }, -})(({ ownerState }) => ({ - ...(ownerState.orientation === 'horizontal' && { - paddingLeft: 8, - paddingRight: 8, - }), - ...(ownerState.alternativeLabel && { - flex: 1, - position: 'relative', - }), -})); +})({ + variants: [ + { + props: { orientation: 'horizontal' }, + style: { + paddingLeft: 8, + paddingRight: 8, + }, + }, + { + props: { alternativeLabel: true }, + style: { + flex: 1, + position: 'relative', + }, + }, + ], +}); const Step = React.forwardRef(function Step(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiStep' }); diff --git a/packages/mui-material/src/StepButton/StepButton.js b/packages/mui-material/src/StepButton/StepButton.js index 068741b194eddc..a724a65805bc51 100644 --- a/packages/mui-material/src/StepButton/StepButton.js +++ b/packages/mui-material/src/StepButton/StepButton.js @@ -3,8 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import ButtonBase from '../ButtonBase'; import StepLabel from '../StepLabel'; import isMuiElement from '../utils/isMuiElement'; @@ -12,6 +11,8 @@ import StepperContext from '../Stepper/StepperContext'; import StepContext from '../Step/StepContext'; import stepButtonClasses, { getStepButtonUtilityClass } from './stepButtonClasses'; +const useThemeProps = createUseThemeProps('MuiStepButton'); + const useUtilityClasses = (ownerState) => { const { classes, orientation } = ownerState; @@ -35,20 +36,25 @@ const StepButtonRoot = styled(ButtonBase, { styles[ownerState.orientation], ]; }, -})(({ ownerState }) => ({ +})({ width: '100%', padding: '24px 16px', margin: '-24px -16px', boxSizing: 'content-box', - ...(ownerState.orientation === 'vertical' && { - justifyContent: 'flex-start', - padding: '8px', - margin: '-8px', - }), [`& .${stepButtonClasses.touchRipple}`]: { color: 'rgba(0, 0, 0, 0.3)', }, -})); + variants: [ + { + props: { orientation: 'vertical' }, + style: { + justifyContent: 'flex-start', + padding: '8px', + margin: '-8px', + }, + }, + ], +}); const StepButton = React.forwardRef(function StepButton(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiStepButton' }); diff --git a/packages/mui-material/src/StepConnector/StepConnector.js b/packages/mui-material/src/StepConnector/StepConnector.js index 30d416e5d9baae..a7fb2da0d41939 100644 --- a/packages/mui-material/src/StepConnector/StepConnector.js +++ b/packages/mui-material/src/StepConnector/StepConnector.js @@ -4,12 +4,13 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import capitalize from '../utils/capitalize'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import StepperContext from '../Stepper/StepperContext'; import StepContext from '../Step/StepContext'; import { getStepConnectorUtilityClass } from './stepConnectorClasses'; +const useThemeProps = createUseThemeProps('MuiStepConnector'); + const useUtilityClasses = (ownerState) => { const { classes, orientation, alternativeLabel, active, completed, disabled } = ownerState; @@ -41,18 +42,26 @@ const StepConnectorRoot = styled('div', { ownerState.completed && styles.completed, ]; }, -})(({ ownerState }) => ({ +})({ flex: '1 1 auto', - ...(ownerState.orientation === 'vertical' && { - marginLeft: 12, // half icon - }), - ...(ownerState.alternativeLabel && { - position: 'absolute', - top: 8 + 4, - left: 'calc(-50% + 20px)', - right: 'calc(50% + 20px)', - }), -})); + variants: [ + { + props: { orientation: 'vertical' }, + style: { + marginLeft: 12, // half icon + }, + }, + { + props: { alternativeLabel: true }, + style: { + position: 'absolute', + top: 8 + 4, + left: 'calc(-50% + 20px)', + right: 'calc(50% + 20px)', + }, + }, + ], +}); const StepConnectorLine = styled('span', { name: 'MuiStepConnector', @@ -62,21 +71,29 @@ const StepConnectorLine = styled('span', { return [styles.line, styles[`line${capitalize(ownerState.orientation)}`]]; }, -})(({ ownerState, theme }) => { +})(({ theme }) => { const borderColor = theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]; return { display: 'block', borderColor: theme.vars ? theme.vars.palette.StepConnector.border : borderColor, - ...(ownerState.orientation === 'horizontal' && { - borderTopStyle: 'solid', - borderTopWidth: 1, - }), - ...(ownerState.orientation === 'vertical' && { - borderLeftStyle: 'solid', - borderLeftWidth: 1, - minHeight: 24, - }), + variants: [ + { + props: { orientation: 'horizontal' }, + style: { + borderTopStyle: 'solid', + borderTopWidth: 1, + }, + }, + { + props: { orientation: 'vertical' }, + style: { + borderLeftStyle: 'solid', + borderLeftWidth: 1, + minHeight: 24, + }, + }, + ], }; }); diff --git a/packages/mui-material/src/StepContent/StepContent.js b/packages/mui-material/src/StepContent/StepContent.js index 1d1be8bef3d4d6..528685347c41d0 100644 --- a/packages/mui-material/src/StepContent/StepContent.js +++ b/packages/mui-material/src/StepContent/StepContent.js @@ -3,13 +3,14 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import Collapse from '../Collapse'; import StepperContext from '../Stepper/StepperContext'; import StepContext from '../Step/StepContext'; import { getStepContentUtilityClass } from './stepContentClasses'; +const useThemeProps = createUseThemeProps('MuiStepContent'); + const useUtilityClasses = (ownerState) => { const { classes, last } = ownerState; @@ -26,7 +27,7 @@ const StepContentRoot = styled('div', { return [styles.root, ownerState.last && styles.last]; }, -})(({ ownerState, theme }) => ({ +})(({ theme }) => ({ marginLeft: 12, // half icon paddingLeft: 8 + 12, // margin + half icon paddingRight: 8, @@ -35,9 +36,14 @@ const StepContentRoot = styled('div', { : `1px solid ${ theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600] }`, - ...(ownerState.last && { - borderLeft: 'none', - }), + variants: [ + { + props: { last: true }, + style: { + borderLeft: 'none', + }, + }, + ], })); const StepContentTransition = styled(Collapse, { diff --git a/packages/mui-material/src/StepIcon/StepIcon.js b/packages/mui-material/src/StepIcon/StepIcon.js index f40a13455e9fc5..6ed6c6c31ccc5a 100644 --- a/packages/mui-material/src/StepIcon/StepIcon.js +++ b/packages/mui-material/src/StepIcon/StepIcon.js @@ -3,13 +3,14 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import CheckCircle from '../internal/svg-icons/CheckCircle'; import Warning from '../internal/svg-icons/Warning'; import SvgIcon from '../SvgIcon'; import stepIconClasses, { getStepIconUtilityClass } from './stepIconClasses'; +const useThemeProps = createUseThemeProps('MuiStepIcon'); + const useUtilityClasses = (ownerState) => { const { classes, active, completed, error } = ownerState; diff --git a/packages/mui-material/src/StepLabel/StepLabel.d.ts b/packages/mui-material/src/StepLabel/StepLabel.d.ts index 10d75f9151552b..bd389907657f0d 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.d.ts +++ b/packages/mui-material/src/StepLabel/StepLabel.d.ts @@ -4,8 +4,28 @@ import { InternalStandardProps as StandardProps } from '..'; import { StepIconProps } from '../StepIcon'; import { Theme } from '../styles'; import { StepLabelClasses } from './stepLabelClasses'; +import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; -export interface StepLabelProps extends StandardProps> { +export interface StepLabelSlots { + /** + * The component that renders the label. + * @default span + */ + label?: React.ElementType; +} + +export type StepLabelSlotsAndSlotProps = CreateSlotsAndSlotProps< + StepLabelSlots, + { + label: SlotProps>, {}, StepLabelOwnerState>; + } +>; + +export interface StepLabelOwnerState extends StepLabelProps {} + +export interface StepLabelProps + extends StandardProps>, + StepLabelSlotsAndSlotProps { /** * In most cases will simply be a string containing a title for the label. */ @@ -17,6 +37,7 @@ export interface StepLabelProps extends StandardProps; - }; /** * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/). */ @@ -75,6 +85,8 @@ export type StepLabelClasskey = keyof NonNullable; * * - [StepLabel API](https://mui.com/material-ui/api/step-label/) */ -declare const StepLabel: ((props: StepLabelProps) => JSX.Element) & { muiName: string }; +declare const StepLabel: ((props: StepLabelProps) => JSX.Element) & { + muiName: string; +}; export default StepLabel; diff --git a/packages/mui-material/src/StepLabel/StepLabel.js b/packages/mui-material/src/StepLabel/StepLabel.js index 80c3f7e5e36a93..42efdda24b6a68 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.js +++ b/packages/mui-material/src/StepLabel/StepLabel.js @@ -1,14 +1,16 @@ 'use client'; -import * as React from 'react'; -import PropTypes from 'prop-types'; -import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import clsx from 'clsx'; +import PropTypes from 'prop-types'; +import * as React from 'react'; +import StepContext from '../Step/StepContext'; import StepIcon from '../StepIcon'; import StepperContext from '../Stepper/StepperContext'; -import StepContext from '../Step/StepContext'; +import { createUseThemeProps, styled } from '../zero-styled'; import stepLabelClasses, { getStepLabelUtilityClass } from './stepLabelClasses'; +import useSlot from '../utils/useSlot'; + +const useThemeProps = createUseThemeProps('MuiStepLabel'); const useUtilityClasses = (ownerState) => { const { classes, orientation, active, completed, error, disabled, alternativeLabel } = ownerState; @@ -51,7 +53,7 @@ const StepLabelRoot = styled('span', { return [styles.root, styles[ownerState.orientation]]; }, -})(({ ownerState }) => ({ +})({ display: 'flex', alignItems: 'center', [`&.${stepLabelClasses.alternativeLabel}`]: { @@ -60,11 +62,16 @@ const StepLabelRoot = styled('span', { [`&.${stepLabelClasses.disabled}`]: { cursor: 'default', }, - ...(ownerState.orientation === 'vertical' && { - textAlign: 'left', - padding: '8px 0', - }), -})); + variants: [ + { + props: { orientation: 'vertical' }, + style: { + textAlign: 'left', + padding: '8px 0', + }, + }, + ], +}); const StepLabelLabel = styled('span', { name: 'MuiStepLabel', @@ -96,14 +103,14 @@ const StepLabelIconContainer = styled('span', { name: 'MuiStepLabel', slot: 'IconContainer', overridesResolver: (props, styles) => styles.iconContainer, -})(() => ({ +})({ flexShrink: 0, // Fix IE11 issue display: 'flex', paddingRight: 8, [`&.${stepLabelClasses.alternativeLabel}`]: { paddingRight: 0, }, -})); +}); const StepLabelLabelContainer = styled('span', { name: 'MuiStepLabel', @@ -126,6 +133,7 @@ const StepLabel = React.forwardRef(function StepLabel(inProps, ref) { error = false, icon: iconProp, optional, + slots = {}, slotProps = {}, StepIconComponent: StepIconComponentProp, StepIconProps, @@ -154,7 +162,19 @@ const StepLabel = React.forwardRef(function StepLabel(inProps, ref) { const classes = useUtilityClasses(ownerState); - const labelSlotProps = slotProps.label ?? componentsProps.label; + const externalForwardedProps = { + slots, + slotProps: { + ...componentsProps, + ...slotProps, + }, + }; + + const [LabelSlot, labelProps] = useSlot('label', { + elementType: StepLabelLabel, + externalForwardedProps, + ownerState, + }); return ( {children ? ( - + {children} - + ) : null} {optional} @@ -210,6 +226,7 @@ StepLabel.propTypes /* remove-proptypes */ = { /** * The props used for each slot inside. * @default {} + * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ componentsProps: PropTypes.shape({ label: PropTypes.object, @@ -232,7 +249,14 @@ StepLabel.propTypes /* remove-proptypes */ = { * @default {} */ slotProps: PropTypes.shape({ - label: PropTypes.object, + label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + }), + /** + * The components used for each slot inside. + * @default {} + */ + slots: PropTypes.shape({ + label: PropTypes.elementType, }), /** * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/). @@ -252,6 +276,8 @@ StepLabel.propTypes /* remove-proptypes */ = { ]), }; -StepLabel.muiName = 'StepLabel'; +if (StepLabel) { + StepLabel.muiName = 'StepLabel'; +} export default StepLabel; diff --git a/packages/mui-material/src/StepLabel/StepLabel.test.js b/packages/mui-material/src/StepLabel/StepLabel.test.js index 05c2959f51bdcb..912a1a2b98d578 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.test.js +++ b/packages/mui-material/src/StepLabel/StepLabel.test.js @@ -18,16 +18,10 @@ describe('', () => { render, refInstanceof: window.HTMLSpanElement, testVariantProps: { error: true }, - testLegacyComponentsProp: true, slots: { label: { expectedClassName: classes.label }, }, - skip: [ - 'componentProp', - 'componentsProp', - 'slotsProp', - 'slotPropsCallback', // not supported yet - ], + skip: ['componentProp', 'componentsProp'], })); describe('label content', () => { diff --git a/packages/mui-material/src/Stepper/Stepper.js b/packages/mui-material/src/Stepper/Stepper.js index 0edd4ab6516329..104e17620ff3bc 100644 --- a/packages/mui-material/src/Stepper/Stepper.js +++ b/packages/mui-material/src/Stepper/Stepper.js @@ -4,12 +4,13 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import integerPropType from '@mui/utils/integerPropType'; import composeClasses from '@mui/utils/composeClasses'; -import useThemeProps from '../styles/useThemeProps'; -import styled from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; import { getStepperUtilityClass } from './stepperClasses'; import StepConnector from '../StepConnector'; import StepperContext from './StepperContext'; +const useThemeProps = createUseThemeProps('MuiStepper'); + const useUtilityClasses = (ownerState) => { const { orientation, alternativeLabel, classes } = ownerState; const slots = { @@ -30,19 +31,30 @@ const StepperRoot = styled('div', { ownerState.alternativeLabel && styles.alternativeLabel, ]; }, -})(({ ownerState }) => ({ +})({ display: 'flex', - ...(ownerState.orientation === 'horizontal' && { - flexDirection: 'row', - alignItems: 'center', - }), - ...(ownerState.orientation === 'vertical' && { - flexDirection: 'column', - }), - ...(ownerState.alternativeLabel && { - alignItems: 'flex-start', - }), -})); + variants: [ + { + props: { orientation: 'horizontal' }, + style: { + flexDirection: 'row', + alignItems: 'center', + }, + }, + { + props: { orientation: 'vertical' }, + style: { + flexDirection: 'column', + }, + }, + { + props: { alternativeLabel: true }, + style: { + alignItems: 'flex-start', + }, + }, + ], +}); const defaultConnector = ; diff --git a/packages/mui-material/src/styles/CssVarsProvider.test.js b/packages/mui-material/src/styles/CssVarsProvider.test.js index 8b34b5b546cdee..d9b2165222e160 100644 --- a/packages/mui-material/src/styles/CssVarsProvider.test.js +++ b/packages/mui-material/src/styles/CssVarsProvider.test.js @@ -140,9 +140,9 @@ describe('[Material UI] CssVarsProvider', () => { primary: 'var(--mui-palette-text-primary)', secondary: 'var(--mui-palette-text-secondary)', disabled: 'var(--mui-palette-text-disabled)', + icon: 'var(--mui-palette-text-icon)', primaryChannel: 'var(--mui-palette-text-primaryChannel)', secondaryChannel: 'var(--mui-palette-text-secondaryChannel)', - icon: 'var(--mui-palette-text-icon)', }), ); expect(screen.getByTestId('palette-divider').textContent).to.equal( @@ -267,7 +267,7 @@ describe('[Material UI] CssVarsProvider', () => { , ); - expect(container.firstChild?.textContent).to.equal('16px'); + expect(container.firstChild?.textContent).to.equal('calc(2 * var(--mui-spacing))'); }); }); diff --git a/packages/mui-material/src/styles/CssVarsProvider.tsx b/packages/mui-material/src/styles/CssVarsProvider.tsx index 75f5c6e6f18154..e7779777a3094c 100644 --- a/packages/mui-material/src/styles/CssVarsProvider.tsx +++ b/packages/mui-material/src/styles/CssVarsProvider.tsx @@ -10,7 +10,6 @@ import experimental_extendTheme, { CssVarsTheme, } from './experimental_extendTheme'; import createTypography from './createTypography'; -import excludeVariablesFromRoot from './excludeVariablesFromRoot'; import THEME_ID from './identifier'; const defaultTheme = experimental_extendTheme(); @@ -40,7 +39,6 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV return newTheme; }, - excludeVariablesFromRoot, }); export { diff --git a/packages/mui-material/src/styles/createGetSelector.ts b/packages/mui-material/src/styles/createGetSelector.ts new file mode 100644 index 00000000000000..b5eff828009ad9 --- /dev/null +++ b/packages/mui-material/src/styles/createGetSelector.ts @@ -0,0 +1,33 @@ +import excludeVariablesFromRoot from './excludeVariablesFromRoot'; + +export default < + T extends { + attribute: string; + colorSchemeSelector: string; + colorSchemes?: Record; + defaultColorScheme?: string; + cssVarPrefix?: string; + }, + >( + theme: T, + ) => + (colorScheme: keyof T['colorSchemes'] | undefined, css: Record) => { + if (theme.defaultColorScheme === colorScheme) { + if (colorScheme === 'dark') { + const excludedVariables: typeof css = {}; + excludeVariablesFromRoot(theme.cssVarPrefix).forEach((cssVar) => { + excludedVariables[cssVar] = css[cssVar]; + delete css[cssVar]; + }); + return { + [`[${theme.attribute}="${String(colorScheme)}"]`]: excludedVariables, + [theme.colorSchemeSelector!]: css, + }; + } + return `${theme.colorSchemeSelector}, [${theme.attribute}="${String(colorScheme)}"]`; + } + if (colorScheme) { + return `[${theme.attribute}="${String(colorScheme)}"]`; + } + return theme.colorSchemeSelector; + }; diff --git a/packages/mui-material/src/styles/excludeVariablesFromRoot.ts b/packages/mui-material/src/styles/excludeVariablesFromRoot.ts index 415ff2af84f850..6041d0f1547fcf 100644 --- a/packages/mui-material/src/styles/excludeVariablesFromRoot.ts +++ b/packages/mui-material/src/styles/excludeVariablesFromRoot.ts @@ -1,7 +1,7 @@ /** * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"` */ -const excludeVariablesFromRoot = (cssVarPrefix: string) => [ +const excludeVariablesFromRoot = (cssVarPrefix?: string) => [ ...[...Array(24)].map( (_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index + 1}`, ), diff --git a/packages/mui-material/src/styles/experimental_extendTheme.d.ts b/packages/mui-material/src/styles/experimental_extendTheme.d.ts index e2d45afbbc7b93..013e945e2fbdf3 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.d.ts +++ b/packages/mui-material/src/styles/experimental_extendTheme.d.ts @@ -289,6 +289,26 @@ export interface CssVarsThemeOptions extends Omit>; + /** + * If provided, it will be used to create a selector for the color scheme. + * This is useful if you want to use class or data-* attributes to apply the color scheme. + * + * The callback receives the colorScheme with the possible values of: + * - undefined: the selector for tokens that are not color scheme dependent + * - string: the selector for the color scheme + * + * @example + * // class selector + * (colorScheme) => colorScheme !== 'light' ? `.theme-${colorScheme}` : ":root" + * + * @example + * // data-* attribute selector + * (colorScheme) => colorScheme !== 'light' ? `[data-theme="${colorScheme}"`] : ":root" + */ + getSelector?: ( + colorScheme: SupportedColorScheme | undefined, + css: Record, + ) => string | Record; /** * A function to determine if the key, value should be attached as CSS Variable * `keys` is an array that represents the object path keys. @@ -314,6 +334,7 @@ export interface ThemeVars { overlays: Overlays; shadows: Shadows; shape: Theme['shape']; + spacing: string; zIndex: ZIndex; } @@ -409,10 +430,9 @@ export interface CssVarsTheme extends ColorSystem { vars: ThemeVars; getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string; getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string; - generateCssVars: (colorScheme?: SupportedColorScheme) => { - css: Record; - vars: ThemeVars; - }; + generateThemeVars: () => ThemeVars; + generateStyleSheets: () => Array>; + generateSpacing: () => Theme['spacing']; // Default theme tokens spacing: Theme['spacing']; @@ -446,4 +466,4 @@ export interface CssVarsTheme extends ColorSystem { export default function experimental_extendTheme( options?: CssVarsThemeOptions, ...args: object[] -): Omit & CssVarsTheme; +): Omit & CssVarsTheme; diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 10bfdb80e22920..308f78d863644c 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -1,8 +1,7 @@ import deepmerge from '@mui/utils/deepmerge'; -import { - unstable_createGetCssVar as systemCreateGetCssVar, - unstable_prepareCssVars as prepareCssVars, -} from '@mui/system'; +import { unstable_createGetCssVar as systemCreateGetCssVar, createSpacing } from '@mui/system'; +import { createUnarySpacing } from '@mui/system/spacing'; +import { prepareCssVars } from '@mui/system/cssVars'; import styleFunctionSx, { unstable_defaultSxConfig as defaultSxConfig, } from '@mui/system/styleFunctionSx'; @@ -19,6 +18,7 @@ import { import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar'; import createThemeWithoutVars from './createTheme'; import getOverlayAlpha from './getOverlayAlpha'; +import defaultGetSelector from './createGetSelector'; const defaultDarkOverlays = [...Array(25)].map((_, index) => { if (index === 0) { @@ -62,6 +62,22 @@ function setColorChannel(obj, key) { } } +function getSpacingVal(spacingInput) { + if (typeof spacingInput === 'number') { + return `${spacingInput}px`; + } + if (typeof spacingInput === 'string') { + return spacingInput; + } + if (typeof spacingInput === 'function') { + return getSpacingVal(spacingInput(1)); + } + if (Array.isArray(spacingInput)) { + return spacingInput; + } + return '8px'; +} + const silent = (fn) => { try { return fn(); @@ -78,6 +94,7 @@ export default function extendTheme(options = {}, ...args) { colorSchemes: colorSchemesInput = {}, cssVarPrefix = 'mui', shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar, + getSelector, ...input } = options; const getCssVar = createGetCssVar(cssVarPrefix); @@ -91,6 +108,7 @@ export default function extendTheme(options = {}, ...args) { }); let theme = { + defaultColorScheme: 'light', ...muiTheme, cssVarPrefix, getCssVar, @@ -121,6 +139,7 @@ export default function extendTheme(options = {}, ...args) { overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays, }, }, + spacing: getSpacingVal(input.spacing), }; Object.keys(theme.colorSchemes).forEach((key) => { @@ -400,11 +419,22 @@ export default function extendTheme(options = {}, ...args) { const parserConfig = { prefix: cssVarPrefix, shouldSkipGeneratingVar, + getSelector: getSelector || defaultGetSelector(theme), }; - const { vars: themeVars, generateCssVars } = prepareCssVars(theme, parserConfig); - theme.vars = themeVars; - theme.generateCssVars = generateCssVars; - + const { vars, generateThemeVars, generateStyleSheets } = prepareCssVars(theme, parserConfig); + theme.attribute = 'data-mui-color-scheme'; + theme.colorSchemeSelector = ':root'; + theme.vars = vars; + Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(([key, value]) => { + theme[key] = value; + }); + theme.generateThemeVars = generateThemeVars; + theme.generateStyleSheets = generateStyleSheets; + theme.generateSpacing = function generateSpacing() { + return createSpacing(input.spacing, createUnarySpacing(this)); + }; + theme.getColorSchemeSelector = (colorScheme) => `[${theme.attribute}="${colorScheme}"] &`; + theme.spacing = theme.generateSpacing(); theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar; theme.unstable_sxConfig = { ...defaultSxConfig, diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js index d90f899199d140..297418eea7ada1 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.test.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js @@ -363,6 +363,51 @@ describe('experimental_extendTheme', () => { }); }); + describe('spacing', () => { + it('produce spacing token by default', () => { + const theme = extendTheme(); + expect(theme.vars.spacing).to.equal('var(--mui-spacing, 8px)'); + expect(theme.spacing(2)).to.equal('calc(2 * var(--mui-spacing, 8px))'); + }); + + it('turn number to pixel', () => { + const theme = extendTheme({ spacing: 4 }); + expect(theme.vars.spacing).to.equal('var(--mui-spacing, 4px)'); + expect(theme.spacing(2)).to.equal('calc(2 * var(--mui-spacing, 4px))'); + }); + + it('can be customized as a string', () => { + const theme = extendTheme({ spacing: '0.5rem' }); + expect(theme.vars.spacing).to.equal('var(--mui-spacing, 0.5rem)'); + expect(theme.spacing(2)).to.equal('calc(2 * var(--mui-spacing, 0.5rem))'); + }); + + it('uses the provided value if it is a string', () => { + const theme = extendTheme({ spacing: '0.5rem' }); + expect(theme.spacing('1rem')).to.equal('1rem'); + }); + + it('can be customized as an array', () => { + const theme = extendTheme({ spacing: [0, 1, 2, 4, 8, 16, 32] }); + expect(theme.vars.spacing).to.deep.equal([ + 'var(--mui-spacing-0, 0px)', + 'var(--mui-spacing-1, 1px)', + 'var(--mui-spacing-2, 2px)', + 'var(--mui-spacing-3, 4px)', + 'var(--mui-spacing-4, 8px)', + 'var(--mui-spacing-5, 16px)', + 'var(--mui-spacing-6, 32px)', + ]); + expect(theme.spacing(2)).to.equal('var(--mui-spacing-2, 2px)'); + }); + + it('can be customized as a function', () => { + const theme = extendTheme({ spacing: (factor) => `${0.25 * factor}rem` }); + expect(theme.vars.spacing).to.deep.equal('var(--mui-spacing, 0.25rem)'); + expect(theme.spacing(2)).to.equal('calc(2 * var(--mui-spacing, 0.25rem))'); + }); + }); + it('shallow merges multiple arguments', () => { const theme = extendTheme({ foo: 'I am foo' }, { bar: 'I am bar' }); expect(theme.foo).to.equal('I am foo'); @@ -532,4 +577,25 @@ describe('experimental_extendTheme', () => { }, }); }); + + it("should `generateStyleSheets` based on the theme's attribute and colorSchemeSelector", () => { + const theme = extendTheme(); + + expect(theme.generateStyleSheets().flatMap((sheet) => Object.keys(sheet))).to.deep.equal([ + ':root', + ':root, [data-mui-color-scheme="light"]', + '[data-mui-color-scheme="dark"]', + ]); + + theme.attribute = 'data-custom-color-scheme'; + theme.colorSchemeSelector = '.root'; + theme.defaultColorScheme = 'dark'; + + expect(theme.generateStyleSheets().flatMap((sheet) => Object.keys(sheet))).to.deep.equal([ + '.root', + '[data-custom-color-scheme="dark"]', + '.root', + '[data-custom-color-scheme="light"]', + ]); + }); }); diff --git a/packages/mui-material/src/zero-styled/index.ts b/packages/mui-material/src/zero-styled/index.ts index fc74b033f7d4a6..e36c2ac982e786 100644 --- a/packages/mui-material/src/zero-styled/index.ts +++ b/packages/mui-material/src/zero-styled/index.ts @@ -1,5 +1,7 @@ import useThemeProps from '../styles/useThemeProps'; +export { keyframes } from '@mui/system'; + export { default as styled } from '../styles/styled'; // eslint-disable-next-line @typescript-eslint/no-unused-vars diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json index a34d5e95b3f86a..2f6e029dba0279 100644 --- a/packages/mui-private-theming/package.json +++ b/packages/mui-private-theming/package.json @@ -45,7 +45,7 @@ "devDependencies": { "@mui-internal/test-utils": "workspace:^", "@mui/types": "workspace:^", - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/react": "^18.2.55", "chai": "^4.4.1", "react": "^18.2.0" diff --git a/packages/mui-styled-engine-sc/README.md b/packages/mui-styled-engine-sc/README.md index 871bccbd80d746..3ad474dbc2e264 100644 --- a/packages/mui-styled-engine-sc/README.md +++ b/packages/mui-styled-engine-sc/README.md @@ -7,4 +7,4 @@ It's designed for developers who would like to use `styled-components` as the ma -Visit [https://mui.com/material-ui/integrations/styled-components/](https://mui.com/material-ui/integrations/styled-components/) to view the full documentation. +Visit [https://next.mui.com/material-ui/integrations/styled-components/](https://next.mui.com/material-ui/integrations/styled-components/) to view the full documentation. diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json index 9309fb33afce07..1bc6ab3faf2bab 100644 --- a/packages/mui-styled-engine-sc/package.json +++ b/packages/mui-styled-engine-sc/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styled-engine-sc", - "version": "6.0.0-alpha.18", + "version": "6.0.0-alpha.19", "private": false, "author": "MUI Team", "description": "styled() API wrapper package for styled-components.", @@ -46,7 +46,7 @@ "devDependencies": { "@mui-internal/test-utils": "workspace:^", "@mui/styled-engine-sc": "workspace:*", - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/hoist-non-react-statics": "^3.3.5", "@types/react": "^18.2.55", "chai": "^4.4.1", diff --git a/packages/mui-styled-engine/README.md b/packages/mui-styled-engine/README.md index ab3d9fd2a968da..05a621f948f910 100644 --- a/packages/mui-styled-engine/README.md +++ b/packages/mui-styled-engine/README.md @@ -8,4 +8,4 @@ It is used internally in the `@mui/system` package. -Visit [https://mui.com/material-ui/integrations/styled-components/](https://mui.com/material-ui/integrations/styled-components/) to view the full documentation. +Visit [https://next.mui.com/material-ui/integrations/styled-components/](https://next.mui.com/material-ui/integrations/styled-components/) to view the full documentation. diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json index 578216b8dbf9a9..346aabc3c19b17 100644 --- a/packages/mui-styled-engine/package.json +++ b/packages/mui-styled-engine/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styled-engine", - "version": "5.15.14", + "version": "6.0.0-alpha.0", "private": false, "author": "MUI Team", "description": "styled() API wrapper package for emotion.", @@ -48,7 +48,7 @@ "@emotion/styled": "^11.11.0", "@mui-internal/test-utils": "workspace:^", "@mui/styled-engine": "workspace:*", - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/react": "^18.2.55", "chai": "^4.4.1", "react": "^18.2.0" diff --git a/packages/mui-styles/README.md b/packages/mui-styles/README.md index 93587d0f4a587a..944061cd8a83da 100644 --- a/packages/mui-styles/README.md +++ b/packages/mui-styles/README.md @@ -6,8 +6,10 @@ You can leverage our styling solution, even if you are not using our components. Install the package in your project directory with: + + ```bash -npm install @mui/styles +npm install @mui/styles@next ``` ## Documentation diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json index d25cd3c3c15e49..2f5e3d5b1a9909 100644 --- a/packages/mui-styles/package.json +++ b/packages/mui-styles/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styles", - "version": "5.15.14", + "version": "6.0.0-alpha.0", "private": false, "author": "MUI Team", "description": "MUI Styles - The legacy JSS-based styling solution of Material UI.", @@ -59,7 +59,7 @@ "devDependencies": { "@mui-internal/test-utils": "workspace:^", "@mui/material": "workspace:^", - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "@types/sinon": "^10.0.20", diff --git a/packages/mui-system/README.md b/packages/mui-system/README.md index a3f99ef5eff975..66f439ddcb3298 100644 --- a/packages/mui-system/README.md +++ b/packages/mui-system/README.md @@ -9,11 +9,11 @@ Install the package in your project directory with: ```bash -npm install @mui/system @emotion/react @emotion/styled +npm install @mui/system@next @emotion/react @emotion/styled ``` ## Documentation -Visit [https://mui.com/system/getting-started/](https://mui.com/system/getting-started/) to view the full documentation. +Visit [https://next.mui.com/system/getting-started/](https://next.mui.com/system/getting-started/) to view the full documentation. diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json index 079119e5131574..3d6481f3c7fae8 100644 --- a/packages/mui-system/package.json +++ b/packages/mui-system/package.json @@ -1,6 +1,6 @@ { "name": "@mui/system", - "version": "5.15.14", + "version": "6.0.0-alpha.0", "private": false, "author": "MUI Team", "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.", @@ -55,8 +55,8 @@ "@mui-internal/test-utils": "workspace:^", "@mui/internal-babel-macros": "workspace:^", "@mui/system": "workspace:*", - "@types/chai": "^4.3.12", - "@types/prop-types": "^15.7.11", + "@types/chai": "^4.3.14", + "@types/prop-types": "^15.7.12", "@types/react": "^18.2.55", "@types/sinon": "^10.0.20", "chai": "^4.4.1", diff --git a/packages/mui-system/src/borders/borders.d.ts b/packages/mui-system/src/borders/borders.d.ts new file mode 100644 index 00000000000000..f6f3a6f9ba3f7c --- /dev/null +++ b/packages/mui-system/src/borders/borders.d.ts @@ -0,0 +1,14 @@ +import { PropsFor, SimpleStyleFunction, borders } from '../Box'; + +export const border: SimpleStyleFunction<'border'>; +export const borderTop: SimpleStyleFunction<'borderTop'>; +export const borderRight: SimpleStyleFunction<'borderRight'>; +export const borderBottom: SimpleStyleFunction<'borderBottom'>; +export const borderLeft: SimpleStyleFunction<'borderLeft'>; +export const borderColor: SimpleStyleFunction<'borderColor'>; +export const borderTopColor: SimpleStyleFunction<'borderTopColor'>; +export const borderRightColor: SimpleStyleFunction<'borderRightColor'>; +export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>; +export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>; +export const borderRadius: SimpleStyleFunction<'borderRadius'>; +export type BordersProps = PropsFor; diff --git a/packages/mui-system/src/borders.js b/packages/mui-system/src/borders/borders.js similarity index 89% rename from packages/mui-system/src/borders.js rename to packages/mui-system/src/borders/borders.js index 2c3f59cb90011b..4966536ebb7216 100644 --- a/packages/mui-system/src/borders.js +++ b/packages/mui-system/src/borders/borders.js @@ -1,8 +1,8 @@ -import responsivePropType from './responsivePropType'; -import style from './style'; -import compose from './compose'; -import { createUnaryUnit, getValue } from './spacing'; -import { handleBreakpoints } from './breakpoints'; +import responsivePropType from '../responsivePropType'; +import style from '../style'; +import compose from '../compose'; +import { createUnaryUnit, getValue } from '../spacing'; +import { handleBreakpoints } from '../breakpoints'; export function borderTransform(value) { if (typeof value !== 'number') { diff --git a/packages/mui-system/src/borders.test.js b/packages/mui-system/src/borders/borders.test.js similarity index 100% rename from packages/mui-system/src/borders.test.js rename to packages/mui-system/src/borders/borders.test.js diff --git a/packages/mui-system/src/borders/index.ts b/packages/mui-system/src/borders/index.ts new file mode 100644 index 00000000000000..b80d6280b55565 --- /dev/null +++ b/packages/mui-system/src/borders/index.ts @@ -0,0 +1,3 @@ +'use client'; +export { default } from './borders'; +export * from './borders'; diff --git a/packages/mui-system/src/breakpoints.d.ts b/packages/mui-system/src/breakpoints/breakpoints.d.ts similarity index 51% rename from packages/mui-system/src/breakpoints.d.ts rename to packages/mui-system/src/breakpoints/breakpoints.d.ts index 44c23e7799e83e..2bee2d95489e11 100644 --- a/packages/mui-system/src/breakpoints.d.ts +++ b/packages/mui-system/src/breakpoints/breakpoints.d.ts @@ -1,7 +1,8 @@ import { CSSObject } from '@mui/styled-engine'; -import { Breakpoints } from './createTheme/createBreakpoints'; -import type { Breakpoint } from './createTheme'; -import { ResponsiveStyleValue } from './styleFunctionSx'; +import { Breakpoints } from '../createTheme/createBreakpoints'; +import type { Breakpoint } from '../createTheme'; +import { ResponsiveStyleValue } from '../styleFunctionSx'; +import { StyleFunction } from '../Box'; export interface ResolveBreakpointValuesOptions { values: ResponsiveStyleValue; @@ -19,3 +20,12 @@ export function handleBreakpoints( propValue: any, styleFromPropValue: (value: any, breakpoint?: Breakpoint) => any, ): any; + +type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; + +/** + * @returns An enhanced stylefunction that considers breakpoints + */ +export default function breakpoints( + styleFunction: StyleFunction, +): StyleFunction> & Props>; diff --git a/packages/mui-system/src/breakpoints.js b/packages/mui-system/src/breakpoints/breakpoints.js similarity index 99% rename from packages/mui-system/src/breakpoints.js rename to packages/mui-system/src/breakpoints/breakpoints.js index b1d017b24777ed..4d6fdf84b3eaba 100644 --- a/packages/mui-system/src/breakpoints.js +++ b/packages/mui-system/src/breakpoints/breakpoints.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import deepmerge from '@mui/utils/deepmerge'; -import merge from './merge'; +import merge from '../merge'; // The breakpoint **start** at this value. // For instance with the first breakpoint xs: [xs, sm[. diff --git a/packages/mui-system/src/breakpoints.test.js b/packages/mui-system/src/breakpoints/breakpoints.test.js similarity index 99% rename from packages/mui-system/src/breakpoints.test.js rename to packages/mui-system/src/breakpoints/breakpoints.test.js index 722327d96f50ed..2f54f6b738c763 100644 --- a/packages/mui-system/src/breakpoints.test.js +++ b/packages/mui-system/src/breakpoints/breakpoints.test.js @@ -4,7 +4,7 @@ import breakpoints, { resolveBreakpointValues, removeUnusedBreakpoints, } from './breakpoints'; -import style from './style'; +import style from '../style'; const textColor = style({ prop: 'color', diff --git a/packages/mui-system/src/breakpoints/index.ts b/packages/mui-system/src/breakpoints/index.ts new file mode 100644 index 00000000000000..d4131e5d7098e1 --- /dev/null +++ b/packages/mui-system/src/breakpoints/index.ts @@ -0,0 +1,3 @@ +'use client'; +export { default } from './breakpoints'; +export * from './breakpoints'; diff --git a/packages/mui-system/src/colorManipulator.d.ts b/packages/mui-system/src/colorManipulator/colorManipulator.d.ts similarity index 100% rename from packages/mui-system/src/colorManipulator.d.ts rename to packages/mui-system/src/colorManipulator/colorManipulator.d.ts diff --git a/packages/mui-system/src/colorManipulator.js b/packages/mui-system/src/colorManipulator/colorManipulator.js similarity index 100% rename from packages/mui-system/src/colorManipulator.js rename to packages/mui-system/src/colorManipulator/colorManipulator.js diff --git a/packages/mui-system/src/colorManipulator.spec.ts b/packages/mui-system/src/colorManipulator/colorManipulator.spec.ts similarity index 100% rename from packages/mui-system/src/colorManipulator.spec.ts rename to packages/mui-system/src/colorManipulator/colorManipulator.spec.ts diff --git a/packages/mui-system/src/colorManipulator.test.js b/packages/mui-system/src/colorManipulator/colorManipulator.test.js similarity index 100% rename from packages/mui-system/src/colorManipulator.test.js rename to packages/mui-system/src/colorManipulator/colorManipulator.test.js diff --git a/packages/mui-system/src/colorManipulator/index.ts b/packages/mui-system/src/colorManipulator/index.ts new file mode 100644 index 00000000000000..5149f8e5219a36 --- /dev/null +++ b/packages/mui-system/src/colorManipulator/index.ts @@ -0,0 +1,2 @@ +'use client'; +export * from './colorManipulator'; diff --git a/packages/mui-system/src/compose/compose.d.ts b/packages/mui-system/src/compose/compose.d.ts new file mode 100644 index 00000000000000..e6d66dbc4ac729 --- /dev/null +++ b/packages/mui-system/src/compose/compose.d.ts @@ -0,0 +1,5 @@ +import { ComposedStyleFunction, StyleFunction } from '../Box'; + +export default function compose>>( + ...args: T +): ComposedStyleFunction; diff --git a/packages/mui-system/src/compose.js b/packages/mui-system/src/compose/compose.js similarity index 96% rename from packages/mui-system/src/compose.js rename to packages/mui-system/src/compose/compose.js index 0d51263b994efb..028fb41568ee9f 100644 --- a/packages/mui-system/src/compose.js +++ b/packages/mui-system/src/compose/compose.js @@ -1,4 +1,4 @@ -import merge from './merge'; +import merge from '../merge'; function compose(...styles) { const handlers = styles.reduce((acc, style) => { diff --git a/packages/mui-system/src/compose.test.js b/packages/mui-system/src/compose/compose.test.js similarity index 95% rename from packages/mui-system/src/compose.test.js rename to packages/mui-system/src/compose/compose.test.js index 186a5b7ac034b5..65d81d81fa35fe 100644 --- a/packages/mui-system/src/compose.test.js +++ b/packages/mui-system/src/compose/compose.test.js @@ -1,6 +1,6 @@ import { expect } from 'chai'; import compose from './compose'; -import style from './style'; +import style from '../style'; const textColor = style({ prop: 'color', diff --git a/packages/mui-system/src/compose/index.ts b/packages/mui-system/src/compose/index.ts new file mode 100644 index 00000000000000..5903eeea33a13e --- /dev/null +++ b/packages/mui-system/src/compose/index.ts @@ -0,0 +1,2 @@ +'use client'; +export { default } from './compose'; diff --git a/packages/mui-system/src/createBox.d.ts b/packages/mui-system/src/createBox/createBox.d.ts similarity index 80% rename from packages/mui-system/src/createBox.d.ts rename to packages/mui-system/src/createBox/createBox.d.ts index 3c8a0b023bb2ca..e1a0dc507b33b4 100644 --- a/packages/mui-system/src/createBox.d.ts +++ b/packages/mui-system/src/createBox/createBox.d.ts @@ -1,6 +1,6 @@ import { OverridableComponent } from '@mui/types'; -import { BoxTypeMap } from './Box'; -import { Theme as SystemTheme } from './createTheme'; +import { BoxTypeMap } from '../Box'; +import { Theme as SystemTheme } from '../createTheme'; export default function createBox< T extends object = SystemTheme, diff --git a/packages/mui-system/src/createBox.js b/packages/mui-system/src/createBox/createBox.js similarity index 89% rename from packages/mui-system/src/createBox.js rename to packages/mui-system/src/createBox/createBox.js index e485c0ac468b07..94f8783396d889 100644 --- a/packages/mui-system/src/createBox.js +++ b/packages/mui-system/src/createBox/createBox.js @@ -2,8 +2,8 @@ import * as React from 'react'; import clsx from 'clsx'; import styled from '@mui/styled-engine'; -import styleFunctionSx, { extendSxProp } from './styleFunctionSx'; -import useTheme from './useTheme'; +import styleFunctionSx, { extendSxProp } from '../styleFunctionSx'; +import useTheme from '../useTheme'; export default function createBox(options = {}) { const { themeId, defaultTheme, defaultClassName = 'MuiBox-root', generateClassName } = options; diff --git a/packages/mui-system/src/createBox.spec.tsx b/packages/mui-system/src/createBox/createBox.spec.tsx similarity index 100% rename from packages/mui-system/src/createBox.spec.tsx rename to packages/mui-system/src/createBox/createBox.spec.tsx diff --git a/packages/mui-system/src/createBox.test.js b/packages/mui-system/src/createBox/createBox.test.js similarity index 100% rename from packages/mui-system/src/createBox.test.js rename to packages/mui-system/src/createBox/createBox.test.js diff --git a/packages/mui-system/src/createBox/index.ts b/packages/mui-system/src/createBox/index.ts new file mode 100644 index 00000000000000..93262690e07c97 --- /dev/null +++ b/packages/mui-system/src/createBox/index.ts @@ -0,0 +1,2 @@ +'use client'; +export { default } from './createBox'; diff --git a/packages/mui-system/src/createStyled.d.ts b/packages/mui-system/src/createStyled/createStyled.d.ts similarity index 91% rename from packages/mui-system/src/createStyled.d.ts rename to packages/mui-system/src/createStyled/createStyled.d.ts index 6f4053f3d2eb89..d34784d02ffba0 100644 --- a/packages/mui-system/src/createStyled.d.ts +++ b/packages/mui-system/src/createStyled/createStyled.d.ts @@ -3,8 +3,8 @@ import { CreateMUIStyled as CreateMUIStyledStyledEngine, CSSInterpolation, } from '@mui/styled-engine'; -import styleFunctionSx, { SxProps } from './styleFunctionSx'; -import { Theme as DefaultTheme } from './createTheme'; +import styleFunctionSx, { SxProps } from '../styleFunctionSx'; +import { Theme as DefaultTheme } from '../createTheme'; export function shouldForwardProp(propName: PropertyKey): boolean; diff --git a/packages/mui-system/src/createStyled.js b/packages/mui-system/src/createStyled/createStyled.js similarity index 98% rename from packages/mui-system/src/createStyled.js rename to packages/mui-system/src/createStyled/createStyled.js index eaaf392f62cb8c..3c01934e020172 100644 --- a/packages/mui-system/src/createStyled.js +++ b/packages/mui-system/src/createStyled/createStyled.js @@ -3,8 +3,8 @@ import styledEngineStyled, { internal_processStyles as processStyles } from '@mu import { isPlainObject } from '@mui/utils/deepmerge'; import capitalize from '@mui/utils/capitalize'; import getDisplayName from '@mui/utils/getDisplayName'; -import createTheme from './createTheme'; -import styleFunctionSx from './styleFunctionSx'; +import createTheme from '../createTheme'; +import styleFunctionSx from '../styleFunctionSx'; function isEmpty(obj) { return Object.keys(obj).length === 0; diff --git a/packages/mui-system/src/createStyled/index.ts b/packages/mui-system/src/createStyled/index.ts new file mode 100644 index 00000000000000..d827d43448643e --- /dev/null +++ b/packages/mui-system/src/createStyled/index.ts @@ -0,0 +1,3 @@ +'use client'; +export { default } from './createStyled'; +export * from './createStyled'; diff --git a/packages/mui-system/src/createTheme/createBreakpoints.d.ts b/packages/mui-system/src/createTheme/createBreakpoints.d.ts index 4404933d0e9b5e..9486f3b68aa224 100644 --- a/packages/mui-system/src/createTheme/createBreakpoints.d.ts +++ b/packages/mui-system/src/createTheme/createBreakpoints.d.ts @@ -31,13 +31,13 @@ export interface Breakpoints { /** * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px. * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key (inclusive). - * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query) + * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query) */ up: (key: Breakpoint | number) => string; /** * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px. * @returns A media query string ready to be used with most styling solutions, which matches screen widths less than the screen size given by the breakpoint key (exclusive). - * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query) + * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query) */ down: (key: Breakpoint | number) => string; /** @@ -45,14 +45,14 @@ export interface Breakpoints { * @param end - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px. * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than * the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive). - * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query) + * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query) */ between: (start: Breakpoint | number, end: Breakpoint | number) => string; /** * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px. * @returns A media query string ready to be used with most styling solutions, which matches screen widths starting from * the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive). - * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query) + * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query) */ only: (key: Breakpoint) => string; /** diff --git a/packages/mui-system/src/createTheme/createSpacing.test.ts b/packages/mui-system/src/createTheme/createSpacing.test.ts index dbbe9eae433c45..41f917b4c881bf 100644 --- a/packages/mui-system/src/createTheme/createSpacing.test.ts +++ b/packages/mui-system/src/createTheme/createSpacing.test.ts @@ -16,6 +16,8 @@ describe('createSpacing', () => { expect(spacing(2)).to.equal('4px'); spacing = createSpacing((factor: number) => `${0.25 * factor}rem`); expect(spacing(2)).to.equal('0.5rem'); + spacing = createSpacing('0.5rem'); + expect(spacing(2)).to.equal('calc(2 * 0.5rem)'); }); it('should support recursion', () => { diff --git a/packages/mui-system/src/createTheme/createSpacing.ts b/packages/mui-system/src/createTheme/createSpacing.ts index 3e0db4679233ce..67c654e0e10c1e 100644 --- a/packages/mui-system/src/createTheme/createSpacing.ts +++ b/packages/mui-system/src/createTheme/createSpacing.ts @@ -2,6 +2,7 @@ import { createUnarySpacing } from '../spacing'; export type SpacingOptions = | number + | string | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) @@ -24,18 +25,19 @@ export interface Spacing { ): string; } -export default function createSpacing(spacingInput: SpacingOptions = 8): Spacing { - // Already transformed. - if ((spacingInput as any).mui) { - return spacingInput as Spacing; - } - +export default function createSpacing( + spacingInput: SpacingOptions = 8, // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout. // Smaller components, such as icons, can align to a 4dp grid. // https://m2.material.io/design/layout/understanding-layout.html - const transform = createUnarySpacing({ + transform = createUnarySpacing({ spacing: spacingInput, - }); + }), +): Spacing { + // Already transformed. + if ((spacingInput as any).mui) { + return spacingInput as Spacing; + } const spacing = (...argsInput: ReadonlyArray): string => { if (process.env.NODE_ENV !== 'production') { diff --git a/packages/mui-system/src/cssGrid/cssGrid.d.ts b/packages/mui-system/src/cssGrid/cssGrid.d.ts new file mode 100644 index 00000000000000..d68f696db27e58 --- /dev/null +++ b/packages/mui-system/src/cssGrid/cssGrid.d.ts @@ -0,0 +1,3 @@ +import { PropsFor, grid } from '../Box'; + +export type CssGridProps = PropsFor; diff --git a/packages/mui-system/src/cssGrid.js b/packages/mui-system/src/cssGrid/cssGrid.js similarity index 91% rename from packages/mui-system/src/cssGrid.js rename to packages/mui-system/src/cssGrid/cssGrid.js index 3b91c00d86a3ee..68df8359f79cca 100644 --- a/packages/mui-system/src/cssGrid.js +++ b/packages/mui-system/src/cssGrid/cssGrid.js @@ -1,8 +1,8 @@ -import style from './style'; -import compose from './compose'; -import { createUnaryUnit, getValue } from './spacing'; -import { handleBreakpoints } from './breakpoints'; -import responsivePropType from './responsivePropType'; +import style from '../style'; +import compose from '../compose'; +import { createUnaryUnit, getValue } from '../spacing'; +import { handleBreakpoints } from '../breakpoints'; +import responsivePropType from '../responsivePropType'; // false positive // eslint-disable-next-line react/function-component-definition diff --git a/packages/mui-system/src/cssGrid.test.js b/packages/mui-system/src/cssGrid/cssGrid.test.js similarity index 100% rename from packages/mui-system/src/cssGrid.test.js rename to packages/mui-system/src/cssGrid/cssGrid.test.js diff --git a/packages/mui-system/src/cssGrid/index.ts b/packages/mui-system/src/cssGrid/index.ts new file mode 100644 index 00000000000000..606a39450c07a6 --- /dev/null +++ b/packages/mui-system/src/cssGrid/index.ts @@ -0,0 +1,3 @@ +'use client'; +export { default } from './cssGrid'; +export * from './cssGrid'; diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts index a3219951a3bef5..b8dc3ff9a2d703 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts @@ -142,14 +142,6 @@ export default function createCssVarsProvider< * variants from those tokens. */ resolveTheme?: (theme: any) => any; // the type is any because it depends on the design system. - /** - * @internal - * A function that returns a list of variables that will be excluded from the `colorSchemeSelector` (:root by default) - * - * Some variables are intended to be used in a specific color scheme only. They should be excluded when the default mode is set to the color scheme. - * This is introduced to fix https://github.com/mui/material-ui/issues/34084 - */ - excludeVariablesFromRoot?: (cssVarPrefix: string) => string[]; }, ): CreateCssVarsProviderResult; diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js index e4969c4ad5b44e..22f781020af1a5 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js @@ -1,7 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import MuiError from '@mui/internal-babel-macros/MuiError.macro'; -import deepmerge from '@mui/utils/deepmerge'; import { GlobalStyles } from '@mui/styled-engine'; import { useTheme as muiUseTheme } from '@mui/private-theming'; import ThemeProvider from '../ThemeProvider'; @@ -32,7 +31,6 @@ export default function createCssVarsProvider(options) { defaultColorScheme: designSystemColorScheme, disableTransitionOnChange: designSystemTransitionOnChange = false, resolveTheme, - excludeVariablesFromRoot, } = options; if ( @@ -86,7 +84,6 @@ export default function createCssVarsProvider(options) { const { colorSchemes = {}, components = {}, - generateCssVars = () => ({ vars: {}, css: {} }), cssVarPrefix, ...restThemeProp } = scopedTheme || themeProp; @@ -145,8 +142,8 @@ export default function createCssVarsProvider(options) { return colorScheme; })(); - // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step) - const { css: rootCss, vars: rootVars } = generateCssVars(); + // 2. get the `vars` object that refers to the CSS custom properties + const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars; // 3. Start composing the theme object const theme = { @@ -154,18 +151,14 @@ export default function createCssVarsProvider(options) { components, colorSchemes, cssVarPrefix, - vars: rootVars, - getColorSchemeSelector: (targetColorScheme) => `[${attribute}="${targetColorScheme}"] &`, + vars: themeVars, }; + if (typeof theme.generateSpacing === 'function') { + theme.spacing = theme.generateSpacing(); + } - // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step) - // The default color scheme stylesheet is constructed to have the least CSS specificity. - // The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet. - const defaultColorSchemeStyleSheet = {}; - const otherColorSchemesStyleSheet = {}; + // 4. Resolve the color scheme and merge it to the theme Object.entries(colorSchemes).forEach(([key, scheme]) => { - const { css, vars } = generateCssVars(key); - theme.vars = deepmerge(theme.vars, vars); if (key === calculatedColorScheme) { // 4.1 Merge the selected color scheme to the theme Object.keys(scheme).forEach((schemeKey) => { @@ -183,33 +176,24 @@ export default function createCssVarsProvider(options) { theme.palette.colorScheme = key; } } - const resolvedDefaultColorScheme = (() => { - if (typeof defaultColorScheme === 'string') { - return defaultColorScheme; - } - if (defaultMode === 'dark') { - return defaultColorScheme.dark; - } - return defaultColorScheme.light; - })(); - if (key === resolvedDefaultColorScheme) { - if (excludeVariablesFromRoot) { - const excludedVariables = {}; - excludeVariablesFromRoot(cssVarPrefix).forEach((cssVar) => { - excludedVariables[cssVar] = css[cssVar]; - delete css[cssVar]; - }); - defaultColorSchemeStyleSheet[`[${attribute}="${key}"]`] = excludedVariables; - } - defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = css; - } else { - otherColorSchemesStyleSheet[ - `${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]` - ] = css; - } }); + const resolvedDefaultColorScheme = (() => { + if (typeof defaultColorScheme === 'string') { + return defaultColorScheme; + } + if (defaultMode === 'dark') { + return defaultColorScheme.dark; + } + return defaultColorScheme.light; + })(); + themeProp.defaultColorScheme = resolvedDefaultColorScheme; + themeProp.colorSchemeSelector = colorSchemeSelector; + themeProp.attribute = attribute; - theme.vars = deepmerge(theme.vars, rootVars); + if (!theme.getColorSchemeSelector) { + theme.getColorSchemeSelector = (targetColorScheme) => + `[${attribute}="${targetColorScheme}"] &`; + } // 5. Declaring effects // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet. @@ -279,9 +263,9 @@ export default function createCssVarsProvider(options) { {shouldGenerateStyleSheet && ( - - - + {(theme.generateStyleSheets?.() || []).map((styles, index) => ( + + ))} )} { , ); - expect(document.head.children[document.head.children.length - 1].textContent).not.to.equal( + expect(document.head.children[document.head.children.length - 1]?.textContent).not.to.equal( DISABLE_CSS_TRANSITION, ); fireEvent.click(screen.getByRole('button', { name: 'change to dark' })); - expect(document.head.children[document.head.children.length - 1].textContent).to.equal( + expect(document.head.children[document.head.children.length - 1]?.textContent).to.equal( DISABLE_CSS_TRANSITION, ); expect(screen.getByTestId('current-mode').textContent).to.equal('dark'); clock.runToLast(); - expect(document.head.children[document.head.children.length - 1].textContent).not.to.equal( + expect(document.head.children[document.head.children.length - 1]?.textContent).not.to.equal( DISABLE_CSS_TRANSITION, ); }); @@ -315,17 +315,17 @@ describe('createCssVarsProvider', () => { , ); - expect(document.head.children[document.head.children.length - 1].textContent).not.to.equal( + expect(document.head.children[document.head.children.length - 1]?.textContent).not.to.equal( DISABLE_CSS_TRANSITION, ); fireEvent.click(screen.getByRole('button', { name: 'change to dark' })); - expect(document.head.children[document.head.children.length - 1].textContent).to.equal( + expect(document.head.children[document.head.children.length - 1]?.textContent).to.equal( DISABLE_CSS_TRANSITION, ); expect(screen.getByTestId('current-color-scheme').textContent).to.equal('dark'); clock.runToLast(); - expect(document.head.children[document.head.children.length - 1].textContent).not.to.equal( + expect(document.head.children[document.head.children.length - 1]?.textContent).not.to.equal( DISABLE_CSS_TRANSITION, ); }); @@ -353,11 +353,11 @@ describe('createCssVarsProvider', () => { , ); - expect(document.head.children[document.head.children.length - 1].textContent).not.to.equal( + expect(document.head.children[document.head.children.length - 1]?.textContent).not.to.equal( DISABLE_CSS_TRANSITION, ); fireEvent.click(screen.getByRole('button', { name: 'change to dark' })); - expect(document.head.children[document.head.children.length - 1].textContent).not.to.equal( + expect(document.head.children[document.head.children.length - 1]?.textContent).not.to.equal( DISABLE_CSS_TRANSITION, ); expect(screen.getByTestId('current-mode').textContent).to.equal('dark'); @@ -386,11 +386,11 @@ describe('createCssVarsProvider', () => { , ); - expect(document.head.children[document.head.children.length - 1].textContent).not.to.equal( + expect(document.head.children[document.head.children.length - 1]?.textContent).not.to.equal( DISABLE_CSS_TRANSITION, ); fireEvent.click(screen.getByRole('button', { name: 'change to dark' })); - expect(document.head.children[document.head.children.length - 1].textContent).not.to.equal( + expect(document.head.children[document.head.children.length - 1]?.textContent).not.to.equal( DISABLE_CSS_TRANSITION, ); expect(screen.getByTestId('current-color-scheme').textContent).to.equal('dark'); diff --git a/packages/mui-system/src/cssVars/createCssVarsTheme.ts b/packages/mui-system/src/cssVars/createCssVarsTheme.ts index 7400521b1a9c04..55807886fbfbbb 100644 --- a/packages/mui-system/src/cssVars/createCssVarsTheme.ts +++ b/packages/mui-system/src/cssVars/createCssVarsTheme.ts @@ -6,15 +6,19 @@ interface Theme extends DefaultCssVarsTheme { } function createCssVarsTheme>(theme: T) { - const { cssVarPrefix, shouldSkipGeneratingVar, ...otherTheme } = theme; + const output: any = theme; + const result = prepareCssVars, ThemeVars>( + output, + { + ...theme, + prefix: theme.cssVarPrefix, + }, + ); + output.vars = result.vars; + output.generateThemeVars = result.generateThemeVars; + output.generateStyleSheets = result.generateStyleSheets; - return { - ...theme, - ...prepareCssVars, ThemeVars>(otherTheme, { - prefix: cssVarPrefix, - shouldSkipGeneratingVar, - }), - }; + return output as T & typeof result; } export default createCssVarsTheme; diff --git a/packages/mui-system/src/cssVars/cssVarsParser.test.ts b/packages/mui-system/src/cssVars/cssVarsParser.test.ts index 25c4672c5da9a2..f8b4e58d015b32 100644 --- a/packages/mui-system/src/cssVars/cssVarsParser.test.ts +++ b/packages/mui-system/src/cssVars/cssVarsParser.test.ts @@ -359,6 +359,21 @@ describe('cssVarsParser', () => { }); }); + it('varsWithDefaults are suffixed with px from array', () => { + const { varsWithDefaults } = cssVarsParser({ + spacing: [0, 1, 2, 6, 16], + }); + expect(varsWithDefaults).to.deep.equal({ + spacing: [ + 'var(--spacing-0, 0px)', + 'var(--spacing-1, 1px)', + 'var(--spacing-2, 2px)', + 'var(--spacing-3, 6px)', + 'var(--spacing-4, 16px)', + ], + }); + }); + it('should add a fallback value', () => { const { varsWithDefaults } = cssVarsParser({ palette: { diff --git a/packages/mui-system/src/cssVars/cssVarsParser.ts b/packages/mui-system/src/cssVars/cssVarsParser.ts index a7e241bfa11889..0e4113f55fb7bc 100644 --- a/packages/mui-system/src/cssVars/cssVarsParser.ts +++ b/packages/mui-system/src/cssVars/cssVarsParser.ts @@ -138,10 +138,11 @@ export default function cssVarsParser>( if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) { // only create css & var if `shouldSkipGeneratingVar` return false const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`; - Object.assign(css, { [cssVar]: getCssValue(keys, value) }); + const resolvedValue = getCssValue(keys, value); + Object.assign(css, { [cssVar]: resolvedValue }); assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys); - assignNestedKeys(varsWithDefaults, keys, `var(${cssVar}, ${value})`, arrayKeys); + assignNestedKeys(varsWithDefaults, keys, `var(${cssVar}, ${resolvedValue})`, arrayKeys); } } }, diff --git a/packages/mui-system/src/cssVars/prepareCssVars.test.ts b/packages/mui-system/src/cssVars/prepareCssVars.test.ts index 4de3389c90cd12..09a6c267f2a4b7 100644 --- a/packages/mui-system/src/cssVars/prepareCssVars.test.ts +++ b/packages/mui-system/src/cssVars/prepareCssVars.test.ts @@ -2,7 +2,43 @@ import { expect } from 'chai'; import prepareCssVars from './prepareCssVars'; describe('prepareCssVars', () => { - it('`generateCssVars` should always return a new object', () => { + it('`getSelector` should always get a fresh copy of the css', () => { + const result = prepareCssVars( + { + colorSchemes: { + light: { + color: 'red', + }, + dark: { + color: 'blue', + }, + }, + }, + { + getSelector: (colorScheme, css) => { + const color = css['--color']; + delete css['--color']; + return { + [`.${colorScheme}`]: { + background: color, + }, + }; + }, + }, + ); + expect(result.generateStyleSheets()).to.deep.equal([ + { '.light': { background: 'red' } }, + { '.dark': { background: 'blue' } }, + ]); + + // run again should have the same result + expect(result.generateStyleSheets()).to.deep.equal([ + { '.light': { background: 'red' } }, + { '.dark': { background: 'blue' } }, + ]); + }); + + it('delete css fields should not affect the next call', () => { const result = prepareCssVars({ colorSchemes: { dark: { @@ -11,29 +47,160 @@ describe('prepareCssVars', () => { }, }); - const { css: css1 } = result.generateCssVars('dark'); - const { css: css2 } = result.generateCssVars('dark'); + const css1 = result.generateStyleSheets(); + + delete css1[0]['[data-color-scheme="dark"]']; + + expect(css1[0]).to.deep.equal({}); - expect(css1).to.not.equal(css2); + const css2 = result.generateStyleSheets(); + + expect(css2[0]).to.deep.equal({ '[data-color-scheme="dark"]': { '--color': 'red' } }); }); - it('delete css fields should not affect the next call', () => { + it('produce theme vars with defaults', () => { const result = prepareCssVars({ + defaultColorScheme: 'dark', colorSchemes: { dark: { color: 'red', }, + light: { + color: 'green', + }, + }, + fontSize: { + base: '1rem', + }, + }); + expect(result.vars).to.deep.equal({ + color: 'var(--color, red)', + fontSize: { + base: 'var(--fontSize-base, 1rem)', }, }); + }); - const { css: css1 } = result.generateCssVars('dark'); + it('`generateThemeVars` should have the right structure', () => { + const result = prepareCssVars({ + defaultColorScheme: 'dark', + colorSchemes: { + dark: { + color: 'red', + }, + light: { + color: 'green', + }, + }, + fontSize: { + base: '1rem', + }, + }); + expect(result.generateThemeVars()).to.deep.equal({ + color: 'var(--color)', + fontSize: { + base: 'var(--fontSize-base)', + }, + }); + }); - delete css1['--color']; + it('`generateThemeVars` should have the provided prefix', () => { + const result = prepareCssVars( + { + defaultColorScheme: 'dark', + colorSchemes: { + dark: { + color: 'red', + }, + light: { + color: 'green', + }, + }, + fontSize: { + base: '1rem', + }, + }, + { prefix: 'mui' }, + ); + expect(result.generateThemeVars()).to.deep.equal({ + color: 'var(--mui-color)', + fontSize: { + base: 'var(--mui-fontSize-base)', + }, + }); + }); - expect(css1).to.deep.equal({}); + it('`generateStyleSheets` should have the right sequence', () => { + const result = prepareCssVars({ + defaultColorScheme: 'dark', + colorSchemes: { + dark: { + color: 'red', + }, + light: { + color: 'green', + }, + }, + fontSize: { + base: '1rem', + }, + }); + + const stylesheets = result.generateStyleSheets(); + expect(stylesheets).to.deep.equal([ + { ':root': { '--fontSize-base': '1rem' } }, + { '[data-color-scheme="dark"]': { '--color': 'red' } }, + { '[data-color-scheme="light"]': { '--color': 'green' } }, + ]); + }); - const { css: css2 } = result.generateCssVars('dark'); + it('`generateStyleSheets` respect the `getSelector` input', () => { + const result = prepareCssVars( + { + defaultColorScheme: 'dark', + colorSchemes: { + dark: { + color: 'red', + background: '#000', + }, + light: { + color: 'green', + background: '#fff', + }, + }, + fontSize: { + base: '1rem', + }, + }, + { + prefix: 'mui', + getSelector: (colorScheme, css) => { + if (colorScheme === 'dark') { + const exclusion: Record = {}; + Object.keys(css).forEach((key) => { + if (key.endsWith('background')) { + exclusion[key] = css[key]; + delete css[key]; + } + }); + return { + '.dark': exclusion, + '.root, .dark': css, + }; + } + if (colorScheme) { + return `.${colorScheme}`; + } + return '.root'; + }, + }, + ); - expect(css2).to.deep.equal({ '--color': 'red' }); + const stylesheets = result.generateStyleSheets(); + expect(stylesheets).to.deep.equal([ + { '.root': { '--mui-fontSize-base': '1rem' } }, + { '.dark': { '--mui-background': '#000' }, '.root, .dark': { '--mui-color': 'red' } }, + { '.light': { '--mui-color': 'green', '--mui-background': '#fff' } }, + ]); }); }); diff --git a/packages/mui-system/src/cssVars/prepareCssVars.ts b/packages/mui-system/src/cssVars/prepareCssVars.ts index a9d5e456406ec1..b587266ad57c25 100644 --- a/packages/mui-system/src/cssVars/prepareCssVars.ts +++ b/packages/mui-system/src/cssVars/prepareCssVars.ts @@ -2,21 +2,24 @@ import deepmerge from '@mui/utils/deepmerge'; import cssVarsParser from './cssVarsParser'; export interface DefaultCssVarsTheme { + attribute?: string; colorSchemes?: Record; defaultColorScheme?: string; } -function prepareCssVars< - T extends DefaultCssVarsTheme, - ThemeVars extends Record, - Selector = any, ->( +function prepareCssVars>( theme: T, - parserConfig?: { + { + getSelector, + ...parserConfig + }: { prefix?: string; shouldSkipGeneratingVar?: (objectPathKeys: Array, value: string | number) => boolean; - getSelector?: (colorScheme: string | undefined, css: Record) => Selector; - }, + getSelector?: ( + colorScheme: keyof T['colorSchemes'] | undefined, + css: Record, + ) => string | Record; + } = {}, ) { // @ts-ignore - ignore components do not exist const { colorSchemes = {}, components, defaultColorScheme = 'light', ...otherTheme } = theme; @@ -29,39 +32,64 @@ function prepareCssVars< const colorSchemesMap: Record; vars: ThemeVars }> = {}; - const { [defaultColorScheme]: light, ...otherColorSchemes } = colorSchemes; + const { [defaultColorScheme]: defaultScheme, ...otherColorSchemes } = colorSchemes; Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => { const { vars, css, varsWithDefaults } = cssVarsParser(scheme, parserConfig); themeVars = deepmerge(themeVars, varsWithDefaults); colorSchemesMap[key] = { css, vars }; }); - if (light) { + if (defaultScheme) { // default color scheme vars should be merged last to set as default - const { css, vars, varsWithDefaults } = cssVarsParser(light, parserConfig); + const { css, vars, varsWithDefaults } = cssVarsParser(defaultScheme, parserConfig); themeVars = deepmerge(themeVars, varsWithDefaults); colorSchemesMap[defaultColorScheme] = { css, vars }; } - const generateCssVars = (colorScheme?: string) => { - if (!colorScheme) { - const css = { ...rootCss }; - return { + const generateThemeVars = () => { + let vars = { ...rootVars }; + Object.entries(colorSchemesMap).forEach(([, { vars: schemeVars }]) => { + vars = deepmerge(vars, schemeVars); + }); + return vars; + }; + + const generateStyleSheets = () => { + const stylesheets: Array> = []; + const colorScheme = theme.defaultColorScheme || 'light'; + function insertStyleSheet(selector: string | object, css: Record) { + if (Object.keys(css).length) { + stylesheets.push(typeof selector === 'string' ? { [selector]: { ...css } } : selector); + } + } + insertStyleSheet(getSelector?.(undefined, { ...rootCss }) || ':root', rootCss); + + const { [colorScheme]: defaultSchemeVal, ...rest } = colorSchemesMap; + + if (defaultSchemeVal) { + // default color scheme has to come before other color schemes + const { css } = defaultSchemeVal; + insertStyleSheet( + getSelector?.(colorScheme as keyof T['colorSchemes'], { ...css }) || + `[${theme.attribute || 'data-color-scheme'}="${colorScheme}"]`, css, - vars: rootVars, - selector: parserConfig?.getSelector?.(colorScheme, css) || ':root', - }; + ); } - const css = { ...colorSchemesMap[colorScheme].css }; - return { - css, - vars: colorSchemesMap[colorScheme].vars, - selector: parserConfig?.getSelector?.(colorScheme, css) || ':root', - }; + + Object.entries(rest).forEach(([key, { css }]) => { + insertStyleSheet( + getSelector?.(key as keyof T['colorSchemes'], { ...css }) || + `[${theme.attribute || 'data-color-scheme'}="${key}"]`, + css, + ); + }); + + return stylesheets; }; return { vars: themeVars, - generateCssVars, + generateThemeVars, + generateStyleSheets, }; } diff --git a/packages/mui-system/src/display/display.d.ts b/packages/mui-system/src/display/display.d.ts new file mode 100644 index 00000000000000..e22882d0d8bf00 --- /dev/null +++ b/packages/mui-system/src/display/display.d.ts @@ -0,0 +1,3 @@ +import { PropsFor, display } from '../Box'; + +export type DisplayProps = PropsFor; diff --git a/packages/mui-system/src/display.js b/packages/mui-system/src/display/display.js similarity index 89% rename from packages/mui-system/src/display.js rename to packages/mui-system/src/display/display.js index 63fdaf9265c569..182876855e329b 100644 --- a/packages/mui-system/src/display.js +++ b/packages/mui-system/src/display/display.js @@ -1,5 +1,5 @@ -import style from './style'; -import compose from './compose'; +import style from '../style'; +import compose from '../compose'; export const displayPrint = style({ prop: 'displayPrint', diff --git a/packages/mui-system/src/display/index.ts b/packages/mui-system/src/display/index.ts new file mode 100644 index 00000000000000..c0dcbfdc15af6c --- /dev/null +++ b/packages/mui-system/src/display/index.ts @@ -0,0 +1,3 @@ +'use client'; +export { default } from './display'; +export * from './display'; diff --git a/packages/mui-system/src/flexbox/flexbox.d.ts b/packages/mui-system/src/flexbox/flexbox.d.ts new file mode 100644 index 00000000000000..08cda0bd5dd09a --- /dev/null +++ b/packages/mui-system/src/flexbox/flexbox.d.ts @@ -0,0 +1,3 @@ +import { PropsFor, flexbox } from '../Box'; + +export type FlexboxProps = PropsFor; diff --git a/packages/mui-system/src/flexbox.js b/packages/mui-system/src/flexbox/flexbox.js similarity index 94% rename from packages/mui-system/src/flexbox.js rename to packages/mui-system/src/flexbox/flexbox.js index 9c789098dc4e81..52865cffae6128 100644 --- a/packages/mui-system/src/flexbox.js +++ b/packages/mui-system/src/flexbox/flexbox.js @@ -1,5 +1,5 @@ -import style from './style'; -import compose from './compose'; +import style from '../style'; +import compose from '../compose'; export const flexBasis = style({ prop: 'flexBasis', diff --git a/packages/mui-system/src/flexbox/index.ts b/packages/mui-system/src/flexbox/index.ts new file mode 100644 index 00000000000000..5c1c749951e820 --- /dev/null +++ b/packages/mui-system/src/flexbox/index.ts @@ -0,0 +1,3 @@ +'use client'; +export { default } from './flexbox'; +export * from './flexbox'; diff --git a/packages/mui-system/src/getThemeValue/getThemeValue.d.ts b/packages/mui-system/src/getThemeValue/getThemeValue.d.ts new file mode 100644 index 00000000000000..5630c5f587cba4 --- /dev/null +++ b/packages/mui-system/src/getThemeValue/getThemeValue.d.ts @@ -0,0 +1 @@ +export default function getThemeValue(prop: string, value: any, theme: object): any; diff --git a/packages/mui-system/src/getThemeValue.js b/packages/mui-system/src/getThemeValue/getThemeValue.js similarity index 74% rename from packages/mui-system/src/getThemeValue.js rename to packages/mui-system/src/getThemeValue/getThemeValue.js index 8df0642f67d7c8..89f25f47a701a8 100644 --- a/packages/mui-system/src/getThemeValue.js +++ b/packages/mui-system/src/getThemeValue/getThemeValue.js @@ -1,13 +1,13 @@ -import borders from './borders'; -import display from './display'; -import flexbox from './flexbox'; -import grid from './cssGrid'; -import positions from './positions'; -import palette from './palette'; -import shadows from './shadows'; -import sizing from './sizing'; -import spacing from './spacing'; -import typography from './typography'; +import borders from '../borders'; +import display from '../display'; +import flexbox from '../flexbox'; +import grid from '../cssGrid'; +import positions from '../positions'; +import palette from '../palette'; +import shadows from '../shadows'; +import sizing from '../sizing'; +import spacing from '../spacing'; +import typography from '../typography'; const filterPropsMapping = { borders: borders.filterProps, diff --git a/packages/mui-system/src/getThemeValue/index.ts b/packages/mui-system/src/getThemeValue/index.ts new file mode 100644 index 00000000000000..058c6ae97c7537 --- /dev/null +++ b/packages/mui-system/src/getThemeValue/index.ts @@ -0,0 +1,3 @@ +'use client'; +export { default } from './getThemeValue'; +export * from './getThemeValue'; diff --git a/packages/mui-system/src/index.d.ts b/packages/mui-system/src/index.d.ts index 825745b588f909..ea3580a981cc9f 100644 --- a/packages/mui-system/src/index.d.ts +++ b/packages/mui-system/src/index.d.ts @@ -1,91 +1,30 @@ -import { - ComposedStyleFunction, - StyleFunction, - PropsFor, - SimpleStyleFunction, - borders, - display, - flexbox, - grid, - palette, - positions, - shadows, - sizing, - typography, -} from './Box'; // disable automatic export export {}; -// borders.js -export const border: SimpleStyleFunction<'border'>; -export const borderTop: SimpleStyleFunction<'borderTop'>; -export const borderRight: SimpleStyleFunction<'borderRight'>; -export const borderBottom: SimpleStyleFunction<'borderBottom'>; -export const borderLeft: SimpleStyleFunction<'borderLeft'>; -export const borderColor: SimpleStyleFunction<'borderColor'>; -export const borderTopColor: SimpleStyleFunction<'borderTopColor'>; -export const borderRightColor: SimpleStyleFunction<'borderRightColor'>; -export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>; -export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>; -export const borderRadius: SimpleStyleFunction<'borderRadius'>; -export type BordersProps = PropsFor; - -// breakpoints.js -type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; -export { handleBreakpoints, mergeBreakpointsInOrder } from './breakpoints'; +export * from './borders'; -/** - * @returns An enhanced stylefunction that considers breakpoints - */ -export function breakpoints( - styleFunction: StyleFunction, -): StyleFunction> & Props>; - -export function compose>>(...args: T): ComposedStyleFunction; - -export type DisplayProps = PropsFor; - -// flexbox.js -export type FlexboxProps = PropsFor; - -// grid.js -export type GridProps = PropsFor; - -// palette.js -export const color: SimpleStyleFunction<'color'>; -export const bgcolor: SimpleStyleFunction<'bgcolor'>; -export type PaletteProps = PropsFor; - -export type PositionsProps = PropsFor; - -export type ShadowsProps = PropsFor; - -// * sizing.js TODO -export const width: SimpleStyleFunction<'width'>; -export const maxWidth: SimpleStyleFunction<'maxWidth'>; -export const minWidth: SimpleStyleFunction<'minWidth'>; -export const height: SimpleStyleFunction<'height'>; -export const maxHeight: SimpleStyleFunction<'maxHeight'>; -export const minHeight: SimpleStyleFunction<'minHeight'>; -export const sizeWidth: SimpleStyleFunction<'sizeWidth'>; -export const sizeHeight: SimpleStyleFunction<'sizeHeight'>; -export const boxSizing: SimpleStyleFunction<'boxSizing'>; -export type SizingProps = PropsFor; - -// typography.js -export const typographyVariant: SimpleStyleFunction<'typography'>; -export const fontFamily: SimpleStyleFunction<'fontFamily'>; -export const fontSize: SimpleStyleFunction<'fontSize'>; -export const fontStyle: SimpleStyleFunction<'fontStyle'>; -export const fontWeight: SimpleStyleFunction<'fontWeight'>; -export const letterSpacing: SimpleStyleFunction<'letterSpacing'>; -export const lineHeight: SimpleStyleFunction<'lineHeight'>; -export const textAlign: SimpleStyleFunction<'textAlign'>; -export const textTransform: SimpleStyleFunction<'textTransform'>; -export type TypographyProps = PropsFor; +export { default as breakpoints, handleBreakpoints, mergeBreakpointsInOrder } from './breakpoints'; + +export { default as compose } from './compose'; + +export * from './display'; + +export * from './flexbox'; + +export * from './cssGrid'; + +export * from './palette'; + +export * from './positions'; + +export * from './shadows'; + +export * from './sizing'; + +export * from './typography'; + +export { default as unstable_getThemeValue } from './getThemeValue'; -// eslint-disable-next-line @typescript-eslint/naming-convention -export function unstable_getThemeValue(prop: string, value: any, theme: object): any; /** * The `css` function accepts arrays as values for mobile-first responsive styles. * Note that this extends to non-theme values also. For example `display=['none', 'block']` diff --git a/packages/mui-system/src/memoize/index.ts b/packages/mui-system/src/memoize/index.ts new file mode 100644 index 00000000000000..66774a993cd6b0 --- /dev/null +++ b/packages/mui-system/src/memoize/index.ts @@ -0,0 +1,2 @@ +'use client'; +export { default } from './memoize'; diff --git a/packages/mui-system/src/memoize/memoize.d.ts b/packages/mui-system/src/memoize/memoize.d.ts new file mode 100644 index 00000000000000..e77ff91a3998cc --- /dev/null +++ b/packages/mui-system/src/memoize/memoize.d.ts @@ -0,0 +1,3 @@ +export default function memoize( + fn: (arg: ArgType) => ReturnType, +): (arg: ArgType) => ReturnType; diff --git a/packages/mui-system/src/memoize.js b/packages/mui-system/src/memoize/memoize.js similarity index 100% rename from packages/mui-system/src/memoize.js rename to packages/mui-system/src/memoize/memoize.js diff --git a/packages/mui-system/src/merge/index.ts b/packages/mui-system/src/merge/index.ts new file mode 100644 index 00000000000000..cb9274486a9fa1 --- /dev/null +++ b/packages/mui-system/src/merge/index.ts @@ -0,0 +1,2 @@ +'use client'; +export { default } from './merge'; diff --git a/packages/mui-system/src/merge.d.ts b/packages/mui-system/src/merge/merge.d.ts similarity index 100% rename from packages/mui-system/src/merge.d.ts rename to packages/mui-system/src/merge/merge.d.ts diff --git a/packages/mui-system/src/merge.js b/packages/mui-system/src/merge/merge.js similarity index 100% rename from packages/mui-system/src/merge.js rename to packages/mui-system/src/merge/merge.js diff --git a/packages/mui-system/src/merge.test.js b/packages/mui-system/src/merge/merge.test.js similarity index 100% rename from packages/mui-system/src/merge.test.js rename to packages/mui-system/src/merge/merge.test.js diff --git a/packages/mui-system/src/palette/index.ts b/packages/mui-system/src/palette/index.ts new file mode 100644 index 00000000000000..28fa2b57c680c3 --- /dev/null +++ b/packages/mui-system/src/palette/index.ts @@ -0,0 +1,3 @@ +'use client'; +export { default } from './palette'; +export * from './palette'; diff --git a/packages/mui-system/src/palette/palette.d.ts b/packages/mui-system/src/palette/palette.d.ts new file mode 100644 index 00000000000000..458c2bc94471a3 --- /dev/null +++ b/packages/mui-system/src/palette/palette.d.ts @@ -0,0 +1,5 @@ +import { PropsFor, SimpleStyleFunction, palette } from '../Box'; + +export const color: SimpleStyleFunction<'color'>; +export const bgcolor: SimpleStyleFunction<'bgcolor'>; +export type PaletteProps = PropsFor; diff --git a/packages/mui-system/src/palette.js b/packages/mui-system/src/palette/palette.js similarity index 90% rename from packages/mui-system/src/palette.js rename to packages/mui-system/src/palette/palette.js index 10a49c9ffb3d26..56548630b31a77 100644 --- a/packages/mui-system/src/palette.js +++ b/packages/mui-system/src/palette/palette.js @@ -1,5 +1,5 @@ -import style from './style'; -import compose from './compose'; +import style from '../style'; +import compose from '../compose'; export function paletteTransform(value, userValue) { if (userValue === 'grey') { diff --git a/packages/mui-system/src/palette.test.js b/packages/mui-system/src/palette/palette.test.js similarity index 100% rename from packages/mui-system/src/palette.test.js rename to packages/mui-system/src/palette/palette.test.js diff --git a/packages/mui-system/src/positions/index.ts b/packages/mui-system/src/positions/index.ts new file mode 100644 index 00000000000000..31aa77fbee438b --- /dev/null +++ b/packages/mui-system/src/positions/index.ts @@ -0,0 +1,3 @@ +'use client'; +export { default } from './positions'; +export * from './positions'; diff --git a/packages/mui-system/src/positions/positions.d.ts b/packages/mui-system/src/positions/positions.d.ts new file mode 100644 index 00000000000000..e9c6b8494fd188 --- /dev/null +++ b/packages/mui-system/src/positions/positions.d.ts @@ -0,0 +1,3 @@ +import { PropsFor, positions } from '../Box'; + +export type PositionsProps = PropsFor; diff --git a/packages/mui-system/src/positions.js b/packages/mui-system/src/positions/positions.js similarity index 86% rename from packages/mui-system/src/positions.js rename to packages/mui-system/src/positions/positions.js index 7915ec1e17774c..c323a4b178d935 100644 --- a/packages/mui-system/src/positions.js +++ b/packages/mui-system/src/positions/positions.js @@ -1,5 +1,5 @@ -import style from './style'; -import compose from './compose'; +import style from '../style'; +import compose from '../compose'; export const position = style({ prop: 'position', diff --git a/packages/mui-system/src/propsToClassKey/index.ts b/packages/mui-system/src/propsToClassKey/index.ts new file mode 100644 index 00000000000000..95022b3d29683b --- /dev/null +++ b/packages/mui-system/src/propsToClassKey/index.ts @@ -0,0 +1,2 @@ +'use client'; +export { default } from './propsToClassKey'; diff --git a/packages/mui-system/src/propsToClassKey.d.ts b/packages/mui-system/src/propsToClassKey/propsToClassKey.d.ts similarity index 100% rename from packages/mui-system/src/propsToClassKey.d.ts rename to packages/mui-system/src/propsToClassKey/propsToClassKey.d.ts diff --git a/packages/mui-system/src/propsToClassKey.js b/packages/mui-system/src/propsToClassKey/propsToClassKey.js similarity index 100% rename from packages/mui-system/src/propsToClassKey.js rename to packages/mui-system/src/propsToClassKey/propsToClassKey.js diff --git a/packages/mui-system/src/propsToClassKey.test.js b/packages/mui-system/src/propsToClassKey/propsToClassKey.test.js similarity index 100% rename from packages/mui-system/src/propsToClassKey.test.js rename to packages/mui-system/src/propsToClassKey/propsToClassKey.test.js diff --git a/packages/mui-system/src/responsivePropType/index.ts b/packages/mui-system/src/responsivePropType/index.ts new file mode 100644 index 00000000000000..ad75ae545bcf45 --- /dev/null +++ b/packages/mui-system/src/responsivePropType/index.ts @@ -0,0 +1,2 @@ +'use client'; +export { default } from './responsivePropType'; diff --git a/packages/mui-system/src/responsivePropType.d.ts b/packages/mui-system/src/responsivePropType/responsivePropType.d.ts similarity index 100% rename from packages/mui-system/src/responsivePropType.d.ts rename to packages/mui-system/src/responsivePropType/responsivePropType.d.ts diff --git a/packages/mui-system/src/responsivePropType.js b/packages/mui-system/src/responsivePropType/responsivePropType.js similarity index 100% rename from packages/mui-system/src/responsivePropType.js rename to packages/mui-system/src/responsivePropType/responsivePropType.js diff --git a/packages/mui-system/src/shadows/index.ts b/packages/mui-system/src/shadows/index.ts new file mode 100644 index 00000000000000..6dd3312387e486 --- /dev/null +++ b/packages/mui-system/src/shadows/index.ts @@ -0,0 +1,2 @@ +'use client'; +export { default } from './shadows'; diff --git a/packages/mui-system/src/shadows/shadows.d.ts b/packages/mui-system/src/shadows/shadows.d.ts new file mode 100644 index 00000000000000..08f6c541ec5050 --- /dev/null +++ b/packages/mui-system/src/shadows/shadows.d.ts @@ -0,0 +1,3 @@ +import { PropsFor, shadows } from '../Box'; + +export type ShadowsProps = PropsFor; diff --git a/packages/mui-system/src/shadows.js b/packages/mui-system/src/shadows/shadows.js similarity index 77% rename from packages/mui-system/src/shadows.js rename to packages/mui-system/src/shadows/shadows.js index d8222d9acf4657..56ff37d7589d39 100644 --- a/packages/mui-system/src/shadows.js +++ b/packages/mui-system/src/shadows/shadows.js @@ -1,4 +1,4 @@ -import style from './style'; +import style from '../style'; const boxShadow = style({ prop: 'boxShadow', diff --git a/packages/mui-system/src/sizing/index.ts b/packages/mui-system/src/sizing/index.ts new file mode 100644 index 00000000000000..5c30a7222568da --- /dev/null +++ b/packages/mui-system/src/sizing/index.ts @@ -0,0 +1,3 @@ +'use client'; +export { default } from './sizing'; +export * from './sizing'; diff --git a/packages/mui-system/src/sizing/sizing.d.ts b/packages/mui-system/src/sizing/sizing.d.ts new file mode 100644 index 00000000000000..3eef58f86351d0 --- /dev/null +++ b/packages/mui-system/src/sizing/sizing.d.ts @@ -0,0 +1,12 @@ +import { PropsFor, SimpleStyleFunction, sizing } from '../Box'; + +export const width: SimpleStyleFunction<'width'>; +export const maxWidth: SimpleStyleFunction<'maxWidth'>; +export const minWidth: SimpleStyleFunction<'minWidth'>; +export const height: SimpleStyleFunction<'height'>; +export const maxHeight: SimpleStyleFunction<'maxHeight'>; +export const minHeight: SimpleStyleFunction<'minHeight'>; +export const sizeWidth: SimpleStyleFunction<'sizeWidth'>; +export const sizeHeight: SimpleStyleFunction<'sizeHeight'>; +export const boxSizing: SimpleStyleFunction<'boxSizing'>; +export type SizingProps = PropsFor; diff --git a/packages/mui-system/src/sizing.js b/packages/mui-system/src/sizing/sizing.js similarity index 95% rename from packages/mui-system/src/sizing.js rename to packages/mui-system/src/sizing/sizing.js index 096a5bf9f85256..657baf6573db31 100644 --- a/packages/mui-system/src/sizing.js +++ b/packages/mui-system/src/sizing/sizing.js @@ -1,6 +1,6 @@ -import style from './style'; -import compose from './compose'; -import { handleBreakpoints, values as breakpointsValues } from './breakpoints'; +import style from '../style'; +import compose from '../compose'; +import { handleBreakpoints, values as breakpointsValues } from '../breakpoints'; export function sizingTransform(value) { return value <= 1 && value !== 0 ? `${value * 100}%` : value; diff --git a/packages/mui-system/src/sizing.test.js b/packages/mui-system/src/sizing/sizing.test.js similarity index 100% rename from packages/mui-system/src/sizing.test.js rename to packages/mui-system/src/sizing/sizing.test.js diff --git a/packages/mui-system/src/spacing/index.ts b/packages/mui-system/src/spacing/index.ts new file mode 100644 index 00000000000000..6bad9ad89d4dd5 --- /dev/null +++ b/packages/mui-system/src/spacing/index.ts @@ -0,0 +1,3 @@ +'use client'; +export { default } from './spacing'; +export * from './spacing'; diff --git a/packages/mui-system/src/spacing.d.ts b/packages/mui-system/src/spacing/spacing.d.ts similarity index 96% rename from packages/mui-system/src/spacing.d.ts rename to packages/mui-system/src/spacing/spacing.d.ts index b51cc4fcaee201..0e8929da993d1d 100644 --- a/packages/mui-system/src/spacing.d.ts +++ b/packages/mui-system/src/spacing/spacing.d.ts @@ -1,4 +1,4 @@ -import { SimpleStyleFunction, spacing, PropsFor } from './Box'; +import { SimpleStyleFunction, spacing, PropsFor } from '../Box'; export type SpacingValueType = string | number | null | undefined; export type SpacingProps = PropsFor; diff --git a/packages/mui-system/src/spacing.js b/packages/mui-system/src/spacing/spacing.js similarity index 83% rename from packages/mui-system/src/spacing.js rename to packages/mui-system/src/spacing/spacing.js index f22063fdfd1229..ecf0ada82d05a1 100644 --- a/packages/mui-system/src/spacing.js +++ b/packages/mui-system/src/spacing/spacing.js @@ -1,8 +1,8 @@ -import responsivePropType from './responsivePropType'; -import { handleBreakpoints } from './breakpoints'; -import { getPath } from './style'; -import merge from './merge'; -import memoize from './memoize'; +import responsivePropType from '../responsivePropType'; +import { handleBreakpoints } from '../breakpoints'; +import { getPath } from '../style'; +import merge from '../merge'; +import memoize from '../memoize'; const properties = { m: 'margin', @@ -93,30 +93,35 @@ export const paddingKeys = [ const spacingKeys = [...marginKeys, ...paddingKeys]; export function createUnaryUnit(theme, themeKey, defaultValue, propName) { - const themeSpacing = getPath(theme, themeKey, false) ?? defaultValue; + const themeSpacing = getPath(theme, themeKey, true) ?? defaultValue; - if (typeof themeSpacing === 'number') { - return (abs) => { - if (typeof abs === 'string') { - return abs; + if (typeof themeSpacing === 'number' || typeof themeSpacing === 'string') { + return (val) => { + if (typeof val === 'string') { + return val; } if (process.env.NODE_ENV !== 'production') { - if (typeof abs !== 'number') { + if (typeof val !== 'number') { console.error( - `MUI: Expected ${propName} argument to be a number or a string, got ${abs}.`, + `MUI: Expected ${propName} argument to be a number or a string, got ${val}.`, ); } } - return themeSpacing * abs; + + if (typeof themeSpacing === 'string') { + return `calc(${val} * ${themeSpacing})`; + } + return themeSpacing * val; }; } if (Array.isArray(themeSpacing)) { - return (abs) => { - if (typeof abs === 'string') { - return abs; + return (val) => { + if (typeof val === 'string') { + return val; } + const abs = Math.abs(val); if (process.env.NODE_ENV !== 'production') { if (!Number.isInteger(abs)) { @@ -137,7 +142,17 @@ export function createUnaryUnit(theme, themeKey, defaultValue, propName) { } } - return themeSpacing[abs]; + const transformed = themeSpacing[abs]; + + if (val >= 0) { + return transformed; + } + + if (typeof transformed === 'number') { + return -transformed; + } + + return `-${transformed}`; }; } @@ -166,18 +181,7 @@ export function getValue(transformer, propValue) { return propValue; } - const abs = Math.abs(propValue); - const transformed = transformer(abs); - - if (propValue >= 0) { - return transformed; - } - - if (typeof transformed === 'number') { - return -transformed; - } - - return `-${transformed}`; + return transformer(propValue); } export function getStyleFromPropValue(cssProperties, transformer) { diff --git a/packages/mui-system/src/spacing.test.js b/packages/mui-system/src/spacing/spacing.test.js similarity index 94% rename from packages/mui-system/src/spacing.test.js rename to packages/mui-system/src/spacing/spacing.test.js index 1b6a77996c6ecd..92f8f5306e94fd 100644 --- a/packages/mui-system/src/spacing.test.js +++ b/packages/mui-system/src/spacing/spacing.test.js @@ -36,6 +36,36 @@ describe('system spacing', () => { }); expect(output3).to.deep.equal({ padding: 4 }); }); + + it('should be able to use string value', () => { + const output1 = spacing({ + theme: { + spacing: '4px', + }, + p: 2, + }); + expect(output1).to.deep.equal({ padding: 'calc(2 * 4px)' }); + }); + + it('should be able to use string value with negative amount', () => { + const output1 = spacing({ + theme: { + spacing: '4px', + }, + p: -2, + }); + expect(output1).to.deep.equal({ padding: 'calc(-2 * 4px)' }); + }); + + it('should use the provided value directly if theme.spacing is a string', () => { + const output1 = spacing({ + theme: { + spacing: '4px', + }, + p: '1rem', + }); + expect(output1).to.deep.equal({ padding: '1rem' }); + }); }); describe('warnings', () => { diff --git a/packages/mui-system/src/style/index.ts b/packages/mui-system/src/style/index.ts new file mode 100644 index 00000000000000..2e4fa57df00254 --- /dev/null +++ b/packages/mui-system/src/style/index.ts @@ -0,0 +1,3 @@ +'use client'; +export { default } from './style'; +export * from './style'; diff --git a/packages/mui-system/src/style.d.ts b/packages/mui-system/src/style/style.d.ts similarity index 95% rename from packages/mui-system/src/style.d.ts rename to packages/mui-system/src/style/style.d.ts index 2f004defba6e59..122d516b151d55 100644 --- a/packages/mui-system/src/style.d.ts +++ b/packages/mui-system/src/style/style.d.ts @@ -1,5 +1,5 @@ import { CSSObject } from '@mui/styled-engine'; -import { StyleFunction } from './Box'; +import { StyleFunction } from '../Box'; export type TransformFunction = ( cssValue: unknown, diff --git a/packages/mui-system/src/style.js b/packages/mui-system/src/style/style.js similarity index 95% rename from packages/mui-system/src/style.js rename to packages/mui-system/src/style/style.js index 46e4044e34cbe8..6d19b59b3ecd08 100644 --- a/packages/mui-system/src/style.js +++ b/packages/mui-system/src/style/style.js @@ -1,6 +1,6 @@ import capitalize from '@mui/utils/capitalize'; -import responsivePropType from './responsivePropType'; -import { handleBreakpoints } from './breakpoints'; +import responsivePropType from '../responsivePropType'; +import { handleBreakpoints } from '../breakpoints'; export function getPath(obj, path, checkVars = true) { if (!path || typeof path !== 'string') { diff --git a/packages/mui-system/src/style.test.js b/packages/mui-system/src/style/style.test.js similarity index 100% rename from packages/mui-system/src/style.test.js rename to packages/mui-system/src/style/style.test.js diff --git a/packages/mui-system/src/styled/index.ts b/packages/mui-system/src/styled/index.ts new file mode 100644 index 00000000000000..fe2f75a1ca7742 --- /dev/null +++ b/packages/mui-system/src/styled/index.ts @@ -0,0 +1,2 @@ +'use client'; +export { default } from './styled'; diff --git a/packages/mui-system/src/styled.d.ts b/packages/mui-system/src/styled/styled.d.ts similarity index 55% rename from packages/mui-system/src/styled.d.ts rename to packages/mui-system/src/styled/styled.d.ts index 164bc4b29175f3..29c0e61bf4c022 100644 --- a/packages/mui-system/src/styled.d.ts +++ b/packages/mui-system/src/styled/styled.d.ts @@ -1,4 +1,4 @@ -import { CreateMUIStyled } from './createStyled'; +import { CreateMUIStyled } from '../createStyled'; declare const styled: CreateMUIStyled; diff --git a/packages/mui-system/src/styled.js b/packages/mui-system/src/styled/styled.js similarity index 56% rename from packages/mui-system/src/styled.js rename to packages/mui-system/src/styled/styled.js index ee27a4a3e30c9a..1778ad7a03ad08 100644 --- a/packages/mui-system/src/styled.js +++ b/packages/mui-system/src/styled/styled.js @@ -1,4 +1,4 @@ -import createStyled from './createStyled'; +import createStyled from '../createStyled'; const styled = createStyled(); diff --git a/packages/mui-system/src/styled.test.js b/packages/mui-system/src/styled/styled.test.js similarity index 100% rename from packages/mui-system/src/styled.test.js rename to packages/mui-system/src/styled/styled.test.js diff --git a/packages/mui-system/src/typography/index.ts b/packages/mui-system/src/typography/index.ts new file mode 100644 index 00000000000000..2f6cf00668c7c7 --- /dev/null +++ b/packages/mui-system/src/typography/index.ts @@ -0,0 +1,3 @@ +'use client'; +export { default } from './typography'; +export * from './typography'; diff --git a/packages/mui-system/src/typography/typography.d.ts b/packages/mui-system/src/typography/typography.d.ts new file mode 100644 index 00000000000000..7e34a5f11162e0 --- /dev/null +++ b/packages/mui-system/src/typography/typography.d.ts @@ -0,0 +1,12 @@ +import { PropsFor, SimpleStyleFunction, typography } from '../Box'; + +export const typographyVariant: SimpleStyleFunction<'typography'>; +export const fontFamily: SimpleStyleFunction<'fontFamily'>; +export const fontSize: SimpleStyleFunction<'fontSize'>; +export const fontStyle: SimpleStyleFunction<'fontStyle'>; +export const fontWeight: SimpleStyleFunction<'fontWeight'>; +export const letterSpacing: SimpleStyleFunction<'letterSpacing'>; +export const lineHeight: SimpleStyleFunction<'lineHeight'>; +export const textAlign: SimpleStyleFunction<'textAlign'>; +export const textTransform: SimpleStyleFunction<'textTransform'>; +export type TypographyProps = PropsFor; diff --git a/packages/mui-system/src/typography.js b/packages/mui-system/src/typography/typography.js similarity index 93% rename from packages/mui-system/src/typography.js rename to packages/mui-system/src/typography/typography.js index 2589bb4d0ae21a..f807f43fda31c5 100644 --- a/packages/mui-system/src/typography.js +++ b/packages/mui-system/src/typography/typography.js @@ -1,5 +1,5 @@ -import style from './style'; -import compose from './compose'; +import style from '../style'; +import compose from '../compose'; export const fontFamily = style({ prop: 'fontFamily', diff --git a/packages/mui-system/src/useTheme/index.ts b/packages/mui-system/src/useTheme/index.ts new file mode 100644 index 00000000000000..fc788b2994365a --- /dev/null +++ b/packages/mui-system/src/useTheme/index.ts @@ -0,0 +1,3 @@ +'use client'; +export { default } from './useTheme'; +export * from './useTheme'; diff --git a/packages/mui-system/src/useTheme.d.ts b/packages/mui-system/src/useTheme/useTheme.d.ts similarity index 62% rename from packages/mui-system/src/useTheme.d.ts rename to packages/mui-system/src/useTheme/useTheme.d.ts index 0c794b641f61dc..e035786c6d9bd7 100644 --- a/packages/mui-system/src/useTheme.d.ts +++ b/packages/mui-system/src/useTheme/useTheme.d.ts @@ -1,3 +1,3 @@ -import { Theme } from './createTheme'; +import { Theme } from '../createTheme'; export default function useTheme(defaultTheme?: T): T; diff --git a/packages/mui-system/src/useTheme.js b/packages/mui-system/src/useTheme/useTheme.js similarity index 64% rename from packages/mui-system/src/useTheme.js rename to packages/mui-system/src/useTheme/useTheme.js index 64abf3b3a8228a..74357049e8f68e 100644 --- a/packages/mui-system/src/useTheme.js +++ b/packages/mui-system/src/useTheme/useTheme.js @@ -1,6 +1,6 @@ 'use client'; -import createTheme from './createTheme'; -import useThemeWithoutDefault from './useThemeWithoutDefault'; +import createTheme from '../createTheme'; +import useThemeWithoutDefault from '../useThemeWithoutDefault'; export const systemDefaultTheme = createTheme(); diff --git a/packages/mui-system/src/useThemeWithoutDefault/index.ts b/packages/mui-system/src/useThemeWithoutDefault/index.ts new file mode 100644 index 00000000000000..7018fca5e9639a --- /dev/null +++ b/packages/mui-system/src/useThemeWithoutDefault/index.ts @@ -0,0 +1,2 @@ +'use client'; +export { default } from './useThemeWithoutDefault'; diff --git a/packages/mui-system/src/useThemeWithoutDefault.d.ts b/packages/mui-system/src/useThemeWithoutDefault/useThemeWithoutDefault.d.ts similarity index 100% rename from packages/mui-system/src/useThemeWithoutDefault.d.ts rename to packages/mui-system/src/useThemeWithoutDefault/useThemeWithoutDefault.d.ts diff --git a/packages/mui-system/src/useThemeWithoutDefault.js b/packages/mui-system/src/useThemeWithoutDefault/useThemeWithoutDefault.js similarity index 100% rename from packages/mui-system/src/useThemeWithoutDefault.js rename to packages/mui-system/src/useThemeWithoutDefault/useThemeWithoutDefault.js diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json index 1ec2250902f92c..106497783ed29e 100644 --- a/packages/mui-utils/package.json +++ b/packages/mui-utils/package.json @@ -40,7 +40,7 @@ }, "dependencies": { "@babel/runtime": "^7.23.9", - "@types/prop-types": "^15.7.11", + "@types/prop-types": "^15.7.12", "prop-types": "^15.8.1", "react-is": "^18.2.0" }, @@ -48,9 +48,9 @@ "@mui-internal/test-utils": "workspace:^", "@mui/internal-babel-macros": "workspace:^", "@mui/types": "workspace:^", - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/mocha": "^10.0.6", - "@types/node": "^18.19.25", + "@types/node": "^18.19.28", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "@types/react-is": "^18.2.4", diff --git a/packages/pigment-css-nextjs-plugin/package.json b/packages/pigment-css-nextjs-plugin/package.json index e7c718e1f3d5ee..48fc30fa15324f 100644 --- a/packages/pigment-css-nextjs-plugin/package.json +++ b/packages/pigment-css-nextjs-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@pigment-css/nextjs-plugin", - "version": "0.0.3", + "version": "0.0.4", "main": "build/index.js", "module": "build/index.mjs", "types": "build/index.d.ts", @@ -45,6 +45,7 @@ "loader.js", "next-font.js", "next-image.js", + "third-party-styled.js", "zero-virtual.css", "package.json", "LICENSE" diff --git a/packages/pigment-css-nextjs-plugin/src/index.ts b/packages/pigment-css-nextjs-plugin/src/index.ts index ecf7b1598687b2..6055f710f4ebd8 100644 --- a/packages/pigment-css-nextjs-plugin/src/index.ts +++ b/packages/pigment-css-nextjs-plugin/src/index.ts @@ -55,10 +55,15 @@ export function withPigment(nextConfig: NextConfig, pigmentConfig?: PigmentOptio placeholderCssFile: extractionFile, }, async asyncResolve(what: string, importer: string, stack: string[]) { + // Using the same stub file as "next/font". Should be updated in future to + // use it's own stub depdending on the actual usage. + if (what.startsWith('__barrel_optimize__')) { + return require.resolve('../next-font'); + } // Need to point to the react from node_modules during eval time. // Otherwise, next makes it point to its own version of react that // has a lot of RSC specific logic which is not actually needed. - if (what.startsWith('react') || what.startsWith('next')) { + if (what.startsWith('@babel') || what.startsWith('react') || what.startsWith('next')) { return require.resolve(what); } if (what === 'next/image') { @@ -67,6 +72,9 @@ export function withPigment(nextConfig: NextConfig, pigmentConfig?: PigmentOptio if (what.startsWith('next/font')) { return require.resolve('../next-font'); } + if (what.startsWith('@emotion/styled') || what.startsWith('styled-components')) { + return require.resolve('../third-party-styled'); + } if (asyncResolve) { return asyncResolve(what, importer, stack); } diff --git a/packages/pigment-css-nextjs-plugin/third-party-styled.js b/packages/pigment-css-nextjs-plugin/third-party-styled.js new file mode 100644 index 00000000000000..053f431428732b --- /dev/null +++ b/packages/pigment-css-nextjs-plugin/third-party-styled.js @@ -0,0 +1,4 @@ +/* eslint-env node */ +module.exports = function DummyStyled() { + return () => () => null; +}; diff --git a/packages/pigment-css-react/README.md b/packages/pigment-css-react/README.md index 6092ba58dfb061..736bc4c3e2c208 100644 --- a/packages/pigment-css-react/README.md +++ b/packages/pigment-css-react/README.md @@ -14,11 +14,12 @@ Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated sty - [Styled component as a CSS selector](#styled-component-as-a-css-selector) - [Typing props](#typing-props) - [Theming](#theming) - - [Accesing theme values](#accesing-theme-values) + - [Accessing theme values](#accessing-theme-values) - [CSS variables support](#css-variables-support) - [Color schemes](#color-schemes) - [Switching color schemes](#switching-color-schemes) - [TypeScript](#typescript) +- [Right-to-left support](#right-to-left-support) - [How-to guides](#how-to-guides) - [Coming from Emotion or styled-components](#coming-from-emotion-or-styled-components) @@ -48,8 +49,8 @@ cd pigment-css-nextjs-ts #### Manual installation ```bash -npm install @pigment-css/react -npm install --save-dev @pigment-css/nextjs-plugin +npm install @pigment-css/react@next +npm install --save-dev @pigment-css/nextjs-plugin@next ``` Then, in your `next.config.js` file, import the plugin and wrap the exported config object: @@ -94,8 +95,8 @@ cd pigment-css-vite-ts #### Manual installation ```bash -npm install @pigment-css/react -npm install --save-dev @pigment-css/vite-plugin +npm install @pigment-css/react@next +npm install --save-dev @pigment-css/vite-plugin@next ``` Then, in your Vite config file, import the plugin and pass it to the `plugins` array as shown: @@ -323,7 +324,7 @@ const Heading = styled('h1')({ }); ``` -Pigment CSS replaces the callback with a CSS variable and inject the value through inline style. This makes it possible to create a static CSS file while still allowing dynamic styles. +Pigment CSS replaces the callback with a CSS variable and injects the value through inline styles. This makes it possible to create a static CSS file while still allowing dynamic styles. ```css .Heading_class_akjsdfb { @@ -662,6 +663,94 @@ declare module '@pigment-css/react/theme' { } ``` +## Right-to-left support + +To support right-to-left (RTL) languages, add the `dir="rtl"` attribute to your app's `` element or any other equivalent top level container. Then, update your bundler config as follows to generate styles for both directions: + +### Next.js + +```js +const { withPigment } = require('@pigment-css/nextjs-plugin'); + +// ... +module.exports = withPigment(nextConfig, { + theme: yourCustomTheme, + // CSS output option + css: { + // Specify your default CSS authoring direction + defaultDirection: 'ltr', + // Generate CSS for the opposite of the `defaultDirection` + // This is set to `false` by default + generateForBothDir: true, + }, +}); +``` + +### Vite + +```js +import { pigment } from '@pigment-css/vite-plugin'; + +export default defineConfig({ + plugins: [ + pigment({ + theme: yourTheme, + css: { + // Specify your default CSS authoring direction + defaultDirection: 'ltr', + // Generate CSS for the opposite of the `defaultDirection` + // This is set to `false` by default + generateForBothDir: true, + }, + }), + // ... other plugins. + ], +}); +``` + +### Generated CSS + +For example, if you've specified `defaultDirection: 'ltr'` and `dir="rtl"`, and your authored CSS looks like this: + +```js +import { css } from '@pigment-css/react'; + +const className = css` + margin-left: 10px, + margin-right: 20px, + padding: '0 10px 20px 30px' +`; +``` + +Then the actual CSS output would be: + +```css +.cmip3v5 { + margin-left: 10px; + margin-right: 20px; + padding: 0 10px 20px 30px; +} + +[dir='rtl'] .cmip3v5 { + margin-right: 10px; + margin-left: 20px; + padding: 0 30px 20px 10px; +} +``` + +### Custom dir selector + +The default selector in the output CSS is `[dir=rtl]` or `[dir=ltr]`. You can customize it by passing an optional `getDirSelector` method to the `css` property in your bundler config: + +```js + css: { + getDirSelector(dir: string) { + // return a custom selector you'd like to use + return `:dir(${dir})`; + }, + }, +``` + ## How-to guides ### Coming from Emotion or styled-components diff --git a/packages/pigment-css-react/exports/remove-prop-types-plugin.js b/packages/pigment-css-react/exports/remove-prop-types-plugin.js new file mode 100644 index 00000000000000..98b4a7ee73fe90 --- /dev/null +++ b/packages/pigment-css-react/exports/remove-prop-types-plugin.js @@ -0,0 +1,5 @@ +Object.defineProperty(exports, '__esModule', { + value: true, +}); + +exports.default = require('../utils/remove-prop-types-plugin').removePropTypesPlugin; diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json index a86699f7bb56c7..b193e88ea76d16 100644 --- a/packages/pigment-css-react/package.json +++ b/packages/pigment-css-react/package.json @@ -1,6 +1,6 @@ { "name": "@pigment-css/react", - "version": "0.0.3", + "version": "0.0.4", "main": "build/index.js", "module": "build/index.mjs", "types": "build/index.d.ts", @@ -37,6 +37,7 @@ "@babel/parser": "^7.23.9", "@babel/types": "^7.23.9", "@emotion/css": "^11.11.2", + "@emotion/is-prop-valid": "^1.2.2", "@emotion/react": "^11.11.4", "@emotion/serialize": "^1.1.3", "@emotion/styled": "^11.11.0", @@ -48,22 +49,24 @@ "cssesc": "^3.0.0", "csstype": "^3.1.3", "lodash": "^4.17.21", - "stylis": "^4.3.1" + "stylis": "^4.3.1", + "stylis-plugin-rtl": "^2.1.1" }, "devDependencies": { "@babel/plugin-syntax-jsx": "^7.23.3", "@types/babel__core": "^7.20.5", "@types/babel__helper-module-imports": "^7.18.3", "@types/babel__helper-plugin-utils": "^7.10.3", - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/cssesc": "^3.0.2", "@types/lodash": "^4.17.0", "@types/mocha": "^10.0.6", - "@types/node": "^18.19.25", + "@types/node": "^18.19.28", "@types/react": "^18.2.55", "@types/stylis": "^4.2.5", "chai": "^4.4.1", "prettier": "^3.2.5", + "prop-types": "^15.8.1", "react": "^18.2.0" }, "peerDependencies": { @@ -97,8 +100,12 @@ "exports": { ".": { "types": "./build/index.d.ts", - "import": "./build/index.mjs", - "require": "./build/index.js" + "import": { + "types": "./build/index.d.mts", + "default": "./build/index.mjs" + }, + "require": "./build/index.js", + "default": "./theme/index.js" }, "./package.json": "./package.json", "./theme": { @@ -108,12 +115,17 @@ "default": "./theme/index.js" }, "./styles.css": { + "require": "./build/index.js", "default": "./styles.css" }, "./utils": { "types": "./utils/index.d.ts", - "import": "./utils/index.mjs", - "require": "./utils/index.js" + "import": { + "types": "./utils/index.d.mts", + "default": "./utils/index.mjs" + }, + "require": "./utils/index.js", + "default": "./utils/index.js" }, "./exports/generateAtomics": { "default": "./exports/generateAtomics.js" @@ -127,6 +139,9 @@ "./exports/sx-plugin": { "default": "./exports/sx-plugin.js" }, + "./exports/remove-prop-types-plugin": { + "default": "./exports/remove-prop-types-plugin.js" + }, "./exports/sx": { "default": "./exports/sx.js" }, @@ -135,9 +150,21 @@ }, "./Box": { "types": "./build/Box.d.ts", - "import": "./build/Box.mjs", + "import": { + "types": "./build/Box.d.mts", + "default": "./build/Box.mjs" + }, "require": "./build/Box.js", "default": "./build/Box.js" + }, + "./RtlProvider": { + "types": "./build/RtlProvider.d.ts", + "import": { + "types": "./build/RtlProvider.d.mts", + "default": "./build/RtlProvider.mjs" + }, + "require": "./build/RtlProvider.js", + "default": "./build/RtlProvider.js" } }, "nx": { diff --git a/packages/pigment-css-react/src/Box.jsx b/packages/pigment-css-react/src/Box.jsx index be87c121f7a3d4..235cb67cf10210 100644 --- a/packages/pigment-css-react/src/Box.jsx +++ b/packages/pigment-css-react/src/Box.jsx @@ -1,6 +1,6 @@ +/* eslint-disable react/prop-types */ import * as React from 'react'; -// eslint-disable-next-line react/prop-types export const Box = React.forwardRef( ( { @@ -46,6 +46,7 @@ export const Box = React.forwardRef( ...varStyles, }; + // eslint-disable-next-line react/jsx-filename-extension return ; }, ); diff --git a/packages/pigment-css-react/src/RtlProvider.tsx b/packages/pigment-css-react/src/RtlProvider.tsx new file mode 100644 index 00000000000000..0ad4de0fbfccd2 --- /dev/null +++ b/packages/pigment-css-react/src/RtlProvider.tsx @@ -0,0 +1,25 @@ +'use client'; +/** + * This package has it's own version of RtlProvider to avoid including + * @mui/system in the bundle if someone is not using it. + */ +import * as React from 'react'; + +type RtlContextType = boolean | undefined; + +type RtlProviderProps = { + value?: RtlContextType; +}; + +const RtlContext = React.createContext(false); + +function RtlProvider({ value, ...props }: RtlProviderProps) { + return ; +} + +export const useRtl = () => { + const value = React.useContext(RtlContext); + return value ?? false; +}; + +export default RtlProvider; diff --git a/packages/pigment-css-react/src/processors/styled.ts b/packages/pigment-css-react/src/processors/styled.ts index f9258edea8121e..fa2021df976340 100644 --- a/packages/pigment-css-react/src/processors/styled.ts +++ b/packages/pigment-css-react/src/processors/styled.ts @@ -62,7 +62,7 @@ type ComponentMeta = { }; /** - * Linaria tag processor responsible for converting complex `styled()()` calls + * WyW-in-JS tag processor responsible for converting complex `styled()()` calls * at build-time to simple `styled` calls supported by runtime. * * Ex - diff --git a/packages/pigment-css-react/src/styled.jsx b/packages/pigment-css-react/src/styled.js similarity index 60% rename from packages/pigment-css-react/src/styled.jsx rename to packages/pigment-css-react/src/styled.js index c9c88918c2e73f..0febf1e7df4512 100644 --- a/packages/pigment-css-react/src/styled.jsx +++ b/packages/pigment-css-react/src/styled.js @@ -1,5 +1,6 @@ import * as React from 'react'; import clsx from 'clsx'; +import isPropValid from '@emotion/is-prop-valid'; function getVariantClasses(componentProps, variants) { const { ownerState = {} } = componentProps; @@ -15,21 +16,26 @@ function getVariantClasses(componentProps, variants) { return variantClasses; } -/** - * @param {string} propKey - * @returns {boolean} - */ -function defaultShouldForwardProp(propKey) { - return propKey !== 'sx' && propKey !== 'as' && propKey !== 'ownerState'; +function isHtmlTag(tag) { + return ( + typeof tag === 'string' && + // 96 is one less than the char code + // for "a" so this is checking that + // it's a lowercase character + tag.charCodeAt(0) > 96 + ); } +const slotShouldForwardProp = (key) => key !== 'sx' && key !== 'as' && key !== 'ownerState'; +const rootShouldForwardProp = (key) => slotShouldForwardProp(key) && key !== 'classes'; + /** - * @typedef {typeof defaultShouldForwardProp} ShouldForwardProp + * @typedef {(propKey: string) => boolean} ShouldForwardProp */ /** * This is the runtime `styled` function that finally renders the component - * after transpilation through linaria. It makes sure to add the base classes, + * after transpilation through WyW-in-JS. It makes sure to add the base classes, * variant classes if they satisfy the prop value and also adds dynamic css * variables at runtime, if any. * @param {string | Function} tag @@ -40,17 +46,27 @@ function defaultShouldForwardProp(propKey) { * @param {Object} componentMeta.defaultProps Default props object copied over and inlined from theme object */ export default function styled(tag, componentMeta = {}) { - const { name, slot, shouldForwardProp = defaultShouldForwardProp } = componentMeta; + const { name, slot, shouldForwardProp } = componentMeta; + + let finalShouldForwardProp = shouldForwardProp; + if (!shouldForwardProp) { + if (isHtmlTag(tag)) { + finalShouldForwardProp = isPropValid; + } else if (slot === 'Root' || slot === 'root') { + finalShouldForwardProp = rootShouldForwardProp; + } else { + finalShouldForwardProp = slotShouldForwardProp; + } + } + const shouldUseAs = !finalShouldForwardProp('as'); /** - * @TODO - Filter props and only pass necessary props to children - * * This is the runtime `styled` function that finally renders the component - * after transpilation through linaria. It makes sure to add the base classes, + * after transpilation through WyW-in-JS. It makes sure to add the base classes, * variant classes if they satisfy the prop value and also adds dynamic css * variables at runtime, if any. * @param {string | Function} tag * @param {Object} options - * @param {string} options.displayName Set by linaria. Mostly is same as the variable name. For this code, ```const Comp = styled(...)(...)```, `displayName` will be `Comp`. + * @param {string} options.displayName Set by WyW-in-JS. Mostly is same as the variable name. For this code, ```const Comp = styled(...)(...)```, `displayName` will be `Comp`. * @param {string[]} options.classes List of class names that reference the inline css object styles. * @param {Object} options.vars Dynamically generated css variables inlined directly on the element for runtime styling. * @param {Object[]} options.variants @@ -62,26 +78,10 @@ export default function styled(tag, componentMeta = {}) { */ function scopedStyledWithOptions(options = {}) { const { displayName, classes = [], vars: cssVars = {}, variants = [] } = options; - let componentName = 'Component'; - - if (name) { - if (slot) { - componentName = `${name}${slot}`; - } else { - componentName = name; - } - } else if (displayName) { - componentName = displayName; - } - const StyledComponent = React.forwardRef(function StyledComponent( - // eslint-disable-next-line react/prop-types - { as, className, sx, style, ...props }, - ref, - ) { - // eslint-disable-next-line react/prop-types - const { ownerState, ...restProps } = props; - const Component = as ?? tag; + const StyledComponent = React.forwardRef(function StyledComponent(inProps, ref) { + const { as, className, sx, style, ownerState, ...props } = inProps; + const Component = (shouldUseAs && as) || tag; const varStyles = Object.entries(cssVars).reduce( (acc, [cssVariable, [variableFunction, isUnitLess]]) => { const value = variableFunction(props); @@ -97,9 +97,7 @@ export default function styled(tag, componentMeta = {}) { }, {}, ); - // eslint-disable-next-line react/prop-types const sxClass = typeof sx === 'string' ? sx : sx?.className; - // eslint-disable-next-line react/prop-types const sxVars = sx && typeof sx !== 'string' ? sx.vars : undefined; if (sxVars) { @@ -112,40 +110,31 @@ export default function styled(tag, componentMeta = {}) { }); } - const finalClassName = clsx(classes, sxClass, className, getVariantClasses(props, variants)); - const toPassProps = Object.keys(restProps) - .filter((item) => { - const res = shouldForwardProp(item); - if (res) { - return defaultShouldForwardProp(item); - } - return false; - }) - .reduce((acc, key) => { - acc[key] = restProps[key]; - return acc; - }, {}); + const finalClassName = clsx( + classes, + sxClass, + className, + getVariantClasses(inProps, variants), + ); + + const newProps = {}; + // eslint-disable-next-line no-restricted-syntax + for (const key in props) { + if (shouldUseAs && key === 'as') { + continue; + } - // eslint-disable-next-line no-underscore-dangle - if (!Component.__isStyled || typeof Component === 'string') { - return ( - // eslint-disable-next-line react/jsx-filename-extension - - ); + if (finalShouldForwardProp(key)) { + newProps[key] = props[key]; + } } return ( string; + }; }; type CssFnValueToVariableParams = { @@ -28,8 +50,6 @@ type CssFnValueToVariableParams = { themeImportIdentifier?: string; }; -// const expressionCache = new WeakMap(); - // @TODO - Implement default theme argument for non-theme config as well. function parseAndWrapExpression( functionString: string, diff --git a/packages/pigment-css-react/src/utils/extendTheme.ts b/packages/pigment-css-react/src/utils/extendTheme.ts index 8f77682c9427a0..aab9ac6607a01d 100644 --- a/packages/pigment-css-react/src/utils/extendTheme.ts +++ b/packages/pigment-css-react/src/utils/extendTheme.ts @@ -1,9 +1,8 @@ -import deepMerge from 'lodash/merge'; import { prepareCssVars } from '@mui/system/cssVars'; import type { SxConfig } from '@mui/system/styleFunctionSx'; import type { CSSObject } from '../base'; -export interface ThemeInput { +export interface ThemeInput extends Record { /** * The prefix to be used for the CSS variables. */ @@ -22,15 +21,17 @@ export interface ThemeInput { * If provided, it will be used to create a selector for the color scheme. * This is useful if you want to use class or data-* attributes to apply the color scheme. * - * The default selector is `:root`. + * The callback receives the colorScheme with the possible values of: + * - undefined: the selector for tokens that are not color scheme dependent + * - string: the selector for the color scheme * * @example * // class selector - * (colorScheme) => colorScheme ? `.theme-${colorScheme}` : ":root" + * (colorScheme) => colorScheme !== 'light' ? `.theme-${colorScheme}` : ":root" * * @example * // data-* attribute selector - * (colorScheme) => colorScheme ? `[data-theme="${colorScheme}"`] : ":root" + * (colorScheme) => colorScheme !== 'light' ? `[data-theme="${colorScheme}"`] : ":root" */ getSelector?: ( colorScheme: ColorScheme | undefined, @@ -74,14 +75,11 @@ export type ExtendTheme< styles: CSSObject, ) => Record>; getColorSchemeSelector: (colorScheme: Options['colorScheme']) => string; - generateCssVars: (colorScheme?: Options['colorScheme']) => { - css: Record; - selector: string | Record; - }; + generateStyleSheets: () => Array>; unstable_sxConfig?: SxConfig; }; -export type Theme = ExtendTheme; +export type Theme = Record; /** * A utility to tell zero-runtime to generate CSS variables for the theme. @@ -140,18 +138,13 @@ export function extendTheme< shouldSkipGeneratingVar, getSelector, }; - const { generateCssVars } = prepareCssVars(otherTheme, parserConfig); - - let { vars } = generateCssVars(); - Object.entries(theme.colorSchemes || {}).forEach(([key]) => { - vars = deepMerge(vars, generateCssVars(key).vars); - }); + const { generateThemeVars, generateStyleSheets } = prepareCssVars(otherTheme, parserConfig); const finalTheme = { ...theme, defaultColorScheme, - vars, - generateCssVars, + vars: generateThemeVars(), + generateStyleSheets, } as unknown as ExtendTheme<{ colorScheme: Options['colorScheme']; tokens: Options['tokens'] }>; finalTheme.getColorSchemeSelector = (colorScheme: string) => { diff --git a/packages/pigment-css-react/src/utils/generateCss.ts b/packages/pigment-css-react/src/utils/generateCss.ts index afe1f670d931e9..99203736139704 100644 --- a/packages/pigment-css-react/src/utils/generateCss.ts +++ b/packages/pigment-css-react/src/utils/generateCss.ts @@ -2,34 +2,8 @@ import { serializeStyles } from '@emotion/serialize'; import { Theme } from './extendTheme'; export function generateTokenCss(theme: Theme) { - // create stylesheet as object - const { css: rootCss, selector: rootSelector } = theme.generateCssVars(); - const stylesheets: Array> = []; - if (Object.keys(rootCss).length) { - stylesheets.push(typeof rootSelector === 'string' ? { [rootSelector]: rootCss } : rootSelector); - } - if (theme.colorSchemes) { - const { [theme.defaultColorScheme!]: defaultScheme, ...otherColorSchemes } = theme.colorSchemes; - - if (defaultScheme) { - // need to generate default color scheme first for the prefers-color-scheme media query to work - // because media-queries does not increase specificity - const { css, selector } = theme.generateCssVars(theme.defaultColorScheme); - if (Object.keys(css).length) { - stylesheets.push(typeof selector === 'string' ? { [selector]: css } : selector); - } - } - - Object.entries(otherColorSchemes).forEach(([key]) => { - const { css, selector } = theme.generateCssVars(key); - if (Object.keys(css).length) { - stylesheets.push(typeof selector === 'string' ? { [selector]: css } : selector); - } - }); - } - // use emotion to serialize the object to css string - const { styles } = serializeStyles(stylesheets); + const { styles } = serializeStyles(theme.generateStyleSheets?.() || []); return styles; } diff --git a/packages/pigment-css-react/src/utils/pre-linaria-plugin.ts b/packages/pigment-css-react/src/utils/pre-linaria-plugin.ts index a2e59449d60ba2..22503a07aaa879 100644 --- a/packages/pigment-css-react/src/utils/pre-linaria-plugin.ts +++ b/packages/pigment-css-react/src/utils/pre-linaria-plugin.ts @@ -27,7 +27,7 @@ export const babelPlugin = declare<{ propName?: string; importName?: string }>( api.assertVersion(7); const { types: t } = api; return { - name: '@pigmentcss/zero-babel-plugin', + name: '@pigmentcss/sx-plugin', visitor: { JSXAttribute(path) { const namePath = path.get('name'); diff --git a/packages/pigment-css-react/src/utils/preprocessor.ts b/packages/pigment-css-react/src/utils/preprocessor.ts index a290743b7244f9..48b135fc938f39 100644 --- a/packages/pigment-css-react/src/utils/preprocessor.ts +++ b/packages/pigment-css-react/src/utils/preprocessor.ts @@ -1,5 +1,7 @@ import type { Element } from 'stylis'; import { serialize, compile, stringify, middleware } from 'stylis'; +import rtlPlugin from 'stylis-plugin-rtl'; +import { type PluginCustomOptions } from './cssFnValueToVariable'; function globalSelector(element: Element) { switch (element.type) { @@ -17,13 +19,43 @@ function globalSelector(element: Element) { } } -const serializer = middleware([globalSelector, stringify]); +function getSerializer(includeRtl?: boolean) { + if (!includeRtl) { + return middleware([globalSelector, stringify]); + } + return middleware([globalSelector, rtlPlugin, stringify]); +} + +const serializer = getSerializer(); +const serializerRtl = getSerializer(true); -const stylis = (css: string) => serialize(compile(css), serializer); +const stylis = (css: string, serializerParam = serializer) => + serialize(compile(css), serializerParam); -export function preprocessor(selector: string, cssText: string) { +const defaultGetDirSelector = (dir: 'ltr' | 'rtl') => `[dir=${dir}]`; + +export function preprocessor( + selector: string, + cssText: string, + options?: PluginCustomOptions['css'], +) { + const { + defaultDirection = 'ltr', + generateForBothDir = false, + getDirSelector = defaultGetDirSelector, + } = options || {}; + let css = ''; if (cssText.startsWith('@keyframes')) { - return stylis(cssText.replace('@keyframes', `@keyframes ${selector}`)); + css += stylis(cssText.replace('@keyframes', `@keyframes ${selector}`)); + return css; + } + css += stylis(`${selector}{${cssText}}`); + if (generateForBothDir) { + css += stylis( + `${getDirSelector(defaultDirection === 'ltr' ? 'rtl' : 'ltr')} ${selector}{${cssText}}`, + serializerRtl, + ); } - return stylis(`${selector}{${cssText}}`); + + return css; } diff --git a/packages/pigment-css-react/src/utils/remove-prop-types-plugin.ts b/packages/pigment-css-react/src/utils/remove-prop-types-plugin.ts new file mode 100644 index 00000000000000..944209882af369 --- /dev/null +++ b/packages/pigment-css-react/src/utils/remove-prop-types-plugin.ts @@ -0,0 +1,24 @@ +import { declare } from '@babel/helper-plugin-utils'; + +export const removePropTypesPlugin = declare<{}>((api) => { + api.assertVersion(7); + return { + name: '@pigmentcss/wyw-remove-prop-types-plugin', + visitor: { + AssignmentExpression(path) { + const left = path.get('left'); + if (!left.isMemberExpression()) { + return; + } + const property = left.get('property'); + if (!property.isIdentifier({ name: 'propTypes' })) { + return; + } + const parentExpression = path.findParent((p) => p.isExpressionStatement()); + if (parentExpression) { + parentExpression.remove(); + } + }, + }, + }; +}); diff --git a/packages/pigment-css-react/src/utils/sxObjectExtractor.ts b/packages/pigment-css-react/src/utils/sxObjectExtractor.ts index c232e41b8fc572..01cc360fddc8d6 100644 --- a/packages/pigment-css-react/src/utils/sxObjectExtractor.ts +++ b/packages/pigment-css-react/src/utils/sxObjectExtractor.ts @@ -22,26 +22,36 @@ function validateObjectKey( if (!identifiers.length) { return; } + + // check if all the identifiers being used for the key, if it is not a static value, + // (ie, [theme.apply()] or [globalVariable]) are globally defined or not. + // Global means in the root scope (file scope) or in the same scope as the parentCall + const areAllGlobalIdentifiers = identifiers.every((item) => { + // get the definition AST node path of the identifier + const binding = item.scope.getBinding(item.node.name); + if (!binding) { + return false; + } + if ( + // if the identifier is defined in the same scope as the parentCall, ie, ({theme}) => ({color: theme.color}) + binding.path.findParent((parent) => parent === parentCall) || + // if the identifier is defined in the file scope + binding.path.scope === rootScope + ) { + return true; + } + return false; + }); + if (!parentCall) { + if (areAllGlobalIdentifiers) { + return; + } throw keyPath.buildCodeFrameError( `${process.env.PACKAGE_NAME}: Expressions in css object keys are not supported.`, ); } - if ( - !identifiers.every((item) => { - const binding = item.scope.getBinding(item.node.name); - if (!binding) { - return false; - } - if ( - binding.path.findParent((parent) => parent === parentCall) || - binding.path.scope === rootScope - ) { - return true; - } - return false; - }) - ) { + if (!areAllGlobalIdentifiers) { throw keyPath.buildCodeFrameError( `${process.env.PACKAGE_NAME}: Variables in css object keys should only use the passed theme(s) object or variables that are defined in the root scope.`, ); @@ -66,13 +76,8 @@ function traverseObjectExpression( } if (value.isObjectExpression()) { traverseObjectExpression(value, parentCall); - } else if (value.isArrowFunctionExpression()) { - throw value.buildCodeFrameError( - `${process.env.PACKAGE_NAME}: Arrow functions are not supported as values of sx object.`, - ); } else if (!value.isLiteral() && !isStaticObjectOrArrayExpression(value)) { const identifiers = findIdentifiers([value], 'reference'); - const themeIdentifiers: NodePath[] = []; const localIdentifiers: NodePath[] = []; identifiers.forEach((id) => { if (!id.isIdentifier()) { @@ -82,15 +87,10 @@ function traverseObjectExpression( if (!binding) { return; } - if (binding.path.findParent((parent) => parent === parentCall)) { - themeIdentifiers.push(id); - } else if (binding.scope !== rootScope) { - localIdentifiers.push(id); - } else { - throw id.buildCodeFrameError( - `${process.env.PACKAGE_NAME}: Consider moving this variable to the root scope if it has all static values.`, - ); + if ((parentCall && binding.scope === parentCall.scope) || binding.scope === rootScope) { + return; } + localIdentifiers.push(id); }); if (localIdentifiers.length) { const arrowFn = arrowFunctionExpression( diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.input.js b/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.input.js new file mode 100644 index 00000000000000..7fd5497f9a95e2 --- /dev/null +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.input.js @@ -0,0 +1,33 @@ +import { styled, keyframes } from '@pigment-css/react'; + +const rotateKeyframe = keyframes({ + from: { + transform: 'translateX(0%)', + }, + to: { + transform: 'translateX(100%)', + }, +}); + +const Component = styled.div(({ theme }) => ({ + animation: `${rotateKeyframe} 2s ease-out 0s infinite`, + marginLeft: 10, +})); + +export const SliderRail = styled('span', { + name: 'MuiSlider', + slot: 'Rail', +})` + display: block; + position: absolute; + left: 0; + top: 0; + border-top-left-radius: 3px; +`; + +const SliderRail2 = styled.span` + ${SliderRail} { + padding-inline-start: none; + margin: 0px 10px 10px 30px; + } +`; diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.css b/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.css new file mode 100644 index 00000000000000..3cbf43f433094d --- /dev/null +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.css @@ -0,0 +1,44 @@ +@keyframes r14vlhb { + from { + transform: translateX(0%); + } + to { + transform: translateX(100%); + } +} +.c194j3ko { + animation: r14vlhb 2s ease-out 0s infinite; + margin-left: 10px; +} +:dir(rtl) .c194j3ko { + animation: r14vlhb 2s ease-out 0s infinite; + margin-right: 10px; +} +.sgip8u5 { + display: block; + position: absolute; + left: 0; + top: 0; + border-top-left-radius: 3px; +} +:dir(rtl) .sgip8u5 { + display: block; + position: absolute; + right: 0; + top: 0; + border-top-right-radius: 3px; +} +.sgip8u5-1 { + font-size: 1.5rem; +} +:dir(rtl) .sgip8u5-1 { + font-size: 1.5rem; +} +.smip3v5 .sgip8u5 { + padding-inline-start: none; + margin: 0px 10px 10px 30px; +} +:dir(rtl) .smip3v5 .sgip8u5 { + padding-inline-start: none; + margin: 0px 30px 10px 10px; +} diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js new file mode 100644 index 00000000000000..f53fc340ec7dea --- /dev/null +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js @@ -0,0 +1,14 @@ +import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigment-css/react'; +import _theme from '@pigment-css/react/theme'; +const Component = /*#__PURE__*/ _styled('div')({ + classes: ['c194j3ko'], +}); +export const SliderRail = /*#__PURE__*/ _styled2('span', { + name: 'MuiSlider', + slot: 'Rail', +})({ + classes: ['sgip8u5', 'sgip8u5-1'], +}); +const SliderRail2 = /*#__PURE__*/ _styled3('span')({ + classes: ['smip3v5'], +}); diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.input.js b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.input.js index 909306c646fd71..80b96babb87007 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.input.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.input.js @@ -1,4 +1,5 @@ import { styled, keyframes } from '@pigment-css/react'; +import PropTypes from 'prop-types'; const rotateKeyframe = keyframes({ from: { @@ -34,3 +35,18 @@ const SliderRail2 = styled.span` display: none; } `; + +export function App() { + return ( + + + + + ); +} + +process.env.NODE_ENV !== 'production' + ? (App.propTypes = { + children: PropTypes.element, + }) + : void 0; diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js index 5344df17cb9649..2eae296833973e 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js @@ -1,10 +1,28 @@ -import { styled as _styled3 } from '@pigment-css/react'; -import { styled as _styled2 } from '@pigment-css/react'; -import { styled as _styled } from '@pigment-css/react'; +import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigment-css/react'; import _theme from '@pigment-css/react/theme'; +import PropTypes from 'prop-types'; const Component = /*#__PURE__*/ _styled('div')({ classes: ['c1h7nuob'], }); +const SliderRail = /*#__PURE__*/ _styled2('span', { + name: 'MuiSlider', + slot: 'Rail', +})({ + classes: ['s13xim6i', 's13xim6i-1'], +}); const SliderRail2 = /*#__PURE__*/ _styled3('span')({ classes: ['s1emg10t'], }); +export function App() { + return ( + + + + + ); +} +process.env.NODE_ENV !== 'production' + ? (App.propTypes = { + children: PropTypes.element, + }) + : void 0; diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-variants.input.js b/packages/pigment-css-react/tests/styled/fixtures/styled-variants.input.js new file mode 100644 index 00000000000000..61b1d00d14b0a9 --- /dev/null +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-variants.input.js @@ -0,0 +1,18 @@ +import { styled } from '@pigment-css/react'; + +const Button = styled('button')({ + variants: [ + { + props: { color: 'primary' }, + style: { + color: 'tomato', + }, + }, + { + props: ({ ownerState }) => ownerState.color === 'secondary', + style: { + color: 'salmon', + }, + }, + ], +}); diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.css b/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.css new file mode 100644 index 00000000000000..4a6e20753801af --- /dev/null +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.css @@ -0,0 +1,6 @@ +.b1prasel-1 { + color: tomato; +} +.b1prasel-2 { + color: salmon; +} diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.js new file mode 100644 index 00000000000000..6b450dcd6f112a --- /dev/null +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.js @@ -0,0 +1,17 @@ +import { styled as _styled } from '@pigment-css/react'; +import _theme from '@pigment-css/react/theme'; +const Button = /*#__PURE__*/ _styled('button')({ + classes: ['b1prasel'], + variants: [ + { + props: { + color: 'primary', + }, + className: 'b1prasel-1', + }, + { + props: ({ ownerState }) => ownerState.color === 'secondary', + className: 'b1prasel-2', + }, + ], +}); diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled.input.js b/packages/pigment-css-react/tests/styled/fixtures/styled.input.js index 92126ff9efa283..1d7464f329a50d 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled.input.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled.input.js @@ -1,4 +1,5 @@ import { styled, keyframes } from '@pigment-css/react'; +import PropTypes from 'prop-types'; const rotateKeyframe = keyframes({ from: { @@ -32,3 +33,16 @@ const SliderRail2 = styled.span` display: none; } `; + +export function App() { + return ( + + + + + ); +} + +App.propTypes = { + children: PropTypes.element, +}; diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled.output.js index 0d81f13859b120..e29c5075747ff5 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled.output.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled.output.js @@ -1,7 +1,6 @@ -import { styled as _styled3 } from '@pigment-css/react'; -import { styled as _styled2 } from '@pigment-css/react'; -import { styled as _styled } from '@pigment-css/react'; +import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigment-css/react'; import _theme from '@pigment-css/react/theme'; +import PropTypes from 'prop-types'; const Component = /*#__PURE__*/ _styled('div')({ classes: ['c1aiqtje'], }); @@ -14,3 +13,14 @@ export const SliderRail = /*#__PURE__*/ _styled2('span', { const SliderRail2 = /*#__PURE__*/ _styled3('span')({ classes: ['shdkmm7'], }); +export function App() { + return ( + + + + + ); +} +App.propTypes = { + children: PropTypes.element, +}; diff --git a/packages/pigment-css-react/tests/styled/runtime-styled.test.js b/packages/pigment-css-react/tests/styled/runtime-styled.test.js new file mode 100644 index 00000000000000..d2f325b082b0a3 --- /dev/null +++ b/packages/pigment-css-react/tests/styled/runtime-styled.test.js @@ -0,0 +1,205 @@ +import * as React from 'react'; +import { expect } from 'chai'; +import { createRenderer } from '@mui-internal/test-utils'; +import styled from '../../src/styled'; + +describe('props filtering', () => { + const { render } = createRenderer(); + + it('composes shouldForwardProp on composed styled components', () => { + const StyledDiv = styled('div', { + shouldForwardProp: (prop) => prop !== 'foo', + })(); + + const ComposedDiv = styled(StyledDiv, { + shouldForwardProp: (prop) => prop !== 'bar', + })(); + + const { container } = render(); + + expect(container.firstChild).to.not.have.attribute('foo'); + expect(container.firstChild).to.not.have.attribute('bar'); + expect(container.firstChild).to.have.attribute('xyz', 'true'); + }); + + it('custom shouldForwardProp works', () => { + function Svg(props) { + return ( + + + + ); + } + + const StyledSvg = styled(Svg, { + shouldForwardProp: (prop) => ['className', 'width', 'height'].indexOf(prop) !== -1, + })` + &, + & * { + fill: ${({ color }) => color}; + } + `; + + const { container } = render(); + expect(container.firstChild).to.not.have.attribute('color'); + expect(container.firstChild).to.have.attribute('width', '100px'); + expect(container.firstChild).to.have.attribute('height', '100px'); + }); + + it('default prop filtering for native html tag', () => { + const Link = styled('a')` + color: green; + `; + const rest = { m: [3], pt: [4] }; + + const { container } = render( + + hello world + , + ); + expect(container.firstChild).to.have.attribute('href', 'link'); + expect(container.firstChild).to.have.attribute('aria-label', 'some label'); + expect(container.firstChild).to.have.attribute('data-wow', 'value'); + expect(container.firstChild).to.have.attribute('is', 'true'); + + expect(container.firstChild).not.to.have.attribute('a'); + expect(container.firstChild).not.to.have.attribute('b'); + expect(container.firstChild).not.to.have.attribute('wow'); + expect(container.firstChild).not.to.have.attribute('prop'); + expect(container.firstChild).not.to.have.attribute('filtering'); + expect(container.firstChild).not.to.have.attribute('cool'); + }); + + it('no prop filtering on non string tags', () => { + // eslint-disable-next-line jsx-a11y/anchor-has-content + const Link = styled((props) => )` + color: green; + `; + + const { container } = render( + + hello world + , + ); + + expect(container.firstChild).to.have.attribute('href', 'link'); + expect(container.firstChild).to.have.attribute('aria-label', 'some label'); + expect(container.firstChild).to.have.attribute('data-wow', 'value'); + expect(container.firstChild).to.have.attribute('is', 'true'); + expect(container.firstChild).to.have.attribute('a', 'true'); + expect(container.firstChild).to.have.attribute('b', 'true'); + expect(container.firstChild).to.have.attribute('wow', 'true'); + expect(container.firstChild).to.have.attribute('prop', 'true'); + expect(container.firstChild).to.have.attribute('filtering', 'true'); + expect(container.firstChild).to.have.attribute('cool', 'true'); + }); + + describe('ownerState prop', () => { + it('[HTML tag] does not forward `ownerState` by default', () => { + const StyledDiv = styled('div')(); + + const { container } = render(); + expect(container.firstChild).not.to.have.attribute('ownerState'); + }); + + it('does not forward `ownerState` to other React component', () => { + function InnerComponent(props) { + const { ownerState } = props; + return
; + } + const StyledDiv = styled(InnerComponent)(); + + const { container } = render(); + expect(container.firstChild).not.to.have.attribute('ownerState'); + expect(container.firstChild).to.have.attribute('data-ownerstate', 'false'); + }); + + it('forward `ownerState` to inherited styled component', () => { + const StyledDiv = styled('div')({ + classes: ['div1'], + variants: [ + { + props: ({ ownerState }) => ownerState.color === 'secondary', + className: 'div1-secondary', + }, + ], + }); + + const StyledDiv2 = styled(StyledDiv)({ + classes: ['div2'], + variants: [ + { + props: ({ ownerState }) => ownerState.color === 'secondary', + className: 'div2-secondary', + }, + ], + }); + + const { container } = render(); + expect(container.firstChild).to.have.class('div1-secondary'); + expect(container.firstChild).to.have.class('div2-secondary'); + }); + }); + + describe('classes prop', () => { + it('does not forward `classes` by default', () => { + const StyledDiv = styled('div')(); + + const { container } = render(); + expect(container.firstChild).not.to.have.attribute('classes'); + }); + + it('does not forward `classes` for the root slot to other React component', () => { + function InnerComponent(props) { + const { classes = {} } = props; + return
; + } + const StyledDiv = styled(InnerComponent, { + name: 'Div', + slot: 'root', + })(); + + const { container } = render(); + expect(container.firstChild).not.to.have.attribute('classes'); + expect(container.firstChild).not.to.have.class('root-123'); + }); + + it('forward `classes` for the root slot by a custom shouldForwardProp', () => { + function ButtonBase(props) { + const { classes = {} } = props; + return
; + } + const ButtonRoot = styled(ButtonBase, { + name: 'Div', + slot: 'root', + shouldForwardProp: (prop) => prop === 'classes', + })(); + + const { container } = render(); + expect(container.firstChild).to.have.class('root-123'); + }); + }); +}); diff --git a/packages/pigment-css-react/tests/styled/styled.test.ts b/packages/pigment-css-react/tests/styled/styled.test.ts deleted file mode 100644 index 664fa0d06abdb9..00000000000000 --- a/packages/pigment-css-react/tests/styled/styled.test.ts +++ /dev/null @@ -1,47 +0,0 @@ -import path from 'node:path'; -import { runTransformation, expect } from '../testUtils'; - -describe('Pigment CSS - styled', () => { - it('basics', async () => { - const { output, fixture } = await runTransformation( - path.join(__dirname, 'fixtures/styled.input.js'), - ); - - expect(output.js).to.equal(fixture.js); - expect(output.css).to.equal(fixture.css); - }); - - it('should work with theme', async () => { - const { output, fixture } = await runTransformation( - path.join(__dirname, 'fixtures/styled-theme.input.js'), - { - themeArgs: { - theme: { - palette: { - primary: { - main: 'red', - }, - }, - size: { - font: { - h1: '3rem', - }, - }, - components: { - MuiSlider: { - styleOverrides: { - rail: { - fontSize: '1.5rem', - }, - }, - }, - }, - }, - }, - }, - ); - - expect(output.js).to.equal(fixture.js); - expect(output.css).to.equal(fixture.css); - }); -}); diff --git a/packages/pigment-css-react/tests/styled/styled.test.tsx b/packages/pigment-css-react/tests/styled/styled.test.tsx new file mode 100644 index 00000000000000..4e555d7497c670 --- /dev/null +++ b/packages/pigment-css-react/tests/styled/styled.test.tsx @@ -0,0 +1,84 @@ +import path from 'node:path'; +import { runTransformation, expect } from '../testUtils'; + +const theme = { + palette: { + primary: { + main: 'red', + }, + }, + size: { + font: { + h1: '3rem', + }, + }, + components: { + MuiSlider: { + styleOverrides: { + rail: { + fontSize: '1.5rem', + }, + }, + }, + }, +}; + +describe('Pigment CSS - styled', () => { + it('basics', async () => { + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/styled.input.js'), + ); + + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); + }); + + it('should work with theme', async () => { + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/styled-theme.input.js'), + { + themeArgs: { + theme, + }, + }, + ); + + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); + }); + + it('should work with theme and rtl', async () => { + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/styled-rtl.input.js'), + { + themeArgs: { + theme, + }, + css: { + defaultDirection: 'ltr', + generateForBothDir: true, + getDirSelector(dir) { + return `:dir(${dir})`; + }, + }, + }, + ); + + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); + }); + + it('should work with variants', async () => { + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/styled-variants.input.js'), + { + themeArgs: { + theme, + }, + }, + ); + + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); + }); +}); diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js index 7c160da9ffdd15..6835baeca846d9 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js @@ -1,5 +1,9 @@ import { styled } from '@pigment-css/react'; +const autocompleteClasses = { + option: 'MuiAutocomplete-option', +}; + const SliderRail = styled('span', { name: 'MuiSlider', slot: 'Rail', @@ -12,7 +16,7 @@ const SliderRail = styled('span', { font-size: ${({ theme }) => (theme.vars ?? theme).size.font.h1}; `; -function App2(props) { +function App(props) { return ( ({ @@ -24,3 +28,37 @@ function App2(props) { /> ); } + +function App2() { + return ( + + ); +} + +function App3(props) { + return ( + ({ + color: (theme.vars || theme).palette.primary.main, + fontSize: props.isRed ? 'h1-fontSize' : 'h2-fontSize', + ':hover': { + backgroundColor: ['primary.main', 'secondary.main'], + color: { + sm: 'primary.main', + md: 'secondary.main', + }, + }, + })} + /> + ); +} diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css index b059356454be53..55afb9b4d87acc 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css @@ -17,3 +17,30 @@ color: white; } } +.sdbmcs3.sliig2s { + border-radius: 8px; + margin: 5px; +} +.sdbmcs3.sliig2s.MuiAutocomplete-option { + padding: 8px; +} +.sdbmcs3.so956n { + color: red; + font-size: var(--so956n-0); +} +@media (min-width: 0px) { + .sdbmcs3.so956n :hover { + background-color: red; + } +} +@media (min-width: 600px) { + .sdbmcs3.so956n :hover { + background-color: blue; + color: red; + } +} +@media (min-width: 900px) { + .sdbmcs3.so956n :hover { + color: blue; + } +} diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js index f38b3f8d753633..39a69d867ec8b3 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js @@ -5,6 +5,21 @@ const SliderRail = /*#__PURE__*/ _styled('span', { })({ classes: ['sdbmcs3', 'sdbmcs3-1'], }); -function App2(props) { +function App(props) { return ; } +function App2() { + return ; +} +function App3(props) { + return ( + + ); +} diff --git a/packages/pigment-css-react/tests/sx/sx.test.ts b/packages/pigment-css-react/tests/sx/sx.test.ts index ef1a590d4c70a5..20b36d95a14f11 100644 --- a/packages/pigment-css-react/tests/sx/sx.test.ts +++ b/packages/pigment-css-react/tests/sx/sx.test.ts @@ -6,6 +6,9 @@ const theme = { primary: { main: 'red', }, + secondary: { + main: 'blue', + }, }, size: { font: { diff --git a/packages/pigment-css-react/tests/testUtils.ts b/packages/pigment-css-react/tests/testUtils.ts index 4223f20d289663..fd7db17ced5380 100644 --- a/packages/pigment-css-react/tests/testUtils.ts +++ b/packages/pigment-css-react/tests/testUtils.ts @@ -8,7 +8,7 @@ import { transform as wywTransform, createFileReporter, } from '@wyw-in-js/transform'; -import { preprocessor } from '@pigment-css/react/utils'; +import { PluginCustomOptions, preprocessor } from '@pigment-css/react/utils'; import * as prettier from 'prettier'; import sxTransformPlugin from '../exports/sx-plugin'; @@ -26,7 +26,7 @@ function runSxTransform(code: string, filename: string) { export async function runTransformation( absolutePath: string, - options?: { themeArgs?: { theme?: any } }, + options?: { themeArgs?: { theme?: any }; css?: PluginCustomOptions['css'] }, ) { const cache = new TransformCacheCollection(); const { emitter: eventEmitter } = createFileReporter(false); @@ -51,7 +51,10 @@ export async function runTransformation( babelrc: false, plugins: ['@babel/plugin-syntax-jsx'], }, - tagResolver(_source: string, tag: string) { + tagResolver(source: string, tag: string) { + if (source !== '@pigment-css/react') { + return null; + } return require.resolve(`../exports/${tag}`); }, }; @@ -60,7 +63,7 @@ export async function runTransformation( { options: { filename: inputFilePath, - preprocessor, + preprocessor: (selector, css) => preprocessor(selector, css, options?.css), pluginOptions, }, cache, diff --git a/packages/pigment-css-react/tests/utils/theme-tokens.test.ts b/packages/pigment-css-react/tests/utils/theme-tokens.test.ts new file mode 100644 index 00000000000000..8ea8478919c788 --- /dev/null +++ b/packages/pigment-css-react/tests/utils/theme-tokens.test.ts @@ -0,0 +1,102 @@ +import { extendTheme, generateTokenCss, generateThemeTokens } from '@pigment-css/react/utils'; +import { expect } from 'chai'; + +describe('theme-tokens', () => { + describe('generateTokenCss', () => { + it('should work with plain theme', () => { + expect( + generateTokenCss({ + colors: { + primary: 'red', + secondary: 'blue', + }, + fontSizes: [12, 14, 16, 20, 24, 32], + }), + ).to.equal(''); + }); + + it('should generate stylesheet correctly', () => { + expect( + generateTokenCss( + extendTheme({ + colorSchemes: { + light: { + palette: { + primary: 'red', + secondary: 'blue', + }, + }, + dark: { + palette: { + primary: 'darkred', + secondary: 'darkblue', + }, + }, + }, + radius: { + xs: 4, + sm: 8, + md: 16, + }, + }), + ), + ).to.equal( + ':root{--radius-xs:4px;--radius-sm:8px;--radius-md:16px;}:root{--palette-primary:red;--palette-secondary:blue;}@media (prefers-color-scheme: dark){:root{--palette-primary:darkred;--palette-secondary:darkblue;}}', + ); + }); + }); + + describe('generateThemeTokens', () => { + it('should work with plain theme', () => { + expect( + generateThemeTokens({ + colors: { + primary: 'red', + secondary: 'blue', + }, + fontSizes: [12, 14, 16, 20, 24, 32], + }), + ).to.deep.equal({}); + }); + + it('should use `vars` object', () => { + expect( + generateThemeTokens( + extendTheme({ + colorSchemes: { + light: { + palette: { + primary: 'red', + secondary: 'blue', + }, + }, + dark: { + palette: { + primary: 'darkred', + secondary: 'darkblue', + }, + }, + }, + radius: { + xs: 4, + sm: 8, + md: 16, + }, + }), + ), + ).to.deep.equal({ + vars: { + palette: { + primary: 'var(--palette-primary)', + secondary: 'var(--palette-secondary)', + }, + radius: { + md: 'var(--radius-md)', + sm: 'var(--radius-sm)', + xs: 'var(--radius-xs)', + }, + }, + }); + }); + }); +}); diff --git a/packages/pigment-css-react/tsconfig.json b/packages/pigment-css-react/tsconfig.json index 55ad292e876743..2ad099bdf46489 100644 --- a/packages/pigment-css-react/tsconfig.json +++ b/packages/pigment-css-react/tsconfig.json @@ -15,6 +15,6 @@ }, "types": ["node", "mocha"] }, - "include": ["src/**/*.ts"], + "include": ["src/**/*.tsx", "src/**/*.js"], "exclude": ["./tsup.config.ts"] } diff --git a/packages/pigment-css-react/tsup.config.ts b/packages/pigment-css-react/tsup.config.ts index 4e7f5ee79cd81b..1d29f3b572e390 100644 --- a/packages/pigment-css-react/tsup.config.ts +++ b/packages/pigment-css-react/tsup.config.ts @@ -10,19 +10,25 @@ const baseConfig: Options = { external, }; +const BASE_FILES = ['index.ts', 'theme.ts', 'Box.jsx', 'RtlProvider.tsx']; + export default defineConfig([ { ...baseConfig, - entry: ['./src/index.ts', './src/theme.ts', './src/Box.jsx'], + entry: BASE_FILES.map((file) => `./src/${file}`), }, { ...baseConfig, - entry: processors.map((fn) => `./src/processors/${fn}.ts`), + entry: processors.map((file) => `./src/processors/${file}.ts`), outDir: 'processors', }, { ...baseConfig, - entry: ['./src/utils/index.ts', './src/utils/pre-linaria-plugin.ts'], + entry: [ + './src/utils/index.ts', + './src/utils/pre-linaria-plugin.ts', + './src/utils/remove-prop-types-plugin.ts', + ], outDir: 'utils', }, ]); diff --git a/packages/pigment-css-unplugin/package.json b/packages/pigment-css-unplugin/package.json index 4ffc19b889726d..9dff04d1e21d7f 100644 --- a/packages/pigment-css-unplugin/package.json +++ b/packages/pigment-css-unplugin/package.json @@ -1,6 +1,6 @@ { "name": "@pigment-css/unplugin", - "version": "0.0.3", + "version": "0.0.4", "main": "build/index.js", "module": "build/index.mjs", "types": "build/index.d.ts", @@ -32,7 +32,7 @@ "@pigment-css/react": "workspace:^", "@wyw-in-js/shared": "^0.5.0", "@wyw-in-js/transform": "^0.5.0", - "babel-plugin-transform-react-remove-prop-types": "^0.4.24", + "babel-plugin-define-var": "^0.1.0", "unplugin": "^1.7.1" }, "devDependencies": { diff --git a/packages/pigment-css-unplugin/src/index.ts b/packages/pigment-css-unplugin/src/index.ts index 262577e8056808..bd8a047609fd4c 100644 --- a/packages/pigment-css-unplugin/src/index.ts +++ b/packages/pigment-css-unplugin/src/index.ts @@ -151,8 +151,8 @@ export const plugin = createUnplugin((options) => { return asyncResolveFallback(what, importer, stack); }; - const linariaTransformPlugin: UnpluginOptions = { - name: 'zero-plugin-transform-linaria', + const wywInJSTransformPlugin: UnpluginOptions = { + name: 'zero-plugin-transform-wyw-in-js', enforce: 'post', buildEnd() { onDone(process.cwd()); @@ -221,7 +221,8 @@ export const plugin = createUnplugin((options) => { babelOptions: { ...rest.babelOptions, plugins: [ - ['babel-plugin-transform-react-remove-prop-types', { mode: 'remove' }], + `${process.env.RUNTIME_PACKAGE_NAME}/exports/remove-prop-types-plugin`, + 'babel-plugin-define-var', // A fix for undefined variables in the eval phase of wyw-in-js, more details on https://github.com/siriwatknp/babel-plugin-define-var?tab=readme-ov-file#problem ...(rest.babelOptions?.plugins ?? []), ], }, @@ -355,7 +356,7 @@ export const plugin = createUnplugin((options) => { if (transformSx) { plugins.push(babelTransformPlugin); } - plugins.push(linariaTransformPlugin); + plugins.push(wywInJSTransformPlugin); // This is already handled separately for Next.js using `placeholderCssFile` if (!isNext) { diff --git a/packages/pigment-css-vite-plugin/package.json b/packages/pigment-css-vite-plugin/package.json index e59fa61ef19b46..9a76867d55c749 100644 --- a/packages/pigment-css-vite-plugin/package.json +++ b/packages/pigment-css-vite-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@pigment-css/vite-plugin", - "version": "0.0.3", + "version": "0.0.4", "main": "build/index.js", "module": "build/index.mjs", "types": "build/index.d.ts", @@ -33,7 +33,7 @@ "@pigment-css/react": "workspace:^", "@wyw-in-js/shared": "^0.5.0", "@wyw-in-js/transform": "^0.5.0", - "babel-plugin-transform-react-remove-prop-types": "^0.4.24" + "babel-plugin-define-var": "^0.1.0" }, "devDependencies": { "@types/babel__core": "^7.20.5", diff --git a/packages/pigment-css-vite-plugin/src/index.ts b/packages/pigment-css-vite-plugin/src/index.ts index e665c4ca25ee26..20bb2d6c39b716 100644 --- a/packages/pigment-css-vite-plugin/src/index.ts +++ b/packages/pigment-css-vite-plugin/src/index.ts @@ -45,9 +45,10 @@ export function pigment(options: PigmentOptions) { const { theme, babelOptions = {}, - preprocessor = basePreprocessor, + preprocessor, transformLibraries = [], transformSx = true, + css, ...rest } = options ?? {}; @@ -104,11 +105,15 @@ export function pigment(options: PigmentOptions) { }; } + const withRtl = (selector: string, cssText: string) => { + return basePreprocessor(selector, cssText, css); + }; + const zeroPlugin = baseWywPluginPlugin({ themeArgs: { theme, }, - preprocessor, + preprocessor: preprocessor ?? withRtl, babelOptions: { ...babelOptions, plugins: ['@babel/plugin-syntax-typescript', ...(babelOptions.plugins ?? [])], diff --git a/packages/pigment-css-vite-plugin/src/vite-plugin.ts b/packages/pigment-css-vite-plugin/src/vite-plugin.ts index fb17108d1e810a..211bdc371c97f8 100644 --- a/packages/pigment-css-vite-plugin/src/vite-plugin.ts +++ b/packages/pigment-css-vite-plugin/src/vite-plugin.ts @@ -10,7 +10,7 @@ import path from 'node:path'; import type { ModuleNode, Plugin, ResolvedConfig, ViteDevServer, FilterPattern } from 'vite'; import { optimizeDeps, createFilter } from 'vite'; -import { slugify, logger as wywLogger, syncResolve } from '@wyw-in-js/shared'; +import { logger as wywLogger, syncResolve } from '@wyw-in-js/shared'; import { TransformCacheCollection, transform, @@ -50,11 +50,12 @@ export default function wywVitePlugin({ transformLibraries = [], overrideContext, tagResolver, + css: cssConfig, ...rest }: VitePluginOptions = {}): Plugin { const filter = createFilter(include, exclude); - const cssLookup: { [key: string]: string } = {}; - const cssFileLookup: { [key: string]: string } = {}; + const cssLookup = new Map(); + const cssFileLookup = new Map(); let config: ResolvedConfig; let devServer: ViteDevServer; @@ -77,14 +78,14 @@ export default function wywVitePlugin({ }, resolveId(importeeUrl: string) { const [id] = importeeUrl.split('?', 1); - if (cssLookup[id]) { + if (cssLookup.has(id)) { return id; } - return cssFileLookup[id]; + return cssFileLookup.get(id); }, load(url: string) { const [id] = url.split('?', 1); - return cssLookup[id]; + return cssLookup.get(id); }, handleHotUpdate(ctx) { // it's module, so just transform it @@ -112,10 +113,10 @@ export default function wywVitePlugin({ .concat(ctx.modules) .filter((m): m is ModuleNode => !!m); }, - async transform(code: string, url: string) { + async transform(code, url) { const [id] = url.split('?', 1); - // Main modification start + // Main modification starts if (id in cssLookup) { return null; } @@ -140,10 +141,6 @@ export default function wywVitePlugin({ log('Vite transform', getFileIdx(id)); const asyncResolve = async (what: string, importer: string, stack: string[]) => { - // @TODO - Remove this when @mui/system published esm files by default at the base directory - if (what.startsWith('@mui/system') && !what.includes('esm')) { - return what.replace('@mui/system', '@mui/system/esm'); - } const resolved = await this.resolve(what, importer); if (resolved) { if (resolved.external) { @@ -192,7 +189,8 @@ export default function wywVitePlugin({ babelOptions: { ...rest.babelOptions, plugins: [ - ['babel-plugin-transform-react-remove-prop-types', { mode: 'remove' }], + `${process.env.RUNTIME_PACKAGE_NAME}/exports/remove-prop-types-plugin`, + 'babel-plugin-define-var', // A fix for undefined variables in the eval phase of wyw-in-js, more details on https://github.com/siriwatknp/babel-plugin-define-var?tab=readme-ov-file#problem ...(rest.babelOptions?.plugins ?? []), ], presets: Array.from(presets), @@ -233,9 +231,8 @@ export default function wywVitePlugin({ dependencies ??= []; - const slug = slugify(cssText); const cssFilename = path - .normalize(`${id.replace(/\.[jt]sx?$/, '')}_${slug}.css`) + .normalize(`${id.replace(/\.[jt]sx?$/, '')}.pigment.css`) .replace(/\\/g, path.posix.sep); const cssRelativePath = path @@ -249,18 +246,10 @@ export default function wywVitePlugin({ cssText += `/*# sourceMappingURL=data:application/json;base64,${map}*/`; } - cssLookup[cssFilename] = cssText; - cssFileLookup[cssId] = cssFilename; + cssLookup.set(cssFilename, cssText); + cssFileLookup.set(cssId, cssFilename); result.code += `\nimport ${JSON.stringify(cssFilename)};\n`; - if (devServer?.moduleGraph) { - const module = devServer.moduleGraph.getModuleById(cssId); - - if (module) { - devServer.moduleGraph.invalidateModule(module); - module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now(); - } - } for (let i = 0, end = dependencies.length; i < end; i += 1) { // eslint-disable-next-line no-await-in-loop @@ -277,9 +266,17 @@ export default function wywVitePlugin({ } else { target.dependencies = dependencies; } + // Reload the contents of the CSS file in the dev server + if (devServer?.moduleGraph) { + const cssModule = devServer.moduleGraph.getModuleById(cssFilename); + if (cssModule) { + devServer.reloadModule(cssModule); + } + } + return { code: result.code, map: result.sourceMap }; } catch (ex) { - const err = new Error(`MUI: Error while transforming file '${id}'`); + const err = new Error(`${process.env.PACKAGE_NAME}: Error while transforming file '${id}'`); err.message = (ex as Error).message; err.stack = (ex as Error).stack; throw err; diff --git a/packages/rsc-builder/package.json b/packages/rsc-builder/package.json index 8e9a60d6c178e2..41a6f0a0424f3d 100644 --- a/packages/rsc-builder/package.json +++ b/packages/rsc-builder/package.json @@ -9,6 +9,6 @@ }, "devDependencies": { "@types/mocha": "^10.0.6", - "@types/node": "^18.19.25" + "@types/node": "^18.19.28" } } diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json index 39de1ce77852ff..ba9c13d19bd8a0 100644 --- a/packages/test-utils/package.json +++ b/packages/test-utils/package.json @@ -26,7 +26,7 @@ "@emotion/react": "^11.11.4", "@mnajdova/enzyme-adapter-react-18": "^0.2.0", "@testing-library/dom": "^9.3.4", - "@testing-library/react": "^14.2.1", + "@testing-library/react": "^14.2.2", "chai": "^4.4.1", "chai-dom": "^1.12.0", "dom-accessibility-api": "^0.6.3", @@ -42,16 +42,16 @@ "sinon": "^15.2.0" }, "devDependencies": { - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/chai-dom": "^1.11.3", "@types/enzyme": "^3.10.18", "@types/format-util": "^1.0.4", - "@types/prop-types": "^15.7.11", + "@types/prop-types": "^15.7.12", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "@types/react-test-renderer": "^18.0.7", "@types/sinon": "^10.0.20", - "typescript": "^5.3.3" + "typescript": "^5.4.3" }, "peerDependencies": { "react": "^18.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6dc6963882c3fd..026420ff84a2da 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22,8 +22,8 @@ overrides: '@definitelytyped/header-parser': ^0.2.8 '@definitelytyped/typescript-versions': ^0.1.1 '@definitelytyped/utils': ^0.1.5 - '@types/node': ^18.19.25 - '@types/react': ^18.2.55 + '@types/node': ^18.19.28 + '@types/react': 18.2.55 '@types/react-dom': 18.2.19 cross-fetch: ^4.0.0 @@ -52,46 +52,46 @@ importers: version: 1.5.5 '@babel/cli': specifier: ^7.23.9 - version: 7.23.9(@babel/core@7.23.9) + version: 7.23.9(@babel/core@7.24.3) '@babel/core': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.3 '@babel/node': specifier: ^7.23.9 - version: 7.23.9(@babel/core@7.23.9) + version: 7.23.9(@babel/core@7.24.3) '@babel/plugin-proposal-class-properties': specifier: ^7.18.6 - version: 7.18.6(@babel/core@7.23.9) + version: 7.18.6(@babel/core@7.24.3) '@babel/plugin-proposal-object-rest-spread': specifier: ^7.20.7 - version: 7.20.7(@babel/core@7.23.9) + version: 7.20.7(@babel/core@7.24.3) '@babel/plugin-proposal-private-methods': specifier: ^7.18.6 - version: 7.18.6(@babel/core@7.23.9) + version: 7.18.6(@babel/core@7.24.3) '@babel/plugin-proposal-private-property-in-object': specifier: ^7.21.11 - version: 7.21.11(@babel/core@7.23.9) + version: 7.21.11(@babel/core@7.24.3) '@babel/plugin-transform-object-assign': specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) + version: 7.23.3(@babel/core@7.24.3) '@babel/plugin-transform-react-constant-elements': specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) + version: 7.23.3(@babel/core@7.24.3) '@babel/plugin-transform-runtime': specifier: ^7.23.9 - version: 7.23.9(@babel/core@7.23.9) + version: 7.24.3(@babel/core@7.24.3) '@babel/preset-env': specifier: ^7.23.9 - version: 7.23.9(@babel/core@7.23.9) + version: 7.24.3(@babel/core@7.24.3) '@babel/preset-react': specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) + version: 7.23.3(@babel/core@7.24.3) '@babel/preset-typescript': specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) + version: 7.24.1(@babel/core@7.24.3) '@babel/register': specifier: ^7.23.7 - version: 7.23.7(@babel/core@7.23.9) + version: 7.23.7(@babel/core@7.24.3) '@mnajdova/enzyme-adapter-react-18': specifier: ^0.2.0 version: 0.2.0(enzyme@3.11.0)(react-dom@18.2.0)(react@18.2.0) @@ -120,8 +120,8 @@ importers: specifier: workspace:^ version: link:packages/mui-utils/build '@next/eslint-plugin-next': - specifier: ^14.1.3 - version: 14.1.3 + specifier: ^14.1.4 + version: 14.1.4 '@octokit/rest': specifier: ^20.0.2 version: 20.0.2 @@ -144,26 +144,26 @@ importers: specifier: ^10.0.6 version: 10.0.6 '@types/node': - specifier: ^18.19.25 - version: 18.19.25 + specifier: ^18.19.28 + version: 18.19.28 '@types/prettier': specifier: ^2.7.3 version: 2.7.3 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 '@types/yargs': specifier: ^17.0.32 version: 17.0.32 '@typescript-eslint/eslint-plugin': specifier: ^6.19.1 - version: 6.19.1(@typescript-eslint/parser@6.19.1)(eslint@8.56.0)(typescript@5.3.3) + version: 6.19.1(@typescript-eslint/parser@6.19.1)(eslint@8.57.0)(typescript@5.4.3) '@typescript-eslint/parser': specifier: ^6.19.1 - version: 6.19.1(eslint@8.56.0)(typescript@5.3.3) + version: 6.19.1(eslint@8.57.0)(typescript@5.4.3) babel-loader: specifier: ^9.1.3 - version: 9.1.3(@babel/core@7.23.9)(webpack@5.90.3) + version: 9.1.3(@babel/core@7.24.3)(webpack@5.90.3) babel-plugin-istanbul: specifier: ^6.1.1 version: 6.1.1 @@ -204,47 +204,47 @@ importers: specifier: ^3.11.0 version: 3.11.0 eslint: - specifier: ^8.56.0 - version: 8.56.0 + specifier: ^8.57.0 + version: 8.57.0 eslint-config-airbnb: specifier: ^19.0.4 - version: 19.0.4(eslint-plugin-import@2.29.1)(eslint-plugin-jsx-a11y@6.7.1)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react@7.34.1)(eslint@8.56.0) + version: 19.0.4(eslint-plugin-import@2.29.1)(eslint-plugin-jsx-a11y@6.7.1)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react@7.34.1)(eslint@8.57.0) eslint-config-airbnb-base: specifier: ^15.0.0 - version: 15.0.0(eslint-plugin-import@2.29.1)(eslint@8.56.0) + version: 15.0.0(eslint-plugin-import@2.29.1)(eslint@8.57.0) eslint-config-airbnb-typescript: specifier: ^17.1.0 - version: 17.1.0(@typescript-eslint/eslint-plugin@6.19.1)(@typescript-eslint/parser@6.19.1)(eslint-plugin-import@2.29.1)(eslint@8.56.0) + version: 17.1.0(@typescript-eslint/eslint-plugin@6.19.1)(@typescript-eslint/parser@6.19.1)(eslint-plugin-import@2.29.1)(eslint@8.57.0) eslint-config-prettier: specifier: ^9.1.0 - version: 9.1.0(eslint@8.56.0) + version: 9.1.0(eslint@8.57.0) eslint-import-resolver-webpack: specifier: ^0.13.8 version: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.90.3) eslint-plugin-babel: specifier: ^5.3.1 - version: 5.3.1(eslint@8.56.0) + version: 5.3.1(eslint@8.57.0) eslint-plugin-filenames: specifier: ^1.3.2 - version: 1.3.2(eslint@8.56.0) + version: 1.3.2(eslint@8.57.0) eslint-plugin-import: specifier: ^2.29.1 - version: 2.29.1(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-webpack@0.13.8)(eslint@8.56.0) + version: 2.29.1(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) eslint-plugin-jsx-a11y: specifier: ^6.7.1 - version: 6.7.1(eslint@8.56.0) + version: 6.7.1(eslint@8.57.0) eslint-plugin-material-ui: specifier: workspace:^ version: link:packages/eslint-plugin-material-ui eslint-plugin-mocha: specifier: ^10.4.1 - version: 10.4.1(eslint@8.56.0) + version: 10.4.1(eslint@8.57.0) eslint-plugin-react: specifier: ^7.34.1 - version: 7.34.1(eslint@8.56.0) + version: 7.34.1(eslint@8.57.0) eslint-plugin-react-hooks: specifier: ^4.6.0 - version: 4.6.0(eslint@8.56.0) + version: 4.6.0(eslint@8.57.0) fast-glob: specifier: ^3.3.2 version: 3.3.2 @@ -301,7 +301,7 @@ importers: version: 4.4.0 postcss-styled-syntax: specifier: ^0.6.4 - version: 0.6.4(postcss@8.4.35) + version: 0.6.4(postcss@8.4.38) prettier: specifier: ^3.2.5 version: 3.2.5 @@ -334,13 +334,13 @@ importers: version: 5.3.10(esbuild@0.19.11)(webpack@5.90.3) tsup: specifier: ^8.0.2 - version: 8.0.2(postcss@8.4.35)(typescript@5.3.3) + version: 8.0.2(postcss@8.4.38)(typescript@5.4.3) tsx: specifier: ^4.7.1 version: 4.7.1 typescript: - specifier: ^5.3.3 - version: 5.3.3 + specifier: ^5.4.3 + version: 5.4.3 webpack: specifier: ^5.90.3 version: 5.90.3(esbuild@0.19.11)(webpack-cli@5.1.4) @@ -354,6 +354,149 @@ importers: specifier: ^17.7.2 version: 17.7.2 + apps/local-ui-lib: + dependencies: + '@pigment-css/react': + specifier: file:../../packages/pigment-css-react + version: file:packages/pigment-css-react(@types/react@18.2.55)(react@18.2.0) + + apps/pigment-css-next-app: + dependencies: + '@emotion/cache': + specifier: latest + version: 11.11.0 + '@mui/base': + specifier: workspace:^ + version: link:../../packages/mui-base/build + '@mui/icons-material': + specifier: workspace:^ + version: link:../../packages/mui-icons-material/build + '@mui/lab': + specifier: workspace:^ + version: link:../../packages/mui-lab/build + '@mui/material': + specifier: workspace:^ + version: link:../../packages/mui-material/build + '@mui/material-nextjs': + specifier: workspace:^ + version: link:../../packages/mui-material-nextjs/build + '@mui/system': + specifier: workspace:^ + version: link:../../packages/mui-system/build + '@mui/utils': + specifier: workspace:^ + version: link:../../packages/mui-utils/build + '@pigment-css/react': + specifier: workspace:^ + version: link:../../packages/pigment-css-react + local-ui-lib: + specifier: workspace:^ + version: link:../local-ui-lib + next: + specifier: latest + version: 14.1.4(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) + react: + specifier: ^18.2.0 + version: 18.2.0 + react-dom: + specifier: ^18.2.0 + version: 18.2.0(react@18.2.0) + devDependencies: + '@pigment-css/nextjs-plugin': + specifier: workspace:^ + version: link:../../packages/pigment-css-nextjs-plugin + '@types/node': + specifier: ^18.19.28 + version: 18.19.28 + '@types/react': + specifier: 18.2.55 + version: 18.2.55 + '@types/react-dom': + specifier: 18.2.19 + version: 18.2.19 + eslint: + specifier: ^8.57.0 + version: 8.57.0 + typescript: + specifier: ^5.4.3 + version: 5.4.3 + + apps/pigment-css-vite-app: + dependencies: + '@mui/base': + specifier: workspace:^ + version: link:../../packages/mui-base/build + '@mui/icons-material': + specifier: workspace:^ + version: link:../../packages/mui-icons-material/build + '@mui/lab': + specifier: workspace:^ + version: link:../../packages/mui-lab/build + '@mui/material': + specifier: workspace:^ + version: link:../../packages/mui-material/build + '@mui/system': + specifier: workspace:^ + version: link:../../packages/mui-system/build + '@mui/utils': + specifier: workspace:^ + version: link:../../packages/mui-utils/build + '@pigment-css/react': + specifier: workspace:^ + version: link:../../packages/pigment-css-react + clsx: + specifier: ^2.1.0 + version: 2.1.0 + local-ui-lib: + specifier: workspace:^ + version: link:../local-ui-lib + react: + specifier: ^18.2.0 + version: 18.2.0 + react-dom: + specifier: ^18.2.0 + version: 18.2.0(react@18.2.0) + react-error-boundary: + specifier: ^4.0.13 + version: 4.0.13(react@18.2.0) + react-router: + specifier: ^6.22.3 + version: 6.22.3(react@18.2.0) + react-router-dom: + specifier: ^6.22.1 + version: 6.22.1(react-dom@18.2.0)(react@18.2.0) + devDependencies: + '@babel/preset-react': + specifier: ^7.23.3 + version: 7.23.3(@babel/core@7.24.3) + '@babel/preset-typescript': + specifier: ^7.23.3 + version: 7.24.1(@babel/core@7.24.3) + '@pigment-css/vite-plugin': + specifier: workspace:^ + version: link:../../packages/pigment-css-vite-plugin + '@types/react': + specifier: 18.2.55 + version: 18.2.55 + '@types/react-dom': + specifier: 18.2.19 + version: 18.2.19 + '@vitejs/plugin-react': + specifier: ^4.2.1 + version: 4.2.1(vite@5.2.2) + postcss: + specifier: ^8.4.38 + version: 8.4.38 + postcss-combine-media-query: + specifier: ^1.0.1 + version: 1.0.1 + vite: + specifier: 5.2.2 + version: 5.2.2(@types/node@18.19.28) + vite-plugin-pages: + specifier: ^0.32.0 + version: 0.32.0(vite@5.2.2) + benchmark: dependencies: '@chakra-ui/system': @@ -387,8 +530,8 @@ importers: specifier: workspace:^ version: link:../docs express: - specifier: ^4.18.3 - version: 4.18.3 + specifier: ^4.19.2 + version: 4.19.2 fs-extra: specifier: ^11.2.0 version: 11.2.0 @@ -439,19 +582,19 @@ importers: dependencies: '@babel/core': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.3 '@babel/plugin-transform-object-assign': specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) + version: 7.23.3(@babel/core@7.24.3) '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@babel/runtime-corejs2': specifier: ^7.23.9 version: 7.23.9 '@docsearch/react': specifier: ^3.6.0 - version: 3.6.0(@algolia/client-search@4.22.1)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.13.0) + version: 3.6.0(@algolia/client-search@4.23.0)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.13.0) '@emotion/cache': specifier: ^11.11.0 version: 11.11.0 @@ -513,26 +656,26 @@ importers: specifier: workspace:^ version: link:../packages/mui-utils/build '@mui/x-charts': - specifier: 6.19.5 - version: 6.19.5(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + specifier: 6.19.8 + version: 6.19.8(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/x-data-grid': - specifier: 7.0.0-beta.7 - version: 7.0.0-beta.7(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.0.0 + version: 7.0.0(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/x-data-grid-generator': - specifier: 7.0.0-beta.7 - version: 7.0.0-beta.7(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.0.0 + version: 7.0.0(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/x-data-grid-premium': - specifier: 7.0.0-beta.7 - version: 7.0.0-beta.7(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.0.0 + version: 7.0.0(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/x-data-grid-pro': - specifier: 7.0.0-beta.7 - version: 7.0.0-beta.7(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.0.0 + version: 7.0.0(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/x-date-pickers': - specifier: 6.19.7 - version: 6.19.7(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(date-fns-jalali@2.21.3-1)(date-fns@2.30.0)(react-dom@18.2.0)(react@18.2.0) + specifier: 6.19.8 + version: 6.19.8(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(date-fns-jalali@2.21.3-1)(date-fns@2.30.0)(react-dom@18.2.0)(react@18.2.0) '@mui/x-date-pickers-pro': - specifier: 6.19.7 - version: 6.19.7(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(date-fns-jalali@2.21.3-1)(date-fns@2.30.0)(react-dom@18.2.0)(react@18.2.0) + specifier: 6.19.8 + version: 6.19.8(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(date-fns-jalali@2.21.3-1)(date-fns@2.30.0)(react-dom@18.2.0)(react@18.2.0) '@mui/x-license-pro': specifier: 6.10.2 version: 6.10.2(@types/react@18.2.55)(react@18.2.0) @@ -546,8 +689,8 @@ importers: specifier: ^9.7.3 version: 9.7.3(react-dom@18.2.0)(react@18.2.0) autoprefixer: - specifier: ^10.4.18 - version: 10.4.18(postcss@8.4.35) + specifier: ^10.4.19 + version: 10.4.19(postcss@8.4.38) autosuggest-highlight: specifier: ^3.3.4 version: 3.3.4 @@ -621,14 +764,14 @@ importers: specifier: ^1.5.0 version: 1.5.0 markdown-to-jsx: - specifier: ^7.4.3 - version: 7.4.3(react@18.2.0) + specifier: ^7.4.5 + version: 7.4.5(react@18.2.0) material-ui-popup-state: specifier: ^5.0.10 version: 5.0.10(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) next: specifier: ^13.5.1 - version: 13.5.1(@babel/core@7.23.9)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) + version: 13.5.1(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) notistack: specifier: 3.0.1 version: 3.0.1(csstype@3.1.3)(react-dom@18.2.0)(react@18.2.0) @@ -636,11 +779,11 @@ importers: specifier: ^0.2.0 version: 0.2.0 postcss: - specifier: ^8.4.35 - version: 8.4.35 + specifier: ^8.4.38 + version: 8.4.38 postcss-import: specifier: ^15.1.0 - version: 15.1.0(postcss@8.4.35) + version: 15.1.0(postcss@8.4.38) prop-types: specifier: ^15.8.1 version: 15.8.1 @@ -679,7 +822,7 @@ importers: version: 0.13.1(react-dom@18.2.0)(react@18.2.0) react-spring: specifier: ^9.7.3 - version: 9.7.3(@react-three/fiber@8.15.16)(konva@9.3.2)(react-dom@18.2.0)(react-konva@18.2.10)(react-native@0.73.4)(react-zdog@1.2.2)(react@18.2.0)(three@0.161.0)(zdog@1.1.3) + version: 9.7.3(@react-three/fiber@8.16.0)(konva@9.3.6)(react-dom@18.2.0)(react-konva@18.2.10)(react-native@0.73.6)(react-zdog@1.2.2)(react@18.2.0)(three@0.162.0)(zdog@1.1.3) react-swipeable-views: specifier: ^0.14.0 version: 0.14.0(react@18.2.0) @@ -716,10 +859,10 @@ importers: devDependencies: '@babel/plugin-transform-react-constant-elements': specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) + version: 7.23.3(@babel/core@7.24.3) '@babel/preset-typescript': specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) + version: 7.24.1(@babel/core@7.24.3) '@mui-internal/test-utils': specifier: workspace:^ version: link:../packages/test-utils @@ -733,8 +876,8 @@ importers: specifier: ^3.2.3 version: 3.2.3 '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/css-mediaquery': specifier: ^0.1.4 version: 0.1.4 @@ -742,13 +885,13 @@ importers: specifier: ^0.2.2 version: 0.2.2 '@types/node': - specifier: ^18.19.25 - version: 18.19.25 + specifier: ^18.19.28 + version: 18.19.28 '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 + specifier: ^15.7.12 + version: 15.7.12 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 '@types/react-dom': specifier: 18.2.19 @@ -799,26 +942,26 @@ importers: specifier: ^5.0.5 version: 5.0.5 typescript: - specifier: ^5.3.3 - version: 5.3.3 + specifier: ^5.4.3 + version: 5.4.3 packages-internal/scripts: dependencies: '@babel/core': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.3 '@babel/plugin-syntax-class-properties': specifier: ^7.12.13 - version: 7.12.13(@babel/core@7.23.9) + version: 7.12.13(@babel/core@7.24.3) '@babel/plugin-syntax-jsx': specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) + version: 7.24.1(@babel/core@7.24.3) '@babel/plugin-syntax-typescript': specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) + version: 7.24.1(@babel/core@7.24.3) '@babel/types': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.0 '@mui/internal-docs-utils': specifier: workspace:^ version: link:../docs-utils @@ -829,21 +972,21 @@ importers: specifier: ^4.17.21 version: 4.17.21 typescript: - specifier: ^5.3.3 - version: 5.3.3 + specifier: ^5.4.3 + version: 5.4.3 uuid: specifier: ^9.0.1 version: 9.0.1 devDependencies: '@babel/register': specifier: ^7.23.7 - version: 7.23.7(@babel/core@7.23.9) + version: 7.23.7(@babel/core@7.24.3) '@types/babel__core': specifier: ^7.20.5 version: 7.20.5 '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/doctrine': specifier: ^0.0.9 version: 0.0.9 @@ -851,13 +994,13 @@ importers: specifier: ^4.17.0 version: 4.17.0 '@types/node': - specifier: ^18.19.25 - version: 18.19.25 + specifier: ^18.19.28 + version: 18.19.28 '@types/prettier': specifier: ^2.7.3 version: 2.7.3 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 '@types/uuid': specifier: ^9.0.8 @@ -879,13 +1022,13 @@ importers: dependencies: '@babel/core': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.3 '@babel/preset-typescript': specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) + version: 7.24.1(@babel/core@7.24.3) '@babel/traverse': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@mui/internal-docs-utils': specifier: workspace:^ version: link:../../packages-internal/docs-utils @@ -920,8 +1063,8 @@ importers: specifier: ^13.0.0 version: 13.0.0 typescript: - specifier: ^5.3.3 - version: 5.3.3 + specifier: ^5.4.3 + version: 5.4.3 unist-util-visit: specifier: ^2.0.3 version: 2.0.3 @@ -933,8 +1076,8 @@ importers: specifier: ^7.20.5 version: 7.20.5 '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/doctrine': specifier: ^0.0.9 version: 0.0.9 @@ -945,8 +1088,8 @@ importers: specifier: ^10.0.6 version: 10.0.6 '@types/node': - specifier: ^18.19.25 - version: 18.19.25 + specifier: ^18.19.28 + version: 18.19.28 '@types/react-docgen': specifier: workspace:* version: link:../react-docgen-types @@ -976,14 +1119,14 @@ importers: version: 4.17.21 devDependencies: '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/mocha': specifier: ^10.0.6 version: 10.0.6 '@types/node': - specifier: ^18.19.25 - version: 18.19.25 + specifier: ^18.19.28 + version: 18.19.28 '@types/sinon': specifier: ^10.0.20 version: 10.0.20 @@ -994,8 +1137,8 @@ importers: specifier: ^15.2.0 version: 15.2.0 typescript: - specifier: ^5.3.3 - version: 5.3.3 + specifier: ^5.4.3 + version: 5.4.3 packages/eslint-plugin-material-ui: dependencies: @@ -1004,14 +1147,14 @@ importers: version: 10.3.0 devDependencies: '@types/eslint': - specifier: ^8.56.2 - version: 8.56.2 + specifier: ^8.56.6 + version: 8.56.6 '@typescript-eslint/parser': specifier: ^6.19.1 - version: 6.19.1(eslint@8.56.0)(typescript@5.3.3) + version: 6.19.1(eslint@8.57.0)(typescript@5.4.3) eslint: - specifier: ^8.56.0 - version: 8.56.0 + specifier: ^8.57.0 + version: 8.57.0 packages/feedback: dependencies: @@ -1023,8 +1166,8 @@ importers: version: 9.0.1 optionalDependencies: aws-sdk: - specifier: ^2.1579.0 - version: 2.1579.0 + specifier: ^2.1589.0 + version: 2.1589.0 devDependencies: claudia: specifier: ^5.14.1 @@ -1034,7 +1177,7 @@ importers: dependencies: '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 lodash: specifier: ^4.17.21 version: 4.17.21 @@ -1046,8 +1189,8 @@ importers: version: 1.29.0 devDependencies: '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 chai: specifier: ^4.4.1 version: 4.4.1 @@ -1056,10 +1199,10 @@ importers: dependencies: '@babel/helper-module-imports': specifier: ^7.22.15 - version: 7.22.15 + version: 7.24.3 '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@mui/utils': specifier: ^5.0.0 version: link:../mui-utils/build @@ -1074,17 +1217,17 @@ importers: specifier: ^3.1.3 version: 3.1.3 '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/mocha': specifier: ^10.0.6 version: 10.0.6 '@types/node': - specifier: ^18.19.25 - version: 18.19.25 + specifier: ^18.19.28 + version: 18.19.28 babel-plugin-tester: specifier: ^11.0.4 - version: 11.0.4(@babel/core@7.23.9) + version: 11.0.4(@babel/core@7.24.3) chai: specifier: ^4.4.1 version: 4.4.1 @@ -1093,7 +1236,7 @@ importers: dependencies: '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@floating-ui/react-dom': specifier: ^2.0.8 version: 2.0.8(react-dom@18.2.0)(react@18.2.0) @@ -1120,19 +1263,19 @@ importers: specifier: workspace:^ version: link:../mui-babel-macros '@testing-library/react': - specifier: ^14.2.1 - version: 14.2.1(react-dom@18.2.0)(react@18.2.0) + specifier: ^14.2.2 + version: 14.2.2(react-dom@18.2.0)(react@18.2.0) '@testing-library/user-event': specifier: ^14.5.2 version: 14.5.2(@testing-library/dom@9.3.4) '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 + specifier: ^15.7.12 + version: 15.7.12 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 '@types/react-dom': specifier: 18.2.19 @@ -1164,32 +1307,32 @@ importers: dependencies: '@babel/core': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.3 '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@babel/traverse': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 jscodeshift: specifier: ^0.13.1 - version: 0.13.1(@babel/preset-env@7.23.9) + version: 0.13.1(@babel/preset-env@7.24.3) jscodeshift-add-imports: specifier: ^1.0.10 version: 1.0.10(jscodeshift@0.13.1) postcss: - specifier: ^8.4.35 - version: 8.4.35 + specifier: ^8.4.38 + version: 8.4.38 postcss-cli: specifier: ^8.3.1 - version: 8.3.1(postcss@8.4.35) + version: 8.3.1(postcss@8.4.38) yargs: specifier: ^17.7.2 version: 17.7.2 devDependencies: '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/jscodeshift': specifier: 0.11.5 version: 0.11.5 @@ -1205,16 +1348,13 @@ importers: dependencies: '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@mui/base': - specifier: workspace:* + specifier: '*' version: link:../mui-base/build - '@mui/material': - specifier: workspace:^ - version: link:../mui-material/build - '@mui/utils': - specifier: workspace:^ - version: link:../mui-utils/build + '@mui/system': + specifier: ^5.0.0 + version: 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.55)(react@18.2.0) clsx: specifier: ^2.1.0 version: 2.1.0 @@ -1225,18 +1365,24 @@ importers: specifier: ^15.8.1 version: 15.8.1 devDependencies: + '@mui/icons-material': + specifier: workspace:* + version: link:../mui-icons-material/build + '@mui/material': + specifier: workspace:* + version: link:../mui-material/build '@types/node': - specifier: ^18.19.25 - version: 18.19.25 + specifier: ^18.19.28 + version: 18.19.28 '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 + specifier: ^15.7.12 + version: 15.7.12 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 next: specifier: ^13.5.1 - version: 13.5.1(@babel/core@7.23.9)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) + version: 13.5.1(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -1249,8 +1395,8 @@ importers: version: 7.11.1 devDependencies: '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 chai: specifier: ^4.4.1 version: 4.4.1 @@ -1283,14 +1429,14 @@ importers: version: 18.2.0(react@18.2.0) devDependencies: '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 packages/mui-icons-material: dependencies: '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 devDependencies: '@mui/icons-material': specifier: workspace:* @@ -1302,10 +1448,10 @@ importers: specifier: workspace:^ version: link:../mui-material/build '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 chai: specifier: ^4.4.1 @@ -1349,7 +1495,7 @@ importers: dependencies: '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@emotion/react': specifier: ^11.5.0 version: 11.11.4(@types/react@18.2.55)(react@18.2.0) @@ -1385,13 +1531,13 @@ importers: specifier: workspace:^ version: link:../mui-material/build '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 + specifier: ^15.7.12 + version: 15.7.12 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 '@types/react-dom': specifier: 18.2.19 @@ -1410,7 +1556,7 @@ importers: version: 4.17.21 next: specifier: ^13.4.19 - version: 13.5.1(@babel/core@7.23.9)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) + version: 13.5.1(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -1426,7 +1572,7 @@ importers: dependencies: '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@emotion/react': specifier: ^11.5.0 version: 11.11.4(@types/react@18.2.55)(react@18.2.0) @@ -1436,9 +1582,6 @@ importers: '@mui/base': specifier: workspace:* version: link:../mui-base/build - '@mui/material': - specifier: '>=5.15.0' - version: link:../mui-material/build '@mui/system': specifier: workspace:^ version: link:../mui-system/build @@ -1458,14 +1601,17 @@ importers: '@mui-internal/test-utils': specifier: workspace:^ version: link:../test-utils + '@mui/material': + specifier: workspace:* + version: link:../mui-material/build '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 + specifier: ^15.7.12 + version: 15.7.12 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 '@types/react-dom': specifier: 18.2.19 @@ -1491,7 +1637,7 @@ importers: dependencies: '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@emotion/react': specifier: ^11.5.0 version: 11.11.4(@types/react@18.2.55)(react@18.2.0) @@ -1551,13 +1697,13 @@ importers: specifier: ^14.5.2 version: 14.5.2(@testing-library/dom@9.3.4) '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 + specifier: ^15.7.12 + version: 15.7.12 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 '@types/react-dom': specifier: 18.2.19 @@ -1572,8 +1718,8 @@ importers: specifier: ^0.1.2 version: 0.1.2 express: - specifier: ^4.18.3 - version: 4.18.3 + specifier: ^4.19.2 + version: 4.19.2 fast-glob: specifier: ^3.3.2 version: 3.3.2 @@ -1600,7 +1746,7 @@ importers: version: 3.29.4 rollup-plugin-babel: specifier: ^4.4.0 - version: 4.4.0(@babel/core@7.23.9)(rollup@3.29.4) + version: 4.4.0(@babel/core@7.24.3)(rollup@3.29.4) rollup-plugin-commonjs: specifier: ^10.1.0 version: 10.1.0(rollup@3.29.4) @@ -1622,9 +1768,9 @@ importers: dependencies: '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@mui/material': - specifier: ^5.0.0 + specifier: workspace:^ version: link:../mui-material/build devDependencies: '@emotion/cache': @@ -1637,11 +1783,11 @@ importers: specifier: ^11.11.0 version: 11.11.0 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 next: specifier: 13.5.1 - version: 13.5.1(@babel/core@7.23.9)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) + version: 13.5.1(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -1651,7 +1797,7 @@ importers: dependencies: '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@mui/utils': specifier: workspace:^ version: link:../mui-utils/build @@ -1666,10 +1812,10 @@ importers: specifier: workspace:^ version: link:../mui-types/build '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 chai: specifier: ^4.4.1 @@ -1683,7 +1829,7 @@ importers: dependencies: '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@emotion/cache': specifier: ^11.11.0 version: 11.11.0 @@ -1707,10 +1853,10 @@ importers: specifier: workspace:* version: link:build '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 chai: specifier: ^4.4.1 @@ -1724,7 +1870,7 @@ importers: dependencies: '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 csstype: specifier: ^3.1.3 version: 3.1.3 @@ -1742,13 +1888,13 @@ importers: specifier: workspace:* version: link:build '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/hoist-non-react-statics': specifier: ^3.3.5 version: 3.3.5 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 chai: specifier: ^4.4.1 @@ -1765,7 +1911,7 @@ importers: dependencies: '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@emotion/hash': specifier: ^0.9.1 version: 0.9.1 @@ -1822,10 +1968,10 @@ importers: specifier: workspace:^ version: link:../mui-material/build '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 '@types/react-dom': specifier: 18.2.19 @@ -1851,7 +1997,7 @@ importers: dependencies: '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@mui/private-theming': specifier: workspace:^ version: link:../mui-private-theming/build @@ -1890,13 +2036,13 @@ importers: specifier: workspace:* version: link:build '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 + specifier: ^15.7.12 + version: 15.7.12 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 '@types/sinon': specifier: ^10.0.20 @@ -1927,7 +2073,7 @@ importers: specifier: workspace:* version: link:build '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 publishDirectory: build @@ -1935,10 +2081,10 @@ importers: dependencies: '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 + specifier: ^15.7.12 + version: 15.7.12 prop-types: specifier: ^15.8.1 version: 15.8.1 @@ -1956,16 +2102,16 @@ importers: specifier: workspace:^ version: link:../mui-types/build '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/mocha': specifier: ^10.0.6 version: 10.0.6 '@types/node': - specifier: ^18.19.25 - version: 18.19.25 + specifier: ^18.19.28 + version: 18.19.28 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 '@types/react-dom': specifier: 18.2.19 @@ -2004,28 +2150,31 @@ importers: devDependencies: next: specifier: ^13.5.1 - version: 13.5.1(@babel/core@7.23.9)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) + version: 13.5.1(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) packages/pigment-css-react: dependencies: '@babel/core': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.3 '@babel/helper-module-imports': specifier: ^7.22.15 - version: 7.22.15 + version: 7.24.3 '@babel/helper-plugin-utils': specifier: ^7.22.5 - version: 7.22.5 + version: 7.24.0 '@babel/parser': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@babel/types': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.0 '@emotion/css': specifier: ^11.11.2 version: 11.11.2 + '@emotion/is-prop-valid': + specifier: ^1.2.2 + version: 1.2.2 '@emotion/react': specifier: ^11.11.4 version: 11.11.4(@types/react@18.2.55)(react@18.2.0) @@ -2062,10 +2211,13 @@ importers: stylis: specifier: ^4.3.1 version: 4.3.1 + stylis-plugin-rtl: + specifier: ^2.1.1 + version: 2.1.1(stylis@4.3.1) devDependencies: '@babel/plugin-syntax-jsx': specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) + version: 7.24.1(@babel/core@7.24.3) '@types/babel__core': specifier: ^7.20.5 version: 7.20.5 @@ -2076,8 +2228,8 @@ importers: specifier: ^7.10.3 version: 7.10.3 '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/cssesc': specifier: ^3.0.2 version: 3.0.2 @@ -2088,10 +2240,10 @@ importers: specifier: ^10.0.6 version: 10.0.6 '@types/node': - specifier: ^18.19.25 - version: 18.19.25 + specifier: ^18.19.28 + version: 18.19.28 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 '@types/stylis': specifier: ^4.2.5 @@ -2102,6 +2254,9 @@ importers: prettier: specifier: ^3.2.5 version: 3.2.5 + prop-types: + specifier: ^15.8.1 + version: 15.8.1 react: specifier: ^18.2.0 version: 18.2.0 @@ -2110,7 +2265,7 @@ importers: dependencies: '@babel/core': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.3 '@pigment-css/react': specifier: workspace:^ version: link:../pigment-css-react @@ -2120,9 +2275,9 @@ importers: '@wyw-in-js/transform': specifier: ^0.5.0 version: 0.5.0 - babel-plugin-transform-react-remove-prop-types: - specifier: ^0.4.24 - version: 0.4.24 + babel-plugin-define-var: + specifier: ^0.1.0 + version: 0.1.0 unplugin: specifier: ^1.7.1 version: 1.7.1 @@ -2135,10 +2290,10 @@ importers: dependencies: '@babel/core': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.3 '@babel/preset-typescript': specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) + version: 7.24.1(@babel/core@7.24.3) '@pigment-css/react': specifier: workspace:^ version: link:../pigment-css-react @@ -2148,16 +2303,16 @@ importers: '@wyw-in-js/transform': specifier: ^0.5.0 version: 0.5.0 - babel-plugin-transform-react-remove-prop-types: - specifier: ^0.4.24 - version: 0.4.24 + babel-plugin-define-var: + specifier: ^0.1.0 + version: 0.1.0 devDependencies: '@types/babel__core': specifier: ^7.20.5 version: 7.20.5 vite: specifier: ^5.0.12 - version: 5.0.12(@types/node@18.19.25) + version: 5.2.2(@types/node@18.19.28) packages/react-docgen-types: devDependencies: @@ -2178,23 +2333,23 @@ importers: specifier: ^10.0.6 version: 10.0.6 '@types/node': - specifier: ^18.19.25 - version: 18.19.25 + specifier: ^18.19.28 + version: 18.19.28 packages/test-utils: dependencies: '@babel/plugin-transform-modules-commonjs': specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) + version: 7.24.1(@babel/core@7.24.3) '@babel/preset-typescript': specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) + version: 7.24.1(@babel/core@7.24.3) '@babel/register': specifier: ^7.23.7 - version: 7.23.7(@babel/core@7.23.9) + version: 7.23.7(@babel/core@7.24.3) '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@emotion/cache': specifier: ^11.11.0 version: 11.11.0 @@ -2208,8 +2363,8 @@ importers: specifier: ^9.3.4 version: 9.3.4 '@testing-library/react': - specifier: ^14.2.1 - version: 14.2.1(react-dom@18.2.0)(react@18.2.0) + specifier: ^14.2.2 + version: 14.2.2(react-dom@18.2.0)(react@18.2.0) chai: specifier: ^4.4.1 version: 4.4.1 @@ -2257,8 +2412,8 @@ importers: version: 15.2.0 devDependencies: '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/chai-dom': specifier: ^1.11.3 version: 1.11.3 @@ -2269,10 +2424,10 @@ importers: specifier: ^1.0.4 version: 1.0.4 '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 + specifier: ^15.7.12 + version: 15.7.12 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 '@types/react-dom': specifier: 18.2.19 @@ -2284,8 +2439,8 @@ importers: specifier: ^10.0.20 version: 10.0.20 typescript: - specifier: ^5.3.3 - version: 5.3.3 + specifier: ^5.4.3 + version: 5.4.3 packages/waterfall: {} @@ -2293,7 +2448,7 @@ importers: devDependencies: '@babel/runtime': specifier: ^7.23.9 - version: 7.23.9 + version: 7.24.1 '@emotion/cache': specifier: ^11.11.0 version: 11.11.0 @@ -2331,10 +2486,10 @@ importers: specifier: ^9.3.4 version: 9.3.4 '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 + specifier: ^4.3.14 + version: 4.3.14 '@types/react': - specifier: ^18.2.55 + specifier: 18.2.55 version: 18.2.55 '@types/react-is': specifier: ^18.2.4 @@ -2410,47 +2565,47 @@ packages: engines: {node: '>=0.10.0'} dev: true - /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.19.1)(search-insights@2.13.0): + /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.23.0)(algoliasearch@4.19.1)(search-insights@2.13.0): resolution: {integrity: sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==} dependencies: - '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.19.1)(search-insights@2.13.0) - '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.19.1) + '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.23.0)(algoliasearch@4.19.1)(search-insights@2.13.0) + '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.23.0)(algoliasearch@4.19.1) transitivePeerDependencies: - '@algolia/client-search' - algoliasearch - search-insights dev: false - /@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.19.1)(search-insights@2.13.0): + /@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.23.0)(algoliasearch@4.19.1)(search-insights@2.13.0): resolution: {integrity: sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==} peerDependencies: search-insights: '>= 1 < 3' dependencies: - '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.19.1) + '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.23.0)(algoliasearch@4.19.1) search-insights: 2.13.0 transitivePeerDependencies: - '@algolia/client-search' - algoliasearch dev: false - /@algolia/autocomplete-preset-algolia@1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.19.1): + /@algolia/autocomplete-preset-algolia@1.9.3(@algolia/client-search@4.23.0)(algoliasearch@4.19.1): resolution: {integrity: sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==} peerDependencies: '@algolia/client-search': '>= 4.9.1 < 6' algoliasearch: '>= 4.9.1 < 6' dependencies: - '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.19.1) - '@algolia/client-search': 4.22.1 + '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.23.0)(algoliasearch@4.19.1) + '@algolia/client-search': 4.23.0 algoliasearch: 4.19.1 dev: false - /@algolia/autocomplete-shared@1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.19.1): + /@algolia/autocomplete-shared@1.9.3(@algolia/client-search@4.23.0)(algoliasearch@4.19.1): resolution: {integrity: sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==} peerDependencies: '@algolia/client-search': '>= 4.9.1 < 6' algoliasearch: '>= 4.9.1 < 6' dependencies: - '@algolia/client-search': 4.22.1 + '@algolia/client-search': 4.23.0 algoliasearch: 4.19.1 dev: false @@ -2464,8 +2619,8 @@ packages: resolution: {integrity: sha512-XGghi3l0qA38HiqdoUY+wvGyBsGvKZ6U3vTiMBT4hArhP3fOGLXpIINgMiiGjTe4FVlTa5a/7Zf2bwlIHfRqqg==} dev: false - /@algolia/cache-common@4.22.1: - resolution: {integrity: sha512-TJMBKqZNKYB9TptRRjSUtevJeQVXRmg6rk9qgFKWvOy8jhCPdyNZV1nB3SKGufzvTVbomAukFR8guu/8NRKBTA==} + /@algolia/cache-common@4.23.0: + resolution: {integrity: sha512-jz/kZm8Vyp//aympt7OMMVTHw4YD6TskyOxJhtBInqS//CaNA07GiJwL7WFOM422fz9WokbeGaTAFNtLkZP0BQ==} dev: false /@algolia/cache-in-memory@4.19.1: @@ -2498,11 +2653,11 @@ packages: '@algolia/transporter': 4.19.1 dev: false - /@algolia/client-common@4.22.1: - resolution: {integrity: sha512-IvaL5v9mZtm4k4QHbBGDmU3wa/mKokmqNBqPj0K7lcR8ZDKzUorhcGp/u8PkPC/e0zoHSTvRh7TRkGX3Lm7iOQ==} + /@algolia/client-common@4.23.0: + resolution: {integrity: sha512-S+vOOJJzpPHhn5rANDVPf7HEnLNqYf4THU+0oc7zXyR3Wa+2kBzKvn7L0kfEQzvlk7vrhArma1nVOb+zYGpCXA==} dependencies: - '@algolia/requester-common': 4.22.1 - '@algolia/transporter': 4.22.1 + '@algolia/requester-common': 4.23.0 + '@algolia/transporter': 4.23.0 dev: false /@algolia/client-personalization@4.19.1: @@ -2521,20 +2676,20 @@ packages: '@algolia/transporter': 4.19.1 dev: false - /@algolia/client-search@4.22.1: - resolution: {integrity: sha512-yb05NA4tNaOgx3+rOxAmFztgMTtGBi97X7PC3jyNeGiwkAjOZc2QrdZBYyIdcDLoI09N0gjtpClcackoTN0gPA==} + /@algolia/client-search@4.23.0: + resolution: {integrity: sha512-O/ZXOJjQrGV/84fM8C6U0wH5h21iqFC2fMsNX3KmBvoZxFidXoLtng1WasNpYXXi4U9twgGeqJD3HsV/48o08Q==} dependencies: - '@algolia/client-common': 4.22.1 - '@algolia/requester-common': 4.22.1 - '@algolia/transporter': 4.22.1 + '@algolia/client-common': 4.23.0 + '@algolia/requester-common': 4.23.0 + '@algolia/transporter': 4.23.0 dev: false /@algolia/logger-common@4.19.1: resolution: {integrity: sha512-i6pLPZW/+/YXKis8gpmSiNk1lOmYCmRI6+x6d2Qk1OdfvX051nRVdalRbEcVTpSQX6FQAoyeaui0cUfLYW5Elw==} dev: false - /@algolia/logger-common@4.22.1: - resolution: {integrity: sha512-OnTFymd2odHSO39r4DSWRFETkBufnY2iGUZNrMXpIhF5cmFE8pGoINNPzwg02QLBlGSaLqdKy0bM8S0GyqPLBg==} + /@algolia/logger-common@4.23.0: + resolution: {integrity: sha512-SY2GkL99QLfBDUTtgyd9ZOWB/Mz5Yr01q0WewTtlIm5hy02CZN34utIreC1A41/eswLOvJAadQsRZv1qeoMxrw==} dev: false /@algolia/logger-console@4.19.1: @@ -2553,8 +2708,8 @@ packages: resolution: {integrity: sha512-BisRkcWVxrDzF1YPhAckmi2CFYK+jdMT60q10d7z3PX+w6fPPukxHRnZwooiTUrzFe50UBmLItGizWHP5bDzVQ==} dev: false - /@algolia/requester-common@4.22.1: - resolution: {integrity: sha512-dgvhSAtg2MJnR+BxrIFqlLtkLlVVhas9HgYKMk2Uxiy5m6/8HZBL40JVAMb2LovoPFs9I/EWIoFVjOrFwzn5Qg==} + /@algolia/requester-common@4.23.0: + resolution: {integrity: sha512-Ol+vffP7WdMhlHreLmIgilb0pfcu+x9Ylx2iR/o7u2MtVdMrHpsgIjpy7YSCRFTS/zrGc488Y1Y9PsrAi1LB2A==} dev: false /@algolia/requester-node-http@4.19.1: @@ -2571,12 +2726,12 @@ packages: '@algolia/requester-common': 4.19.1 dev: false - /@algolia/transporter@4.22.1: - resolution: {integrity: sha512-kzWgc2c9IdxMa3YqA6TN0NW5VrKYYW/BELIn7vnLyn+U/RFdZ4lxxt9/8yq3DKV5snvoDzzO4ClyejZRdV3lMQ==} + /@algolia/transporter@4.23.0: + resolution: {integrity: sha512-zUOhT9LFSRZHpdbRa59yPglzHhPkO7eVdlU8kcMWZYgZ8lUcofU8jiGNH8FARzkxJSt6ZG4/MqSHKJEK3PYbPA==} dependencies: - '@algolia/cache-common': 4.22.1 - '@algolia/logger-common': 4.22.1 - '@algolia/requester-common': 4.22.1 + '@algolia/cache-common': 4.23.0 + '@algolia/logger-common': 4.23.0 + '@algolia/requester-common': 4.23.0 dev: false /@alloc/quick-lru@5.2.0: @@ -2584,12 +2739,12 @@ packages: engines: {node: '>=10'} dev: true - /@ampproject/remapping@2.2.0: - resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==} + /@ampproject/remapping@2.3.0: + resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==} engines: {node: '>=6.0.0'} dependencies: - '@jridgewell/gen-mapping': 0.1.1 - '@jridgewell/trace-mapping': 0.3.20 + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 /@argos-ci/core@1.5.5: resolution: {integrity: sha512-m271rCtp5fnpUU89eSlS/If5WnDIUGduEHfW9YrwVHnMYWPCNBDxp2q87Wgjl3O5RTm/x+sDED3vFD9i1q+yTQ==} @@ -2611,15 +2766,15 @@ packages: engines: {node: '>=16.0.0'} dev: true - /@babel/cli@7.23.9(@babel/core@7.23.9): + /@babel/cli@7.23.9(@babel/core@7.24.3): resolution: {integrity: sha512-vB1UXmGDNEhcf1jNAHKT9IlYk1R+hehVTLFlCLHBi8gfuHQGP6uRjgXVYU0EVlI/qwAWpstqkBdf2aez3/z/5Q==} engines: {node: '>=6.9.0'} hasBin: true peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@jridgewell/trace-mapping': 0.3.20 + '@babel/core': 7.24.3 + '@jridgewell/trace-mapping': 0.3.25 commander: 4.1.1 convert-source-map: 2.0.0 fs-readdir-recursive: 1.1.0 @@ -2631,31 +2786,31 @@ packages: chokidar: 3.6.0 dev: true - /@babel/code-frame@7.23.5: - resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==} + /@babel/code-frame@7.24.2: + resolution: {integrity: sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/highlight': 7.23.4 - chalk: 2.4.2 + '@babel/highlight': 7.24.2 + picocolors: 1.0.0 - /@babel/compat-data@7.23.5: - resolution: {integrity: sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==} + /@babel/compat-data@7.24.1: + resolution: {integrity: sha512-Pc65opHDliVpRHuKfzI+gSA4zcgr65O4cl64fFJIWEEh8JoHIHh0Oez1Eo8Arz8zq/JhgKodQaxEwUPRtZylVA==} engines: {node: '>=6.9.0'} - /@babel/core@7.23.9: - resolution: {integrity: sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==} + /@babel/core@7.24.3: + resolution: {integrity: sha512-5FcvN1JHw2sHJChotgx8Ek0lyuh4kCKelgMTTqhYJJtloNvUfpAFMeNQUtdlIaktwrSV9LtCdqwk48wL2wBacQ==} engines: {node: '>=6.9.0'} dependencies: - '@ampproject/remapping': 2.2.0 - '@babel/code-frame': 7.23.5 - '@babel/generator': 7.23.6 + '@ampproject/remapping': 2.3.0 + '@babel/code-frame': 7.24.2 + '@babel/generator': 7.24.1 '@babel/helper-compilation-targets': 7.23.6 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.9) - '@babel/helpers': 7.23.9 - '@babel/parser': 7.23.9 - '@babel/template': 7.23.9 - '@babel/traverse': 7.23.9 - '@babel/types': 7.23.9 + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.3) + '@babel/helpers': 7.24.1 + '@babel/parser': 7.24.1 + '@babel/template': 7.24.0 + '@babel/traverse': 7.24.1 + '@babel/types': 7.24.0 convert-source-map: 2.0.0 debug: 4.3.4(supports-color@8.1.1) gensync: 1.0.0-beta.2 @@ -2664,76 +2819,76 @@ packages: transitivePeerDependencies: - supports-color - /@babel/generator@7.23.6: - resolution: {integrity: sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==} + /@babel/generator@7.24.1: + resolution: {integrity: sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.9 - '@jridgewell/gen-mapping': 0.3.2 - '@jridgewell/trace-mapping': 0.3.20 + '@babel/types': 7.24.0 + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 jsesc: 2.5.2 /@babel/helper-annotate-as-pure@7.22.5: resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.9 + '@babel/types': 7.24.0 /@babel/helper-builder-binary-assignment-operator-visitor@7.22.15: resolution: {integrity: sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.9 + '@babel/types': 7.24.0 /@babel/helper-compilation-targets@7.23.6: resolution: {integrity: sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/compat-data': 7.23.5 + '@babel/compat-data': 7.24.1 '@babel/helper-validator-option': 7.23.5 browserslist: 4.23.0 lru-cache: 5.1.1 semver: 6.3.1 - /@babel/helper-create-class-features-plugin@7.23.6(@babel/core@7.23.9): - resolution: {integrity: sha512-cBXU1vZni/CpGF29iTu4YRbOZt3Wat6zCoMDxRF1MayiEc4URxOj31tT65HUM0CRpMowA3HCJaAOVOUnMf96cw==} + /@babel/helper-create-class-features-plugin@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-1yJa9dX9g//V6fDebXoEfEsxkZHk3Hcbm+zLhyu6qVgYFLvmTALTeV+jNU9e5RnYtioBrGEOdoI2joMSNQ/+aA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-annotate-as-pure': 7.22.5 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-function-name': 7.23.0 '@babel/helper-member-expression-to-functions': 7.23.0 '@babel/helper-optimise-call-expression': 7.22.5 - '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.9) + '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.3) '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 '@babel/helper-split-export-declaration': 7.22.6 semver: 6.3.1 - /@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.23.9): + /@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.24.3): resolution: {integrity: sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-annotate-as-pure': 7.22.5 regexpu-core: 5.3.2 semver: 6.3.1 - /@babel/helper-define-polyfill-provider@0.5.0(@babel/core@7.23.9): - resolution: {integrity: sha512-NovQquuQLAQ5HuyjCz7WQP9MjRj7dx++yspwiyUiGl9ZyadHRSql1HZh5ogRd8W8w6YM6EQ/NTB8rgjLt5W65Q==} + /@babel/helper-define-polyfill-provider@0.6.1(@babel/core@7.24.3): + resolution: {integrity: sha512-o7SDgTJuvx5vLKD6SFvkydkSMBvahDKGiNJzG22IZYXhiqoe9efY7zocICBgzHV4IRg5wdgl2nEL/tulKIEIbA==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-compilation-targets': 7.23.6 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-plugin-utils': 7.24.0 debug: 4.3.4(supports-color@8.1.1) lodash.debounce: 4.0.8 - resolve: 1.22.4 + resolve: 1.22.8 transitivePeerDependencies: - supports-color @@ -2745,36 +2900,36 @@ packages: resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/template': 7.23.9 - '@babel/types': 7.23.9 + '@babel/template': 7.24.0 + '@babel/types': 7.24.0 /@babel/helper-hoist-variables@7.22.5: resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.9 + '@babel/types': 7.24.0 /@babel/helper-member-expression-to-functions@7.23.0: resolution: {integrity: sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.9 + '@babel/types': 7.24.0 - /@babel/helper-module-imports@7.22.15: - resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==} + /@babel/helper-module-imports@7.24.3: + resolution: {integrity: sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.9 + '@babel/types': 7.24.0 - /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.9): + /@babel/helper-module-transforms@7.23.3(@babel/core@7.24.3): resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-module-imports': 7.22.15 + '@babel/helper-module-imports': 7.24.3 '@babel/helper-simple-access': 7.22.5 '@babel/helper-split-export-declaration': 7.22.6 '@babel/helper-validator-identifier': 7.22.20 @@ -2783,30 +2938,30 @@ packages: resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.9 + '@babel/types': 7.24.0 - /@babel/helper-plugin-utils@7.22.5: - resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==} + /@babel/helper-plugin-utils@7.24.0: + resolution: {integrity: sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==} engines: {node: '>=6.9.0'} - /@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.23.9): + /@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.24.3): resolution: {integrity: sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-annotate-as-pure': 7.22.5 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-wrap-function': 7.22.20 - /@babel/helper-replace-supers@7.22.20(@babel/core@7.23.9): - resolution: {integrity: sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==} + /@babel/helper-replace-supers@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-member-expression-to-functions': 7.23.0 '@babel/helper-optimise-call-expression': 7.22.5 @@ -2815,22 +2970,22 @@ packages: resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.9 + '@babel/types': 7.24.0 /@babel/helper-skip-transparent-expression-wrappers@7.22.5: resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.9 + '@babel/types': 7.24.0 /@babel/helper-split-export-declaration@7.22.6: resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.9 + '@babel/types': 7.24.0 - /@babel/helper-string-parser@7.23.4: - resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==} + /@babel/helper-string-parser@7.24.1: + resolution: {integrity: sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==} engines: {node: '>=6.9.0'} /@babel/helper-validator-identifier@7.22.20: @@ -2846,36 +3001,37 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/helper-function-name': 7.23.0 - '@babel/template': 7.23.9 - '@babel/types': 7.23.9 + '@babel/template': 7.24.0 + '@babel/types': 7.24.0 - /@babel/helpers@7.23.9: - resolution: {integrity: sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==} + /@babel/helpers@7.24.1: + resolution: {integrity: sha512-BpU09QqEe6ZCHuIHFphEFgvNSrubve1FtyMton26ekZ85gRGi6LrTF7zArARp2YvyFxloeiRmtSCq5sjh1WqIg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/template': 7.23.9 - '@babel/traverse': 7.23.9 - '@babel/types': 7.23.9 + '@babel/template': 7.24.0 + '@babel/traverse': 7.24.1 + '@babel/types': 7.24.0 transitivePeerDependencies: - supports-color - /@babel/highlight@7.23.4: - resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==} + /@babel/highlight@7.24.2: + resolution: {integrity: sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==} engines: {node: '>=6.9.0'} dependencies: '@babel/helper-validator-identifier': 7.22.20 chalk: 2.4.2 js-tokens: 4.0.0 + picocolors: 1.0.0 - /@babel/node@7.23.9(@babel/core@7.23.9): + /@babel/node@7.23.9(@babel/core@7.24.3): resolution: {integrity: sha512-/d4ju/POwlGIJlZ+NqWH1qu61wt6ZlTZZZutrK2MOSdaH1JCh726nLw/GSvAjG+LTY6CO9SsB8uWcttnFKm6yg==} engines: {node: '>=6.9.0'} hasBin: true peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/register': 7.23.7(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/register': 7.23.7(@babel/core@7.24.3) commander: 4.1.1 core-js: 3.32.1 node-environment-flags: 1.0.6 @@ -2883,1108 +3039,1105 @@ packages: v8flags: 3.2.0 dev: true - /@babel/parser@7.23.9: - resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==} + /@babel/parser@7.24.1: + resolution: {integrity: sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==} engines: {node: '>=6.0.0'} hasBin: true dependencies: - '@babel/types': 7.23.9 + '@babel/types': 7.24.0 - /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-iRkKcCqb7iGnq9+3G6rZ+Ciz5VywC4XNRHe57lKM+jOeYAoR0lVqdeeDRfh0tQcTfw/+vBhHn926FmQhLtlFLQ==} + /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-y4HqEnkelJIOQGd+3g1bTeKsA5c6qM7eOn7VggGVbBc0y8MLSKHacwcIE2PplNlQSj0PqS9rrXL/nkPVK+kUNg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-WwlxbfMNdVEpQjZmK5mhm7oSwD3dS6eU+Iwsi4Knl9wAletWem7kaRsGOG+8UEbRyqxY4SS5zvtfXwX+jMxUwQ==} + /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-Hj791Ii4ci8HqnaKHAlLNs+zaLXb0EzSDhiAWp5VNlyvCNymYfacs64pxTxbH1znW/NcArSmwpmG9IKE/TUVVQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-transform-optional-chaining': 7.23.4(@babel/core@7.23.9) + '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.3) - /@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.23.7(@babel/core@7.23.9): - resolution: {integrity: sha512-LlRT7HgaifEpQA1ZgLVOIJZZFVPWN5iReq/7/JixwBtwcoeVGDBD53ZV28rrsLYOZs1Y/EHhA8N/Z6aazHR8cw==} + /@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-m9m/fXsXLiHfwdgydIFnpk+7jlVbnvlK5B2EKiPdLUb6WX654ZaaEWJUjk8TftRbZpK0XibovlLWX4KIZhV6jw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.23.9): + /@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.24.3): resolution: {integrity: sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==} engines: {node: '>=6.9.0'} deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead. peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.23.9) - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.9) + '@babel/helper-plugin-utils': 7.24.0 + '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.3) + '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.3) dev: false - /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.23.9): + /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.24.3): resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==} engines: {node: '>=6.9.0'} deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead. peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-create-class-features-plugin': 7.23.6(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-proposal-export-default-from@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-Q23MpLZfSGZL1kU7fWqV262q65svLSCIP5kZ/JCW/rKTCm/FrLjpvEd2kfUYMVeHh4QhV/xzyoRAHWrAZJrE3Q==} + /@babel/plugin-proposal-export-default-from@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-+0hrgGGV3xyYIjOrD/bUZk/iUwOIGuoANfRfVg1cPhYBxF+TIXSEcc42DqzBICmWsnAQ+SfKedY0bj8QD+LuMg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-export-default-from': 7.23.3(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-export-default-from': 7.24.1(@babel/core@7.24.3) dev: false - /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.23.9): + /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.24.3): resolution: {integrity: sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==} engines: {node: '>=6.9.0'} deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead. peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.3) dev: false - /@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.23.9): + /@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.24.3): resolution: {integrity: sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==} engines: {node: '>=6.9.0'} deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead. peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.3) dev: false - /@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.23.9): + /@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.24.3): resolution: {integrity: sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==} engines: {node: '>=6.9.0'} deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead. peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/compat-data': 7.23.5 - '@babel/core': 7.23.9 + '@babel/compat-data': 7.24.1 + '@babel/core': 7.24.3 '@babel/helper-compilation-targets': 7.23.6 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.23.9) - '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.23.9) + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.24.3) - /@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.23.9): + /@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.24.3): resolution: {integrity: sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==} engines: {node: '>=6.9.0'} deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead. peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.3) dev: false - /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.23.9): + /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.24.3): resolution: {integrity: sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==} engines: {node: '>=6.9.0'} deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead. peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.9) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.3) dev: false - /@babel/plugin-proposal-private-methods@7.18.6(@babel/core@7.23.9): + /@babel/plugin-proposal-private-methods@7.18.6(@babel/core@7.24.3): resolution: {integrity: sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==} engines: {node: '>=6.9.0'} deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead. peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-create-class-features-plugin': 7.23.6(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.23.9): + /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.3): resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 - /@babel/plugin-proposal-private-property-in-object@7.21.11(@babel/core@7.23.9): + /@babel/plugin-proposal-private-property-in-object@7.21.11(@babel/core@7.24.3): resolution: {integrity: sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==} engines: {node: '>=6.9.0'} deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead. peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-create-class-features-plugin': 7.23.6(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.23.9) + '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.3) dev: true - /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.23.9): + /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.24.3): resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.23.9): + /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.24.3): resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.23.9): + /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.24.3): resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.23.9): + /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.24.3): resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-export-default-from@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-KeENO5ck1IeZ/l2lFZNy+mpobV3D2Zy5C1YFnWm+YuY5mQiAWc4yAp13dqgguwsBsFVLh4LPCEqCa5qW13N+hw==} + /@babel/plugin-syntax-export-default-from@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-cNXSxv9eTkGUtd0PsNMK8Yx5xeScxfpWOUAxE+ZPAXXEcAMOC3fk7LRdXq5fvpra2pLx2p1YtkAhpUbB2SwaRA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 dev: false - /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.23.9): + /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.24.3): resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-YZiAIpkJAwQXBJLIQbRFayR5c+gJ35Vcz3bg954k7cd73zqjvhacJuL9RbrzPz8qPmZdgqP6EUKwy0PCNhaaPA==} + /@babel/plugin-syntax-flow@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-sxi2kLTI5DeW5vDtMUsk4mTPwvlUDbjOnoWayhynCwrw4QXRld4QEYwqzY8JmQXaJUtgUuCIurtSRH5sn4c7mA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 dev: false - /@babel/plugin-syntax-import-assertions@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-lPgDSU+SJLK3xmFDTV2ZRQAiM7UuUjGidwBywFavObCiZc1BeAAcMtHJKUya92hPHO+at63JJPLygilZard8jw==} + /@babel/plugin-syntax-import-assertions@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-IuwnI5XnuF189t91XbxmXeCDz3qs6iDRO7GJ++wcfgeXNs/8FmIlKcpDSXNVyuLQxlwvskmI3Ct73wUODkJBlQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-import-attributes@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-pawnE0P9g10xgoP7yKr6CK63K2FMsTE+FZidZO/1PwRdzmAPVs+HS1mAURUsgaoxammTJvULUdIkEK0gOcU2tA==} + /@babel/plugin-syntax-import-attributes@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-zhQTMH0X2nVLnb04tz+s7AMuasX8U0FnpE+nHTOhSOINjWMnopoZTxtIKsd45n4GQ/HIZLyfIpoul8e2m0DnRA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.23.9): + /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.24.3): resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.23.9): + /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.24.3): resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-jsx@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==} + /@babel/plugin-syntax-jsx@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.23.9): + /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.24.3): resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.23.9): + /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.24.3): resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.23.9): + /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.24.3): resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.23.9): + /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.24.3): resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.23.9): + /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.24.3): resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.23.9): + /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.24.3): resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.23.9): + /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.24.3): resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.23.9): + /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.24.3): resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-typescript@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==} + /@babel/plugin-syntax-typescript@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.23.9): + /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.24.3): resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-arrow-functions@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-NzQcQrzaQPkaEwoTm4Mhyl8jI1huEL/WWIEvudjTCMJ9aBZNpsJbMASx7EQECtQQPS/DcnFpo0FIh3LvEO9cxQ==} + /@babel/plugin-transform-arrow-functions@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-ngT/3NkRhsaep9ck9uj2Xhv9+xB1zShY3tM3g6om4xxCELwCDN4g4Aq5dRn48+0hasAql7s2hdBOysCfNpr4fw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-async-generator-functions@7.23.9(@babel/core@7.23.9): - resolution: {integrity: sha512-8Q3veQEDGe14dTYuwagbRtwxQDnytyg1JFu4/HwEMETeofocrB0U0ejBJIXoeG/t2oXZ8kzCyI0ZZfbT80VFNQ==} + /@babel/plugin-transform-async-generator-functions@7.24.3(@babel/core@7.24.3): + resolution: {integrity: sha512-Qe26CMYVjpQxJ8zxM1340JFNjZaF+ISWpr1Kt/jGo+ZTUzKkfw/pphEWbRCb+lmSM6k/TOgfYLvmbHkUQ0asIg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.23.9) - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.9) + '@babel/helper-plugin-utils': 7.24.0 + '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.3) + '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.3) - /@babel/plugin-transform-async-to-generator@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-A7LFsKi4U4fomjqXJlZg/u0ft/n8/7n7lpffUP/ZULx/DtV9SGlNKZolHH6PE8Xl1ngCc0M11OaeZptXVkfKSw==} + /@babel/plugin-transform-async-to-generator@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-AawPptitRXp1y0n4ilKcGbRYWfbbzFWz2NqNu7dacYDtFtz0CMjG64b3LQsb3KIgnf4/obcUL78hfaOS7iCUfw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-module-imports': 7.22.15 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/helper-module-imports': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.3) - /@babel/plugin-transform-block-scoped-functions@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-vI+0sIaPIO6CNuM9Kk5VmXcMVRiOpDh7w2zZt9GXzmE/9KD70CUEVhvPR/etAeNK/FAEkhxQtXOzVF3EuRL41A==} + /@babel/plugin-transform-block-scoped-functions@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-TWWC18OShZutrv9C6mye1xwtam+uNi2bnTOCBUd5sZxyHOiWbU6ztSROofIMrK84uweEZC219POICK/sTYwfgg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-block-scoping@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-0QqbP6B6HOh7/8iNR4CQU2Th/bbRtBp4KS9vcaZd1fZ0wSh5Fyssg0UCIHwxh+ka+pNDREbVLQnHCMHKZfPwfw==} + /@babel/plugin-transform-block-scoping@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-h71T2QQvDgM2SmT29UYU6ozjMlAt7s7CSs5Hvy8f8cf/GM/Z4a2zMfN+fjVGaieeCrXR3EdQl6C4gQG+OgmbKw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-class-properties@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-uM+AN8yCIjDPccsKGlw271xjJtGii+xQIF/uMPS8H15L12jZTsLfF4o5vNO7d/oUguOyfdikHGc/yi9ge4SGIg==} + /@babel/plugin-transform-class-properties@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-OMLCXi0NqvJfORTaPQBwqLXHhb93wkBKZ4aNwMl6WtehO7ar+cmp+89iPEQPqxAnxsOKTaMcs3POz3rKayJ72g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-create-class-features-plugin': 7.23.6(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-class-static-block@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-nsWu/1M+ggti1SOALj3hfx5FXzAY06fwPJsUZD4/A5e1bWi46VUIWtD+kOX6/IdhXGsXBWllLFDSnqSCdUNydQ==} + /@babel/plugin-transform-class-static-block@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-FUHlKCn6J3ERiu8Dv+4eoz7w8+kFLSyeVG4vDAikwADGjUCoHw/JHokyGtr8OR4UjpwPVivyF+h8Q5iv/JmrtA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-create-class-features-plugin': 7.23.6(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.3) - /@babel/plugin-transform-classes@7.23.8(@babel/core@7.23.9): - resolution: {integrity: sha512-yAYslGsY1bX6Knmg46RjiCiNSwJKv2IUC8qOdYKqMMr0491SXFhcHqOdRDeCRohOOIzwN/90C6mQ9qAKgrP7dg==} + /@babel/plugin-transform-classes@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-ZTIe3W7UejJd3/3R4p7ScyyOoafetUShSf4kCqV0O7F/RiHxVj/wRaRnQlrGwflvcehNA8M42HkAiEDYZu2F1Q==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-annotate-as-pure': 7.22.5 '@babel/helper-compilation-targets': 7.23.6 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-function-name': 7.23.0 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.9) + '@babel/helper-plugin-utils': 7.24.0 + '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.3) '@babel/helper-split-export-declaration': 7.22.6 globals: 11.12.0 - /@babel/plugin-transform-computed-properties@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-dTj83UVTLw/+nbiHqQSFdwO9CbTtwq1DsDqm3CUEtDrZNET5rT5E6bIdTlOftDTDLMYxvxHNEYO4B9SLl8SLZw==} + /@babel/plugin-transform-computed-properties@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-5pJGVIUfJpOS+pAqBQd+QMaTD2vCL/HcePooON6pDpHgRp4gNRmzyHTPIkXntwKsq3ayUFVfJaIKPw2pOkOcTw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/template': 7.23.9 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/template': 7.24.0 - /@babel/plugin-transform-dotall-regex@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-vgnFYDHAKzFaTVp+mneDsIEbnJ2Np/9ng9iviHw3P/KVcgONxpNULEW/51Z/BaFojG2GI2GwwXck5uV1+1NOYQ==} + /@babel/plugin-transform-dotall-regex@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-p7uUxgSoZwZ2lPNMzUkqCts3xlp8n+o05ikjy7gbtFJSt9gdU88jAmtfmOxHM14noQXBxfgzf2yRWECiNVhTCw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-duplicate-keys@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-RrqQ+BQmU3Oyav3J+7/myfvRCq7Tbz+kKLLshUmMwNlDHExbGL7ARhajvoBJEvc+fCguPPu887N+3RRXBVKZUA==} + /@babel/plugin-transform-duplicate-keys@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-msyzuUnvsjsaSaocV6L7ErfNsa5nDWL1XKNnDePLgmz+WdU4w/J8+AxBMrWfi9m4IxfL5sZQKUPQKDQeeAT6lA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-dynamic-import@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-V6jIbLhdJK86MaLh4Jpghi8ho5fGzt3imHOBu/x0jlBaPYqDoWz4RDXjmMOfnh+JWNaQleEAByZLV0QzBT4YQQ==} + /@babel/plugin-transform-dynamic-import@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-av2gdSTyXcJVdI+8aFZsCAtR29xJt0S5tas+Ef8NvBNmD1a+N/3ecMLeMBgfcK+xzsjdLDT6oHt+DFPyeqUbDA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.3) - /@babel/plugin-transform-exponentiation-operator@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-5fhCsl1odX96u7ILKHBj4/Y8vipoqwsJMh4csSA8qFfxrZDEA4Ssku2DyNvMJSmZNOEBT750LfFPbtrnTP90BQ==} + /@babel/plugin-transform-exponentiation-operator@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-U1yX13dVBSwS23DEAqU+Z/PkwE9/m7QQy8Y9/+Tdb8UWYaGNDYwTLi19wqIAiROr8sXVum9A/rtiH5H0boUcTw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-builder-binary-assignment-operator-visitor': 7.22.15 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-export-namespace-from@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-GzuSBcKkx62dGzZI1WVgTWvkkz84FZO5TC5T8dl/Tht/rAla6Dg/Mz9Yhypg+ezVACf/rgDuQt3kbWEv7LdUDQ==} + /@babel/plugin-transform-export-namespace-from@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-Ft38m/KFOyzKw2UaJFkWG9QnHPG/Q/2SkOrRk4pNBPg5IPZ+dOxcmkK5IyuBcxiNPyyYowPGUReyBvrvZs7IlQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.3) - /@babel/plugin-transform-flow-strip-types@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-26/pQTf9nQSNVJCrLB1IkHUKyPxR+lMrH2QDPG89+Znu9rAMbtrybdbWeE9bb7gzjmE5iXHEY+e0HUwM6Co93Q==} + /@babel/plugin-transform-flow-strip-types@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-iIYPIWt3dUmUKKE10s3W+jsQ3icFkw0JyRVyY1B7G4yK/nngAOHLVx8xlhA6b/Jzl/Y0nis8gjqhqKtRDQqHWQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.3) dev: false - /@babel/plugin-transform-for-of@7.23.6(@babel/core@7.23.9): - resolution: {integrity: sha512-aYH4ytZ0qSuBbpfhuofbg/e96oQ7U2w1Aw/UQmKT+1l39uEhUPoFS3fHevDc1G0OvewyDudfMKY1OulczHzWIw==} + /@babel/plugin-transform-for-of@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-OxBdcnF04bpdQdR3i4giHZNZQn7cm8RQKcSwA17wAAqEELo1ZOwp5FFgeptWUQXFyT9kwHo10aqqauYkRZPCAg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - /@babel/plugin-transform-function-name@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-I1QXp1LxIvt8yLaib49dRW5Okt7Q4oaxao6tFVKS/anCdEOMtYwWVKoiOA1p34GOWIZjUK0E+zCp7+l1pfQyiw==} + /@babel/plugin-transform-function-name@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-BXmDZpPlh7jwicKArQASrj8n22/w6iymRnvHYYd2zO30DbE277JO20/7yXJT3QxDPtiQiOxQBbZH4TpivNXIxA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-compilation-targets': 7.23.6 '@babel/helper-function-name': 7.23.0 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-json-strings@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-81nTOqM1dMwZ/aRXQ59zVubN9wHGqk6UtqRK+/q+ciXmRy8fSolhGVvG09HHRGo4l6fr/c4ZhXUQH0uFW7PZbg==} + /@babel/plugin-transform-json-strings@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-U7RMFmRvoasscrIFy5xA4gIp8iWnWubnKkKuUGJjsuOH7GfbMkB+XZzeslx2kLdEGdOJDamEmCqOks6e8nv8DQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.3) - /@babel/plugin-transform-literals@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-wZ0PIXRxnwZvl9AYpqNUxpZ5BiTGrYt7kueGQ+N5FiQ7RCOD4cm8iShd6S6ggfVIWaJf2EMk8eRzAh52RfP4rQ==} + /@babel/plugin-transform-literals@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-zn9pwz8U7nCqOYIiBaOxoQOtYmMODXTJnkxG4AtX8fPmnCRYWBOHD0qcpwS9e2VDSp1zNJYpdnFMIKb8jmwu6g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-logical-assignment-operators@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-Mc/ALf1rmZTP4JKKEhUwiORU+vcfarFVLfcFiolKUo6sewoxSEgl36ak5t+4WamRsNr6nzjZXQjM35WsU+9vbg==} + /@babel/plugin-transform-logical-assignment-operators@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-OhN6J4Bpz+hIBqItTeWJujDOfNP+unqv/NJgyhlpSqgBTPm37KkMmZV6SYcOj+pnDbdcl1qRGV/ZiIjX9Iy34w==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.3) - /@babel/plugin-transform-member-expression-literals@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-sC3LdDBDi5x96LA+Ytekz2ZPk8i/Ck+DEuDbRAll5rknJ5XRTSaPKEYwomLcs1AA8wg9b3KjIQRsnApj+q51Ag==} + /@babel/plugin-transform-member-expression-literals@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-4ojai0KysTWXzHseJKa1XPNXKRbuUrhkOPY4rEGeR+7ChlJVKxFa3H3Bz+7tWaGKgJAXUWKOGmltN+u9B3+CVg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-modules-amd@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-vJYQGxeKM4t8hYCKVBlZX/gtIY2I7mRGFNcm85sgXGMTBcoV3QdVtdpbcWEbzbfUIUZKwvgFT82mRvaQIebZzw==} + /@babel/plugin-transform-modules-amd@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-lAxNHi4HVtjnHd5Rxg3D5t99Xm6H7b04hUS7EHIXcUl2EV4yl1gWdqZrNzXnSrHveL9qMdbODlLF55mvgjAfaQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-modules-commonjs@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==} + /@babel/plugin-transform-modules-commonjs@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-szog8fFTUxBfw0b98gEWPaEqF42ZUD/T3bkynW/wtgx2p/XCP55WEsb+VosKceRSd6njipdZvNogqdtI4Q0chw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-simple-access': 7.22.5 - /@babel/plugin-transform-modules-systemjs@7.23.9(@babel/core@7.23.9): - resolution: {integrity: sha512-KDlPRM6sLo4o1FkiSlXoAa8edLXFsKKIda779fbLrvmeuc3itnjCtaO6RrtoaANsIJANj+Vk1zqbZIMhkCAHVw==} + /@babel/plugin-transform-modules-systemjs@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-mqQ3Zh9vFO1Tpmlt8QPnbwGHzNz3lpNEMxQb1kAemn/erstyqw1r9KeOlOfo3y6xAnFEcOv2tSyrXfmMk+/YZA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-hoist-variables': 7.22.5 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-validator-identifier': 7.22.20 - /@babel/plugin-transform-modules-umd@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-zHsy9iXX2nIsCBFPud3jKn1IRPWg3Ing1qOZgeKV39m1ZgIdpJqvlWVeiHBZC6ITRG0MfskhYe9cLgntfSFPIg==} + /@babel/plugin-transform-modules-umd@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-tuA3lpPj+5ITfcCluy6nWonSL7RvaG0AOTeAuvXqEKS34lnLzXpDb0dcP6K8jD0zWZFNDVly90AGFJPnm4fOYg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.23.9): + /@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.24.3): resolution: {integrity: sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-new-target@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-YJ3xKqtJMAT5/TIZnpAR3I+K+WaDowYbN3xyxI8zxx/Gsypwf9B9h0VB+1Nh6ACAAPRS5NSRje0uVv5i79HYGQ==} + /@babel/plugin-transform-new-target@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-/rurytBM34hYy0HKZQyA0nHbQgQNFm4Q/BOc9Hflxi2X3twRof7NaE5W46j4kQitm7SvACVRXsa6N/tSZxvPug==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-nullish-coalescing-operator@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-jHE9EVVqHKAQx+VePv5LLGHjmHSJR76vawFPTdlxR/LVJPfOEGxREQwQfjuZEOPTwG92X3LINSh3M40Rv4zpVA==} + /@babel/plugin-transform-nullish-coalescing-operator@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-iQ+caew8wRrhCikO5DrUYx0mrmdhkaELgFa+7baMcVuhxIkN7oxt06CZ51D65ugIb1UWRQ8oQe+HXAVM6qHFjw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.3) - /@babel/plugin-transform-numeric-separator@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-mps6auzgwjRrwKEZA05cOwuDc9FAzoyFS4ZsG/8F43bTLf/TgkJg7QXOrPO1JO599iA3qgK9MXdMGOEC8O1h6Q==} + /@babel/plugin-transform-numeric-separator@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-7GAsGlK4cNL2OExJH1DzmDeKnRv/LXq0eLUSvudrehVA5Rgg4bIrqEUW29FbKMBRT0ztSqisv7kjP+XIC4ZMNw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.3) - /@babel/plugin-transform-object-assign@7.23.3(@babel/core@7.23.9): + /@babel/plugin-transform-object-assign@7.23.3(@babel/core@7.24.3): resolution: {integrity: sha512-TPJ6O7gVC2rlQH2hvQGRH273G1xdoloCj9Pc07Q7JbIZYDi+Sv5gaE2fu+r5E7qK4zyt6vj0FbZaZTRU5C3OMA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-object-rest-spread@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-9x9K1YyeQVw0iOXJlIzwm8ltobIIv7j2iLyP2jIhEbqPRQ7ScNgwQufU2I0Gq11VjyG4gI4yMXt2VFags+1N3g==} + /@babel/plugin-transform-object-rest-spread@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-XjD5f0YqOtebto4HGISLNfiNMTTs6tbkFf2TOqJlYKYmbo+mN9Dnpl4SRoofiziuOWMIyq3sZEUqLo3hLITFEA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/compat-data': 7.23.5 - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-compilation-targets': 7.23.6 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.23.9) - '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.23.9) + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.24.3) - /@babel/plugin-transform-object-super@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-BwQ8q0x2JG+3lxCVFohg+KbQM7plfpBwThdW9A6TMtWwLsbDA01Ek2Zb/AgDN39BiZsExm4qrXxjk+P1/fzGrA==} + /@babel/plugin-transform-object-super@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-oKJqR3TeI5hSLRxudMjFQ9re9fBVUU0GICqM3J1mi8MqlhVr6hC/ZN4ttAyMuQR6EZZIY6h/exe5swqGNNIkWQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.3) - /@babel/plugin-transform-optional-catch-binding@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-XIq8t0rJPHf6Wvmbn9nFxU6ao4c7WhghTR5WyV8SrJfUFzyxhCm4nhC+iAp3HFhbAKLfYpgzhJ6t4XCtVwqO5A==} + /@babel/plugin-transform-optional-catch-binding@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-oBTH7oURV4Y+3EUrf6cWn1OHio3qG/PVwO5J03iSJmBg6m2EhKjkAu/xuaXaYwWW9miYtvbWv4LNf0AmR43LUA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.3) - /@babel/plugin-transform-optional-chaining@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-ZU8y5zWOfjM5vZ+asjgAPwDaBjJzgufjES89Rs4Lpq63O300R/kOz30WCLo6BxxX6QVEilwSlpClnG5cZaikTA==} + /@babel/plugin-transform-optional-chaining@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-n03wmDt+987qXwAgcBlnUUivrZBPZ8z1plL0YvgQalLm+ZE5BMhGm94jhxXtA1wzv1Cu2aaOv1BM9vbVttrzSg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.9) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.3) - /@babel/plugin-transform-parameters@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-09lMt6UsUb3/34BbECKVbVwrT9bO6lILWln237z7sLaWnMsTi7Yc9fhX5DLpkJzAGfaReXI22wP41SZmnAA3Vw==} + /@babel/plugin-transform-parameters@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-8Jl6V24g+Uw5OGPeWNKrKqXPDw2YDjLc53ojwfMcKwlEoETKU9rU0mHUtcg9JntWI/QYzGAXNWEcVHZ+fR+XXg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-private-methods@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-UzqRcRtWsDMTLrRWFvUBDwmw06tCQH9Rl1uAjfh6ijMSmGYQ+fpdB+cnqRC8EMh5tuuxSv0/TejGL+7vyj+50g==} + /@babel/plugin-transform-private-methods@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-tGvisebwBO5em4PaYNqt4fkw56K2VALsAbAakY0FjTYqJp7gfdrgr7YX76Or8/cpik0W6+tj3rZ0uHU9Oil4tw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-create-class-features-plugin': 7.23.6(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-private-property-in-object@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-9G3K1YqTq3F4Vt88Djx1UZ79PDyj+yKRnUy7cZGSMe+a7jkwD259uKKuUzQlPkGam7R+8RJwh5z4xO27fA1o2A==} + /@babel/plugin-transform-private-property-in-object@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-pTHxDVa0BpUbvAgX3Gat+7cSciXqUcY9j2VZKTbSB6+VQGpNgNO9ailxTGHSXlqOnX1Hcx1Enme2+yv7VqP9bg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-create-class-features-plugin': 7.23.6(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.23.9) + '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.3) - /@babel/plugin-transform-property-literals@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-jR3Jn3y7cZp4oEWPFAlRsSWjxKe4PZILGBSd4nis1TsC5qeSpb+nrtihJuDhNI7QHiVbUaiXa0X2RZY3/TI6Nw==} + /@babel/plugin-transform-property-literals@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-LetvD7CrHmEx0G442gOomRr66d7q8HzzGGr4PMHGr+5YIm6++Yke+jxj246rpvsbyhJwCLxcTn6zW1P1BSenqA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-react-constant-elements@7.23.3(@babel/core@7.23.9): + /@babel/plugin-transform-react-constant-elements@7.23.3(@babel/core@7.24.3): resolution: {integrity: sha512-zP0QKq/p6O42OL94udMgSfKXyse4RyJ0JqbQ34zDAONWjyrEsghYEyTSK5FIpmXmCpB55SHokL1cRRKHv8L2Qw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-react-display-name@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-GnvhtVfA2OAtzdX58FJxU19rhoGeQzyVndw3GgtdECQvQFXPEZIOVULHVZGAYmOgmqjXpVpfocAbSjh99V/Fqw==} + /@babel/plugin-transform-react-display-name@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-mvoQg2f9p2qlpDQRBC7M3c3XTr0k7cp/0+kFKKO/7Gtu0LSw16eKB+Fabe2bDT/UpsyasTBBkAnbdsLrkD5XMw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-react-jsx-development@7.22.5(@babel/core@7.23.9): + /@babel/plugin-transform-react-jsx-development@7.22.5(@babel/core@7.24.3): resolution: {integrity: sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.3) dev: true - /@babel/plugin-transform-react-jsx-self@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==} + /@babel/plugin-transform-react-jsx-self@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-kDJgnPujTmAZ/9q2CN4m2/lRsUUPDvsG3+tSHWUJIzMGTt5U/b/fwWd3RO3n+5mjLrsBrVa5eKFRVSQbi3dF1w==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - dev: false + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-react-jsx-source@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==} + /@babel/plugin-transform-react-jsx-source@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-1v202n7aUq4uXAieRTKcwPzNyphlCuqHHDcdSNc+vdhoTEZcFMh+L5yZuCmGaIO7bs1nJUNfHB89TZyoL48xNA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - dev: false + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.9): + /@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.24.3): resolution: {integrity: sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-module-imports': 7.22.15 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.9) - '@babel/types': 7.23.9 + '@babel/helper-module-imports': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.3) + '@babel/types': 7.24.0 - /@babel/plugin-transform-react-pure-annotations@7.23.3(@babel/core@7.23.9): + /@babel/plugin-transform-react-pure-annotations@7.23.3(@babel/core@7.24.3): resolution: {integrity: sha512-qMFdSS+TUhB7Q/3HVPnEdYJDQIk57jkntAwSuz9xfSE4n+3I+vHYCli3HoHawN1Z3RfCz/y1zXA/JXjG6cVImQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-regenerator@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-KP+75h0KghBMcVpuKisx3XTu9Ncut8Q8TuvGO4IhY+9D5DFEckQefOuIsB/gQ2tG71lCke4NMrtIPS8pOj18BQ==} + /@babel/plugin-transform-regenerator@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-sJwZBCzIBE4t+5Q4IGLaaun5ExVMRY0lYwos/jNecjMrVCygCdph3IKv0tkP5Fc87e/1+bebAmEAGBfnRD+cnw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 regenerator-transform: 0.15.2 - /@babel/plugin-transform-reserved-words@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-QnNTazY54YqgGxwIexMZva9gqbPa15t/x9VS+0fsEFWplwVpXYZivtgl43Z1vMpc1bdPP2PP8siFeVcnFvA3Cg==} + /@babel/plugin-transform-reserved-words@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-JAclqStUfIwKN15HrsQADFgeZt+wexNQ0uLhuqvqAUFoqPMjEcFCYZBhq0LUdz6dZK/mD+rErhW71fbx8RYElg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-runtime@7.23.9(@babel/core@7.23.9): - resolution: {integrity: sha512-A7clW3a0aSjm3ONU9o2HAILSegJCYlEZmOhmBRReVtIpY/Z/p7yIZ+wR41Z+UipwdGuqwtID/V/dOdZXjwi9gQ==} + /@babel/plugin-transform-runtime@7.24.3(@babel/core@7.24.3): + resolution: {integrity: sha512-J0BuRPNlNqlMTRJ72eVptpt9VcInbxO6iP3jaxr+1NPhC0UkKL+6oeX6VXMEYdADnuqmMmsBspt4d5w8Y/TCbQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-module-imports': 7.22.15 - '@babel/helper-plugin-utils': 7.22.5 - babel-plugin-polyfill-corejs2: 0.4.8(@babel/core@7.23.9) - babel-plugin-polyfill-corejs3: 0.9.0(@babel/core@7.23.9) - babel-plugin-polyfill-regenerator: 0.5.5(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/helper-module-imports': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + babel-plugin-polyfill-corejs2: 0.4.10(@babel/core@7.24.3) + babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.24.3) + babel-plugin-polyfill-regenerator: 0.6.1(@babel/core@7.24.3) semver: 6.3.1 transitivePeerDependencies: - supports-color - /@babel/plugin-transform-shorthand-properties@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-ED2fgqZLmexWiN+YNFX26fx4gh5qHDhn1O2gvEhreLW2iI63Sqm4llRLCXALKrCnbN4Jy0VcMQZl/SAzqug/jg==} + /@babel/plugin-transform-shorthand-properties@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-LyjVB1nsJ6gTTUKRjRWx9C1s9hE7dLfP/knKdrfeH9UPtAGjYGgxIbFfx7xyLIEWs7Xe1Gnf8EWiUqfjLhInZA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-spread@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-VvfVYlrlBVu+77xVTOAoxQ6mZbnIq5FM0aGBSFEcIh03qHf+zNqA4DC/3XMUozTg7bZV3e3mZQ0i13VB6v5yUg==} + /@babel/plugin-transform-spread@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-KjmcIM+fxgY+KxPVbjelJC6hrH1CgtPmTvdXAfn3/a9CnWGSTY7nH4zm5+cjmWJybdcPSsD0++QssDsjcpe47g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - /@babel/plugin-transform-sticky-regex@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-HZOyN9g+rtvnOU3Yh7kSxXrKbzgrm5X4GncPY1QOquu7epga5MxKHVpYu2hvQnry/H+JjckSYRb93iNfsioAGg==} + /@babel/plugin-transform-sticky-regex@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-9v0f1bRXgPVcPrngOQvLXeGNNVLc8UjMVfebo9ka0WF3/7+aVUHmaJVT3sa0XCzEFioPfPHZiOcYG9qOsH63cw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-template-literals@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-Flok06AYNp7GV2oJPZZcP9vZdszev6vPBkHLwxwSpaIqx75wn6mUd3UFWsSsA0l8nXAKkyCmL/sR02m8RYGeHg==} + /@babel/plugin-transform-template-literals@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-WRkhROsNzriarqECASCNu/nojeXCDTE/F2HmRgOzi7NGvyfYGq1NEjKBK3ckLfRgGc6/lPAqP0vDOSw3YtG34g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-typeof-symbol@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-4t15ViVnaFdrPC74be1gXBSMzXk3B4Us9lP7uLRQHTFpV5Dvt33pn+2MyyNxmN3VTTm3oTrZVMUmuw3oBnQ2oQ==} + /@babel/plugin-transform-typeof-symbol@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-CBfU4l/A+KruSUoW+vTQthwcAdwuqbpRNB8HQKlZABwHRhsdHZ9fezp4Sn18PeAlYxTNiLMlx4xUBV3AWfg1BA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-typescript@7.23.6(@babel/core@7.23.9): - resolution: {integrity: sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==} + /@babel/plugin-transform-typescript@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-liYSESjX2fZ7JyBFkYG78nfvHlMKE6IpNdTVnxmlYUR+j5ZLsitFbaAE+eJSK2zPPkNWNw4mXL51rQ8WrvdK0w==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-create-class-features-plugin': 7.23.6(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.9) + '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-typescript': 7.24.1(@babel/core@7.24.3) - /@babel/plugin-transform-unicode-escapes@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-OMCUx/bU6ChE3r4+ZdylEqAjaQgHAgipgW8nsCfu5pGqDcFytVd91AwRvUJSBZDz0exPGgnjoqhgRYLRjFZc9Q==} + /@babel/plugin-transform-unicode-escapes@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-RlkVIcWT4TLI96zM660S877E7beKlQw7Ig+wqkKBiWfj0zH5Q4h50q6er4wzZKRNSYpfo6ILJ+hrJAGSX2qcNw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-unicode-property-regex@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-KcLIm+pDZkWZQAFJ9pdfmh89EwVfmNovFBcXko8szpBeF8z68kWIPeKlmSOkT9BXJxs2C0uk+5LxoxIv62MROA==} + /@babel/plugin-transform-unicode-property-regex@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-Ss4VvlfYV5huWApFsF8/Sq0oXnGO+jB+rijFEFugTd3cwSObUSnUi88djgR5528Csl0uKlrI331kRqe56Ov2Ng==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-unicode-regex@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-wMHpNA4x2cIA32b/ci3AfwNgheiva2W0WUKWTK7vBHBhDKfPsc5cFGNWm69WBqpwd86u1qwZ9PWevKqm1A3yAw==} + /@babel/plugin-transform-unicode-regex@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-2A/94wgZgxfTsiLaQ2E36XAOdcZmGAaEEgVmxQWwZXWkGhvoHbaqXcKnU8zny4ycpu3vNqg0L/PcCiYtHtA13g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-unicode-sets-regex@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-W7lliA/v9bNR83Qc3q1ip9CQMZ09CcHDbHfbLRDNuAhn1Mvkr1ZNF7hPmztMQvtTGVLJ9m8IZqWsTkXOml8dbw==} + /@babel/plugin-transform-unicode-sets-regex@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-fqj4WuzzS+ukpgerpAoOnMfQXwUHFxXUZUE84oL2Kao2N8uSlvcpnAidKASgsNgzZHBsHWvcm8s9FPWUhAb8fA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3) + '@babel/helper-plugin-utils': 7.24.0 - /@babel/preset-env@7.23.9(@babel/core@7.23.9): - resolution: {integrity: sha512-3kBGTNBBk9DQiPoXYS0g0BYlwTQYUTifqgKTjxUwEUkduRT2QOa0FPGBJ+NROQhGyYO5BuTJwGvBnqKDykac6A==} + /@babel/preset-env@7.24.3(@babel/core@7.24.3): + resolution: {integrity: sha512-fSk430k5c2ff8536JcPvPWK4tZDwehWLGlBp0wrsBUjZVdeQV6lePbwKWZaZfK2vnh/1kQX1PzAJWsnBmVgGJA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/compat-data': 7.23.5 - '@babel/core': 7.23.9 + '@babel/compat-data': 7.24.1 + '@babel/core': 7.24.3 '@babel/helper-compilation-targets': 7.23.6 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-validator-option': 7.23.5 - '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.23.7(@babel/core@7.23.9) - '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.23.9) - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.9) - '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.23.9) - '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.23.9) - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.23.9) - '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.23.9) - '@babel/plugin-syntax-import-assertions': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-syntax-import-attributes': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.9) - '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.23.9) - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.23.9) - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.9) - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.9) - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.23.9) - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.9) - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.9) - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.23.9) - '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.23.9) - '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.23.9) - '@babel/plugin-transform-arrow-functions': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-async-generator-functions': 7.23.9(@babel/core@7.23.9) - '@babel/plugin-transform-async-to-generator': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-block-scoped-functions': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-block-scoping': 7.23.4(@babel/core@7.23.9) - '@babel/plugin-transform-class-properties': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-class-static-block': 7.23.4(@babel/core@7.23.9) - '@babel/plugin-transform-classes': 7.23.8(@babel/core@7.23.9) - '@babel/plugin-transform-computed-properties': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-destructuring': /@minh.nguyen/plugin-transform-destructuring@7.5.2(@babel/core@7.23.9) - '@babel/plugin-transform-dotall-regex': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-duplicate-keys': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-dynamic-import': 7.23.4(@babel/core@7.23.9) - '@babel/plugin-transform-exponentiation-operator': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-export-namespace-from': 7.23.4(@babel/core@7.23.9) - '@babel/plugin-transform-for-of': 7.23.6(@babel/core@7.23.9) - '@babel/plugin-transform-function-name': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-json-strings': 7.23.4(@babel/core@7.23.9) - '@babel/plugin-transform-literals': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-logical-assignment-operators': 7.23.4(@babel/core@7.23.9) - '@babel/plugin-transform-member-expression-literals': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-modules-amd': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-modules-systemjs': 7.23.9(@babel/core@7.23.9) - '@babel/plugin-transform-modules-umd': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.23.9) - '@babel/plugin-transform-new-target': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-nullish-coalescing-operator': 7.23.4(@babel/core@7.23.9) - '@babel/plugin-transform-numeric-separator': 7.23.4(@babel/core@7.23.9) - '@babel/plugin-transform-object-rest-spread': 7.23.4(@babel/core@7.23.9) - '@babel/plugin-transform-object-super': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-optional-catch-binding': 7.23.4(@babel/core@7.23.9) - '@babel/plugin-transform-optional-chaining': 7.23.4(@babel/core@7.23.9) - '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-private-methods': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-private-property-in-object': 7.23.4(@babel/core@7.23.9) - '@babel/plugin-transform-property-literals': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-regenerator': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-reserved-words': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-shorthand-properties': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-spread': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-sticky-regex': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-template-literals': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-typeof-symbol': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-unicode-escapes': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-unicode-property-regex': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-unicode-regex': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-unicode-sets-regex': 7.23.3(@babel/core@7.23.9) - '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.23.9) - babel-plugin-polyfill-corejs2: 0.4.8(@babel/core@7.23.9) - babel-plugin-polyfill-corejs3: 0.9.0(@babel/core@7.23.9) - babel-plugin-polyfill-regenerator: 0.5.5(@babel/core@7.23.9) - core-js-compat: 3.35.1 + '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.3) + '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.3) + '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.24.3) + '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.3) + '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-syntax-import-assertions': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-syntax-import-attributes': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.3) + '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.3) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.3) + '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.3) + '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.24.3) + '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.24.3) + '@babel/plugin-transform-arrow-functions': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-async-generator-functions': 7.24.3(@babel/core@7.24.3) + '@babel/plugin-transform-async-to-generator': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-block-scoped-functions': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-block-scoping': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-class-properties': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-class-static-block': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-classes': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-computed-properties': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-destructuring': /@minh.nguyen/plugin-transform-destructuring@7.5.2(@babel/core@7.24.3) + '@babel/plugin-transform-dotall-regex': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-duplicate-keys': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-dynamic-import': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-exponentiation-operator': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-export-namespace-from': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-for-of': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-function-name': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-json-strings': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-literals': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-logical-assignment-operators': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-member-expression-literals': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-modules-amd': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-modules-systemjs': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-modules-umd': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.24.3) + '@babel/plugin-transform-new-target': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-numeric-separator': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-object-rest-spread': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-object-super': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-optional-catch-binding': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-private-property-in-object': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-property-literals': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-regenerator': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-reserved-words': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-shorthand-properties': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-spread': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-sticky-regex': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-template-literals': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-typeof-symbol': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-unicode-escapes': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-unicode-property-regex': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-unicode-regex': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-unicode-sets-regex': 7.24.1(@babel/core@7.24.3) + '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.24.3) + babel-plugin-polyfill-corejs2: 0.4.10(@babel/core@7.24.3) + babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.24.3) + babel-plugin-polyfill-regenerator: 0.6.1(@babel/core@7.24.3) + core-js-compat: 3.36.1 semver: 6.3.1 transitivePeerDependencies: - supports-color - /@babel/preset-flow@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-7yn6hl8RIv+KNk6iIrGZ+D06VhVY35wLVf23Cz/mMu1zOr7u4MMP4j0nZ9tLf8+4ZFpnib8cFYgB/oYg9hfswA==} + /@babel/preset-flow@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-sWCV2G9pcqZf+JHyv/RyqEIpFypxdCSxWIxQjpdaQxenNog7cN1pr76hg8u0Fz8Qgg0H4ETkGcJnXL8d4j0PPA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-validator-option': 7.23.5 - '@babel/plugin-transform-flow-strip-types': 7.23.3(@babel/core@7.23.9) + '@babel/plugin-transform-flow-strip-types': 7.24.1(@babel/core@7.24.3) dev: false - /@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.23.9): + /@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.24.3): resolution: {integrity: sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/types': 7.23.9 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/types': 7.24.0 esutils: 2.0.3 - /@babel/preset-react@7.23.3(@babel/core@7.23.9): + /@babel/preset-react@7.23.3(@babel/core@7.24.3): resolution: {integrity: sha512-tbkHOS9axH6Ysf2OUEqoSZ6T3Fa2SrNH6WTWSPBboxKzdxNc9qOICeLXkNG0ZEwbQ1HY8liwOce4aN/Ceyuq6w==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-validator-option': 7.23.5 - '@babel/plugin-transform-react-display-name': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.23.9) - '@babel/plugin-transform-react-jsx-development': 7.22.5(@babel/core@7.23.9) - '@babel/plugin-transform-react-pure-annotations': 7.23.3(@babel/core@7.23.9) + '@babel/plugin-transform-react-display-name': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.3) + '@babel/plugin-transform-react-jsx-development': 7.22.5(@babel/core@7.24.3) + '@babel/plugin-transform-react-pure-annotations': 7.23.3(@babel/core@7.24.3) dev: true - /@babel/preset-typescript@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==} + /@babel/preset-typescript@7.24.1(@babel/core@7.24.3): + resolution: {integrity: sha512-1DBaMmRDpuYQBPWD8Pf/WEwCrtgRHxsZnP4mIy9G/X+hFfbI47Q2G4t1Paakld84+qsk2fSsUPMKg71jkoOOaQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-validator-option': 7.23.5 - '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.23.9) + '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-typescript': 7.24.1(@babel/core@7.24.3) - /@babel/register@7.23.7(@babel/core@7.23.9): + /@babel/register@7.23.7(@babel/core@7.24.3): resolution: {integrity: sha512-EjJeB6+kvpk+Y5DAkEAmbOBEFkh9OASx0huoEkqYTFxAZHzOAX2Oh5uwAUuL2rUddqfM0SA+KPXV2TbzoZ2kvQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 clone-deep: 4.0.1 find-cache-dir: 2.1.0 make-dir: 2.1.0 @@ -4010,42 +4163,42 @@ packages: regenerator-runtime: 0.14.0 dev: false - /@babel/runtime@7.23.9: - resolution: {integrity: sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==} + /@babel/runtime@7.24.1: + resolution: {integrity: sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==} engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.14.0 - /@babel/template@7.23.9: - resolution: {integrity: sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==} + /@babel/template@7.24.0: + resolution: {integrity: sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==} engines: {node: '>=6.9.0'} dependencies: - '@babel/code-frame': 7.23.5 - '@babel/parser': 7.23.9 - '@babel/types': 7.23.9 + '@babel/code-frame': 7.24.2 + '@babel/parser': 7.24.1 + '@babel/types': 7.24.0 - /@babel/traverse@7.23.9: - resolution: {integrity: sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==} + /@babel/traverse@7.24.1: + resolution: {integrity: sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/code-frame': 7.23.5 - '@babel/generator': 7.23.6 + '@babel/code-frame': 7.24.2 + '@babel/generator': 7.24.1 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-function-name': 7.23.0 '@babel/helper-hoist-variables': 7.22.5 '@babel/helper-split-export-declaration': 7.22.6 - '@babel/parser': 7.23.9 - '@babel/types': 7.23.9 + '@babel/parser': 7.24.1 + '@babel/types': 7.24.0 debug: 4.3.4(supports-color@8.1.1) globals: 11.12.0 transitivePeerDependencies: - supports-color - /@babel/types@7.23.9: - resolution: {integrity: sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==} + /@babel/types@7.24.0: + resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==} engines: {node: '>=6.9.0'} dependencies: - '@babel/helper-string-parser': 7.23.4 + '@babel/helper-string-parser': 7.24.1 '@babel/helper-validator-identifier': 7.22.20 to-fast-properties: 2.0.0 @@ -4205,10 +4358,10 @@ packages: resolution: {integrity: sha512-+sbxb71sWre+PwDK7X2T8+bhS6clcVMLwBPznX45Qu6opJcgRjAp7gYSDzVFp187J+feSj5dNBN1mJoi6ckkUQ==} dev: false - /@docsearch/react@3.6.0(@algolia/client-search@4.22.1)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.13.0): + /@docsearch/react@3.6.0(@algolia/client-search@4.23.0)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.13.0): resolution: {integrity: sha512-HUFut4ztcVNmqy9gp/wxNbC7pTOHhgVVkHVGCACTuLhUKUhKAF9KYHJtMiLUJxEqiFLQiuri1fWF8zqwM/cu1w==} peerDependencies: - '@types/react': ^18.2.55 + '@types/react': 18.2.55 react: '>= 16.8.0 < 19.0.0' react-dom: '>= 16.8.0 < 19.0.0' search-insights: '>= 1 < 3' @@ -4222,8 +4375,8 @@ packages: search-insights: optional: true dependencies: - '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.19.1)(search-insights@2.13.0) - '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.19.1) + '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.23.0)(algoliasearch@4.19.1)(search-insights@2.13.0) + '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.23.0)(algoliasearch@4.19.1) '@docsearch/css': 3.6.0 '@types/react': 18.2.55 algoliasearch: 4.19.1 @@ -4237,8 +4390,8 @@ packages: /@emotion/babel-plugin@11.11.0: resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==} dependencies: - '@babel/helper-module-imports': 7.22.15 - '@babel/runtime': 7.23.9 + '@babel/helper-module-imports': 7.24.3 + '@babel/runtime': 7.24.1 '@emotion/hash': 0.9.1 '@emotion/memoize': 0.8.1 '@emotion/serialize': 1.1.3 @@ -4288,6 +4441,11 @@ packages: dependencies: '@emotion/memoize': 0.8.1 + /@emotion/is-prop-valid@1.2.2: + resolution: {integrity: sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==} + dependencies: + '@emotion/memoize': 0.8.1 + /@emotion/memoize@0.7.1: resolution: {integrity: sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==} dev: false @@ -4312,7 +4470,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@emotion/babel-plugin': 11.11.0 '@emotion/cache': 11.11.0 '@emotion/serialize': 1.1.3 @@ -4358,9 +4516,9 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@emotion/babel-plugin': 11.11.0 - '@emotion/is-prop-valid': 1.2.1 + '@emotion/is-prop-valid': 1.2.2 '@emotion/react': 11.11.4(@types/react@18.2.55)(react@18.2.0) '@emotion/serialize': 1.1.3 '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0) @@ -4395,6 +4553,15 @@ packages: requiresBuild: true optional: true + /@esbuild/aix-ppc64@0.20.2: + resolution: {integrity: sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==} + engines: {node: '>=12'} + cpu: [ppc64] + os: [aix] + requiresBuild: true + dev: true + optional: true + /@esbuild/android-arm64@0.19.11: resolution: {integrity: sha512-aiu7K/5JnLj//KOnOfEZ0D90obUkRzDMyqd/wNAUQ34m4YUPVhRZpnqKV9uqDGxT7cToSDnIHsGooyIczu9T+Q==} engines: {node: '>=12'} @@ -4403,6 +4570,15 @@ packages: requiresBuild: true optional: true + /@esbuild/android-arm64@0.20.2: + resolution: {integrity: sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==} + engines: {node: '>=12'} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/android-arm@0.19.11: resolution: {integrity: sha512-5OVapq0ClabvKvQ58Bws8+wkLCV+Rxg7tUVbo9xu034Nm536QTII4YzhaFriQ7rMrorfnFKUsArD2lqKbFY4vw==} engines: {node: '>=12'} @@ -4411,6 +4587,15 @@ packages: requiresBuild: true optional: true + /@esbuild/android-arm@0.20.2: + resolution: {integrity: sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==} + engines: {node: '>=12'} + cpu: [arm] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/android-x64@0.19.11: resolution: {integrity: sha512-eccxjlfGw43WYoY9QgB82SgGgDbibcqyDTlk3l3C0jOVHKxrjdc9CTwDUQd0vkvYg5um0OH+GpxYvp39r+IPOg==} engines: {node: '>=12'} @@ -4419,6 +4604,15 @@ packages: requiresBuild: true optional: true + /@esbuild/android-x64@0.20.2: + resolution: {integrity: sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==} + engines: {node: '>=12'} + cpu: [x64] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/darwin-arm64@0.19.11: resolution: {integrity: sha512-ETp87DRWuSt9KdDVkqSoKoLFHYTrkyz2+65fj9nfXsaV3bMhTCjtQfw3y+um88vGRKRiF7erPrh/ZuIdLUIVxQ==} engines: {node: '>=12'} @@ -4427,6 +4621,15 @@ packages: requiresBuild: true optional: true + /@esbuild/darwin-arm64@0.20.2: + resolution: {integrity: sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==} + engines: {node: '>=12'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + /@esbuild/darwin-x64@0.19.11: resolution: {integrity: sha512-fkFUiS6IUK9WYUO/+22omwetaSNl5/A8giXvQlcinLIjVkxwTLSktbF5f/kJMftM2MJp9+fXqZ5ezS7+SALp4g==} engines: {node: '>=12'} @@ -4435,6 +4638,15 @@ packages: requiresBuild: true optional: true + /@esbuild/darwin-x64@0.20.2: + resolution: {integrity: sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==} + engines: {node: '>=12'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + /@esbuild/freebsd-arm64@0.19.11: resolution: {integrity: sha512-lhoSp5K6bxKRNdXUtHoNc5HhbXVCS8V0iZmDvyWvYq9S5WSfTIHU2UGjcGt7UeS6iEYp9eeymIl5mJBn0yiuxA==} engines: {node: '>=12'} @@ -4443,6 +4655,15 @@ packages: requiresBuild: true optional: true + /@esbuild/freebsd-arm64@0.20.2: + resolution: {integrity: sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==} + engines: {node: '>=12'} + cpu: [arm64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/freebsd-x64@0.19.11: resolution: {integrity: sha512-JkUqn44AffGXitVI6/AbQdoYAq0TEullFdqcMY/PCUZ36xJ9ZJRtQabzMA+Vi7r78+25ZIBosLTOKnUXBSi1Kw==} engines: {node: '>=12'} @@ -4451,6 +4672,15 @@ packages: requiresBuild: true optional: true + /@esbuild/freebsd-x64@0.20.2: + resolution: {integrity: sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==} + engines: {node: '>=12'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-arm64@0.19.11: resolution: {integrity: sha512-LneLg3ypEeveBSMuoa0kwMpCGmpu8XQUh+mL8XXwoYZ6Be2qBnVtcDI5azSvh7vioMDhoJFZzp9GWp9IWpYoUg==} engines: {node: '>=12'} @@ -4459,6 +4689,15 @@ packages: requiresBuild: true optional: true + /@esbuild/linux-arm64@0.20.2: + resolution: {integrity: sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==} + engines: {node: '>=12'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-arm@0.19.11: resolution: {integrity: sha512-3CRkr9+vCV2XJbjwgzjPtO8T0SZUmRZla+UL1jw+XqHZPkPgZiyWvbDvl9rqAN8Zl7qJF0O/9ycMtjU67HN9/Q==} engines: {node: '>=12'} @@ -4467,6 +4706,15 @@ packages: requiresBuild: true optional: true + /@esbuild/linux-arm@0.20.2: + resolution: {integrity: sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==} + engines: {node: '>=12'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-ia32@0.19.11: resolution: {integrity: sha512-caHy++CsD8Bgq2V5CodbJjFPEiDPq8JJmBdeyZ8GWVQMjRD0sU548nNdwPNvKjVpamYYVL40AORekgfIubwHoA==} engines: {node: '>=12'} @@ -4475,6 +4723,15 @@ packages: requiresBuild: true optional: true + /@esbuild/linux-ia32@0.20.2: + resolution: {integrity: sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==} + engines: {node: '>=12'} + cpu: [ia32] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-loong64@0.19.11: resolution: {integrity: sha512-ppZSSLVpPrwHccvC6nQVZaSHlFsvCQyjnvirnVjbKSHuE5N24Yl8F3UwYUUR1UEPaFObGD2tSvVKbvR+uT1Nrg==} engines: {node: '>=12'} @@ -4483,6 +4740,15 @@ packages: requiresBuild: true optional: true + /@esbuild/linux-loong64@0.20.2: + resolution: {integrity: sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==} + engines: {node: '>=12'} + cpu: [loong64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-mips64el@0.19.11: resolution: {integrity: sha512-B5x9j0OgjG+v1dF2DkH34lr+7Gmv0kzX6/V0afF41FkPMMqaQ77pH7CrhWeR22aEeHKaeZVtZ6yFwlxOKPVFyg==} engines: {node: '>=12'} @@ -4491,6 +4757,15 @@ packages: requiresBuild: true optional: true + /@esbuild/linux-mips64el@0.20.2: + resolution: {integrity: sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==} + engines: {node: '>=12'} + cpu: [mips64el] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-ppc64@0.19.11: resolution: {integrity: sha512-MHrZYLeCG8vXblMetWyttkdVRjQlQUb/oMgBNurVEnhj4YWOr4G5lmBfZjHYQHHN0g6yDmCAQRR8MUHldvvRDA==} engines: {node: '>=12'} @@ -4499,6 +4774,15 @@ packages: requiresBuild: true optional: true + /@esbuild/linux-ppc64@0.20.2: + resolution: {integrity: sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==} + engines: {node: '>=12'} + cpu: [ppc64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-riscv64@0.19.11: resolution: {integrity: sha512-f3DY++t94uVg141dozDu4CCUkYW+09rWtaWfnb3bqe4w5NqmZd6nPVBm+qbz7WaHZCoqXqHz5p6CM6qv3qnSSQ==} engines: {node: '>=12'} @@ -4507,6 +4791,15 @@ packages: requiresBuild: true optional: true + /@esbuild/linux-riscv64@0.20.2: + resolution: {integrity: sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==} + engines: {node: '>=12'} + cpu: [riscv64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-s390x@0.19.11: resolution: {integrity: sha512-A5xdUoyWJHMMlcSMcPGVLzYzpcY8QP1RtYzX5/bS4dvjBGVxdhuiYyFwp7z74ocV7WDc0n1harxmpq2ePOjI0Q==} engines: {node: '>=12'} @@ -4515,6 +4808,15 @@ packages: requiresBuild: true optional: true + /@esbuild/linux-s390x@0.20.2: + resolution: {integrity: sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==} + engines: {node: '>=12'} + cpu: [s390x] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-x64@0.19.11: resolution: {integrity: sha512-grbyMlVCvJSfxFQUndw5mCtWs5LO1gUlwP4CDi4iJBbVpZcqLVT29FxgGuBJGSzyOxotFG4LoO5X+M1350zmPA==} engines: {node: '>=12'} @@ -4523,6 +4825,15 @@ packages: requiresBuild: true optional: true + /@esbuild/linux-x64@0.20.2: + resolution: {integrity: sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==} + engines: {node: '>=12'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/netbsd-x64@0.19.11: resolution: {integrity: sha512-13jvrQZJc3P230OhU8xgwUnDeuC/9egsjTkXN49b3GcS5BKvJqZn86aGM8W9pd14Kd+u7HuFBMVtrNGhh6fHEQ==} engines: {node: '>=12'} @@ -4531,6 +4842,15 @@ packages: requiresBuild: true optional: true + /@esbuild/netbsd-x64@0.20.2: + resolution: {integrity: sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [netbsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/openbsd-x64@0.19.11: resolution: {integrity: sha512-ysyOGZuTp6SNKPE11INDUeFVVQFrhcNDVUgSQVDzqsqX38DjhPEPATpid04LCoUr2WXhQTEZ8ct/EgJCUDpyNw==} engines: {node: '>=12'} @@ -4539,6 +4859,15 @@ packages: requiresBuild: true optional: true + /@esbuild/openbsd-x64@0.20.2: + resolution: {integrity: sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [openbsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/sunos-x64@0.19.11: resolution: {integrity: sha512-Hf+Sad9nVwvtxy4DXCZQqLpgmRTQqyFyhT3bZ4F2XlJCjxGmRFF0Shwn9rzhOYRB61w9VMXUkxlBy56dk9JJiQ==} engines: {node: '>=12'} @@ -4547,12 +4876,30 @@ packages: requiresBuild: true optional: true - /@esbuild/win32-arm64@0.19.11: - resolution: {integrity: sha512-0P58Sbi0LctOMOQbpEOvOL44Ne0sqbS0XWHMvvrg6NE5jQ1xguCSSw9jQeUk2lfrXYsKDdOe6K+oZiwKPilYPQ==} + /@esbuild/sunos-x64@0.20.2: + resolution: {integrity: sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==} + engines: {node: '>=12'} + cpu: [x64] + os: [sunos] + requiresBuild: true + dev: true + optional: true + + /@esbuild/win32-arm64@0.19.11: + resolution: {integrity: sha512-0P58Sbi0LctOMOQbpEOvOL44Ne0sqbS0XWHMvvrg6NE5jQ1xguCSSw9jQeUk2lfrXYsKDdOe6K+oZiwKPilYPQ==} + engines: {node: '>=12'} + cpu: [arm64] + os: [win32] + requiresBuild: true + optional: true + + /@esbuild/win32-arm64@0.20.2: + resolution: {integrity: sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==} engines: {node: '>=12'} cpu: [arm64] os: [win32] requiresBuild: true + dev: true optional: true /@esbuild/win32-ia32@0.19.11: @@ -4563,6 +4910,15 @@ packages: requiresBuild: true optional: true + /@esbuild/win32-ia32@0.20.2: + resolution: {integrity: sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==} + engines: {node: '>=12'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@esbuild/win32-x64@0.19.11: resolution: {integrity: sha512-vfkhltrjCAb603XaFhqhAF4LGDi2M4OrCRrFusyQ+iTLQ/o60QQXxc9cZC/FFpihBI9N1Grn6SMKVJ4KP7Fuiw==} engines: {node: '>=12'} @@ -4571,13 +4927,22 @@ packages: requiresBuild: true optional: true - /@eslint-community/eslint-utils@4.4.0(eslint@8.56.0): + /@esbuild/win32-x64@0.20.2: + resolution: {integrity: sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@eslint-community/eslint-utils@4.4.0(eslint@8.57.0): resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || >=8.0.0 dependencies: - eslint: 8.56.0 + eslint: 8.57.0 eslint-visitor-keys: 3.4.3 dev: true @@ -4603,15 +4968,15 @@ packages: - supports-color dev: true - /@eslint/js@8.56.0: - resolution: {integrity: sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==} + /@eslint/js@8.57.0: + resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true /@fast-csv/format@4.3.5: resolution: {integrity: sha512-8iRn6QF3I8Ak78lNAa+Gdl5MJJBM5vRHivFtMRUWINdevNo00K7OXxS2PshawLKTejVwieIlPmK5YlLu6w4u8A==} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 lodash.escaperegexp: 4.1.2 lodash.isboolean: 3.0.3 lodash.isequal: 4.5.0 @@ -4622,7 +4987,7 @@ packages: /@fast-csv/parse@4.3.6: resolution: {integrity: sha512-uRsLYksqpbDmWaSmzvJcuApSEe38+6NQZBUsuAyMZKqHxH0g1wcJgsKUvN3WC8tewaqFjBMMGrkHmC+T7k8LvA==} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 lodash.escaperegexp: 4.1.2 lodash.groupby: 4.6.0 lodash.isfunction: 3.0.9 @@ -4721,7 +5086,7 @@ packages: engines: {node: '>=14.2.0'} dependencies: form-data: 4.0.0 - qs: 6.11.0 + qs: 6.12.0 xcase: 2.0.1 dev: true @@ -4745,11 +5110,11 @@ packages: '@hapi/hoek': 9.3.0 dev: false - /@humanwhocodes/config-array@0.11.13: - resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==} + /@humanwhocodes/config-array@0.11.14: + resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==} engines: {node: '>=10.10.0'} dependencies: - '@humanwhocodes/object-schema': 2.0.1 + '@humanwhocodes/object-schema': 2.0.2 debug: 4.3.4(supports-color@8.1.1) minimatch: 3.1.2 transitivePeerDependencies: @@ -4761,8 +5126,8 @@ packages: engines: {node: '>=12.22'} dev: true - /@humanwhocodes/object-schema@2.0.1: - resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==} + /@humanwhocodes/object-schema@2.0.2: + resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==} dev: true /@hutson/parse-repository-url@3.0.2: @@ -4814,7 +5179,7 @@ packages: dependencies: '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 18.19.25 + '@types/node': 18.19.28 jest-mock: 29.7.0 dev: false @@ -4824,7 +5189,7 @@ packages: dependencies: '@jest/types': 29.6.3 '@sinonjs/fake-timers': 10.3.0 - '@types/node': 18.19.25 + '@types/node': 18.19.28 jest-message-util: 29.7.0 jest-mock: 29.7.0 jest-util: 29.7.0 @@ -4842,7 +5207,7 @@ packages: dependencies: '@types/istanbul-lib-coverage': 2.0.6 '@types/istanbul-reports': 3.0.4 - '@types/node': 18.19.25 + '@types/node': 18.19.28 '@types/yargs': 15.0.19 chalk: 4.1.2 dev: false @@ -4854,47 +5219,40 @@ packages: '@jest/schemas': 29.6.3 '@types/istanbul-lib-coverage': 2.0.6 '@types/istanbul-reports': 3.0.4 - '@types/node': 18.19.25 + '@types/node': 18.19.28 '@types/yargs': 17.0.32 chalk: 4.1.2 dev: false - /@jridgewell/gen-mapping@0.1.1: - resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==} - engines: {node: '>=6.0.0'} - dependencies: - '@jridgewell/set-array': 1.1.2 - '@jridgewell/sourcemap-codec': 1.4.15 - - /@jridgewell/gen-mapping@0.3.2: - resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==} + /@jridgewell/gen-mapping@0.3.5: + resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==} engines: {node: '>=6.0.0'} dependencies: - '@jridgewell/set-array': 1.1.2 + '@jridgewell/set-array': 1.2.1 '@jridgewell/sourcemap-codec': 1.4.15 - '@jridgewell/trace-mapping': 0.3.20 + '@jridgewell/trace-mapping': 0.3.25 - /@jridgewell/resolve-uri@3.1.0: - resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==} + /@jridgewell/resolve-uri@3.1.2: + resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==} engines: {node: '>=6.0.0'} - /@jridgewell/set-array@1.1.2: - resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==} + /@jridgewell/set-array@1.2.1: + resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==} engines: {node: '>=6.0.0'} - /@jridgewell/source-map@0.3.5: - resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==} + /@jridgewell/source-map@0.3.6: + resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==} dependencies: - '@jridgewell/gen-mapping': 0.3.2 - '@jridgewell/trace-mapping': 0.3.20 + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 /@jridgewell/sourcemap-codec@1.4.15: resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} - /@jridgewell/trace-mapping@0.3.20: - resolution: {integrity: sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==} + /@jridgewell/trace-mapping@0.3.25: + resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} dependencies: - '@jridgewell/resolve-uri': 3.1.0 + '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.4.15 /@lerna/create@8.1.2: @@ -4980,13 +5338,13 @@ packages: '@types/react': 18.2.55 dev: true - /@minh.nguyen/plugin-transform-destructuring@7.5.2(@babel/core@7.23.9): + /@minh.nguyen/plugin-transform-destructuring@7.5.2(@babel/core@7.24.3): resolution: {integrity: sha512-DIzWFKl5nzSk9Hj9ZsEXAvvgHiyuAsw52queJMuKqfZOk1BOr9u1i2h0tc6tPF3rQieubP+eX4DPLTKSMpbyMg==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 /@mnajdova/enzyme-adapter-react-18@0.2.0(enzyme@3.11.0)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-BOnjlVa7FHI1YUnYe+FdUtQu6szI1wLJ+C1lHyqmF3T9gu/J/WCYqqcD44dPkrU+8eYvvk/gQducsqna4HFiAg==} @@ -5013,17 +5371,17 @@ packages: resolution: {integrity: sha512-dc38W4W3K42atE9nSaOeoJ7/x9wGIfawdwC/UmMxMLlZ1iSsITQ8dQJaTATCbn98YvYPINK/EH541YA5enQIPQ==} engines: {node: '>=12.0.0'} peerDependencies: - '@types/react': ^18.2.55 + '@types/react': 18.2.55 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 peerDependenciesMeta: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0)(react@18.2.0) - '@mui/types': 7.2.13(@types/react@18.2.55) - '@mui/utils': 5.15.12(@types/react@18.2.55)(react@18.2.0) + '@mui/types': 7.2.14(@types/react@18.2.55) + '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) '@popperjs/core': 2.11.8 '@types/react': 18.2.55 clsx: 2.1.0 @@ -5036,17 +5394,17 @@ packages: resolution: {integrity: sha512-+uNbP3OHJuZVI00WyMg7xfLZotaEY7LgvYXDfONVJbrS+K9wyjCIPNfjy8r9XJn4fbHo/5ibiZqjWnU9LMNv+A==} engines: {node: '>=12.0.0'} peerDependencies: - '@types/react': ^18.2.55 + '@types/react': 18.2.55 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 peerDependenciesMeta: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0)(react@18.2.0) - '@mui/types': 7.2.13(@types/react@18.2.55) - '@mui/utils': 5.15.12(@types/react@18.2.55)(react@18.2.0) + '@mui/types': 7.2.14(@types/react@18.2.55) + '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) '@popperjs/core': 2.11.8 '@types/react': 18.2.55 clsx: 2.1.0 @@ -5055,21 +5413,21 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /@mui/base@5.0.0-beta.37(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-/o3anbb+DeCng8jNsd3704XtmmLDZju1Fo8R2o7ugrVtPQ/QpcqddwKNzKPZwa0J5T8YNW3ZVuHyQgbTnQLisQ==} + /@mui/base@5.0.0-beta.40(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==} engines: {node: '>=12.0.0'} peerDependencies: - '@types/react': ^18.2.55 + '@types/react': 18.2.55 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 peerDependenciesMeta: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0)(react@18.2.0) - '@mui/types': 7.2.13(@types/react@18.2.55) - '@mui/utils': 5.15.12(@types/react@18.2.55)(react@18.2.0) + '@mui/types': 7.2.14(@types/react@18.2.55) + '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) '@popperjs/core': 2.11.8 '@types/react': 18.2.55 clsx: 2.1.0 @@ -5078,8 +5436,8 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /@mui/core-downloads-tracker@5.15.8: - resolution: {integrity: sha512-W6R1dZJgbYfLmQKf7Es2WUw0pkDkEVUf2jA22DYu0JOa9M3pjvOqoC9HgOPGNNJTu6SCWLSWh3euv1Jn2NmeQA==} + /@mui/core-downloads-tracker@5.15.14: + resolution: {integrity: sha512-on75VMd0XqZfaQW+9pGjSNiqW+ghc5E2ZSLRBXwcXl/C4YzjfyjrLPhrEpKnR9Uym9KXBvxrhoHfPcczYHweyA==} dev: false /@mui/joy@5.0.0-beta.22(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): @@ -5088,7 +5446,7 @@ packages: peerDependencies: '@emotion/react': ^11.5.0 '@emotion/styled': ^11.3.0 - '@types/react': ^18.2.55 + '@types/react': 18.2.55 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 peerDependenciesMeta: @@ -5099,14 +5457,14 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@emotion/react': 11.11.4(@types/react@18.2.55)(react@18.2.0) '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) '@mui/base': 5.0.0-beta.31(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) - '@mui/core-downloads-tracker': 5.15.8 - '@mui/system': 5.15.12(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.55)(react@18.2.0) - '@mui/types': 7.2.13(@types/react@18.2.55) - '@mui/utils': 5.15.12(@types/react@18.2.55)(react@18.2.0) + '@mui/core-downloads-tracker': 5.15.14 + '@mui/system': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.55)(react@18.2.0) + '@mui/types': 7.2.14(@types/react@18.2.55) + '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) '@types/react': 18.2.55 clsx: 2.1.0 prop-types: 15.8.1 @@ -5120,7 +5478,7 @@ packages: peerDependencies: '@emotion/react': ^11.5.0 '@emotion/styled': ^11.3.0 - '@types/react': ^18.2.55 + '@types/react': 18.2.55 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 peerDependenciesMeta: @@ -5131,14 +5489,14 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@emotion/react': 11.11.4(@types/react@18.2.55)(react@18.2.0) '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) '@mui/base': 5.0.0-beta.31(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) - '@mui/core-downloads-tracker': 5.15.8 - '@mui/system': 5.15.12(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.55)(react@18.2.0) - '@mui/types': 7.2.13(@types/react@18.2.55) - '@mui/utils': 5.15.12(@types/react@18.2.55)(react@18.2.0) + '@mui/core-downloads-tracker': 5.15.14 + '@mui/system': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.55)(react@18.2.0) + '@mui/types': 7.2.14(@types/react@18.2.55) + '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) '@types/react': 18.2.55 '@types/react-transition-group': 4.4.10 clsx: 2.1.0 @@ -5150,25 +5508,25 @@ packages: react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0) dev: false - /@mui/private-theming@5.15.12(@types/react@18.2.55)(react@18.2.0): - resolution: {integrity: sha512-cqoSo9sgA5HE+8vZClbLrq9EkyOnYysooepi5eKaKvJ41lReT2c5wOZAeDDM1+xknrMDos+0mT2zr3sZmUiRRA==} + /@mui/private-theming@5.15.14(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==} engines: {node: '>=12.0.0'} peerDependencies: - '@types/react': ^18.2.55 + '@types/react': 18.2.55 react: ^17.0.0 || ^18.0.0 peerDependenciesMeta: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 - '@mui/utils': 5.15.12(@types/react@18.2.55)(react@18.2.0) + '@babel/runtime': 7.24.1 + '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) '@types/react': 18.2.55 prop-types: 15.8.1 react: 18.2.0 dev: false - /@mui/styled-engine@5.15.11(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0): - resolution: {integrity: sha512-So21AhAngqo07ces4S/JpX5UaMU2RHXpEA6hNzI6IQjd/1usMPxpgK8wkGgTe3JKmC2KDmH8cvoycq5H3Ii7/w==} + /@mui/styled-engine@5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0): + resolution: {integrity: sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.4.1 @@ -5180,7 +5538,7 @@ packages: '@emotion/styled': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@emotion/cache': 11.11.0 '@emotion/react': 11.11.4(@types/react@18.2.55)(react@18.2.0) '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) @@ -5189,13 +5547,13 @@ packages: react: 18.2.0 dev: false - /@mui/system@5.15.12(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.55)(react@18.2.0): - resolution: {integrity: sha512-/pq+GO6yN3X7r3hAwFTrzkAh7K1bTF5r8IzS79B9eyKJg7v6B/t4/zZYMR6OT9qEPtwf6rYN2Utg1e6Z7F1OgQ==} + /@mui/system@5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-auXLXzUaCSSOLqJXmsAaq7P96VPRXg2Rrz6OHNV7lr+kB8lobUF+/N84Vd9C4G/wvCXYPs5TYuuGBRhcGbiBGg==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 '@emotion/styled': ^11.3.0 - '@types/react': ^18.2.55 + '@types/react': 18.2.55 react: ^17.0.0 || ^18.0.0 peerDependenciesMeta: '@emotion/react': @@ -5205,13 +5563,13 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@emotion/react': 11.11.4(@types/react@18.2.55)(react@18.2.0) '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) - '@mui/private-theming': 5.15.12(@types/react@18.2.55)(react@18.2.0) - '@mui/styled-engine': 5.15.11(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0) - '@mui/types': 7.2.13(@types/react@18.2.55) - '@mui/utils': 5.15.12(@types/react@18.2.55)(react@18.2.0) + '@mui/private-theming': 5.15.14(@types/react@18.2.55)(react@18.2.0) + '@mui/styled-engine': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0) + '@mui/types': 7.2.14(@types/react@18.2.55) + '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) '@types/react': 18.2.55 clsx: 2.1.0 csstype: 3.1.3 @@ -5219,10 +5577,10 @@ packages: react: 18.2.0 dev: false - /@mui/types@7.2.13(@types/react@18.2.55): - resolution: {integrity: sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==} + /@mui/types@7.2.14(@types/react@18.2.55): + resolution: {integrity: sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==} peerDependencies: - '@types/react': ^18.2.55 + '@types/react': 18.2.55 peerDependenciesMeta: '@types/react': optional: true @@ -5230,26 +5588,26 @@ packages: '@types/react': 18.2.55 dev: false - /@mui/utils@5.15.12(@types/react@18.2.55)(react@18.2.0): - resolution: {integrity: sha512-8SDGCnO2DY9Yy+5bGzu00NZowSDtuyHP4H8gunhHGQoIlhlY2Z3w64wBzAOLpYw/ZhJNzksDTnS/i8qdJvxuow==} + /@mui/utils@5.15.14(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==} engines: {node: '>=12.0.0'} peerDependencies: - '@types/react': ^18.2.55 + '@types/react': 18.2.55 react: ^17.0.0 || ^18.0.0 peerDependenciesMeta: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.9 - '@types/prop-types': 15.7.11 + '@babel/runtime': 7.24.1 + '@types/prop-types': 15.7.12 '@types/react': 18.2.55 prop-types: 15.8.1 react: 18.2.0 react-is: 18.2.0 dev: false - /@mui/x-charts@6.19.5(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-BBRGLup5gpaLkhECv+J2ahFbDDgqK4BgLyLXLHKUASoWSU3YRCyDt9ifBREspEPfTZXgrcqNkybAl5b+l6baFQ==} + /@mui/x-charts@6.19.8(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-cjwsCJrUPDlMytJHBV+g3gDoSRURiphjclZs8sRnkZ+h4QbHn24K5QkK4bxEj7aCkO2HVJmDE0aqYEg4BnWCOA==} engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.9.0 @@ -5264,7 +5622,7 @@ packages: '@emotion/styled': optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@emotion/react': 11.11.4(@types/react@18.2.55)(react@18.2.0) '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) '@mui/base': 5.0.0-beta.30(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) @@ -5283,19 +5641,19 @@ packages: - '@types/react' dev: false - /@mui/x-data-grid-generator@7.0.0-beta.7(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-CV6AaC11RvNRKeN3Pd+ynxUnGE2IoK5NacXSxkelrfoeC+W9UH1GZhoZeh744b7KJxcVnKabxbMRa9qZj0jY5Q==} + /@mui/x-data-grid-generator@7.0.0(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-VnkTeScXs5fYEPGPpTDzZClxb6OupV1I70wH1u2E5TO2bcCF1UTZLFP24rCB7/OFSXlBkcXcQZ0kXrtRIUz7bg==} engines: {node: '>=14.0.0'} peerDependencies: '@mui/icons-material': ^5.4.1 - '@mui/material': ^5.15.0 + '@mui/material': ^5.15.14 react: ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.23.9 - '@mui/base': 5.0.0-beta.37(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@babel/runtime': 7.24.1 + '@mui/base': 5.0.0-beta.40(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/icons-material': link:packages/mui-icons-material/build '@mui/material': link:packages/mui-material/build - '@mui/x-data-grid-premium': 7.0.0-beta.7(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-data-grid-premium': 7.0.0(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) chance: 1.1.11 clsx: 2.1.0 lru-cache: 7.18.3 @@ -5307,21 +5665,21 @@ packages: - react-dom dev: false - /@mui/x-data-grid-premium@7.0.0-beta.7(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-8qtdDSvIDVCFnWX6s6hMqSgayU8igdVHK7waGjjPxwrCj3u9JTzMGdxJF2mu6gaCDcQ4Bn3PFT7IA8qt6yHhaw==} + /@mui/x-data-grid-premium@7.0.0(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-Vi9o9jzqsFaUcawx2NGq/8sEEeP4smeOwj0EPKftLRcVogJl6zWonnbM7pvth5Swqqyzu6dntn5vPnW2Q5gSfA==} engines: {node: '>=14.0.0'} peerDependencies: - '@mui/material': ^5.15.0 + '@mui/material': ^5.15.14 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@mui/material': link:packages/mui-material/build - '@mui/system': 5.15.12(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.55)(react@18.2.0) - '@mui/utils': 5.15.12(@types/react@18.2.55)(react@18.2.0) - '@mui/x-data-grid': 7.0.0-beta.7(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) - '@mui/x-data-grid-pro': 7.0.0-beta.7(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) - '@mui/x-license': 7.0.0-beta.6(@types/react@18.2.55)(react@18.2.0) + '@mui/system': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.55)(react@18.2.0) + '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) + '@mui/x-data-grid': 7.0.0(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-data-grid-pro': 7.0.0(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-license': 7.0.0(@types/react@18.2.55)(react@18.2.0) '@types/format-util': 1.0.4 clsx: 2.1.0 exceljs: 4.4.0 @@ -5335,20 +5693,20 @@ packages: - '@types/react' dev: false - /@mui/x-data-grid-pro@7.0.0-beta.7(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-sVw/r5eOjIqxMpfLtsJzntk1tgdNcWpxndwqo3VT3fmU6i78SbJgihJ7yntWai0nn2rjDjmRZPpZifAc0gNeIg==} + /@mui/x-data-grid-pro@7.0.0(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-2lauQfkV3gksfFS5cBC992/Xs1PDfOAcr9JV8bQNX2MmwdYFhCJmJR+MYK5VbO72bDrwCDRJC399Pgxnw9Saxg==} engines: {node: '>=14.0.0'} peerDependencies: - '@mui/material': ^5.15.0 + '@mui/material': ^5.15.14 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@mui/material': link:packages/mui-material/build - '@mui/system': 5.15.12(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.55)(react@18.2.0) - '@mui/utils': 5.15.12(@types/react@18.2.55)(react@18.2.0) - '@mui/x-data-grid': 7.0.0-beta.7(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) - '@mui/x-license': 7.0.0-beta.6(@types/react@18.2.55)(react@18.2.0) + '@mui/system': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.55)(react@18.2.0) + '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) + '@mui/x-data-grid': 7.0.0(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-license': 7.0.0(@types/react@18.2.55)(react@18.2.0) '@types/format-util': 1.0.4 clsx: 2.1.0 prop-types: 15.8.1 @@ -5361,18 +5719,18 @@ packages: - '@types/react' dev: false - /@mui/x-data-grid@7.0.0-beta.7(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-rZ7lvibUDbGqEABBGlNvfQ5SdIa+8ve3/d8YjdZ2DUOeJwR+K7X4MnVItIrZuKPRYoSy1kWDRsjr8u0sEIIEoA==} + /@mui/x-data-grid@7.0.0(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-Nwwfr+ot/di0oH/pVwIxKV2QD7QyUY/MKkTWRSKzQoJw2aiFQf1Usmvq9Fu1qsCsvMmqIFaToY7972p0cczRjw==} engines: {node: '>=14.0.0'} peerDependencies: - '@mui/material': ^5.15.0 + '@mui/material': ^5.15.14 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@mui/material': link:packages/mui-material/build - '@mui/system': 5.15.12(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.55)(react@18.2.0) - '@mui/utils': 5.15.12(@types/react@18.2.55)(react@18.2.0) + '@mui/system': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.55)(react@18.2.0) + '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) clsx: 2.1.0 prop-types: 15.8.1 react: 18.2.0 @@ -5384,8 +5742,8 @@ packages: - '@types/react' dev: false - /@mui/x-date-pickers-pro@6.19.7(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(date-fns-jalali@2.21.3-1)(date-fns@2.30.0)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-KpYNZIx3zp1yXKkeGKkIBj4PFWutFKBBwQLJxMp/PDyl8uZSeB3P8Rd9tlqvFZ+k+vksP7q+S3GvAlIa3GwKNQ==} + /@mui/x-date-pickers-pro@6.19.8(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(date-fns-jalali@2.21.3-1)(date-fns@2.30.0)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-0E4He1uxcJLYovKG0BByvQq2lTqL0MkpPoIdZwKA7PSP4iexSEn46zGsufgbGrcHEi7ievSUxXbjazpcDQPTiQ==} engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.9.0 @@ -5421,14 +5779,14 @@ packages: moment-jalaali: optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@emotion/react': 11.11.4(@types/react@18.2.55)(react@18.2.0) '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) '@mui/base': 5.0.0-beta.30(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/material': link:packages/mui-material/build '@mui/system': link:packages/mui-system/build - '@mui/utils': 5.15.12(@types/react@18.2.55)(react@18.2.0) - '@mui/x-date-pickers': 6.19.7(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(date-fns-jalali@2.21.3-1)(date-fns@2.30.0)(react-dom@18.2.0)(react@18.2.0) + '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) + '@mui/x-date-pickers': 6.19.8(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(date-fns-jalali@2.21.3-1)(date-fns@2.30.0)(react-dom@18.2.0)(react@18.2.0) '@mui/x-license-pro': 6.10.2(@types/react@18.2.55)(react@18.2.0) clsx: 2.1.0 date-fns: 2.30.0 @@ -5441,8 +5799,8 @@ packages: - '@types/react' dev: false - /@mui/x-date-pickers@6.19.7(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(date-fns-jalali@2.21.3-1)(date-fns@2.30.0)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-BCTOQjAuyU29Ymd2FJrHHdRh0U6Qve7MsthdrD2jjaMaR8ou455JuxsNTQUGSpiMkGHWOMVq+B8N1EBcSYH63g==} + /@mui/x-date-pickers@6.19.8(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(date-fns-jalali@2.21.3-1)(date-fns@2.30.0)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-6wgc2DoRTR9/mKesku4CVCKr9yYkY3FI2Oy/wshLTs2rFkw2Z10uxXFHBR9ugEtNPNCQv0qqwldElenYI97wsA==} engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.9.0 @@ -5478,13 +5836,13 @@ packages: moment-jalaali: optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@emotion/react': 11.11.4(@types/react@18.2.55)(react@18.2.0) '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) '@mui/base': 5.0.0-beta.30(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/material': link:packages/mui-material/build '@mui/system': link:packages/mui-system/build - '@mui/utils': 5.15.12(@types/react@18.2.55)(react@18.2.0) + '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) '@types/react-transition-group': 4.4.10 clsx: 2.1.0 date-fns: 2.30.0 @@ -5503,21 +5861,21 @@ packages: peerDependencies: react: ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.23.9 - '@mui/utils': 5.15.12(@types/react@18.2.55)(react@18.2.0) + '@babel/runtime': 7.24.1 + '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) react: 18.2.0 transitivePeerDependencies: - '@types/react' dev: false - /@mui/x-license@7.0.0-beta.6(@types/react@18.2.55)(react@18.2.0): - resolution: {integrity: sha512-S1HYQFf9DqDfjNN1nxPvrHyp+lhkcGUeSTpCEpzX9FX9ZfRuZEP9n9B3Vh3QuuXlETRK4aLg4jWKws5kzAoWgg==} + /@mui/x-license@7.0.0(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-WR9OkroKKGmnIno6tw4RzuyCQqI/Y+nbzt1r9sKtBgDQG/LvoBI45lC6zNtVosi8HhGWuXVsHDC7NYsEh31suA==} engines: {node: '>=14.0.0'} peerDependencies: react: ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.23.9 - '@mui/utils': 5.15.12(@types/react@18.2.55)(react@18.2.0) + '@babel/runtime': 7.24.1 + '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) react: 18.2.0 transitivePeerDependencies: - '@types/react' @@ -5534,13 +5892,13 @@ packages: react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@emotion/react': 11.11.4(@types/react@18.2.55)(react@18.2.0) '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) '@mui/base': 5.0.0-beta.30(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/material': link:packages/mui-material/build '@mui/system': link:packages/mui-system/build - '@mui/utils': 5.15.12(@types/react@18.2.55)(react@18.2.0) + '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) '@types/react-transition-group': 4.4.10 clsx: 2.1.0 prop-types: 15.8.1 @@ -5574,8 +5932,12 @@ packages: /@next/env@13.5.1: resolution: {integrity: sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==} - /@next/eslint-plugin-next@14.1.3: - resolution: {integrity: sha512-VCnZI2cy77Yaj3L7Uhs3+44ikMM1VD/fBMwvTBb3hIaTIuqa+DmG4dhUDq+MASu3yx97KhgsVJbsas0XuiKyww==} + /@next/env@14.1.4: + resolution: {integrity: sha512-e7X7bbn3Z6DWnDi75UWn+REgAbLEqxI8Tq2pkFOFAMpWAWApz/YCUhtWMWn410h8Q2fYiYL7Yg5OlxMOCfFjJQ==} + dev: false + + /@next/eslint-plugin-next@14.1.4: + resolution: {integrity: sha512-n4zYNLSyCo0Ln5b7qxqQeQ34OZKXwgbdcx6kmkQbywr+0k6M3Vinft0T72R6CDAcDrne2IAgSud4uWCzFgc5HA==} dependencies: glob: 10.3.10 dev: true @@ -5588,6 +5950,15 @@ packages: requiresBuild: true optional: true + /@next/swc-darwin-arm64@14.1.4: + resolution: {integrity: sha512-ubmUkbmW65nIAOmoxT1IROZdmmJMmdYvXIe8211send9ZYJu+SqxSnJM4TrPj9wmL6g9Atvj0S/2cFmMSS99jg==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: false + optional: true + /@next/swc-darwin-x64@13.5.1: resolution: {integrity: sha512-uvTZrZa4D0bdWa1jJ7X1tBGIxzpqSnw/ATxWvoRO9CVBvXSx87JyuISY+BWsfLFF59IRodESdeZwkWM2l6+Kjg==} engines: {node: '>= 10'} @@ -5596,6 +5967,15 @@ packages: requiresBuild: true optional: true + /@next/swc-darwin-x64@14.1.4: + resolution: {integrity: sha512-b0Xo1ELj3u7IkZWAKcJPJEhBop117U78l70nfoQGo4xUSvv0PJSTaV4U9xQBLvZlnjsYkc8RwQN1HoH/oQmLlQ==} + engines: {node: '>= 10'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: false + optional: true + /@next/swc-linux-arm64-gnu@13.5.1: resolution: {integrity: sha512-/52ThlqdORPQt3+AlMoO+omicdYyUEDeRDGPAj86ULpV4dg+/GCFCKAmFWT0Q4zChFwsAoZUECLcKbRdcc0SNg==} engines: {node: '>= 10'} @@ -5604,6 +5984,15 @@ packages: requiresBuild: true optional: true + /@next/swc-linux-arm64-gnu@14.1.4: + resolution: {integrity: sha512-457G0hcLrdYA/u1O2XkRMsDKId5VKe3uKPvrKVOyuARa6nXrdhJOOYU9hkKKyQTMru1B8qEP78IAhf/1XnVqKA==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /@next/swc-linux-arm64-musl@13.5.1: resolution: {integrity: sha512-L4qNXSOHeu1hEAeeNsBgIYVnvm0gg9fj2O2Yx/qawgQEGuFBfcKqlmIE/Vp8z6gwlppxz5d7v6pmHs1NB6R37w==} engines: {node: '>= 10'} @@ -5612,6 +6001,15 @@ packages: requiresBuild: true optional: true + /@next/swc-linux-arm64-musl@14.1.4: + resolution: {integrity: sha512-l/kMG+z6MB+fKA9KdtyprkTQ1ihlJcBh66cf0HvqGP+rXBbOXX0dpJatjZbHeunvEHoBBS69GYQG5ry78JMy3g==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /@next/swc-linux-x64-gnu@13.5.1: resolution: {integrity: sha512-QVvMrlrFFYvLtABk092kcZ5Mzlmsk2+SV3xYuAu8sbTuIoh0U2+HGNhVklmuYCuM3DAAxdiMQTNlRQmNH11udw==} engines: {node: '>= 10'} @@ -5620,6 +6018,15 @@ packages: requiresBuild: true optional: true + /@next/swc-linux-x64-gnu@14.1.4: + resolution: {integrity: sha512-BapIFZ3ZRnvQ1uWbmqEGJuPT9cgLwvKtxhK/L2t4QYO7l+/DxXuIGjvp1x8rvfa/x1FFSsipERZK70pewbtJtw==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /@next/swc-linux-x64-musl@13.5.1: resolution: {integrity: sha512-bBnr+XuWc28r9e8gQ35XBtyi5KLHLhTbEvrSgcWna8atI48sNggjIK8IyiEBO3KIrcUVXYkldAzGXPEYMnKt1g==} engines: {node: '>= 10'} @@ -5628,6 +6035,15 @@ packages: requiresBuild: true optional: true + /@next/swc-linux-x64-musl@14.1.4: + resolution: {integrity: sha512-mqVxTwk4XuBl49qn2A5UmzFImoL1iLm0KQQwtdRJRKl21ylQwwGCxJtIYo2rbfkZHoSKlh/YgztY0qH3wG1xIg==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /@next/swc-win32-arm64-msvc@13.5.1: resolution: {integrity: sha512-EQGeE4S5c9v06jje9gr4UlxqUEA+zrsgPi6kg9VwR+dQHirzbnVJISF69UfKVkmLntknZJJI9XpWPB6q0Z7mTg==} engines: {node: '>= 10'} @@ -5636,6 +6052,15 @@ packages: requiresBuild: true optional: true + /@next/swc-win32-arm64-msvc@14.1.4: + resolution: {integrity: sha512-xzxF4ErcumXjO2Pvg/wVGrtr9QQJLk3IyQX1ddAC/fi6/5jZCZ9xpuL9Tzc4KPWMFq8GGWFVDMshZOdHGdkvag==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: false + optional: true + /@next/swc-win32-ia32-msvc@13.5.1: resolution: {integrity: sha512-1y31Q6awzofVjmbTLtRl92OX3s+W0ZfO8AP8fTnITcIo9a6ATDc/eqa08fd6tSpFu6IFpxOBbdevOjwYTGx/AQ==} engines: {node: '>= 10'} @@ -5644,6 +6069,15 @@ packages: requiresBuild: true optional: true + /@next/swc-win32-ia32-msvc@14.1.4: + resolution: {integrity: sha512-WZiz8OdbkpRw6/IU/lredZWKKZopUMhcI2F+XiMAcPja0uZYdMTZQRoQ0WZcvinn9xZAidimE7tN9W5v9Yyfyw==} + engines: {node: '>= 10'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: false + optional: true + /@next/swc-win32-x64-msvc@13.5.1: resolution: {integrity: sha512-+9XBQizy7X/GuwNegq+5QkkxAPV7SBsIwapVRQd9WSvvU20YO23B3bZUpevdabi4fsd25y9RJDDncljy/V54ww==} engines: {node: '>= 10'} @@ -5652,6 +6086,15 @@ packages: requiresBuild: true optional: true + /@next/swc-win32-x64-msvc@14.1.4: + resolution: {integrity: sha512-4Rto21sPfw555sZ/XNLqfxDUNeLhNYGO2dlPqsnuCg8N8a2a9u1ltqBOPQ4vj1Gf7eJC0W2hHG2eYUHuiXgY2w==} + engines: {node: '>= 10'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: false + optional: true + /@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3: resolution: {integrity: sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==} requiresBuild: true @@ -6249,108 +6692,106 @@ packages: /@popperjs/core@2.11.8: resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} - /@react-native-community/cli-clean@12.3.2: - resolution: {integrity: sha512-90k2hCX0ddSFPT7EN7h5SZj0XZPXP0+y/++v262hssoey3nhurwF57NGWN0XAR0o9BSW7+mBfeInfabzDraO6A==} + /@react-native-community/cli-clean@12.3.6: + resolution: {integrity: sha512-gUU29ep8xM0BbnZjwz9MyID74KKwutq9x5iv4BCr2im6nly4UMf1B1D+V225wR7VcDGzbgWjaezsJShLLhC5ig==} dependencies: - '@react-native-community/cli-tools': 12.3.2 + '@react-native-community/cli-tools': 12.3.6 chalk: 4.1.2 execa: 5.1.1 transitivePeerDependencies: - encoding dev: false - /@react-native-community/cli-config@12.3.2: - resolution: {integrity: sha512-UUCzDjQgvAVL/57rL7eOuFUhd+d+6qfM7V8uOegQFeFEmSmvUUDLYoXpBa5vAK9JgQtSqMBJ1Shmwao+/oElxQ==} + /@react-native-community/cli-config@12.3.6: + resolution: {integrity: sha512-JGWSYQ9EAK6m2v0abXwFLEfsqJ1zkhzZ4CV261QZF9MoUNB6h57a274h1MLQR9mG6Tsh38wBUuNfEPUvS1vYew==} dependencies: - '@react-native-community/cli-tools': 12.3.2 + '@react-native-community/cli-tools': 12.3.6 chalk: 4.1.2 cosmiconfig: 5.2.1 deepmerge: 4.3.1 glob: 7.2.3 - joi: 17.12.1 + joi: 17.12.2 transitivePeerDependencies: - encoding dev: false - /@react-native-community/cli-debugger-ui@12.3.2: - resolution: {integrity: sha512-nSWQUL+51J682DlfcC1bjkUbQbGvHCC25jpqTwHIjmmVjYCX1uHuhPSqQKgPNdvtfOkrkACxczd7kVMmetxY2Q==} + /@react-native-community/cli-debugger-ui@12.3.6: + resolution: {integrity: sha512-SjUKKsx5FmcK9G6Pb6UBFT0s9JexVStK5WInmANw75Hm7YokVvHEgtprQDz2Uvy5znX5g2ujzrkIU//T15KQzA==} dependencies: serve-static: 1.15.0 transitivePeerDependencies: - supports-color dev: false - /@react-native-community/cli-doctor@12.3.2: - resolution: {integrity: sha512-GrAabdY4qtBX49knHFvEAdLtCjkmndjTeqhYO6BhsbAeKOtspcLT/0WRgdLIaKODRa61ADNB3K5Zm4dU0QrZOg==} + /@react-native-community/cli-doctor@12.3.6: + resolution: {integrity: sha512-fvBDv2lTthfw4WOQKkdTop2PlE9GtfrlNnpjB818MhcdEnPjfQw5YaTUcnNEGsvGomdCs1MVRMgYXXwPSN6OvQ==} dependencies: - '@react-native-community/cli-config': 12.3.2 - '@react-native-community/cli-platform-android': 12.3.2 - '@react-native-community/cli-platform-ios': 12.3.2 - '@react-native-community/cli-tools': 12.3.2 + '@react-native-community/cli-config': 12.3.6 + '@react-native-community/cli-platform-android': 12.3.6 + '@react-native-community/cli-platform-ios': 12.3.6 + '@react-native-community/cli-tools': 12.3.6 chalk: 4.1.2 command-exists: 1.2.9 deepmerge: 4.3.1 envinfo: 7.11.1 execa: 5.1.1 hermes-profile-transformer: 0.0.6 - ip: 1.1.9 node-stream-zip: 1.15.0 ora: 5.4.1 semver: 7.6.0 strip-ansi: 5.2.0 wcwidth: 1.0.1 - yaml: 2.3.4 + yaml: 2.4.1 transitivePeerDependencies: - encoding dev: false - /@react-native-community/cli-hermes@12.3.2: - resolution: {integrity: sha512-SL6F9O8ghp4ESBFH2YAPLtIN39jdnvGBKnK4FGKpDCjtB3DnUmDsGFlH46S+GGt5M6VzfG2eeKEOKf3pZ6jUzA==} + /@react-native-community/cli-hermes@12.3.6: + resolution: {integrity: sha512-sNGwfOCl8OAIjWCkwuLpP8NZbuO0dhDI/2W7NeOGDzIBsf4/c4MptTrULWtGIH9okVPLSPX0NnRyGQ+mSwWyuQ==} dependencies: - '@react-native-community/cli-platform-android': 12.3.2 - '@react-native-community/cli-tools': 12.3.2 + '@react-native-community/cli-platform-android': 12.3.6 + '@react-native-community/cli-tools': 12.3.6 chalk: 4.1.2 hermes-profile-transformer: 0.0.6 - ip: 1.1.9 transitivePeerDependencies: - encoding dev: false - /@react-native-community/cli-platform-android@12.3.2: - resolution: {integrity: sha512-MZ5nO8yi/N+Fj2i9BJcJ9C/ez+9/Ir7lQt49DWRo9YDmzye66mYLr/P2l/qxsixllbbDi7BXrlLpxaEhMrDopg==} + /@react-native-community/cli-platform-android@12.3.6: + resolution: {integrity: sha512-DeDDAB8lHpuGIAPXeeD9Qu2+/wDTFPo99c8uSW49L0hkmZJixzvvvffbGQAYk32H0TmaI7rzvzH+qzu7z3891g==} dependencies: - '@react-native-community/cli-tools': 12.3.2 + '@react-native-community/cli-tools': 12.3.6 chalk: 4.1.2 execa: 5.1.1 - fast-xml-parser: 4.3.4 + fast-xml-parser: 4.3.6 glob: 7.2.3 logkitty: 0.7.1 transitivePeerDependencies: - encoding dev: false - /@react-native-community/cli-platform-ios@12.3.2: - resolution: {integrity: sha512-OcWEAbkev1IL6SUiQnM6DQdsvfsKZhRZtoBNSj9MfdmwotVZSOEZJ+IjZ1FR9ChvMWayO9ns/o8LgoQxr1ZXeg==} + /@react-native-community/cli-platform-ios@12.3.6: + resolution: {integrity: sha512-3eZ0jMCkKUO58wzPWlvAPRqezVKm9EPZyaPyHbRPWU8qw7JqkvnRlWIaYDGpjCJgVW4k2hKsEursLtYKb188tg==} dependencies: - '@react-native-community/cli-tools': 12.3.2 + '@react-native-community/cli-tools': 12.3.6 chalk: 4.1.2 execa: 5.1.1 - fast-xml-parser: 4.3.4 + fast-xml-parser: 4.3.6 glob: 7.2.3 ora: 5.4.1 transitivePeerDependencies: - encoding dev: false - /@react-native-community/cli-plugin-metro@12.3.2: - resolution: {integrity: sha512-FpFBwu+d2E7KRhYPTkKvQsWb2/JKsJv+t1tcqgQkn+oByhp+qGyXBobFB8/R3yYvRRDCSDhS+atWTJzk9TjM8g==} + /@react-native-community/cli-plugin-metro@12.3.6: + resolution: {integrity: sha512-3jxSBQt4fkS+KtHCPSyB5auIT+KKIrPCv9Dk14FbvOaEh9erUWEm/5PZWmtboW1z7CYeNbFMeXm9fM2xwtVOpg==} dev: false - /@react-native-community/cli-server-api@12.3.2: - resolution: {integrity: sha512-iwa7EO9XFA/OjI5pPLLpI/6mFVqv8L73kNck3CNOJIUCCveGXBKK0VMyOkXaf/BYnihgQrXh+x5cxbDbggr7+Q==} + /@react-native-community/cli-server-api@12.3.6: + resolution: {integrity: sha512-80NIMzo8b2W+PL0Jd7NjiJW9mgaT8Y8wsIT/lh6mAvYH7mK0ecDJUYUTAAv79Tbo1iCGPAr3T295DlVtS8s4yQ==} dependencies: - '@react-native-community/cli-debugger-ui': 12.3.2 - '@react-native-community/cli-tools': 12.3.2 + '@react-native-community/cli-debugger-ui': 12.3.6 + '@react-native-community/cli-tools': 12.3.6 compression: 1.7.4 connect: 3.7.0 errorhandler: 1.5.1 @@ -6365,8 +6806,8 @@ packages: - utf-8-validate dev: false - /@react-native-community/cli-tools@12.3.2: - resolution: {integrity: sha512-nDH7vuEicHI2TI0jac/DjT3fr977iWXRdgVAqPZFFczlbs7A8GQvEdGnZ1G8dqRUmg+kptw0e4hwczAOG89JzQ==} + /@react-native-community/cli-tools@12.3.6: + resolution: {integrity: sha512-FPEvZn19UTMMXUp/piwKZSh8cMEfO8G3KDtOwo53O347GTcwNrKjgZGtLSPELBX2gr+YlzEft3CoRv2Qmo83fQ==} dependencies: appdirsjs: 1.2.7 chalk: 4.1.2 @@ -6382,26 +6823,26 @@ packages: - encoding dev: false - /@react-native-community/cli-types@12.3.2: - resolution: {integrity: sha512-9D0UEFqLW8JmS16mjHJxUJWX8E+zJddrHILSH8AJHZ0NNHv4u2DXKdb0wFLMobFxGNxPT+VSOjc60fGvXzWHog==} + /@react-native-community/cli-types@12.3.6: + resolution: {integrity: sha512-xPqTgcUtZowQ8WKOkI9TLGBwH2bGggOC4d2FFaIRST3gTcjrEeGRNeR5aXCzJFIgItIft8sd7p2oKEdy90+01Q==} dependencies: - joi: 17.12.1 + joi: 17.12.2 dev: false - /@react-native-community/cli@12.3.2: - resolution: {integrity: sha512-WgoUWwLDcf/G1Su2COUUVs3RzAwnV/vUTdISSpAUGgSc57mPabaAoUctKTnfYEhCnE3j02k3VtaVPwCAFRO3TQ==} + /@react-native-community/cli@12.3.6: + resolution: {integrity: sha512-647OSi6xBb8FbwFqX9zsJxOzu685AWtrOUWHfOkbKD+5LOpGORw+GQo0F9rWZnB68rLQyfKUZWJeaD00pGv5fw==} engines: {node: '>=18'} hasBin: true dependencies: - '@react-native-community/cli-clean': 12.3.2 - '@react-native-community/cli-config': 12.3.2 - '@react-native-community/cli-debugger-ui': 12.3.2 - '@react-native-community/cli-doctor': 12.3.2 - '@react-native-community/cli-hermes': 12.3.2 - '@react-native-community/cli-plugin-metro': 12.3.2 - '@react-native-community/cli-server-api': 12.3.2 - '@react-native-community/cli-tools': 12.3.2 - '@react-native-community/cli-types': 12.3.2 + '@react-native-community/cli-clean': 12.3.6 + '@react-native-community/cli-config': 12.3.6 + '@react-native-community/cli-debugger-ui': 12.3.6 + '@react-native-community/cli-doctor': 12.3.6 + '@react-native-community/cli-hermes': 12.3.6 + '@react-native-community/cli-plugin-metro': 12.3.6 + '@react-native-community/cli-server-api': 12.3.6 + '@react-native-community/cli-tools': 12.3.6 + '@react-native-community/cli-types': 12.3.6 chalk: 4.1.2 commander: 9.5.0 deepmerge: 4.3.1 @@ -6423,100 +6864,100 @@ packages: engines: {node: '>=18'} dev: false - /@react-native/babel-plugin-codegen@0.73.4(@babel/preset-env@7.23.9): + /@react-native/babel-plugin-codegen@0.73.4(@babel/preset-env@7.24.3): resolution: {integrity: sha512-XzRd8MJGo4Zc5KsphDHBYJzS1ryOHg8I2gOZDAUCGcwLFhdyGu1zBNDJYH2GFyDrInn9TzAbRIf3d4O+eltXQQ==} engines: {node: '>=18'} dependencies: - '@react-native/codegen': 0.73.3(@babel/preset-env@7.23.9) + '@react-native/codegen': 0.73.3(@babel/preset-env@7.24.3) transitivePeerDependencies: - '@babel/preset-env' - supports-color dev: false - /@react-native/babel-preset@0.73.21(@babel/core@7.23.9)(@babel/preset-env@7.23.9): + /@react-native/babel-preset@0.73.21(@babel/core@7.24.3)(@babel/preset-env@7.24.3): resolution: {integrity: sha512-WlFttNnySKQMeujN09fRmrdWqh46QyJluM5jdtDNrkl/2Hx6N4XeDUGhABvConeK95OidVO7sFFf7sNebVXogA==} engines: {node: '>=18'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/plugin-proposal-async-generator-functions': 7.20.7(@babel/core@7.23.9) - '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.23.9) - '@babel/plugin-proposal-export-default-from': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.23.9) - '@babel/plugin-proposal-numeric-separator': 7.18.6(@babel/core@7.23.9) - '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.23.9) - '@babel/plugin-proposal-optional-catch-binding': 7.18.6(@babel/core@7.23.9) - '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.23.9) - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.23.9) - '@babel/plugin-syntax-export-default-from': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.9) - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.9) - '@babel/plugin-transform-arrow-functions': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-async-to-generator': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-block-scoping': 7.23.4(@babel/core@7.23.9) - '@babel/plugin-transform-classes': 7.23.8(@babel/core@7.23.9) - '@babel/plugin-transform-computed-properties': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-destructuring': /@minh.nguyen/plugin-transform-destructuring@7.5.2(@babel/core@7.23.9) - '@babel/plugin-transform-flow-strip-types': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-function-name': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-literals': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.23.9) - '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-private-methods': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-private-property-in-object': 7.23.4(@babel/core@7.23.9) - '@babel/plugin-transform-react-display-name': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.23.9) - '@babel/plugin-transform-react-jsx-self': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-runtime': 7.23.9(@babel/core@7.23.9) - '@babel/plugin-transform-shorthand-properties': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-spread': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-sticky-regex': 7.23.3(@babel/core@7.23.9) - '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.23.9) - '@babel/plugin-transform-unicode-regex': 7.23.3(@babel/core@7.23.9) - '@babel/template': 7.23.9 - '@react-native/babel-plugin-codegen': 0.73.4(@babel/preset-env@7.23.9) - babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/plugin-proposal-async-generator-functions': 7.20.7(@babel/core@7.24.3) + '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.3) + '@babel/plugin-proposal-export-default-from': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.3) + '@babel/plugin-proposal-numeric-separator': 7.18.6(@babel/core@7.24.3) + '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.24.3) + '@babel/plugin-proposal-optional-catch-binding': 7.18.6(@babel/core@7.24.3) + '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.3) + '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-syntax-export-default-from': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-transform-arrow-functions': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-async-to-generator': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-block-scoping': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-classes': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-computed-properties': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-destructuring': /@minh.nguyen/plugin-transform-destructuring@7.5.2(@babel/core@7.24.3) + '@babel/plugin-transform-flow-strip-types': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-function-name': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-literals': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.24.3) + '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-private-property-in-object': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-react-display-name': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.3) + '@babel/plugin-transform-react-jsx-self': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-runtime': 7.24.3(@babel/core@7.24.3) + '@babel/plugin-transform-shorthand-properties': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-spread': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-sticky-regex': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-typescript': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-unicode-regex': 7.24.1(@babel/core@7.24.3) + '@babel/template': 7.24.0 + '@react-native/babel-plugin-codegen': 0.73.4(@babel/preset-env@7.24.3) + babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.24.3) react-refresh: 0.14.0 transitivePeerDependencies: - '@babel/preset-env' - supports-color dev: false - /@react-native/codegen@0.73.3(@babel/preset-env@7.23.9): + /@react-native/codegen@0.73.3(@babel/preset-env@7.24.3): resolution: {integrity: sha512-sxslCAAb8kM06vGy9Jyh4TtvjhcP36k/rvj2QE2Jdhdm61KvfafCATSIsOfc0QvnduWFcpXUPvAVyYwuv7PYDg==} engines: {node: '>=18'} peerDependencies: '@babel/preset-env': ^7.23.9 dependencies: - '@babel/parser': 7.23.9 - '@babel/preset-env': 7.23.9(@babel/core@7.23.9) + '@babel/parser': 7.24.1 + '@babel/preset-env': 7.24.3(@babel/core@7.24.3) flow-parser: 0.206.0 glob: 7.2.3 invariant: 2.2.4 - jscodeshift: 0.14.0(@babel/preset-env@7.23.9) + jscodeshift: 0.14.0(@babel/preset-env@7.24.3) mkdirp: 0.5.6 nullthrows: 1.1.1 transitivePeerDependencies: - supports-color dev: false - /@react-native/community-cli-plugin@0.73.16(@babel/core@7.23.9)(@babel/preset-env@7.23.9): - resolution: {integrity: sha512-eNH3v3qJJF6f0n/Dck90qfC9gVOR4coAXMTdYECO33GfgjTi+73vf/SBqlXw9HICH/RNZYGPM3wca4FRF7TYeQ==} + /@react-native/community-cli-plugin@0.73.17(@babel/core@7.24.3)(@babel/preset-env@7.24.3): + resolution: {integrity: sha512-F3PXZkcHg+1ARIr6FRQCQiB7ZAA+MQXGmq051metRscoLvgYJwj7dgC8pvgy0kexzUkHu5BNKrZeySzUft3xuQ==} engines: {node: '>=18'} dependencies: - '@react-native-community/cli-server-api': 12.3.2 - '@react-native-community/cli-tools': 12.3.2 - '@react-native/dev-middleware': 0.73.7 - '@react-native/metro-babel-transformer': 0.73.15(@babel/core@7.23.9)(@babel/preset-env@7.23.9) + '@react-native-community/cli-server-api': 12.3.6 + '@react-native-community/cli-tools': 12.3.6 + '@react-native/dev-middleware': 0.73.8 + '@react-native/metro-babel-transformer': 0.73.15(@babel/core@7.24.3)(@babel/preset-env@7.24.3) chalk: 4.1.2 execa: 5.1.1 - metro: 0.80.5 - metro-config: 0.80.5 - metro-core: 0.80.5 + metro: 0.80.7 + metro-config: 0.80.7 + metro-core: 0.80.7 node-fetch: 2.7.0 readline: 1.3.0 transitivePeerDependencies: @@ -6533,8 +6974,8 @@ packages: engines: {node: '>=18'} dev: false - /@react-native/dev-middleware@0.73.7: - resolution: {integrity: sha512-BZXpn+qKp/dNdr4+TkZxXDttfx8YobDh8MFHsMk9usouLm22pKgFIPkGBV0X8Do4LBkFNPGtrnsKkWk/yuUXKg==} + /@react-native/dev-middleware@0.73.8: + resolution: {integrity: sha512-oph4NamCIxkMfUL/fYtSsE+JbGOnrlawfQ0kKtDQ5xbOjPKotKoXqrs1eGwozNKv7FfQ393stk1by9a6DyASSg==} engines: {node: '>=18'} dependencies: '@isaacs/ttlcache': 1.4.1 @@ -6547,9 +6988,12 @@ packages: open: 7.4.2 serve-static: 1.15.0 temp-dir: 2.0.0 + ws: 6.2.2 transitivePeerDependencies: + - bufferutil - encoding - supports-color + - utf-8-validate dev: false /@react-native/gradle-plugin@0.73.4: @@ -6562,14 +7006,14 @@ packages: engines: {node: '>=18'} dev: false - /@react-native/metro-babel-transformer@0.73.15(@babel/core@7.23.9)(@babel/preset-env@7.23.9): + /@react-native/metro-babel-transformer@0.73.15(@babel/core@7.24.3)(@babel/preset-env@7.24.3): resolution: {integrity: sha512-LlkSGaXCz+xdxc9819plmpsl4P4gZndoFtpjN3GMBIu6f7TBV0GVbyJAU4GE8fuAWPVSVL5ArOcdkWKSbI1klw==} engines: {node: '>=18'} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@react-native/babel-preset': 0.73.21(@babel/core@7.23.9)(@babel/preset-env@7.23.9) + '@babel/core': 7.24.3 + '@react-native/babel-preset': 0.73.21(@babel/core@7.24.3)(@babel/preset-env@7.24.3) hermes-parser: 0.15.0 nullthrows: 1.1.1 transitivePeerDependencies: @@ -6581,7 +7025,7 @@ packages: resolution: {integrity: sha512-bRBcb2T+I88aG74LMVHaKms2p/T8aQd8+BZ7LuuzXlRfog1bMWWn/C5i0HVuvW4RPtXQYgIlGiXVDy9Ir1So/w==} dev: false - /@react-native/virtualized-lists@0.73.4(react-native@0.73.4): + /@react-native/virtualized-lists@0.73.4(react-native@0.73.6): resolution: {integrity: sha512-HpmLg1FrEiDtrtAbXiwCgXFYyloK/dOIPIuWW3fsqukwJEWAiTzm1nXGJ7xPU5XTHiWZ4sKup5Ebaj8z7iyWog==} engines: {node: '>=18'} peerDependencies: @@ -6589,7 +7033,7 @@ packages: dependencies: invariant: 2.2.4 nullthrows: 1.1.1 - react-native: 0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.23.9)(react@18.2.0) + react-native: 0.73.6(@babel/core@7.24.3)(@babel/preset-env@7.24.3)(react@18.2.0) dev: false /@react-spring/animated@9.7.3(react@18.2.0): @@ -6613,7 +7057,7 @@ packages: react: 18.2.0 dev: false - /@react-spring/konva@9.7.3(konva@9.3.2)(react-konva@18.2.10)(react@18.2.0): + /@react-spring/konva@9.7.3(konva@9.3.6)(react-konva@18.2.10)(react@18.2.0): resolution: {integrity: sha512-R9sY6SiPGYqz1383P5qppg5z57YfChVknOC1UxxaGxpw+WiZa8fZ4zmZobslrw+os3/+HAXZv8O+EvU/nQpf7g==} peerDependencies: konva: '>=2.6' @@ -6624,12 +7068,12 @@ packages: '@react-spring/core': 9.7.3(react@18.2.0) '@react-spring/shared': 9.7.3(react@18.2.0) '@react-spring/types': 9.7.3 - konva: 9.3.2 + konva: 9.3.6 react: 18.2.0 - react-konva: 18.2.10(konva@9.3.2)(react-dom@18.2.0)(react@18.2.0) + react-konva: 18.2.10(konva@9.3.6)(react-dom@18.2.0)(react@18.2.0) dev: false - /@react-spring/native@9.7.3(react-native@0.73.4)(react@18.2.0): + /@react-spring/native@9.7.3(react-native@0.73.6)(react@18.2.0): resolution: {integrity: sha512-4mpxX3FuEBCUT6ae2fjhxcJW6bhr2FBwFf274eXB7n+U30Gdg8Wo2qYwcUnmiAA0S3dvP8vLTazx3+CYWFShnA==} peerDependencies: react: ^16.8.0 || >=17.0.0 || >=18.0.0 @@ -6640,7 +7084,7 @@ packages: '@react-spring/shared': 9.7.3(react@18.2.0) '@react-spring/types': 9.7.3 react: 18.2.0 - react-native: 0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.23.9)(react@18.2.0) + react-native: 0.73.6(@babel/core@7.24.3)(@babel/preset-env@7.24.3)(react@18.2.0) dev: false /@react-spring/rafz@9.7.3: @@ -6656,7 +7100,7 @@ packages: react: 18.2.0 dev: false - /@react-spring/three@9.7.3(@react-three/fiber@8.15.16)(react@18.2.0)(three@0.161.0): + /@react-spring/three@9.7.3(@react-three/fiber@8.16.0)(react@18.2.0)(three@0.162.0): resolution: {integrity: sha512-Q1p512CqUlmMK8UMBF/Rj79qndhOWq4XUTayxMP9S892jiXzWQuj+xC3Xvm59DP/D4JXusXpxxqfgoH+hmOktA==} peerDependencies: '@react-three/fiber': '>=6.0' @@ -6667,9 +7111,9 @@ packages: '@react-spring/core': 9.7.3(react@18.2.0) '@react-spring/shared': 9.7.3(react@18.2.0) '@react-spring/types': 9.7.3 - '@react-three/fiber': 8.15.16(react-dom@18.2.0)(react-native@0.73.4)(react@18.2.0)(three@0.161.0) + '@react-three/fiber': 8.16.0(react-dom@18.2.0)(react-native@0.73.6)(react@18.2.0)(three@0.162.0) react: 18.2.0 - three: 0.161.0 + three: 0.162.0 dev: false /@react-spring/types@9.7.3: @@ -6708,8 +7152,8 @@ packages: zdog: 1.1.3 dev: false - /@react-three/fiber@8.15.16(react-dom@18.2.0)(react-native@0.73.4)(react@18.2.0)(three@0.161.0): - resolution: {integrity: sha512-4f47K9e2mP8W/guNtu3e2J/Nt6GwKTsX/YP2dktPZRcpHYEsqfXCO8kSfvVMb+lQ8wR0HoFzggqdnGuhZaui0g==} + /@react-three/fiber@8.16.0(react-dom@18.2.0)(react-native@0.73.6)(react@18.2.0)(three@0.162.0): + resolution: {integrity: sha512-mLyeie8UvMmQe8qs5RD/4KGxlekHuG8YXMKSilMbQ8hTIhBs68h+nEa/9xLkDus9ZnXr1GxRzd6WYNNZpU6EkA==} peerDependencies: expo: '>=43.0' expo-asset: '>=8.4' @@ -6733,20 +7177,20 @@ packages: react-native: optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@types/react-reconciler': 0.26.7 - '@types/webxr': 0.5.13 + '@types/webxr': 0.5.14 base64-js: 1.5.1 buffer: 6.0.3 - its-fine: 1.1.1(react@18.2.0) + its-fine: 1.1.3(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - react-native: 0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.23.9)(react@18.2.0) + react-native: 0.73.6(@babel/core@7.24.3)(@babel/preset-env@7.24.3)(react@18.2.0) react-reconciler: 0.27.0(react@18.2.0) react-use-measure: 2.1.1(react-dom@18.2.0)(react@18.2.0) scheduler: 0.21.0 suspend-react: 0.1.3(react@18.2.0) - three: 0.161.0 + three: 0.162.0 zustand: 3.7.2(react@18.2.0) dev: false @@ -6754,6 +7198,11 @@ packages: resolution: {integrity: sha512-zcU0gM3z+3iqj8UX45AmWY810l3oUmXM7uH4dt5xtzvMhRtYVhKGOmgOd1877dOPPepfCjUv57w+syamWIYe7w==} engines: {node: '>=14.0.0'} + /@remix-run/router@1.15.3: + resolution: {integrity: sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==} + engines: {node: '>=14.0.0'} + dev: false + /@rollup/plugin-replace@5.0.5(rollup@3.29.4): resolution: {integrity: sha512-rYO4fOi8lMaTg/z5Jb+hKnrHHVn8j2lwkqwyS4kTRhKyWOLf2wST2sWXr4WzWiTcoHTp2sTjqUbqIj2E39slKQ==} engines: {node: '>=14.0.0'} @@ -6783,104 +7232,104 @@ packages: rollup: 3.29.4 dev: true - /@rollup/rollup-android-arm-eabi@4.9.2: - resolution: {integrity: sha512-RKzxFxBHq9ysZ83fn8Iduv3A283K7zPPYuhL/z9CQuyFrjwpErJx0h4aeb/bnJ+q29GRLgJpY66ceQ/Wcsn3wA==} + /@rollup/rollup-android-arm-eabi@4.13.0: + resolution: {integrity: sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==} cpu: [arm] os: [android] requiresBuild: true dev: true optional: true - /@rollup/rollup-android-arm64@4.9.2: - resolution: {integrity: sha512-yZ+MUbnwf3SHNWQKJyWh88ii2HbuHCFQnAYTeeO1Nb8SyEiWASEi5dQUygt3ClHWtA9My9RQAYkjvrsZ0WK8Xg==} + /@rollup/rollup-android-arm64@4.13.0: + resolution: {integrity: sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==} cpu: [arm64] os: [android] requiresBuild: true dev: true optional: true - /@rollup/rollup-darwin-arm64@4.9.2: - resolution: {integrity: sha512-vqJ/pAUh95FLc/G/3+xPqlSBgilPnauVf2EXOQCZzhZJCXDXt/5A8mH/OzU6iWhb3CNk5hPJrh8pqJUPldN5zw==} + /@rollup/rollup-darwin-arm64@4.13.0: + resolution: {integrity: sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==} cpu: [arm64] os: [darwin] requiresBuild: true dev: true optional: true - /@rollup/rollup-darwin-x64@4.9.2: - resolution: {integrity: sha512-otPHsN5LlvedOprd3SdfrRNhOahhVBwJpepVKUN58L0RnC29vOAej1vMEaVU6DadnpjivVsNTM5eNt0CcwTahw==} + /@rollup/rollup-darwin-x64@4.13.0: + resolution: {integrity: sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==} cpu: [x64] os: [darwin] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-arm-gnueabihf@4.9.2: - resolution: {integrity: sha512-ewG5yJSp+zYKBYQLbd1CUA7b1lSfIdo9zJShNTyc2ZP1rcPrqyZcNlsHgs7v1zhgfdS+kW0p5frc0aVqhZCiYQ==} + /@rollup/rollup-linux-arm-gnueabihf@4.13.0: + resolution: {integrity: sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==} cpu: [arm] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-arm64-gnu@4.9.2: - resolution: {integrity: sha512-pL6QtV26W52aCWTG1IuFV3FMPL1m4wbsRG+qijIvgFO/VBsiXJjDPE/uiMdHBAO6YcpV4KvpKtd0v3WFbaxBtg==} + /@rollup/rollup-linux-arm64-gnu@4.13.0: + resolution: {integrity: sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==} cpu: [arm64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-arm64-musl@4.9.2: - resolution: {integrity: sha512-On+cc5EpOaTwPSNetHXBuqylDW+765G/oqB9xGmWU3npEhCh8xu0xqHGUA+4xwZLqBbIZNcBlKSIYfkBm6ko7g==} + /@rollup/rollup-linux-arm64-musl@4.13.0: + resolution: {integrity: sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==} cpu: [arm64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-riscv64-gnu@4.9.2: - resolution: {integrity: sha512-Wnx/IVMSZ31D/cO9HSsU46FjrPWHqtdF8+0eyZ1zIB5a6hXaZXghUKpRrC4D5DcRTZOjml2oBhXoqfGYyXKipw==} + /@rollup/rollup-linux-riscv64-gnu@4.13.0: + resolution: {integrity: sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==} cpu: [riscv64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-x64-gnu@4.9.2: - resolution: {integrity: sha512-ym5x1cj4mUAMBummxxRkI4pG5Vht1QMsJexwGP8547TZ0sox9fCLDHw9KCH9c1FO5d9GopvkaJsBIOkTKxksdw==} + /@rollup/rollup-linux-x64-gnu@4.13.0: + resolution: {integrity: sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==} cpu: [x64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-x64-musl@4.9.2: - resolution: {integrity: sha512-m0hYELHGXdYx64D6IDDg/1vOJEaiV8f1G/iO+tejvRCJNSwK4jJ15e38JQy5Q6dGkn1M/9KcyEOwqmlZ2kqaZg==} + /@rollup/rollup-linux-x64-musl@4.13.0: + resolution: {integrity: sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==} cpu: [x64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-win32-arm64-msvc@4.9.2: - resolution: {integrity: sha512-x1CWburlbN5JjG+juenuNa4KdedBdXLjZMp56nHFSHTOsb/MI2DYiGzLtRGHNMyydPGffGId+VgjOMrcltOksA==} + /@rollup/rollup-win32-arm64-msvc@4.13.0: + resolution: {integrity: sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==} cpu: [arm64] os: [win32] requiresBuild: true dev: true optional: true - /@rollup/rollup-win32-ia32-msvc@4.9.2: - resolution: {integrity: sha512-VVzCB5yXR1QlfsH1Xw1zdzQ4Pxuzv+CPr5qpElpKhVxlxD3CRdfubAG9mJROl6/dmj5gVYDDWk8sC+j9BI9/kQ==} + /@rollup/rollup-win32-ia32-msvc@4.13.0: + resolution: {integrity: sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==} cpu: [ia32] os: [win32] requiresBuild: true dev: true optional: true - /@rollup/rollup-win32-x64-msvc@4.9.2: - resolution: {integrity: sha512-SYRedJi+mweatroB+6TTnJYLts0L0bosg531xnQWtklOI6dezEagx4Q0qDyvRdK+qgdA3YZpjjGuPFtxBmddBA==} + /@rollup/rollup-win32-x64-msvc@4.13.0: + resolution: {integrity: sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==} cpu: [x64] os: [win32] requiresBuild: true @@ -7007,7 +7456,7 @@ packages: '@types/promise.allsettled': 1.0.3 '@types/tsscmp': 1.0.0 axios: 1.6.5(debug@4.3.4) - express: 4.18.3 + express: 4.19.2 path-to-regexp: 6.2.1 please-upgrade-node: 3.2.0 promise.allsettled: 1.0.6 @@ -7024,14 +7473,14 @@ packages: resolution: {integrity: sha512-DTuBFbqu4gGfajREEMrkq5jBhcnskinhr4+AnfJEk48zhVeEv3XnUKGIX98B74kxhYsIMfApGGySTn7V3b5yBA==} engines: {node: '>= 12.13.0', npm: '>= 6.12.0'} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 dev: false /@slack/logger@4.0.0: resolution: {integrity: sha512-Wz7QYfPAlG/DR+DfABddUZeNgoeY7d1J39OCR2jR+v7VBsB8ezulDK5szTnDDPDwLH5IWhLvXIHlCFZV7MSKgA==} engines: {node: '>= 18', npm: '>= 8.6.0'} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 dev: false /@slack/oauth@2.6.2: @@ -7041,7 +7490,7 @@ packages: '@slack/logger': 3.0.0 '@slack/web-api': 6.12.0 '@types/jsonwebtoken': 8.5.9 - '@types/node': 18.19.25 + '@types/node': 18.19.28 jsonwebtoken: 9.0.0 lodash.isstring: 4.0.1 transitivePeerDependencies: @@ -7054,7 +7503,7 @@ packages: dependencies: '@slack/logger': 3.0.0 '@slack/web-api': 6.12.0 - '@types/node': 18.19.25 + '@types/node': 18.19.28 '@types/p-queue': 2.3.2 '@types/ws': 7.4.7 eventemitter3: 3.1.2 @@ -7080,7 +7529,7 @@ packages: '@slack/logger': 3.0.0 '@slack/types': 2.11.0 '@types/is-stream': 1.1.0 - '@types/node': 18.19.25 + '@types/node': 18.19.28 axios: 1.6.5(debug@4.3.4) eventemitter3: 3.1.2 form-data: 2.5.1 @@ -7197,8 +7646,8 @@ packages: resolution: {integrity: sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==} engines: {node: '>=14'} dependencies: - '@babel/code-frame': 7.23.5 - '@babel/runtime': 7.23.9 + '@babel/code-frame': 7.24.2 + '@babel/runtime': 7.24.1 '@types/aria-query': 5.0.1 aria-query: 5.1.3 chalk: 4.1.2 @@ -7206,14 +7655,14 @@ packages: lz-string: 1.5.0 pretty-format: 27.5.1 - /@testing-library/react@14.2.1(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-sGdjws32ai5TLerhvzThYFbpnF9XtL65Cjf+gB0Dhr29BGqK+mAeN7SURSdu+eqgET4ANcWoC7FQpkaiGvBr+A==} + /@testing-library/react@14.2.2(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-SOUuM2ysCvjUWBXTNfQ/ztmnKDmqaiPV3SvoIuyxMUca45rbSWWAT/qB8CUs/JQ/ux/8JFs9DNdFQ3f6jH3crA==} engines: {node: '>=14'} peerDependencies: react: ^18.0.0 react-dom: ^18.0.0 dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@testing-library/dom': 9.3.4 '@types/react-dom': 18.2.19 react: 18.2.0 @@ -7357,8 +7806,8 @@ packages: /@types/babel__core@7.20.5: resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} dependencies: - '@babel/parser': 7.23.9 - '@babel/types': 7.23.9 + '@babel/parser': 7.24.1 + '@babel/types': 7.24.0 '@types/babel__generator': 7.6.4 '@types/babel__template': 7.4.1 '@types/babel__traverse': 7.20.5 @@ -7367,7 +7816,7 @@ packages: /@types/babel__generator@7.6.4: resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==} dependencies: - '@babel/types': 7.23.9 + '@babel/types': 7.24.0 dev: true /@types/babel__helper-module-imports@7.18.3: @@ -7386,21 +7835,21 @@ packages: /@types/babel__template@7.4.1: resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==} dependencies: - '@babel/parser': 7.23.9 - '@babel/types': 7.23.9 + '@babel/parser': 7.24.1 + '@babel/types': 7.24.0 dev: true /@types/babel__traverse@7.20.5: resolution: {integrity: sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==} dependencies: - '@babel/types': 7.23.9 + '@babel/types': 7.24.0 dev: true /@types/body-parser@1.19.2: resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==} dependencies: '@types/connect': 3.4.35 - '@types/node': 18.19.25 + '@types/node': 18.19.28 dev: false /@types/cacheable-request@6.0.2: @@ -7408,30 +7857,30 @@ packages: dependencies: '@types/http-cache-semantics': 4.0.1 '@types/keyv': 3.1.4 - '@types/node': 18.19.25 + '@types/node': 18.19.28 '@types/responselike': 1.0.0 dev: true /@types/chai-dom@1.11.3: resolution: {integrity: sha512-EUEZI7uID4ewzxnU7DJXtyvykhQuwe+etJ1wwOiJyQRTH/ifMWKX+ghiXkxCUvNJ6IQDodf0JXhuP6zZcy2qXQ==} dependencies: - '@types/chai': 4.3.12 + '@types/chai': 4.3.14 dev: true - /@types/chai@4.3.12: - resolution: {integrity: sha512-zNKDHG/1yxm8Il6uCCVsm+dRdEsJlFoDu73X17y09bId6UwoYww+vFBsAcRzl8knM1sab3Dp1VRikFQwDOtDDw==} + /@types/chai@4.3.14: + resolution: {integrity: sha512-Wj71sXE4Q4AkGdG9Tvq1u/fquNz9EdG4LIJMwVVII7ashjD/8cf8fyIfJAjRr6YcsXnSE8cOGQPq1gqeR8z+3w==} dev: true /@types/cheerio@0.22.31: resolution: {integrity: sha512-Kt7Cdjjdi2XWSfrZ53v4Of0wG3ZcmaegFXjMmz9tfNrZSkzzo36G0AL1YqSdcIA78Etjt6E609pt5h1xnQkPUw==} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 dev: true /@types/connect@3.4.35: resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 dev: false /@types/cookie@0.4.1: @@ -7450,6 +7899,12 @@ packages: resolution: {integrity: sha512-Qii6nTRktvtI380EloxH/V7MwgrYxkPgBI+NklUjQuhzgAd1AqT3QDJd+eD+0doRADgfwvtagLRo7JFa7aMHXg==} dev: true + /@types/debug@4.1.12: + resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} + dependencies: + '@types/ms': 0.7.34 + dev: true + /@types/doctrine@0.0.9: resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==} dev: true @@ -7464,11 +7919,11 @@ packages: /@types/eslint-scope@3.7.4: resolution: {integrity: sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==} dependencies: - '@types/eslint': 8.56.2 + '@types/eslint': 8.56.6 '@types/estree': 1.0.5 - /@types/eslint@8.56.2: - resolution: {integrity: sha512-uQDwm1wFHmbBbCZCqAlq6Do9LYwByNZHWzXppSnay9SuwJ+VRbjkbLABer54kcPnMSlG6Fdiy2yaFXm/z9Z5gw==} + /@types/eslint@8.56.6: + resolution: {integrity: sha512-ymwc+qb1XkjT/gfoQwxIeHZ6ixH23A+tCT2ADSA/DPVKzAjwYkTXBMCQ/f6fe4wEa85Lhp26VPeUxI7wMhAi7A==} dependencies: '@types/estree': 1.0.5 '@types/json-schema': 7.0.12 @@ -7479,7 +7934,7 @@ packages: /@types/express-serve-static-core@4.17.35: resolution: {integrity: sha512-wALWQwrgiB2AWTT91CB62b6Yt0sNHpznUXeZEcnPU3DRdlDIz74x8Qg1UUYKSVFi+va5vKOLYRBI1bRKiLLKIg==} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 '@types/qs': 6.9.7 '@types/range-parser': 1.2.4 '@types/send': 0.17.1 @@ -7501,7 +7956,7 @@ packages: resolution: {integrity: sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==} dependencies: '@types/jsonfile': 6.1.1 - '@types/node': 18.19.25 + '@types/node': 18.19.28 dev: true /@types/hoist-non-react-statics@3.3.5: @@ -7525,7 +7980,7 @@ packages: /@types/is-stream@1.1.0: resolution: {integrity: sha512-jkZatu4QVbR60mpIzjINmtS1ZF4a/FqdTUTBeQDVOQ2PYyidtwFKr0B5G6ERukKwliq+7mIXvxyppwzG5EgRYg==} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 dev: false /@types/istanbul-lib-coverage@2.0.6: @@ -7565,19 +8020,19 @@ packages: /@types/jsonfile@6.1.1: resolution: {integrity: sha512-GSgiRCVeapDN+3pqA35IkQwasaCh/0YFH5dEF6S88iDvEn901DjOeH3/QPY+XYP1DFzDZPvIvfeEgk+7br5png==} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 dev: true /@types/jsonwebtoken@8.5.9: resolution: {integrity: sha512-272FMnFGzAVMGtu9tkr29hRL6bZj4Zs1KZNeHLnKqAvp06tAIcarTMwOh8/8bz4FmKRcMxZhZNeUAQsNLoiPhg==} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 dev: false /@types/keyv@3.1.4: resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 dev: true /@types/lodash.mergewith@4.6.7: @@ -7621,8 +8076,12 @@ packages: resolution: {integrity: sha512-dJvrYWxP/UcXm36Qn36fxhUKu8A/xMRXVT2cliFF1Z7UA9liG5Psj3ezNSZw+5puH2czDXRLcXQxf8JbJt0ejg==} dev: true - /@types/node@18.19.25: - resolution: {integrity: sha512-NrNXHJCexZtcbR9K1hsv1fSbwAwnhv7ql7l331aKvW0sej5H0NY1o64BHe0AA2ZoQuTm7NE6fyNW079MOWXe4Q==} + /@types/ms@0.7.34: + resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==} + dev: true + + /@types/node@18.19.28: + resolution: {integrity: sha512-J5cOGD9n4x3YGgVuaND6khm5x07MMdAKkRyXnjVR6KFhLMNh2yONGiP7Z+4+tBOt5mK+GvDTiacTOVGGpqiecw==} dependencies: undici-types: 5.26.5 @@ -7645,8 +8104,8 @@ packages: resolution: {integrity: sha512-b/IFHHTkYkTqu41IH9UtpICwqrpKj2oNlb4KHPzFQDMiz+h1BgAeATeO0/XTph4+UkH9W2U0E4B4j64KWOovag==} dev: false - /@types/prop-types@15.7.11: - resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==} + /@types/prop-types@15.7.12: + resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==} /@types/qs@6.9.7: resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==} @@ -7713,28 +8172,28 @@ packages: /@types/react@18.2.55: resolution: {integrity: sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==} dependencies: - '@types/prop-types': 15.7.11 - '@types/scheduler': 0.16.2 + '@types/prop-types': 15.7.12 + '@types/scheduler': 0.16.8 csstype: 3.1.3 /@types/resolve@0.0.8: resolution: {integrity: sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 dev: true /@types/responselike@1.0.0: resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 dev: true /@types/retry@0.12.0: resolution: {integrity: sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==} dev: false - /@types/scheduler@0.16.2: - resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==} + /@types/scheduler@0.16.8: + resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==} /@types/semver@7.5.0: resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==} @@ -7744,7 +8203,7 @@ packages: resolution: {integrity: sha512-Cwo8LE/0rnvX7kIIa3QHCkcuF21c05Ayb0ZfxPiv0W8VRiZiNW/WuRupHKpqqGVGf7SUA44QSOUKaEd9lIrd/Q==} dependencies: '@types/mime': 1.3.2 - '@types/node': 18.19.25 + '@types/node': 18.19.28 dev: false /@types/serve-static@1.15.2: @@ -7752,7 +8211,7 @@ packages: dependencies: '@types/http-errors': 2.0.1 '@types/mime': 3.0.1 - '@types/node': 18.19.25 + '@types/node': 18.19.28 dev: false /@types/sinon@10.0.20: @@ -7801,14 +8260,14 @@ packages: resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==} dev: true - /@types/webxr@0.5.13: - resolution: {integrity: sha512-Hi4K3aTEoaa31Cep75AA9wK5q2iZgC1L70serPbI11L4YieoZpu5LvLr6FZXyIdqkkGPh1WMuDf6oSPHJXBkoA==} + /@types/webxr@0.5.14: + resolution: {integrity: sha512-UEMMm/Xn3DtEa+gpzUrOcDj+SJS1tk5YodjwOxcqStNhCfPcwgyC5Srg2ToVKyg2Fhq16Ffpb0UWUQHqoT9AMA==} dev: false /@types/ws@7.4.7: resolution: {integrity: sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 dev: false /@types/yargs-parser@21.0.3: @@ -7825,7 +8284,7 @@ packages: dependencies: '@types/yargs-parser': 21.0.3 - /@typescript-eslint/eslint-plugin@6.19.1(@typescript-eslint/parser@6.19.1)(eslint@8.56.0)(typescript@5.3.3): + /@typescript-eslint/eslint-plugin@6.19.1(@typescript-eslint/parser@6.19.1)(eslint@8.57.0)(typescript@5.4.3): resolution: {integrity: sha512-roQScUGFruWod9CEyoV5KlCYrubC/fvG8/1zXuT0WTcxX87GnMMmnksMwSg99lo1xiKrBzw2icsJPMAw1OtKxg==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -7837,24 +8296,24 @@ packages: optional: true dependencies: '@eslint-community/regexpp': 4.6.2 - '@typescript-eslint/parser': 6.19.1(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/parser': 6.19.1(eslint@8.57.0)(typescript@5.4.3) '@typescript-eslint/scope-manager': 6.19.1 - '@typescript-eslint/type-utils': 6.19.1(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/utils': 6.19.1(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/type-utils': 6.19.1(eslint@8.57.0)(typescript@5.4.3) + '@typescript-eslint/utils': 6.19.1(eslint@8.57.0)(typescript@5.4.3) '@typescript-eslint/visitor-keys': 6.19.1 debug: 4.3.4(supports-color@8.1.1) - eslint: 8.56.0 + eslint: 8.57.0 graphemer: 1.4.0 ignore: 5.3.1 natural-compare: 1.4.0 semver: 7.6.0 - ts-api-utils: 1.0.1(typescript@5.3.3) - typescript: 5.3.3 + ts-api-utils: 1.0.1(typescript@5.4.3) + typescript: 5.4.3 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/parser@6.19.1(eslint@8.56.0)(typescript@5.3.3): + /@typescript-eslint/parser@6.19.1(eslint@8.57.0)(typescript@5.4.3): resolution: {integrity: sha512-WEfX22ziAh6pRE9jnbkkLGp/4RhTpffr2ZK5bJ18M8mIfA8A+k97U9ZyaXCEJRlmMHh7R9MJZWXp/r73DzINVQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -7866,11 +8325,11 @@ packages: dependencies: '@typescript-eslint/scope-manager': 6.19.1 '@typescript-eslint/types': 6.19.1 - '@typescript-eslint/typescript-estree': 6.19.1(typescript@5.3.3) + '@typescript-eslint/typescript-estree': 6.19.1(typescript@5.4.3) '@typescript-eslint/visitor-keys': 6.19.1 debug: 4.3.4(supports-color@8.1.1) - eslint: 8.56.0 - typescript: 5.3.3 + eslint: 8.57.0 + typescript: 5.4.3 transitivePeerDependencies: - supports-color dev: true @@ -7883,7 +8342,7 @@ packages: '@typescript-eslint/visitor-keys': 6.19.1 dev: true - /@typescript-eslint/type-utils@6.19.1(eslint@8.56.0)(typescript@5.3.3): + /@typescript-eslint/type-utils@6.19.1(eslint@8.57.0)(typescript@5.4.3): resolution: {integrity: sha512-0vdyld3ecfxJuddDjACUvlAeYNrHP/pDeQk2pWBR2ESeEzQhg52DF53AbI9QCBkYE23lgkhLCZNkHn2hEXXYIg==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -7893,12 +8352,12 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': 6.19.1(typescript@5.3.3) - '@typescript-eslint/utils': 6.19.1(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/typescript-estree': 6.19.1(typescript@5.4.3) + '@typescript-eslint/utils': 6.19.1(eslint@8.57.0)(typescript@5.4.3) debug: 4.3.4(supports-color@8.1.1) - eslint: 8.56.0 - ts-api-utils: 1.0.1(typescript@5.3.3) - typescript: 5.3.3 + eslint: 8.57.0 + ts-api-utils: 1.0.1(typescript@5.4.3) + typescript: 5.4.3 transitivePeerDependencies: - supports-color dev: true @@ -7908,7 +8367,7 @@ packages: engines: {node: ^16.0.0 || >=18.0.0} dev: true - /@typescript-eslint/typescript-estree@6.19.1(typescript@5.3.3): + /@typescript-eslint/typescript-estree@6.19.1(typescript@5.4.3): resolution: {integrity: sha512-aFdAxuhzBFRWhy+H20nYu19+Km+gFfwNO4TEqyszkMcgBDYQjmPJ61erHxuT2ESJXhlhrO7I5EFIlZ+qGR8oVA==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -7924,25 +8383,25 @@ packages: is-glob: 4.0.3 minimatch: 9.0.3 semver: 7.6.0 - ts-api-utils: 1.0.1(typescript@5.3.3) - typescript: 5.3.3 + ts-api-utils: 1.0.1(typescript@5.4.3) + typescript: 5.4.3 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/utils@6.19.1(eslint@8.56.0)(typescript@5.3.3): + /@typescript-eslint/utils@6.19.1(eslint@8.57.0)(typescript@5.4.3): resolution: {integrity: sha512-JvjfEZuP5WoMqwh9SPAPDSHSg9FBHHGhjPugSRxu5jMfjvBpq5/sGTD+9M9aQ5sh6iJ8AY/Kk/oUYVEMAPwi7w==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^7.0.0 || ^8.0.0 dependencies: - '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0) + '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) '@types/json-schema': 7.0.12 '@types/semver': 7.5.0 '@typescript-eslint/scope-manager': 6.19.1 '@typescript-eslint/types': 6.19.1 - '@typescript-eslint/typescript-estree': 6.19.1(typescript@5.3.3) - eslint: 8.56.0 + '@typescript-eslint/typescript-estree': 6.19.1(typescript@5.4.3) + eslint: 8.57.0 semver: 7.6.0 transitivePeerDependencies: - supports-color @@ -7961,6 +8420,22 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true + /@vitejs/plugin-react@4.2.1(vite@5.2.2): + resolution: {integrity: sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + vite: ^4.2.0 || ^5.0.0 + dependencies: + '@babel/core': 7.24.3 + '@babel/plugin-transform-react-jsx-self': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.3) + '@types/babel__core': 7.20.5 + react-refresh: 0.14.0 + vite: 5.2.2(@types/node@18.19.28) + transitivePeerDependencies: + - supports-color + dev: true + /@webassemblyjs/ast@1.11.6: resolution: {integrity: sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==} dependencies: @@ -8090,7 +8565,7 @@ packages: resolution: {integrity: sha512-3sRwuDTMy2GmD+44bhCTcBasCrjBexzYRzhxkmMrX49cpVDmQOH+4O7kX5OMRbmzMXe6Z5MsnxIlDlm3bJlcww==} engines: {node: '>=16.0.0'} dependencies: - '@babel/generator': 7.23.6 + '@babel/generator': 7.24.1 '@wyw-in-js/shared': 0.5.0 transitivePeerDependencies: - supports-color @@ -8111,16 +8586,16 @@ packages: resolution: {integrity: sha512-tpa2/FsB30fdXB1E+9MmfxQYbRgLv/+VMKzpBKNraDH39zwnA2eGGAEho5gpqK40cEV7NH6zhVbaBcEnV0HQyw==} engines: {node: '>=16.0.0'} dependencies: - '@babel/core': 7.23.9 - '@babel/generator': 7.23.6 - '@babel/helper-module-imports': 7.22.15 - '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.9) - '@babel/template': 7.23.9 - '@babel/traverse': 7.23.9 - '@babel/types': 7.23.9 + '@babel/core': 7.24.3 + '@babel/generator': 7.24.1 + '@babel/helper-module-imports': 7.24.3 + '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.3) + '@babel/template': 7.24.0 + '@babel/traverse': 7.24.1 + '@babel/types': 7.24.0 '@wyw-in-js/processor-utils': 0.5.0 '@wyw-in-js/shared': 0.5.0 - babel-merge: 3.0.0(@babel/core@7.23.9) + babel-merge: 3.0.0(@babel/core@7.24.3) cosmiconfig: 8.2.0 happy-dom: 12.10.3 source-map: 0.7.4 @@ -8797,19 +9272,19 @@ packages: hasBin: true dev: false - /autoprefixer@10.4.18(postcss@8.4.35): - resolution: {integrity: sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==} + /autoprefixer@10.4.19(postcss@8.4.38): + resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==} engines: {node: ^10 || ^12 || >=14} hasBin: true peerDependencies: postcss: ^8.1.0 dependencies: browserslist: 4.23.0 - caniuse-lite: 1.0.30001593 + caniuse-lite: 1.0.30001599 fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.0.0 - postcss: 8.4.35 + postcss: 8.4.38 postcss-value-parser: 4.2.0 dev: false @@ -8825,8 +9300,8 @@ packages: dependencies: possible-typed-array-names: 1.0.0 - /aws-sdk@2.1579.0: - resolution: {integrity: sha512-TYv/bK2kVT/dfrpjAPL6sEhku4uH9EB18gRa6p9gi0fPtmhe49HrYoN2xmPNSqLPj4/CtSXmZhg91Ny1DhG8/Q==} + /aws-sdk@2.1589.0: + resolution: {integrity: sha512-Tt3UHH6hoUEAjbCscqvfEAoq9VSTN5iSQO9XSisiiH/QJo8sf+iLCYmfJHM4tVkd92bQH61/xxj9t2Mazwc/WQ==} engines: {node: '>= 10.0.0'} requiresBuild: true dependencies: @@ -8865,43 +9340,48 @@ packages: resolution: {integrity: sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==} dev: true - /babel-core@7.0.0-bridge.0(@babel/core@7.23.9): + /babel-core@7.0.0-bridge.0(@babel/core@7.24.3): resolution: {integrity: sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 dev: false - /babel-loader@9.1.3(@babel/core@7.23.9)(webpack@5.90.3): + /babel-loader@9.1.3(@babel/core@7.24.3)(webpack@5.90.3): resolution: {integrity: sha512-xG3ST4DglodGf8qSwv0MdeWLhrDsw/32QMdTO5T1ZIp9gQur0HkCyFs7Awskr10JKXFXwpAhiCuYX5oGXnRGbw==} engines: {node: '>= 14.15.0'} peerDependencies: '@babel/core': ^7.23.9 webpack: '>=5' dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 find-cache-dir: 4.0.0 schema-utils: 4.2.0 webpack: 5.90.3(esbuild@0.19.11)(webpack-cli@5.1.4) dev: true - /babel-merge@3.0.0(@babel/core@7.23.9): + /babel-merge@3.0.0(@babel/core@7.24.3): resolution: {integrity: sha512-eBOBtHnzt9xvnjpYNI5HmaPp/b2vMveE5XggzqHnQeHJ8mFIBrBv6WZEVIj5jJ2uwTItkqKo9gWzEEcBxEq0yw==} deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 deepmerge: 2.2.1 object.omit: 3.0.0 dev: false + /babel-plugin-define-var@0.1.0: + resolution: {integrity: sha512-WcK43U4uz+9G35Wvdnyri4Tcg8Ux9/hSbQC4ckpfrHFQp8Cuz1BIQK5NswuGxT3T8cc3d4e55wDeSO4dViOugg==} + engines: {node: '>=10'} + dev: false + /babel-plugin-istanbul@6.1.1: resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==} engines: {node: '>=8'} dependencies: - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-plugin-utils': 7.24.0 '@istanbuljs/load-nyc-config': 1.1.0 '@istanbuljs/schema': 0.1.3 istanbul-lib-instrument: 5.2.0 @@ -8914,9 +9394,9 @@ packages: resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==} engines: {node: '>=10', npm: '>=6'} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 cosmiconfig: 7.0.1 - resolve: 1.22.4 + resolve: 1.22.8 /babel-plugin-module-resolver@5.0.0: resolution: {integrity: sha512-g0u+/ChLSJ5+PzYwLwP8Rp8Rcfowz58TJNCe+L/ui4rpzE/mg//JVX0EWBUYoxaextqnwuGHzfGp2hh0PPV25Q==} @@ -8926,61 +9406,61 @@ packages: glob: 8.1.0 pkg-up: 3.1.0 reselect: 4.1.8 - resolve: 1.22.4 + resolve: 1.22.8 /babel-plugin-optimize-clsx@2.6.2: resolution: {integrity: sha512-TxgyjdVb7trTAsg/J5ByqJdbBPTYR8yaWLGQGpSxwygw8IFST5gEc1J9QktCGCHCb+69t04DWg9KOE0y2hN30w==} dependencies: - '@babel/generator': 7.23.6 - '@babel/template': 7.23.9 - '@babel/types': 7.23.9 + '@babel/generator': 7.24.1 + '@babel/template': 7.24.0 + '@babel/types': 7.24.0 find-cache-dir: 3.3.2 lodash: 4.17.21 object-hash: 2.2.0 - /babel-plugin-polyfill-corejs2@0.4.8(@babel/core@7.23.9): - resolution: {integrity: sha512-OtIuQfafSzpo/LhnJaykc0R/MMnuLSSVjVYy9mHArIZ9qTCSZ6TpWCuEKZYVoN//t8HqBNScHrOtCrIK5IaGLg==} + /babel-plugin-polyfill-corejs2@0.4.10(@babel/core@7.24.3): + resolution: {integrity: sha512-rpIuu//y5OX6jVU+a5BCn1R5RSZYWAl2Nar76iwaOdycqb6JPxediskWFMMl7stfwNJR4b7eiQvh5fB5TEQJTQ==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/compat-data': 7.23.5 - '@babel/core': 7.23.9 - '@babel/helper-define-polyfill-provider': 0.5.0(@babel/core@7.23.9) + '@babel/compat-data': 7.24.1 + '@babel/core': 7.24.3 + '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.3) semver: 6.3.1 transitivePeerDependencies: - supports-color - /babel-plugin-polyfill-corejs3@0.9.0(@babel/core@7.23.9): - resolution: {integrity: sha512-7nZPG1uzK2Ymhy/NbaOWTg3uibM2BmGASS4vHS4szRZAIR8R6GwA/xAujpdrXU5iyklrimWnLWU+BLF9suPTqg==} + /babel-plugin-polyfill-corejs3@0.10.4(@babel/core@7.24.3): + resolution: {integrity: sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-define-polyfill-provider': 0.5.0(@babel/core@7.23.9) - core-js-compat: 3.35.1 + '@babel/core': 7.24.3 + '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.3) + core-js-compat: 3.36.1 transitivePeerDependencies: - supports-color - /babel-plugin-polyfill-regenerator@0.5.5(@babel/core@7.23.9): - resolution: {integrity: sha512-OJGYZlhLqBh2DDHeqAxWB1XIvr49CxiJ2gIt61/PU55CQK4Z58OzMqjDe1zwQdQk+rBYsRc+1rJmdajM3gimHg==} + /babel-plugin-polyfill-regenerator@0.6.1(@babel/core@7.24.3): + resolution: {integrity: sha512-JfTApdE++cgcTWjsiCQlLyFBMbTUft9ja17saCc93lgV33h4tuCVj7tlvu//qpLwaG+3yEz7/KhahGrUMkVq9g==} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/helper-define-polyfill-provider': 0.5.0(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.3) transitivePeerDependencies: - supports-color /babel-plugin-react-remove-properties@0.3.0: resolution: {integrity: sha512-vbxegtXGyVcUkCvayLzftU95vuvpYFV85pRpeMpohMHeEY46Qe0VNWfkVVcCbaZ12CXHzDFOj0esumATcW83ng==} - /babel-plugin-tester@11.0.4(@babel/core@7.23.9): + /babel-plugin-tester@11.0.4(@babel/core@7.24.3): resolution: {integrity: sha512-cqswtpSPo0e++rZB0l/54EG17LL25l9gLgh59yXfnmNxX+2lZTIOpx2zt4YI9QIClVXc8xf63J6yWwKkzy0jNg==} engines: {node: ^14.20.0 || ^16.16.0 || >=18.5.0} peerDependencies: '@babel/core': ^7.23.9 dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 core-js: 3.32.1 debug: 4.3.4(supports-color@8.1.1) lodash.mergewith: 4.6.2 @@ -8990,10 +9470,10 @@ packages: - supports-color dev: true - /babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.23.9): + /babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.24.3): resolution: {integrity: sha512-g4aaCrDDOsWjbm0PUUeVnkcVd6AKJsVc/MbnPhEotEpkeJQP6b8nzewohQi7+QS8UyPehOhGWn0nOwjvWpmMvQ==} dependencies: - '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.23.9) + '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.3) transitivePeerDependencies: - '@babel/core' dev: false @@ -9165,7 +9645,7 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001593 + caniuse-lite: 1.0.30001599 electron-to-chromium: 1.4.690 node-releases: 2.0.14 update-browserslist-db: 1.0.13(browserslist@4.23.0) @@ -9470,8 +9950,8 @@ packages: /camelize@1.0.0: resolution: {integrity: sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==} - /caniuse-lite@1.0.30001593: - resolution: {integrity: sha512-UWM1zlo3cZfkpBysd7AS+z+v007q9G1+fLTUU42rQnY6t2axoogPW/xol6T7juU5EUoOhML4WgBIdG+9yYqAjQ==} + /caniuse-lite@1.0.30001599: + resolution: {integrity: sha512-LRAQHZ4yT1+f9LemSMeqdMpMxZcc4RMWdj4tiFe3G8tNkWK+E58g+/tzotb5cU6TbcVJLr4fySiAW7XmxQvZQA==} /chai-dom@1.12.0(chai@4.4.1): resolution: {integrity: sha512-pLP8h6IBR8z1AdeQ+EMcJ7dXPdsax/1Q7gdGZjsnAmSBl3/gItQUYSCo32br1qOy4SlcBjvqId7ilAf3uJ2K1w==} @@ -9630,7 +10110,7 @@ packages: engines: {node: '>=12.13.0'} hasBin: true dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 escape-string-regexp: 4.0.0 is-wsl: 2.2.0 lighthouse-logger: 1.4.2 @@ -9645,7 +10125,7 @@ packages: /chromium-edge-launcher@1.0.0: resolution: {integrity: sha512-pgtgjNKZ7i5U++1g1PWv75umkHvhVTDOQIZ+sjeUX9483S7Y6MUvO0lrd7ShGlQlFHMN4SwKTCq/X8hWrbv2KA==} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 escape-string-regexp: 4.0.0 is-wsl: 2.2.0 lighthouse-logger: 1.4.2 @@ -9687,7 +10167,7 @@ packages: hasBin: true dependencies: archiver: 3.1.1 - aws-sdk: 2.1579.0 + aws-sdk: 2.1589.0 fs-extra: 6.0.1 glob: 7.2.3 gunzip-maybe: 1.4.2 @@ -10156,8 +10636,8 @@ packages: engines: {node: '>= 0.6'} dev: true - /cookie@0.5.0: - resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==} + /cookie@0.6.0: + resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==} engines: {node: '>= 0.6'} /copy-descriptor@0.1.1: @@ -10165,8 +10645,8 @@ packages: engines: {node: '>=0.10.0'} dev: false - /core-js-compat@3.35.1: - resolution: {integrity: sha512-sftHa5qUJY3rs9Zht1WEnmkvXputCyDBczPnr7QDgL8n3qrF3CMXY4VPSYtOLLiOUJcah2WNXREd48iOl6mQIw==} + /core-js-compat@3.36.1: + resolution: {integrity: sha512-Dk997v9ZCt3X/npqzyGdTlq6t7lDBhZwGvV94PKzDArjp7BTRm7WlDAXYd/OWdeFHO8OChQYRJNJvUCqCbrtKA==} dependencies: browserslist: 4.23.0 @@ -10334,7 +10814,7 @@ packages: /css-jss@10.10.0: resolution: {integrity: sha512-YyMIS/LsSKEGXEaVJdjonWe18p4vXLo8CMA4FrW/kcaEyqdIGKCFXao31gbJddXEdIxSXFFURWrenBJPlKTgAA==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 jss: 10.10.0 jss-preset-default: 10.10.0 dev: false @@ -10373,7 +10853,7 @@ packages: engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} dependencies: mdn-data: 2.0.28 - source-map-js: 1.0.2 + source-map-js: 1.2.0 dev: true /css-tree@2.3.1: @@ -10381,13 +10861,13 @@ packages: engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} dependencies: mdn-data: 2.0.30 - source-map-js: 1.0.2 + source-map-js: 1.2.0 dev: true /css-vendor@2.0.8: resolution: {integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 is-in-browser: 1.1.3 dev: false @@ -10582,7 +11062,7 @@ packages: resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==} engines: {node: '>=0.11'} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 /date-format@4.0.13: resolution: {integrity: sha512-bnYCwf8Emc3pTD8pXnre+wfnjGtfi5ncMDKy7+cWZXbmRAsdWkOQHrfC1yz/KiwP5thDp2kCHWYWKBX4HP1hoQ==} @@ -10697,7 +11177,7 @@ packages: object-keys: 1.1.1 object.assign: 4.1.5 regexp.prototype.flags: 1.5.2 - side-channel: 1.0.4 + side-channel: 1.0.6 which-boxed-primitive: 1.0.2 which-collection: 1.0.1 which-typed-array: 1.1.14 @@ -10907,7 +11387,7 @@ packages: /dom-helpers@5.2.1: resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 csstype: 3.1.3 dev: false @@ -11072,7 +11552,7 @@ packages: dependencies: '@types/cookie': 0.4.1 '@types/cors': 2.8.12 - '@types/node': 18.19.25 + '@types/node': 18.19.28 accepts: 1.3.8 base64id: 2.0.0 cookie: 0.4.2 @@ -11367,6 +11847,37 @@ packages: '@esbuild/win32-ia32': 0.19.11 '@esbuild/win32-x64': 0.19.11 + /esbuild@0.20.2: + resolution: {integrity: sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + optionalDependencies: + '@esbuild/aix-ppc64': 0.20.2 + '@esbuild/android-arm': 0.20.2 + '@esbuild/android-arm64': 0.20.2 + '@esbuild/android-x64': 0.20.2 + '@esbuild/darwin-arm64': 0.20.2 + '@esbuild/darwin-x64': 0.20.2 + '@esbuild/freebsd-arm64': 0.20.2 + '@esbuild/freebsd-x64': 0.20.2 + '@esbuild/linux-arm': 0.20.2 + '@esbuild/linux-arm64': 0.20.2 + '@esbuild/linux-ia32': 0.20.2 + '@esbuild/linux-loong64': 0.20.2 + '@esbuild/linux-mips64el': 0.20.2 + '@esbuild/linux-ppc64': 0.20.2 + '@esbuild/linux-riscv64': 0.20.2 + '@esbuild/linux-s390x': 0.20.2 + '@esbuild/linux-x64': 0.20.2 + '@esbuild/netbsd-x64': 0.20.2 + '@esbuild/openbsd-x64': 0.20.2 + '@esbuild/sunos-x64': 0.20.2 + '@esbuild/win32-arm64': 0.20.2 + '@esbuild/win32-ia32': 0.20.2 + '@esbuild/win32-x64': 0.20.2 + dev: true + /escalade@3.1.1: resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} engines: {node: '>=6'} @@ -11392,7 +11903,7 @@ packages: engines: {node: '>=12'} dev: true - /eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.29.1)(eslint@8.56.0): + /eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.29.1)(eslint@8.57.0): resolution: {integrity: sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==} engines: {node: ^10.12.0 || >=12.0.0} peerDependencies: @@ -11400,14 +11911,14 @@ packages: eslint-plugin-import: ^2.25.2 dependencies: confusing-browser-globals: 1.0.11 - eslint: 8.56.0 - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-webpack@0.13.8)(eslint@8.56.0) + eslint: 8.57.0 + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) object.assign: 4.1.5 object.entries: 1.1.7 semver: 6.3.1 dev: true - /eslint-config-airbnb-typescript@17.1.0(@typescript-eslint/eslint-plugin@6.19.1)(@typescript-eslint/parser@6.19.1)(eslint-plugin-import@2.29.1)(eslint@8.56.0): + /eslint-config-airbnb-typescript@17.1.0(@typescript-eslint/eslint-plugin@6.19.1)(@typescript-eslint/parser@6.19.1)(eslint-plugin-import@2.29.1)(eslint@8.57.0): resolution: {integrity: sha512-GPxI5URre6dDpJ0CtcthSZVBAfI+Uw7un5OYNVxP2EYi3H81Jw701yFP7AU+/vCE7xBtFmjge7kfhhk4+RAiig==} peerDependencies: '@typescript-eslint/eslint-plugin': ^5.13.0 || ^6.0.0 @@ -11415,14 +11926,14 @@ packages: eslint: ^7.32.0 || ^8.2.0 eslint-plugin-import: ^2.25.3 dependencies: - '@typescript-eslint/eslint-plugin': 6.19.1(@typescript-eslint/parser@6.19.1)(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/parser': 6.19.1(eslint@8.56.0)(typescript@5.3.3) - eslint: 8.56.0 - eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.29.1)(eslint@8.56.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-webpack@0.13.8)(eslint@8.56.0) + '@typescript-eslint/eslint-plugin': 6.19.1(@typescript-eslint/parser@6.19.1)(eslint@8.57.0)(typescript@5.4.3) + '@typescript-eslint/parser': 6.19.1(eslint@8.57.0)(typescript@5.4.3) + eslint: 8.57.0 + eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.29.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) dev: true - /eslint-config-airbnb@19.0.4(eslint-plugin-import@2.29.1)(eslint-plugin-jsx-a11y@6.7.1)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react@7.34.1)(eslint@8.56.0): + /eslint-config-airbnb@19.0.4(eslint-plugin-import@2.29.1)(eslint-plugin-jsx-a11y@6.7.1)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react@7.34.1)(eslint@8.57.0): resolution: {integrity: sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==} engines: {node: ^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -11432,23 +11943,23 @@ packages: eslint-plugin-react: ^7.28.0 eslint-plugin-react-hooks: ^4.3.0 dependencies: - eslint: 8.56.0 - eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.29.1)(eslint@8.56.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-webpack@0.13.8)(eslint@8.56.0) - eslint-plugin-jsx-a11y: 6.7.1(eslint@8.56.0) - eslint-plugin-react: 7.34.1(eslint@8.56.0) - eslint-plugin-react-hooks: 4.6.0(eslint@8.56.0) + eslint: 8.57.0 + eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.29.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) + eslint-plugin-jsx-a11y: 6.7.1(eslint@8.57.0) + eslint-plugin-react: 7.34.1(eslint@8.57.0) + eslint-plugin-react-hooks: 4.6.0(eslint@8.57.0) object.assign: 4.1.5 object.entries: 1.1.7 dev: true - /eslint-config-prettier@9.1.0(eslint@8.56.0): + /eslint-config-prettier@9.1.0(eslint@8.57.0): resolution: {integrity: sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==} hasBin: true peerDependencies: eslint: '>=7.0.0' dependencies: - eslint: 8.56.0 + eslint: 8.57.0 dev: true /eslint-import-resolver-node@0.3.9: @@ -11456,7 +11967,7 @@ packages: dependencies: debug: 3.2.7 is-core-module: 2.13.1 - resolve: 1.22.4 + resolve: 1.22.8 transitivePeerDependencies: - supports-color dev: true @@ -11471,7 +11982,7 @@ packages: array.prototype.find: 2.2.2 debug: 3.2.7 enhanced-resolve: 0.9.1 - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-webpack@0.13.8)(eslint@8.56.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) find-root: 1.1.0 hasown: 2.0.2 interpret: 1.4.0 @@ -11485,7 +11996,7 @@ packages: - supports-color dev: true - /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8)(eslint@8.56.0): + /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0): resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==} engines: {node: '>=4'} peerDependencies: @@ -11506,38 +12017,38 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 6.19.1(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/parser': 6.19.1(eslint@8.57.0)(typescript@5.4.3) debug: 3.2.7 - eslint: 8.56.0 + eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-webpack: 0.13.8(eslint-plugin-import@2.29.1)(webpack@5.90.3) transitivePeerDependencies: - supports-color dev: true - /eslint-plugin-babel@5.3.1(eslint@8.56.0): + /eslint-plugin-babel@5.3.1(eslint@8.57.0): resolution: {integrity: sha512-VsQEr6NH3dj664+EyxJwO4FCYm/00JhYb3Sk3ft8o+fpKuIfQ9TaW6uVUfvwMXHcf/lsnRIoyFPsLMyiWCSL/g==} engines: {node: '>=4'} peerDependencies: eslint: '>=4.0.0' dependencies: - eslint: 8.56.0 + eslint: 8.57.0 eslint-rule-composer: 0.3.0 dev: true - /eslint-plugin-filenames@1.3.2(eslint@8.56.0): + /eslint-plugin-filenames@1.3.2(eslint@8.57.0): resolution: {integrity: sha512-tqxJTiEM5a0JmRCUYQmxw23vtTxrb2+a3Q2mMOPhFxvt7ZQQJmdiuMby9B/vUAuVMghyP7oET+nIf6EO6CBd/w==} peerDependencies: eslint: '*' dependencies: - eslint: 8.56.0 + eslint: 8.57.0 lodash.camelcase: 4.3.0 lodash.kebabcase: 4.1.1 lodash.snakecase: 4.1.1 lodash.upperfirst: 4.3.1 dev: true - /eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-webpack@0.13.8)(eslint@8.56.0): + /eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0): resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==} engines: {node: '>=4'} peerDependencies: @@ -11547,16 +12058,16 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 6.19.1(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/parser': 6.19.1(eslint@8.57.0)(typescript@5.4.3) array-includes: 3.1.7 array.prototype.findlastindex: 1.2.3 array.prototype.flat: 1.3.2 array.prototype.flatmap: 1.3.2 debug: 3.2.7 doctrine: 2.1.0 - eslint: 8.56.0 + eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8)(eslint@8.56.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.13.1 is-glob: 4.0.3 @@ -11572,13 +12083,13 @@ packages: - supports-color dev: true - /eslint-plugin-jsx-a11y@6.7.1(eslint@8.56.0): + /eslint-plugin-jsx-a11y@6.7.1(eslint@8.57.0): resolution: {integrity: sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==} engines: {node: '>=4.0'} peerDependencies: eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 aria-query: 5.3.0 array-includes: 3.1.7 array.prototype.flatmap: 1.3.2 @@ -11587,7 +12098,7 @@ packages: axobject-query: 3.2.1 damerau-levenshtein: 1.0.8 emoji-regex: 9.2.2 - eslint: 8.56.0 + eslint: 8.57.0 has: 1.0.3 jsx-ast-utils: 3.3.3 language-tags: 1.0.5 @@ -11597,28 +12108,28 @@ packages: semver: 6.3.1 dev: true - /eslint-plugin-mocha@10.4.1(eslint@8.56.0): + /eslint-plugin-mocha@10.4.1(eslint@8.57.0): resolution: {integrity: sha512-G85ALUgKaLzuEuHhoW3HVRgPTmia6njQC3qCG6CEvA8/Ja9PDZnRZOuzekMki+HaViEQXINuYsmhp5WR5/4MfA==} engines: {node: '>=14.0.0'} peerDependencies: eslint: '>=7.0.0' dependencies: - eslint: 8.56.0 - eslint-utils: 3.0.0(eslint@8.56.0) + eslint: 8.57.0 + eslint-utils: 3.0.0(eslint@8.57.0) globals: 13.24.0 rambda: 7.5.0 dev: true - /eslint-plugin-react-hooks@4.6.0(eslint@8.56.0): + /eslint-plugin-react-hooks@4.6.0(eslint@8.57.0): resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==} engines: {node: '>=10'} peerDependencies: eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 dependencies: - eslint: 8.56.0 + eslint: 8.57.0 dev: true - /eslint-plugin-react@7.34.1(eslint@8.56.0): + /eslint-plugin-react@7.34.1(eslint@8.57.0): resolution: {integrity: sha512-N97CxlouPT1AHt8Jn0mhhN2RrADlUAsk1/atcT2KyA/l9Q/E6ll7OIGwNumFmWfZ9skV3XXccYS19h80rHtgkw==} engines: {node: '>=4'} peerDependencies: @@ -11631,7 +12142,7 @@ packages: array.prototype.tosorted: 1.1.3 doctrine: 2.1.0 es-iterator-helpers: 1.0.17 - eslint: 8.56.0 + eslint: 8.57.0 estraverse: 5.3.0 jsx-ast-utils: 3.3.3 minimatch: 3.1.2 @@ -11665,13 +12176,13 @@ packages: estraverse: 5.3.0 dev: true - /eslint-utils@3.0.0(eslint@8.56.0): + /eslint-utils@3.0.0(eslint@8.57.0): resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==} engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0} peerDependencies: eslint: '>=5' dependencies: - eslint: 8.56.0 + eslint: 8.57.0 eslint-visitor-keys: 2.1.0 dev: true @@ -11685,16 +12196,16 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - /eslint@8.56.0: - resolution: {integrity: sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==} + /eslint@8.57.0: + resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} hasBin: true dependencies: - '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0) + '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) '@eslint-community/regexpp': 4.6.2 '@eslint/eslintrc': 2.1.4 - '@eslint/js': 8.56.0 - '@humanwhocodes/config-array': 0.11.13 + '@eslint/js': 8.57.0 + '@humanwhocodes/config-array': 0.11.14 '@humanwhocodes/module-importer': 1.0.1 '@nodelib/fs.walk': 1.2.8 '@ungap/structured-clone': 1.2.0 @@ -11741,6 +12252,13 @@ packages: eslint-visitor-keys: 3.4.3 dev: true + /esprima-extract-comments@1.1.0: + resolution: {integrity: sha512-sBQUnvJwpeE9QnPrxh7dpI/dp67erYG4WXEAreAMoelPRpMR7NWb4YtwRPn9b+H1uLQKl/qS8WYmyaljTpjIsw==} + engines: {node: '>=4'} + dependencies: + esprima: 4.0.1 + dev: true + /esprima@4.0.1: resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==} engines: {node: '>=4'} @@ -11771,8 +12289,8 @@ packages: resolution: {integrity: sha512-YNF+mZ/Wu2FU/gvmzuWtYc8rloubL7wfXCTgouFrnjGVXPA/EeYYA7pupXWrb3Iv1cTBeSSxxJIbK23l4MRNqg==} engines: {node: '>=8.3.0'} dependencies: - '@babel/traverse': 7.23.9 - '@babel/types': 7.23.9 + '@babel/traverse': 7.24.1 + '@babel/types': 7.24.0 c8: 7.12.0 transitivePeerDependencies: - supports-color @@ -11921,8 +12439,8 @@ packages: resolution: {integrity: sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==} dev: true - /express@4.18.3: - resolution: {integrity: sha512-6VyCijWQ+9O7WuVMTRBTl+cjNNIzD5cY5mQ1WM8r/LEkI2u8EYpOotESNwzNlyCn3g+dmjKYI6BmNneSr/FSRw==} + /express@4.19.2: + resolution: {integrity: sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==} engines: {node: '>= 0.10.0'} dependencies: accepts: 1.3.8 @@ -11930,7 +12448,7 @@ packages: body-parser: 1.20.2 content-disposition: 0.5.4 content-type: 1.0.5 - cookie: 0.5.0 + cookie: 0.6.0 cookie-signature: 1.0.6 debug: 2.6.9 depd: 2.0.0 @@ -12001,6 +12519,14 @@ packages: - supports-color dev: false + /extract-comments@1.1.0: + resolution: {integrity: sha512-dzbZV2AdSSVW/4E7Ti5hZdHWbA+Z80RJsJhr5uiL10oyjl/gy7/o+HI1HwK4/WSZhlq4SNKU3oUzXlM13Qx02Q==} + engines: {node: '>=6'} + dependencies: + esprima-extract-comments: 1.1.0 + parse-code-context: 1.0.0 + dev: true + /fast-csv@4.3.6: resolution: {integrity: sha512-2RNSpuwwsJGP0frGsOmTb9oUF+VkFSM4SyLTDgwf2ciHWTarN0lQTC+F2f/t5J9QjW+c65VFIAAu85GsvMIusw==} engines: {node: '>=10.0.0'} @@ -12042,8 +12568,8 @@ packages: dependencies: punycode: 1.4.1 - /fast-xml-parser@4.3.4: - resolution: {integrity: sha512-utnwm92SyozgA3hhH2I8qldf2lBqm6qHOICawRNRFu1qMe3+oqr+GcXjGqTmXTMGE5T4eC03kr/rlh5C1IRdZA==} + /fast-xml-parser@4.3.6: + resolution: {integrity: sha512-M2SovcRxD4+vC493Uc2GZVcZaj66CCJhWurC4viynVSTvrpErCShNcDz1lAho6n9REQKvL/ll4A4/fw6Y9z8nw==} hasBin: true dependencies: strnum: 1.0.5 @@ -12128,7 +12654,7 @@ packages: resolution: {integrity: sha512-TL48Pi1oNHeMOHrKv1bCJUrWZDcD3DIG6AGYVNOnyZPr7Bd/pStN0pL+lfzF5BNoj/FclaoiaLenk4XUIFVYng==} engines: {node: '>=8'} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 dev: false /finalhandler@1.1.2: @@ -12834,7 +13360,7 @@ packages: extend: 3.0.2 gaxios: 6.1.1 google-auth-library: 9.7.0 - qs: 6.11.0 + qs: 6.12.0 url-template: 2.0.8 uuid: 9.0.1 transitivePeerDependencies: @@ -13027,8 +13553,8 @@ packages: resolution: {integrity: sha512-lLYvAd+6BnOqWdnNbP/Q8xfl8LOGw4wVjfrNd9Gt8eoFzhNBRVD95n4l2ksfMVOoxuVyegs85g83KS9QOsxbVQ==} dev: false - /hermes-estree@0.18.2: - resolution: {integrity: sha512-KoLsoWXJ5o81nit1wSyEZnWUGy9cBna9iYMZBR7skKh7okYAYKqQ9/OczwpMHn/cH0hKDyblulGsJ7FknlfVxQ==} + /hermes-estree@0.20.1: + resolution: {integrity: sha512-SQpZK4BzR48kuOg0v4pb3EAGNclzIlqMj3Opu/mu7bbAoFw6oig6cEt/RAi0zTFW/iW6Iz9X9ggGuZTAZ/yZHg==} dev: false /hermes-parser@0.15.0: @@ -13037,10 +13563,10 @@ packages: hermes-estree: 0.15.0 dev: false - /hermes-parser@0.18.2: - resolution: {integrity: sha512-1eQfvib+VPpgBZ2zYKQhpuOjw1tH+Emuib6QmjkJWJMhyjM8xnXMvA+76o9LhF0zOAJDZgPfQhg43cyXEyl5Ew==} + /hermes-parser@0.20.1: + resolution: {integrity: sha512-BL5P83cwCogI8D7rrDCgsFY0tdYUtmFP9XaXtl2IQjC+2Xo+4okjfXintlTxcIwl4qeGddEl28Z11kbVIw0aNA==} dependencies: - hermes-estree: 0.18.2 + hermes-estree: 0.20.1 dev: false /hermes-profile-transformer@0.0.6: @@ -13121,7 +13647,7 @@ packages: he: 1.2.0 param-case: 3.0.4 relateurl: 0.2.7 - terser: 5.27.0 + terser: 5.29.2 dev: true /html-tags@3.3.1: @@ -13434,7 +13960,7 @@ packages: dependencies: es-errors: 1.3.0 hasown: 2.0.2 - side-channel: 1.0.4 + side-channel: 1.0.6 /internmap@1.0.1: resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==} @@ -13455,10 +13981,6 @@ packages: loose-envify: 1.4.0 dev: false - /ip@1.1.9: - resolution: {integrity: sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==} - dev: false - /ip@2.0.0: resolution: {integrity: sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==} dev: true @@ -13927,7 +14449,7 @@ packages: resolution: {integrity: sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==} engines: {node: '>=8'} dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.0 semver: 6.3.1 @@ -13939,8 +14461,8 @@ packages: resolution: {integrity: sha512-6Lthe1hqXHBNsqvgDzGO6l03XNeu3CrG4RqQ1KM9+l5+jNGpEJfIELx1NS3SEHmJQA8np/u+E4EPRKRiu6m19A==} engines: {node: '>=8'} dependencies: - '@babel/core': 7.23.9 - '@babel/parser': 7.23.9 + '@babel/core': 7.24.3 + '@babel/parser': 7.24.1 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.0 semver: 6.3.1 @@ -14020,8 +14542,8 @@ packages: set-function-name: 2.0.1 dev: true - /its-fine@1.1.1(react@18.2.0): - resolution: {integrity: sha512-v1Ia1xl20KbuSGlwoaGsW0oxsw8Be+TrXweidxD9oT/1lAh6O3K3/GIM95Tt6WCiv6W+h2M7RB1TwdoAjQyyKw==} + /its-fine@1.1.3(react@18.2.0): + resolution: {integrity: sha512-mncCA+yb6tuh5zK26cHqKlsSyxm4zdm4YgJpxycyx6p9fgxgK5PLu3iDVpKhzTn57Yrv3jk/r0aK0RFTT1OjFw==} peerDependencies: react: '>=18.0' dependencies: @@ -14065,7 +14587,7 @@ packages: '@jest/environment': 29.7.0 '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 18.19.25 + '@types/node': 18.19.28 jest-mock: 29.7.0 jest-util: 29.7.0 dev: false @@ -14078,7 +14600,7 @@ packages: resolution: {integrity: sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@babel/code-frame': 7.23.5 + '@babel/code-frame': 7.24.2 '@jest/types': 29.6.3 '@types/stack-utils': 2.0.3 chalk: 4.1.2 @@ -14094,7 +14616,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.6.3 - '@types/node': 18.19.25 + '@types/node': 18.19.28 jest-util: 29.7.0 dev: false @@ -14103,7 +14625,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.6.3 - '@types/node': 18.19.25 + '@types/node': 18.19.28 chalk: 4.1.2 ci-info: 3.9.0 graceful-fs: 4.2.11 @@ -14126,7 +14648,7 @@ packages: resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 merge-stream: 2.0.0 supports-color: 7.2.0 dev: true @@ -14135,7 +14657,7 @@ packages: resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 merge-stream: 2.0.0 supports-color: 8.1.1 @@ -14143,7 +14665,7 @@ packages: resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@types/node': 18.19.25 + '@types/node': 18.19.28 jest-util: 29.7.0 merge-stream: 2.0.0 supports-color: 8.1.1 @@ -14159,8 +14681,8 @@ packages: engines: {node: '>= 0.6.0'} requiresBuild: true - /joi@17.12.1: - resolution: {integrity: sha512-vtxmq+Lsc5SlfqotnfVjlViWfOL9nt/avKNbKYizwf6gsCfq9NYY/ceYRMFD8XDdrjJ9abJyScWmhmIiy+XRtQ==} + /joi@17.12.2: + resolution: {integrity: sha512-RonXAIzCiHLc8ss3Ibuz45u28GOsWE1UpfDXLbN/9NKbL4tCJf8TWYVKsoYuuh+sAUt7fsSNpA+r2+TBA6Wjmw==} dependencies: '@hapi/hoek': 9.3.0 '@hapi/topo': 5.1.0 @@ -14203,8 +14725,8 @@ packages: peerDependencies: jscodeshift: ^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 dependencies: - '@babel/traverse': 7.23.9 - jscodeshift: 0.13.1(@babel/preset-env@7.23.9) + '@babel/traverse': 7.24.1 + jscodeshift: 0.13.1(@babel/preset-env@7.24.3) jscodeshift-find-imports: 2.0.4(jscodeshift@0.13.1) transitivePeerDependencies: - supports-color @@ -14215,26 +14737,26 @@ packages: peerDependencies: jscodeshift: ^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 dependencies: - jscodeshift: 0.13.1(@babel/preset-env@7.23.9) + jscodeshift: 0.13.1(@babel/preset-env@7.24.3) dev: false - /jscodeshift@0.13.1(@babel/preset-env@7.23.9): + /jscodeshift@0.13.1(@babel/preset-env@7.24.3): resolution: {integrity: sha512-lGyiEbGOvmMRKgWk4vf+lUrCWO/8YR8sUR3FKF1Cq5fovjZDlIcw3Hu5ppLHAnEXshVffvaM0eyuY/AbOeYpnQ==} hasBin: true peerDependencies: '@babel/preset-env': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/parser': 7.23.9 - '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.23.9) - '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.23.9) - '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.23.9) - '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.9) - '@babel/preset-env': 7.23.9(@babel/core@7.23.9) - '@babel/preset-flow': 7.23.3(@babel/core@7.23.9) - '@babel/preset-typescript': 7.23.3(@babel/core@7.23.9) - '@babel/register': 7.23.7(@babel/core@7.23.9) - babel-core: 7.0.0-bridge.0(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/parser': 7.24.1 + '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.3) + '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.3) + '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.3) + '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.3) + '@babel/preset-env': 7.24.3(@babel/core@7.24.3) + '@babel/preset-flow': 7.24.1(@babel/core@7.24.3) + '@babel/preset-typescript': 7.24.1(@babel/core@7.24.3) + '@babel/register': 7.23.7(@babel/core@7.24.3) + babel-core: 7.0.0-bridge.0(@babel/core@7.24.3) chalk: 4.1.2 flow-parser: 0.206.0 graceful-fs: 4.2.11 @@ -14248,23 +14770,23 @@ packages: - supports-color dev: false - /jscodeshift@0.14.0(@babel/preset-env@7.23.9): + /jscodeshift@0.14.0(@babel/preset-env@7.24.3): resolution: {integrity: sha512-7eCC1knD7bLUPuSCwXsMZUH51O8jIcoVyKtI6P0XM0IVzlGjckPy3FIwQlorzbN0Sg79oK+RlohN32Mqf/lrYA==} hasBin: true peerDependencies: '@babel/preset-env': ^7.23.9 dependencies: - '@babel/core': 7.23.9 - '@babel/parser': 7.23.9 - '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.23.9) - '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.23.9) - '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.23.9) - '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.9) - '@babel/preset-env': 7.23.9(@babel/core@7.23.9) - '@babel/preset-flow': 7.23.3(@babel/core@7.23.9) - '@babel/preset-typescript': 7.23.3(@babel/core@7.23.9) - '@babel/register': 7.23.7(@babel/core@7.23.9) - babel-core: 7.0.0-bridge.0(@babel/core@7.23.9) + '@babel/core': 7.24.3 + '@babel/parser': 7.24.1 + '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.3) + '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.3) + '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.3) + '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.3) + '@babel/preset-env': 7.24.3(@babel/core@7.24.3) + '@babel/preset-flow': 7.24.1(@babel/core@7.24.3) + '@babel/preset-typescript': 7.24.1(@babel/core@7.24.3) + '@babel/register': 7.23.7(@babel/core@7.24.3) + babel-core: 7.0.0-bridge.0(@babel/core@7.24.3) chalk: 4.1.2 flow-parser: 0.206.0 graceful-fs: 4.2.11 @@ -14415,7 +14937,7 @@ packages: /jss-plugin-camel-case@10.10.0: resolution: {integrity: sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 hyphenate-style-name: 1.0.4 jss: 10.10.0 dev: false @@ -14423,7 +14945,7 @@ packages: /jss-plugin-compose@10.10.0: resolution: {integrity: sha512-F5kgtWpI2XfZ3Z8eP78tZEYFdgTIbpA/TMuX3a8vwrNolYtN1N4qJR/Ob0LAsqIwCMLojtxN7c7Oo/+Vz6THow==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 jss: 10.10.0 tiny-warning: 1.0.3 dev: false @@ -14431,21 +14953,21 @@ packages: /jss-plugin-default-unit@10.10.0: resolution: {integrity: sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 jss: 10.10.0 dev: false /jss-plugin-expand@10.10.0: resolution: {integrity: sha512-ymT62W2OyDxBxr7A6JR87vVX9vTq2ep5jZLIdUSusfBIEENLdkkc0lL/Xaq8W9s3opUq7R0sZQpzRWELrfVYzA==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 jss: 10.10.0 dev: false /jss-plugin-extend@10.10.0: resolution: {integrity: sha512-sKYrcMfr4xxigmIwqTjxNcHwXJIfvhvjTNxF+Tbc1NmNdyspGW47Ey6sGH8BcQ4FFQhLXctpWCQSpDwdNmXSwg==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 jss: 10.10.0 tiny-warning: 1.0.3 dev: false @@ -14453,14 +14975,14 @@ packages: /jss-plugin-global@10.10.0: resolution: {integrity: sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 jss: 10.10.0 dev: false /jss-plugin-nested@10.10.0: resolution: {integrity: sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 jss: 10.10.0 tiny-warning: 1.0.3 dev: false @@ -14468,14 +14990,14 @@ packages: /jss-plugin-props-sort@10.10.0: resolution: {integrity: sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 jss: 10.10.0 dev: false /jss-plugin-rule-value-function@10.10.0: resolution: {integrity: sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 jss: 10.10.0 tiny-warning: 1.0.3 dev: false @@ -14483,7 +15005,7 @@ packages: /jss-plugin-rule-value-observable@10.10.0: resolution: {integrity: sha512-ZLMaYrR3QE+vD7nl3oNXuj79VZl9Kp8/u6A1IbTPDcuOu8b56cFdWRZNZ0vNr8jHewooEeq2doy8Oxtymr2ZPA==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 jss: 10.10.0 symbol-observable: 1.2.0 dev: false @@ -14491,7 +15013,7 @@ packages: /jss-plugin-template@10.10.0: resolution: {integrity: sha512-ocXZBIOJOA+jISPdsgkTs8wwpK6UbsvtZK5JI7VUggTD6LWKbtoxUzadd2TpfF+lEtlhUmMsCkTRNkITdPKa6w==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 jss: 10.10.0 tiny-warning: 1.0.3 dev: false @@ -14499,7 +15021,7 @@ packages: /jss-plugin-vendor-prefixer@10.10.0: resolution: {integrity: sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 css-vendor: 2.0.8 jss: 10.10.0 dev: false @@ -14507,7 +15029,7 @@ packages: /jss-preset-default@10.10.0: resolution: {integrity: sha512-GL175Wt2FGhjE+f+Y3aWh+JioL06/QWFgZp53CbNNq6ZkVU0TDplD8Bxm9KnkotAYn3FlplNqoW5CjyLXcoJ7Q==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 jss: 10.10.0 jss-plugin-camel-case: 10.10.0 jss-plugin-compose: 10.10.0 @@ -14535,7 +15057,7 @@ packages: /jss@10.10.0: resolution: {integrity: sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 csstype: 3.1.3 is-in-browser: 1.1.3 tiny-warning: 1.0.3 @@ -14734,8 +15256,8 @@ packages: resolution: {integrity: sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==} dev: true - /konva@9.3.2: - resolution: {integrity: sha512-I4CFGVbWKpzgYi1I0pmoHz8iYfmGc/A61yfltzcuBHMFuBwDsR2VnQo4+eFQ1dGyEAmHcdvTumJ871KqkhuGng==} + /konva@9.3.6: + resolution: {integrity: sha512-dqR8EbcM0hjuilZCBP6xauQ5V3kH3m9kBcsDkqPypQuRgsXbcXUrxqYxhNbdvKZpYNW8Amq94jAD/C0NY3qfBQ==} dev: false /language-subtag-registry@0.3.22: @@ -14824,7 +15346,7 @@ packages: strong-log-transformer: 2.1.0 tar: 6.1.11 temp-dir: 1.0.0 - typescript: 5.3.3 + typescript: 5.4.3 upath: 2.0.1 uuid: 9.0.1 validate-npm-package-license: 3.0.4 @@ -14960,6 +15482,14 @@ packages: json5: 2.2.3 dev: true + /local-pkg@0.5.0: + resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==} + engines: {node: '>=14'} + dependencies: + mlly: 1.6.1 + pkg-types: 1.0.3 + dev: true + /locate-path@2.0.0: resolution: {integrity: sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==} engines: {node: '>=4'} @@ -15336,8 +15866,8 @@ packages: uc.micro: 2.0.0 dev: true - /markdown-to-jsx@7.4.3(react@18.2.0): - resolution: {integrity: sha512-qwu2XftKs/SP+f6oCe0ruAFKX6jZaKxrBfDBV4CthqbVbRQwHhNM28QGDQuTldCaOn+hocaqbmGvCuXO5m3smA==} + /markdown-to-jsx@7.4.5(react@18.2.0): + resolution: {integrity: sha512-c8NB0H/ig+FOWssE9be0PKsYbCDhcWEkicxMnpdfUuHbFljnen4LAdgUShOyR/PgO3/qKvt9cwfQ0U/zQvZ44A==} engines: {node: '>= 10'} peerDependencies: react: '>= 0.14.0' @@ -15393,7 +15923,7 @@ packages: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@mui/material': 5.15.4(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) classnames: 2.3.2 prop-types: 15.8.1 @@ -15522,41 +16052,41 @@ packages: resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==} engines: {node: '>= 0.6'} - /metro-babel-transformer@0.80.5: - resolution: {integrity: sha512-sxH6hcWCorhTbk4kaShCWsadzu99WBL4Nvq4m/sDTbp32//iGuxtAnUK+ZV+6IEygr2u9Z0/4XoZ8Sbcl71MpA==} + /metro-babel-transformer@0.80.7: + resolution: {integrity: sha512-b773yA16DsDQiM4OOzCsr1gwEd+iio9au98o3bj7F/bxVyoz1LuYox06BIdsiLL1o4kV5VtzTu3UXSJ2X0ZGXg==} engines: {node: '>=18'} dependencies: - '@babel/core': 7.23.9 - hermes-parser: 0.18.2 + '@babel/core': 7.24.3 + hermes-parser: 0.20.1 nullthrows: 1.1.1 transitivePeerDependencies: - supports-color dev: false - /metro-cache-key@0.80.5: - resolution: {integrity: sha512-fr3QLZUarsB3tRbVcmr34kCBsTHk0Sh9JXGvBY/w3b2lbre+Lq5gtgLyFElHPecGF7o4z1eK9r3ubxtScHWcbA==} + /metro-cache-key@0.80.7: + resolution: {integrity: sha512-sfCOtooMqmmm2v0a4EsYr5knYJGIArZJ5Y7MAcmsVU2pcqg+JQyPhYr/zqSkXBBipRxXr7aNXul9StKzKjsnbw==} engines: {node: '>=18'} dev: false - /metro-cache@0.80.5: - resolution: {integrity: sha512-2u+dQ4PZwmC7eZo9uMBNhQQMig9f+w4QWBZwXCdVy/RYOHM0eObgGdMEOwODo73uxie82T9lWzxr3aZOZ+Nqtw==} + /metro-cache@0.80.7: + resolution: {integrity: sha512-N6HyLjwDKusqJDaVyP57SVZKP51m1FFVcbIWQXu938W30nCXQEuWOx4e6adKgfEOZpscisWojfrCFN42/A8uug==} engines: {node: '>=18'} dependencies: - metro-core: 0.80.5 + metro-core: 0.80.7 rimraf: 3.0.2 dev: false - /metro-config@0.80.5: - resolution: {integrity: sha512-elqo/lwvF+VjZ1OPyvmW/9hSiGlmcqu+rQvDKw5F5WMX48ZC+ySTD1WcaD7e97pkgAlJHVYqZ98FCjRAYOAFRQ==} + /metro-config@0.80.7: + resolution: {integrity: sha512-kpXCidthS/kFlEoXjWQp+IyCU5ICCOESVgwXEzViSDOv5bPJz2ytIr2lF623e50QzyrpFBSnOPjnyd1JbsVPvQ==} engines: {node: '>=18'} dependencies: connect: 3.7.0 cosmiconfig: 5.2.1 jest-validate: 29.7.0 - metro: 0.80.5 - metro-cache: 0.80.5 - metro-core: 0.80.5 - metro-runtime: 0.80.5 + metro: 0.80.7 + metro-cache: 0.80.7 + metro-core: 0.80.7 + metro-runtime: 0.80.7 transitivePeerDependencies: - bufferutil - encoding @@ -15564,16 +16094,16 @@ packages: - utf-8-validate dev: false - /metro-core@0.80.5: - resolution: {integrity: sha512-vkLuaBhnZxTVpaZO8ZJVEHzjaqSXpOdpAiztSZ+NDaYM6jEFgle3/XIbLW91jTSf2+T8Pj5yB1G7KuOX+BcVwg==} + /metro-core@0.80.7: + resolution: {integrity: sha512-bl3D6TtIa2mSdVTbkskMPcJSdoivO0F06u8ip/oS/T6RsbjkMTN3OZBjJXclY9I0FcN14q8I5YQt1oriySY/2Q==} engines: {node: '>=18'} dependencies: lodash.throttle: 4.1.1 - metro-resolver: 0.80.5 + metro-resolver: 0.80.7 dev: false - /metro-file-map@0.80.5: - resolution: {integrity: sha512-bKCvJ05drjq6QhQxnDUt3I8x7bTcHo3IIKVobEr14BK++nmxFGn/BmFLRzVBlghM6an3gqwpNEYxS5qNc+VKcg==} + /metro-file-map@0.80.7: + resolution: {integrity: sha512-A9IAmFZu/Ch7zJ4LzJChsvhedNOipuIXaOz6N8J44rqVZHI0uIqDKVGCne7lzc97djF1Ti4tH9nP64u4IdhpSg==} engines: {node: '>=18'} dependencies: anymatch: 3.1.3 @@ -15592,48 +16122,48 @@ packages: - supports-color dev: false - /metro-minify-terser@0.80.5: - resolution: {integrity: sha512-S7oZLLcab6YXUT6jYFX/ZDMN7Fq6xBGGAG8liMFU1UljX6cTcEC2u+UIafYgCLrdVexp/+ClxrIetVPZ5LtL/g==} + /metro-minify-terser@0.80.7: + resolution: {integrity: sha512-9/mYV1tMGeoFSTMFr94oigJM2qMXJO3hvlibkaQ21HZjVyrfb54bSYyfIIRvAsjY2RCBRg9r2OrT+YbxnMypig==} engines: {node: '>=18'} dependencies: - terser: 5.27.0 + terser: 5.29.2 dev: false - /metro-resolver@0.80.5: - resolution: {integrity: sha512-haJ/Hveio3zv/Fr4eXVdKzjUeHHDogYok7OpRqPSXGhTXisNXB+sLN7CpcUrCddFRUDLnVaqQOYwhYsFndgUwA==} + /metro-resolver@0.80.7: + resolution: {integrity: sha512-xW7M0TITuKs2rYQqbIQn297+MVWfDuGptPnfZ+RBG9afdN//Zpmg14KFMIYU4r5AH2WS+nxwL57DbZft1MyoHg==} engines: {node: '>=18'} dev: false - /metro-runtime@0.80.5: - resolution: {integrity: sha512-L0syTWJUdWzfUmKgkScr6fSBVTh6QDr8eKEkRtn40OBd8LPagrJGySBboWSgbyn9eIb4ayW3Y347HxgXBSAjmg==} + /metro-runtime@0.80.7: + resolution: {integrity: sha512-gWqzfm9YQw9I08L23hcLmY7XNx48W0c0vLEkVEF5P7ZNIOSfX9CkEv0JvTTJWshRYkbgIqsdtpMAHq13LJJ6iA==} engines: {node: '>=18'} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 dev: false - /metro-source-map@0.80.5: - resolution: {integrity: sha512-DwSF4l03mKPNqCtyQ6K23I43qzU1BViAXnuH81eYWdHglP+sDlPpY+/7rUahXEo6qXEHXfAJgVoo1sirbXbmsQ==} + /metro-source-map@0.80.7: + resolution: {integrity: sha512-6a1m/51ekkAl+ISNBcKQUXTU+AldbbPUHDE3DDDU17Y0HNoovkQR23DB/uH/SzUHQszYxK1fnwUTSxpzOjx+pw==} engines: {node: '>=18'} dependencies: - '@babel/traverse': 7.23.9 - '@babel/types': 7.23.9 + '@babel/traverse': 7.24.1 + '@babel/types': 7.24.0 invariant: 2.2.4 - metro-symbolicate: 0.80.5 + metro-symbolicate: 0.80.7 nullthrows: 1.1.1 - ob1: 0.80.5 + ob1: 0.80.7 source-map: 0.5.7 vlq: 1.0.1 transitivePeerDependencies: - supports-color dev: false - /metro-symbolicate@0.80.5: - resolution: {integrity: sha512-IsM4mTYvmo9JvIqwEkCZ5+YeDVPST78Q17ZgljfLdHLSpIivOHp9oVoiwQ/YGbLx0xRHRIS/tKiXueWBnj3UWA==} + /metro-symbolicate@0.80.7: + resolution: {integrity: sha512-WrBR5FQhVf/Y2N3zBS5TvNdwYzcQTLdJj9kcn0MIt+DpdgfLuUDjHXYaq4G9fZubofInx2dUcqr4WCn6fkIxuA==} engines: {node: '>=18'} hasBin: true dependencies: invariant: 2.2.4 - metro-source-map: 0.80.5 + metro-source-map: 0.80.7 nullthrows: 1.1.1 source-map: 0.5.7 through2: 2.0.5 @@ -15642,34 +16172,34 @@ packages: - supports-color dev: false - /metro-transform-plugins@0.80.5: - resolution: {integrity: sha512-7IdlTqK/k5+qE3RvIU5QdCJUPk4tHWEqgVuYZu8exeW+s6qOJ66hGIJjXY/P7ccucqF+D4nsbAAW5unkoUdS6g==} + /metro-transform-plugins@0.80.7: + resolution: {integrity: sha512-ENGvQF7wZCtn2rO6jwsYy3XRSPrlm0G/1TgDC8AXdvz0yjfAe1ODSCYWxP8S3JXfjKL5m3b6j9RsV8sQIxsUjQ==} engines: {node: '>=18'} dependencies: - '@babel/core': 7.23.9 - '@babel/generator': 7.23.6 - '@babel/template': 7.23.9 - '@babel/traverse': 7.23.9 + '@babel/core': 7.24.3 + '@babel/generator': 7.24.1 + '@babel/template': 7.24.0 + '@babel/traverse': 7.24.1 nullthrows: 1.1.1 transitivePeerDependencies: - supports-color dev: false - /metro-transform-worker@0.80.5: - resolution: {integrity: sha512-Q1oM7hfP+RBgAtzRFBDjPhArELUJF8iRCZ8OidqCpYzQJVGuJZ7InSnIf3hn1JyqiUQwv2f1LXBO78i2rAjzyA==} + /metro-transform-worker@0.80.7: + resolution: {integrity: sha512-QcgKpx3WZo71jTtXMEeeFuGpA+nG8YuWjxPTIsIYTjgDxcArS8zDDRzS18mmYkP65yyzH4dT94B1FJH9+flRag==} engines: {node: '>=18'} dependencies: - '@babel/core': 7.23.9 - '@babel/generator': 7.23.6 - '@babel/parser': 7.23.9 - '@babel/types': 7.23.9 - metro: 0.80.5 - metro-babel-transformer: 0.80.5 - metro-cache: 0.80.5 - metro-cache-key: 0.80.5 - metro-minify-terser: 0.80.5 - metro-source-map: 0.80.5 - metro-transform-plugins: 0.80.5 + '@babel/core': 7.24.3 + '@babel/generator': 7.24.1 + '@babel/parser': 7.24.1 + '@babel/types': 7.24.0 + metro: 0.80.7 + metro-babel-transformer: 0.80.7 + metro-cache: 0.80.7 + metro-cache-key: 0.80.7 + metro-minify-terser: 0.80.7 + metro-source-map: 0.80.7 + metro-transform-plugins: 0.80.7 nullthrows: 1.1.1 transitivePeerDependencies: - bufferutil @@ -15678,18 +16208,18 @@ packages: - utf-8-validate dev: false - /metro@0.80.5: - resolution: {integrity: sha512-OE/CGbOgbi8BlTN1QqJgKOBaC27dS0JBQw473JcivrpgVnqIsluROA7AavEaTVUrB9wPUZvoNVDROn5uiM2jfw==} + /metro@0.80.7: + resolution: {integrity: sha512-con7RTEulmefHplqusjpoGD+r4CBuDLaeI261hFcSuTv6+Arm5FgSYmUcBa3MeqJbC/U8v0uT6MbdkEFCEl1xg==} engines: {node: '>=18'} hasBin: true dependencies: - '@babel/code-frame': 7.23.5 - '@babel/core': 7.23.9 - '@babel/generator': 7.23.6 - '@babel/parser': 7.23.9 - '@babel/template': 7.23.9 - '@babel/traverse': 7.23.9 - '@babel/types': 7.23.9 + '@babel/code-frame': 7.24.2 + '@babel/core': 7.24.3 + '@babel/generator': 7.24.1 + '@babel/parser': 7.24.1 + '@babel/template': 7.24.0 + '@babel/traverse': 7.24.1 + '@babel/types': 7.24.0 accepts: 1.3.8 chalk: 4.1.2 ci-info: 2.0.0 @@ -15698,24 +16228,24 @@ packages: denodeify: 1.2.1 error-stack-parser: 2.1.4 graceful-fs: 4.2.11 - hermes-parser: 0.18.2 + hermes-parser: 0.20.1 image-size: 1.1.1 invariant: 2.2.4 jest-worker: 29.7.0 jsc-safe-url: 0.2.4 lodash.throttle: 4.1.1 - metro-babel-transformer: 0.80.5 - metro-cache: 0.80.5 - metro-cache-key: 0.80.5 - metro-config: 0.80.5 - metro-core: 0.80.5 - metro-file-map: 0.80.5 - metro-resolver: 0.80.5 - metro-runtime: 0.80.5 - metro-source-map: 0.80.5 - metro-symbolicate: 0.80.5 - metro-transform-plugins: 0.80.5 - metro-transform-worker: 0.80.5 + metro-babel-transformer: 0.80.7 + metro-cache: 0.80.7 + metro-cache-key: 0.80.7 + metro-config: 0.80.7 + metro-core: 0.80.7 + metro-file-map: 0.80.7 + metro-resolver: 0.80.7 + metro-runtime: 0.80.7 + metro-source-map: 0.80.7 + metro-symbolicate: 0.80.7 + metro-transform-plugins: 0.80.7 + metro-transform-worker: 0.80.7 mime-types: 2.1.35 node-fetch: 2.7.0 nullthrows: 1.1.1 @@ -15986,6 +16516,15 @@ packages: engines: {node: '>=10'} hasBin: true + /mlly@1.6.1: + resolution: {integrity: sha512-vLgaHvaeunuOXHSmEbZ9izxPx3USsk8KCQ8iC+aTlp5sKRSoZvwhHh5L9VbKSaVC6sJDqbyohIS76E2VmHIPAA==} + dependencies: + acorn: 8.11.3 + pathe: 1.1.2 + pkg-types: 1.0.3 + ufo: 1.4.0 + dev: true + /mocha@10.3.0: resolution: {integrity: sha512-uF2XJs+7xSLsrmIvn37i/wnc91nw7XjOQB8ccyx5aEgdnohr7n+rEiZP23WkCYHjilR6+EboEnbq/ZQDz4LSbg==} engines: {node: '>= 14.0.0'} @@ -16128,7 +16667,7 @@ packages: resolution: {integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==} dev: true - /next@13.5.1(@babel/core@7.23.9)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0): + /next@13.5.1(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-GIudNR7ggGUZoIL79mSZcxbXK9f5pwAIPZxEM8+j2yLqv5RODg4TkmUlaKSYVqE1bPQueamXSqdC3j7axiTSEg==} engines: {node: '>=16.14.0'} hasBin: true @@ -16146,11 +16685,11 @@ packages: '@next/env': 13.5.1 '@swc/helpers': 0.5.2 busboy: 1.6.0 - caniuse-lite: 1.0.30001593 + caniuse-lite: 1.0.30001599 postcss: 8.4.14 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - styled-jsx: 5.1.1(@babel/core@7.23.9)(babel-plugin-macros@3.1.0)(react@18.2.0) + styled-jsx: 5.1.1(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react@18.2.0) watchpack: 2.4.0 zod: 3.21.4 optionalDependencies: @@ -16167,6 +16706,45 @@ packages: - '@babel/core' - babel-plugin-macros + /next@14.1.4(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-1WTaXeSrUwlz/XcnhGTY7+8eiaFvdet5z9u3V2jb+Ek1vFo0VhHKSAIJvDWfQpttWjnyw14kBeq28TPq7bTeEQ==} + engines: {node: '>=18.17.0'} + hasBin: true + peerDependencies: + '@opentelemetry/api': ^1.1.0 + react: ^18.2.0 + react-dom: ^18.2.0 + sass: ^1.3.0 + peerDependenciesMeta: + '@opentelemetry/api': + optional: true + sass: + optional: true + dependencies: + '@next/env': 14.1.4 + '@swc/helpers': 0.5.2 + busboy: 1.6.0 + caniuse-lite: 1.0.30001599 + graceful-fs: 4.2.11 + postcss: 8.4.31 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + styled-jsx: 5.1.1(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react@18.2.0) + optionalDependencies: + '@next/swc-darwin-arm64': 14.1.4 + '@next/swc-darwin-x64': 14.1.4 + '@next/swc-linux-arm64-gnu': 14.1.4 + '@next/swc-linux-arm64-musl': 14.1.4 + '@next/swc-linux-x64-gnu': 14.1.4 + '@next/swc-linux-x64-musl': 14.1.4 + '@next/swc-win32-arm64-msvc': 14.1.4 + '@next/swc-win32-ia32-msvc': 14.1.4 + '@next/swc-win32-x64-msvc': 14.1.4 + transitivePeerDependencies: + - '@babel/core' + - babel-plugin-macros + dev: false + /nice-napi@1.0.2: resolution: {integrity: sha512-px/KnJAJZf5RuBGcfD+Sp2pAKq0ytz8j+1NehvgIGFkvtvFrDM3T8E4x/JJODXK9WZow8RRGrbA9QQ3hs+pDhA==} os: ['!win32'] @@ -16321,7 +16899,7 @@ packages: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} dependencies: hosted-git-info: 2.8.9 - resolve: 1.22.4 + resolve: 1.22.8 semver: 5.7.2 validate-npm-package-license: 3.0.4 dev: true @@ -16639,8 +17217,8 @@ packages: - supports-color dev: true - /ob1@0.80.5: - resolution: {integrity: sha512-zYDMnnNrFi/1Tqh0vo3PE4p97Tpl9/4MP2k2ECvkbLOZzQuAYZJLTUYVLZb7hJhbhjT+JJxAwBGS8iu5hCSd1w==} + /ob1@0.80.7: + resolution: {integrity: sha512-+m1cCNckRtDEnurNSVqywpN6LhFWc1Z3MdX7PX7boCwEdSzh4evlUjBIUzao1lBOpB7G5FvwfFagTVQGCMa0Yw==} engines: {node: '>=18'} dev: false @@ -17111,6 +17689,11 @@ packages: dependencies: callsites: 3.1.0 + /parse-code-context@1.0.0: + resolution: {integrity: sha512-OZQaqKaQnR21iqhlnPfVisFjBWjhnMl5J9MgbP8xC+EwoVqbXrq78lp+9Zb3ahmLzrIX5Us/qbvBnaS3hkH6OA==} + engines: {node: '>=6'} + dev: true + /parse-diff@0.7.1: resolution: {integrity: sha512-1j3l8IKcy4yRK2W4o9EYvJLSzpAVwz4DXqCewYyx2vEwk2gcf3DBPqc8Fj4XV3K33OYJ08A8fWwyu/ykD/HUSg==} dev: true @@ -17152,7 +17735,7 @@ packages: resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==} engines: {node: '>=8'} dependencies: - '@babel/code-frame': 7.23.5 + '@babel/code-frame': 7.24.2 error-ex: 1.3.2 json-parse-even-better-errors: 2.3.1 lines-and-columns: 1.2.4 @@ -17277,6 +17860,10 @@ packages: engines: {node: '>=12'} dev: true + /pathe@1.1.2: + resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==} + dev: true + /pathval@1.1.1: resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==} @@ -17364,6 +17951,14 @@ packages: find-up: 6.3.0 dev: true + /pkg-types@1.0.3: + resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==} + dependencies: + jsonc-parser: 3.2.0 + mlly: 1.6.1 + pathe: 1.1.2 + dev: true + /pkg-up@3.1.0: resolution: {integrity: sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==} engines: {node: '>=8'} @@ -17404,7 +17999,7 @@ packages: engines: {node: '>= 0.4'} requiresBuild: true - /postcss-cli@8.3.1(postcss@8.4.35): + /postcss-cli@8.3.1(postcss@8.4.38): resolution: {integrity: sha512-leHXsQRq89S3JC9zw/tKyiVV2jAhnfQe0J8VI4eQQbUjwIe0XxVqLrR+7UsahF1s9wi4GlqP6SJ8ydf44cgF2Q==} engines: {node: '>=10'} hasBin: true @@ -17417,9 +18012,9 @@ packages: fs-extra: 9.1.0 get-stdin: 8.0.0 globby: 11.1.0 - postcss: 8.4.35 - postcss-load-config: 3.1.4(postcss@8.4.35) - postcss-reporter: 7.1.0(postcss@8.4.35) + postcss: 8.4.38 + postcss-load-config: 3.1.4(postcss@8.4.38) + postcss-reporter: 7.1.0(postcss@8.4.38) pretty-hrtime: 1.0.3 read-cache: 1.0.0 slash: 3.0.0 @@ -17428,28 +18023,34 @@ packages: - ts-node dev: false - /postcss-import@15.1.0(postcss@8.4.35): + /postcss-combine-media-query@1.0.1: + resolution: {integrity: sha512-DFSXuYy3ltDkC2esIF0ORoS9DCjlyfWhtoQkG9brZMuJY1ABOER95sm3dvccR6IEgSrYX4RgqiHD4Lq3JGrxyw==} + dependencies: + postcss: 7.0.39 + dev: true + + /postcss-import@15.1.0(postcss@8.4.38): resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} peerDependencies: postcss: ^8.0.0 dependencies: - postcss: 8.4.35 + postcss: 8.4.38 postcss-value-parser: 4.2.0 read-cache: 1.0.0 - resolve: 1.22.4 + resolve: 1.22.8 - /postcss-js@4.0.1(postcss@8.4.35): + /postcss-js@4.0.1(postcss@8.4.38): resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16} peerDependencies: postcss: ^8.4.21 dependencies: camelcase-css: 2.0.1 - postcss: 8.4.35 + postcss: 8.4.38 dev: true - /postcss-load-config@3.1.4(postcss@8.4.35): + /postcss-load-config@3.1.4(postcss@8.4.38): resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} engines: {node: '>= 10'} peerDependencies: @@ -17462,11 +18063,11 @@ packages: optional: true dependencies: lilconfig: 2.1.0 - postcss: 8.4.35 + postcss: 8.4.38 yaml: 1.10.2 dev: false - /postcss-load-config@4.0.1(postcss@8.4.35): + /postcss-load-config@4.0.1(postcss@8.4.38): resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==} engines: {node: '>= 14'} peerDependencies: @@ -17479,28 +18080,28 @@ packages: optional: true dependencies: lilconfig: 2.1.0 - postcss: 8.4.35 - yaml: 2.3.4 + postcss: 8.4.38 + yaml: 2.4.1 dev: true - /postcss-nested@6.0.1(postcss@8.4.35): + /postcss-nested@6.0.1(postcss@8.4.38): resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} engines: {node: '>=12.0'} peerDependencies: postcss: ^8.2.14 dependencies: - postcss: 8.4.35 + postcss: 8.4.38 postcss-selector-parser: 6.0.13 dev: true - /postcss-reporter@7.1.0(postcss@8.4.35): + /postcss-reporter@7.1.0(postcss@8.4.38): resolution: {integrity: sha512-/eoEylGWyy6/DOiMP5lmFRdmDKThqgn7D6hP2dXKJI/0rJSO1ADFNngZfDzxL0YAxFvws+Rtpuji1YIHj4mySA==} engines: {node: '>=10'} peerDependencies: postcss: ^8.1.0 dependencies: picocolors: 1.0.0 - postcss: 8.4.35 + postcss: 8.4.38 thenby: 1.3.4 dev: false @@ -17508,13 +18109,13 @@ packages: resolution: {integrity: sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==} dev: true - /postcss-safe-parser@6.0.0(postcss@8.4.35): + /postcss-safe-parser@6.0.0(postcss@8.4.38): resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==} engines: {node: '>=12.0'} peerDependencies: postcss: ^8.3.3 dependencies: - postcss: 8.4.35 + postcss: 8.4.38 dev: true /postcss-selector-parser@6.0.13: @@ -17525,14 +18126,14 @@ packages: util-deprecate: 1.0.2 dev: true - /postcss-styled-syntax@0.6.4(postcss@8.4.35): + /postcss-styled-syntax@0.6.4(postcss@8.4.38): resolution: {integrity: sha512-uWiLn+9rKgIghUYmTHvXMR6MnyPULMe9Gv3bV537Fg4FH6CA6cn21WMjKss2Qb98LUhT847tKfnRGG3FhSOgUQ==} engines: {node: '>=14.17'} peerDependencies: postcss: ^8.4.21 dependencies: - postcss: 8.4.35 - typescript: 5.3.3 + postcss: 8.4.38 + typescript: 5.4.3 dev: true /postcss-value-parser@4.2.0: @@ -17552,7 +18153,7 @@ packages: dependencies: nanoid: 3.3.7 picocolors: 1.0.0 - source-map-js: 1.0.2 + source-map-js: 1.2.0 /postcss@8.4.31: resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==} @@ -17560,15 +18161,15 @@ packages: dependencies: nanoid: 3.3.7 picocolors: 1.0.0 - source-map-js: 1.0.2 + source-map-js: 1.2.0 - /postcss@8.4.35: - resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==} + /postcss@8.4.38: + resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==} engines: {node: ^10 || ^12 || >=14} dependencies: nanoid: 3.3.7 picocolors: 1.0.0 - source-map-js: 1.0.2 + source-map-js: 1.2.0 /prebuild-install@7.1.1: resolution: {integrity: sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==} @@ -17844,7 +18445,13 @@ packages: resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==} engines: {node: '>=0.6'} dependencies: - side-channel: 1.0.4 + side-channel: 1.0.6 + + /qs@6.12.0: + resolution: {integrity: sha512-trVZiI6RMOkO476zLGaBIzszOdFPnCCXHPG9kn0yuS1uz6xdVxPfZdB3vUig9pxPFDM9BRAgz/YUIVQ1/vuiUg==} + engines: {node: '>=0.6'} + dependencies: + side-channel: 1.0.6 /query-string@7.1.3: resolution: {integrity: sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==} @@ -17970,9 +18577,9 @@ packages: engines: {node: '>=8.10.0'} hasBin: true dependencies: - '@babel/core': 7.23.9 - '@babel/generator': 7.23.6 - '@babel/runtime': 7.23.9 + '@babel/core': 7.24.3 + '@babel/generator': 7.24.1 + '@babel/runtime': 7.24.1 ast-types: 0.14.2 commander: 2.20.3 doctrine: 3.0.0 @@ -18005,12 +18612,21 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /react-error-boundary@4.0.13(react@18.2.0): + resolution: {integrity: sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==} + peerDependencies: + react: '>=16.13.1' + dependencies: + '@babel/runtime': 7.24.1 + react: 18.2.0 + dev: false + /react-event-listener@0.6.6(react@18.2.0): resolution: {integrity: sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==} peerDependencies: react: ^16.3.0 dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 prop-types: 15.8.1 react: 18.2.0 warning: 4.0.3 @@ -18026,7 +18642,7 @@ packages: final-form: ^4.20.4 react: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 final-form: 4.20.10 react: 18.2.0 dev: false @@ -18069,7 +18685,7 @@ packages: peerDependencies: react: '>=16.8.6' dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@emotion/is-prop-valid': 0.7.3 css-jss: 10.10.0 hoist-non-react-statics: 3.3.2 @@ -18083,7 +18699,7 @@ packages: tiny-warning: 1.0.3 dev: false - /react-konva@18.2.10(konva@9.3.2)(react-dom@18.2.0)(react@18.2.0): + /react-konva@18.2.10(konva@9.3.6)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-ohcX1BJINL43m4ynjZ24MxFI1syjBdrXhqVxYVDw2rKgr3yuS0x/6m1Y2Z4sl4T/gKhfreBx8KHisd0XC6OT1g==} peerDependencies: konva: ^8.0.1 || ^7.2.5 || ^9.0.0 @@ -18091,32 +18707,32 @@ packages: react-dom: '>=18.0.0' dependencies: '@types/react-reconciler': 0.28.8 - its-fine: 1.1.1(react@18.2.0) - konva: 9.3.2 + its-fine: 1.1.3(react@18.2.0) + konva: 9.3.6 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) react-reconciler: 0.29.0(react@18.2.0) scheduler: 0.23.0 dev: false - /react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.23.9)(react@18.2.0): - resolution: {integrity: sha512-VtS+Yr6OOTIuJGDECIYWzNU8QpJjASQYvMtfa/Hvm/2/h5GdB6W9H9TOmh13x07Lj4AOhNMx3XSsz6TdrO4jIg==} + /react-native@0.73.6(@babel/core@7.24.3)(@babel/preset-env@7.24.3)(react@18.2.0): + resolution: {integrity: sha512-oqmZe8D2/VolIzSPZw+oUd6j/bEmeRHwsLn1xLA5wllEYsZ5zNuMsDus235ONOnCRwexqof/J3aztyQswSmiaA==} engines: {node: '>=18'} hasBin: true peerDependencies: react: 18.2.0 dependencies: '@jest/create-cache-key-function': 29.7.0 - '@react-native-community/cli': 12.3.2 - '@react-native-community/cli-platform-android': 12.3.2 - '@react-native-community/cli-platform-ios': 12.3.2 + '@react-native-community/cli': 12.3.6 + '@react-native-community/cli-platform-android': 12.3.6 + '@react-native-community/cli-platform-ios': 12.3.6 '@react-native/assets-registry': 0.73.1 - '@react-native/codegen': 0.73.3(@babel/preset-env@7.23.9) - '@react-native/community-cli-plugin': 0.73.16(@babel/core@7.23.9)(@babel/preset-env@7.23.9) + '@react-native/codegen': 0.73.3(@babel/preset-env@7.24.3) + '@react-native/community-cli-plugin': 0.73.17(@babel/core@7.24.3)(@babel/preset-env@7.24.3) '@react-native/gradle-plugin': 0.73.4 '@react-native/js-polyfills': 0.73.1 '@react-native/normalize-colors': 0.73.2 - '@react-native/virtualized-lists': 0.73.4(react-native@0.73.4) + '@react-native/virtualized-lists': 0.73.4(react-native@0.73.6) abort-controller: 3.0.0 anser: 1.4.10 ansi-regex: 5.0.1 @@ -18129,8 +18745,8 @@ packages: jest-environment-node: 29.7.0 jsc-android: 250231.0.0 memoize-one: 5.2.1 - metro-runtime: 0.80.5 - metro-source-map: 0.80.5 + metro-runtime: 0.80.7 + metro-source-map: 0.80.7 mkdirp: 0.5.6 nullthrows: 1.1.1 pretty-format: 26.6.2 @@ -18189,7 +18805,7 @@ packages: /react-redux@8.1.3(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1): resolution: {integrity: sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==} peerDependencies: - '@types/react': ^18.2.55 + '@types/react': 18.2.55 '@types/react-dom': 18.2.19 react: ^16.8 || ^17.0 || ^18.0 react-dom: ^16.8 || ^17.0 || ^18.0 @@ -18207,7 +18823,7 @@ packages: redux: optional: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 '@types/hoist-non-react-statics': 3.3.5 '@types/react': 18.2.55 '@types/use-sync-external-store': 0.0.3 @@ -18222,7 +18838,6 @@ packages: /react-refresh@0.14.0: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} engines: {node: '>=0.10.0'} - dev: false /react-router-dom@6.22.1(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-iwMyyyrbL7zkKY7MRjOVRy+TMnS/OPusaFVxM2P11x9dzSzGmLsebkCvYirGq0DWB9K9hOspHYYtDz33gE5Duw==} @@ -18245,6 +18860,16 @@ packages: '@remix-run/router': 1.15.1 react: 18.2.0 + /react-router@6.22.3(react@18.2.0): + resolution: {integrity: sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==} + engines: {node: '>=14.0.0'} + peerDependencies: + react: '>=16.8' + dependencies: + '@remix-run/router': 1.15.3 + react: 18.2.0 + dev: false + /react-runner@1.0.3(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-KyAzNzSVdrBc4A7aGW3FD0wVuujfgcBlyIGF0QVicJu0ucMpLYyTHE+PgBu82Iq698TPKRH+eEi6Mrq/e7OffA==} peerDependencies: @@ -18275,16 +18900,16 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /react-spring@9.7.3(@react-three/fiber@8.15.16)(konva@9.3.2)(react-dom@18.2.0)(react-konva@18.2.10)(react-native@0.73.4)(react-zdog@1.2.2)(react@18.2.0)(three@0.161.0)(zdog@1.1.3): + /react-spring@9.7.3(@react-three/fiber@8.16.0)(konva@9.3.6)(react-dom@18.2.0)(react-konva@18.2.10)(react-native@0.73.6)(react-zdog@1.2.2)(react@18.2.0)(three@0.162.0)(zdog@1.1.3): resolution: {integrity: sha512-oTxDpFV5gzq7jQX6+bU0SVq+vX8VnuuT5c8Zwn6CpDErOPvCmV+DRkPiEBtaL3Ozgzwiy5yFx83N0h303j/r3A==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: '@react-spring/core': 9.7.3(react@18.2.0) - '@react-spring/konva': 9.7.3(konva@9.3.2)(react-konva@18.2.10)(react@18.2.0) - '@react-spring/native': 9.7.3(react-native@0.73.4)(react@18.2.0) - '@react-spring/three': 9.7.3(@react-three/fiber@8.15.16)(react@18.2.0)(three@0.161.0) + '@react-spring/konva': 9.7.3(konva@9.3.6)(react-konva@18.2.10)(react@18.2.0) + '@react-spring/native': 9.7.3(react-native@0.73.6)(react@18.2.0) + '@react-spring/three': 9.7.3(@react-three/fiber@8.16.0)(react@18.2.0)(three@0.162.0) '@react-spring/web': 9.7.3(react-dom@18.2.0)(react@18.2.0) '@react-spring/zdog': 9.7.3(react-dom@18.2.0)(react-zdog@1.2.2)(react@18.2.0)(zdog@1.1.3) react: 18.2.0 @@ -18303,7 +18928,7 @@ packages: resolution: {integrity: sha512-0W/e9uPweNEOSPjmYtuKSC/SvKKg1sfo+WtPdnxeLF3t2L82h7jjszuOHz9C23fzkvLfdgkaOmcbAxE9w2GEjA==} engines: {node: '>=6.0.0'} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 warning: 4.0.3 dev: false @@ -18311,7 +18936,7 @@ packages: resolution: {integrity: sha512-W+fXBOsDqgFK1/g7MzRMVcDurp3LqO3ksC8UgInh2P/tKgb5DusuuB1geKHFc6o1wKl+4oyER4Zh3Lxmr8xbXA==} engines: {node: '>=6.0.0'} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 keycode: 2.2.1 prop-types: 15.8.1 react-event-listener: 0.6.6(react@18.2.0) @@ -18327,7 +18952,7 @@ packages: peerDependencies: react: ^15.3.0 || ^16.0.0 || ^17.0.0 dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 prop-types: 15.8.1 react: 18.2.0 react-swipeable-views-core: 0.14.0 @@ -18351,7 +18976,7 @@ packages: react: '>=16.6.0' react-dom: '>=16.6.0' dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 dom-helpers: 5.2.1 loose-envify: 1.4.0 prop-types: 15.8.1 @@ -18388,7 +19013,7 @@ packages: react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 memoize-one: 5.2.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) @@ -18591,14 +19216,14 @@ packages: resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==} engines: {node: '>= 0.10'} dependencies: - resolve: 1.22.4 + resolve: 1.22.8 dev: true /rechoir@0.8.0: resolution: {integrity: sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==} engines: {node: '>= 10.13.0'} dependencies: - resolve: 1.22.4 + resolve: 1.22.8 /redent@3.0.0: resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==} @@ -18619,7 +19244,7 @@ packages: /redux@4.2.1: resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 dev: false /reflect.getprototypeof@1.0.4: @@ -18655,7 +19280,7 @@ packages: /regenerator-transform@0.15.2: resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 /regex-not@1.0.2: resolution: {integrity: sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==} @@ -18819,8 +19444,8 @@ packages: deprecated: https://github.com/lydell/resolve-url#deprecated dev: false - /resolve@1.22.4: - resolution: {integrity: sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==} + /resolve@1.22.8: + resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==} hasBin: true dependencies: is-core-module: 2.13.1 @@ -18912,15 +19537,15 @@ packages: dependencies: glob: 10.3.10 - /rollup-plugin-babel@4.4.0(@babel/core@7.23.9)(rollup@3.29.4): + /rollup-plugin-babel@4.4.0(@babel/core@7.24.3)(rollup@3.29.4): resolution: {integrity: sha512-Lek/TYp1+7g7I+uMfJnnSJ7YWoD58ajo6Oarhlex7lvUce+RCKRuGRSgztDO3/MF/PuGKmUL5iTHKf208UNszw==} deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel. peerDependencies: '@babel/core': ^7.23.9 rollup: '>=0.60.0 <3' dependencies: - '@babel/core': 7.23.9 - '@babel/helper-module-imports': 7.22.15 + '@babel/core': 7.24.3 + '@babel/helper-module-imports': 7.24.3 rollup: 3.29.4 rollup-pluginutils: 2.8.2 dev: true @@ -18934,7 +19559,7 @@ packages: estree-walker: 0.6.1 is-reference: 1.2.1 magic-string: 0.25.9 - resolve: 1.22.4 + resolve: 1.22.8 rollup: 3.29.4 rollup-pluginutils: 2.8.2 dev: true @@ -18959,7 +19584,7 @@ packages: '@types/resolve': 0.0.8 builtin-modules: 3.3.0 is-module: 1.0.0 - resolve: 1.22.4 + resolve: 1.22.8 rollup: 3.29.4 rollup-pluginutils: 2.8.2 dev: true @@ -18970,11 +19595,11 @@ packages: peerDependencies: rollup: ^2.0.0 dependencies: - '@babel/code-frame': 7.23.5 + '@babel/code-frame': 7.24.2 jest-worker: 26.6.2 rollup: 3.29.4 serialize-javascript: 4.0.0 - terser: 5.27.0 + terser: 5.29.2 dev: true /rollup-pluginutils@2.8.2: @@ -18991,24 +19616,26 @@ packages: fsevents: 2.3.3 dev: true - /rollup@4.9.2: - resolution: {integrity: sha512-66RB8OtFKUTozmVEh3qyNfH+b+z2RXBVloqO2KCC/pjFaGaHtxP9fVfOQKPSGXg2mElmjmxjW/fZ7iKrEpMH5Q==} + /rollup@4.13.0: + resolution: {integrity: sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==} engines: {node: '>=18.0.0', npm: '>=8.0.0'} hasBin: true + dependencies: + '@types/estree': 1.0.5 optionalDependencies: - '@rollup/rollup-android-arm-eabi': 4.9.2 - '@rollup/rollup-android-arm64': 4.9.2 - '@rollup/rollup-darwin-arm64': 4.9.2 - '@rollup/rollup-darwin-x64': 4.9.2 - '@rollup/rollup-linux-arm-gnueabihf': 4.9.2 - '@rollup/rollup-linux-arm64-gnu': 4.9.2 - '@rollup/rollup-linux-arm64-musl': 4.9.2 - '@rollup/rollup-linux-riscv64-gnu': 4.9.2 - '@rollup/rollup-linux-x64-gnu': 4.9.2 - '@rollup/rollup-linux-x64-musl': 4.9.2 - '@rollup/rollup-win32-arm64-msvc': 4.9.2 - '@rollup/rollup-win32-ia32-msvc': 4.9.2 - '@rollup/rollup-win32-x64-msvc': 4.9.2 + '@rollup/rollup-android-arm-eabi': 4.13.0 + '@rollup/rollup-android-arm64': 4.13.0 + '@rollup/rollup-darwin-arm64': 4.13.0 + '@rollup/rollup-darwin-x64': 4.13.0 + '@rollup/rollup-linux-arm-gnueabihf': 4.13.0 + '@rollup/rollup-linux-arm64-gnu': 4.13.0 + '@rollup/rollup-linux-arm64-musl': 4.13.0 + '@rollup/rollup-linux-riscv64-gnu': 4.13.0 + '@rollup/rollup-linux-x64-gnu': 4.13.0 + '@rollup/rollup-linux-x64-musl': 4.13.0 + '@rollup/rollup-win32-arm64-msvc': 4.13.0 + '@rollup/rollup-win32-ia32-msvc': 4.13.0 + '@rollup/rollup-win32-x64-msvc': 4.13.0 fsevents: 2.3.3 dev: true @@ -19025,7 +19652,7 @@ packages: /rtl-css-js@1.16.0: resolution: {integrity: sha512-Oc7PnzwIEU4M0K1J4h/7qUUaljXhQ0kCObRsZjxs2HjkpKsnoTMvSmvJ4sqgJZd0zBoEfAyTdnK/jMIYvrjySQ==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.1 dev: false /run-async@2.4.1: @@ -19351,10 +19978,12 @@ packages: shelljs: 0.8.5 dev: true - /side-channel@1.0.4: - resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} + /side-channel@1.0.6: + resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==} + engines: {node: '>= 0.4'} dependencies: call-bind: 1.0.7 + es-errors: 1.3.0 get-intrinsic: 1.2.4 object-inspect: 1.13.1 @@ -19580,8 +20209,8 @@ packages: is-plain-obj: 1.1.0 dev: true - /source-map-js@1.0.2: - resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} + /source-map-js@1.2.0: + resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} engines: {node: '>=0.10.0'} /source-map-resolve@0.5.3: @@ -19824,7 +20453,7 @@ packages: internal-slot: 1.0.7 regexp.prototype.flags: 1.5.2 set-function-name: 2.0.1 - side-channel: 1.0.4 + side-channel: 1.0.6 dev: true /string.prototype.trim@1.2.8: @@ -19960,7 +20589,7 @@ packages: stylis: 4.3.1 tslib: 2.5.0 - /styled-jsx@5.1.1(@babel/core@7.23.9)(babel-plugin-macros@3.1.0)(react@18.2.0): + /styled-jsx@5.1.1(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react@18.2.0): resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==} engines: {node: '>= 12.0.0'} peerDependencies: @@ -19973,7 +20602,7 @@ packages: babel-plugin-macros: optional: true dependencies: - '@babel/core': 7.23.9 + '@babel/core': 7.24.3 babel-plugin-macros: 3.1.0 client-only: 0.0.1 react: 18.2.0 @@ -20018,8 +20647,8 @@ packages: /stylelint-processor-styled-components@1.10.0: resolution: {integrity: sha512-g4HpN9rm0JD0LoHuIOcd/FIjTZCJ0ErQ+dC3VTxp+dSvnkV+MklKCCmCQEdz5K5WxF4vPuzfVgdbSDuPYGZhoA==} dependencies: - '@babel/parser': 7.23.9 - '@babel/traverse': 7.23.9 + '@babel/parser': 7.24.1 + '@babel/traverse': 7.24.1 micromatch: 4.0.5 postcss: 7.0.39 transitivePeerDependencies: @@ -20058,9 +20687,9 @@ packages: micromatch: 4.0.5 normalize-path: 3.0.0 picocolors: 1.0.0 - postcss: 8.4.35 + postcss: 8.4.38 postcss-resolve-nested-selector: 0.1.1 - postcss-safe-parser: 6.0.0(postcss@8.4.35) + postcss-safe-parser: 6.0.0(postcss@8.4.38) postcss-selector-parser: 6.0.13 postcss-value-parser: 4.2.0 resolve-from: 5.0.0 @@ -20092,6 +20721,15 @@ packages: cssjanus: 2.1.0 stylis: 4.2.0 + /stylis-plugin-rtl@2.1.1(stylis@4.3.1): + resolution: {integrity: sha512-q6xIkri6fBufIO/sV55md2CbgS5c6gg9EhSVATtHHCdOnbN/jcI0u3lYhNVeuI65c4lQPo67g8xmq5jrREvzlg==} + peerDependencies: + stylis: 4.x + dependencies: + cssjanus: 2.1.0 + stylis: 4.3.1 + dev: false + /stylis@4.2.0: resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==} @@ -20103,7 +20741,7 @@ packages: engines: {node: '>=8'} hasBin: true dependencies: - '@jridgewell/gen-mapping': 0.3.2 + '@jridgewell/gen-mapping': 0.3.5 commander: 4.1.1 glob: 7.1.6 lines-and-columns: 1.2.4 @@ -20218,13 +20856,13 @@ packages: normalize-path: 3.0.0 object-hash: 3.0.0 picocolors: 1.0.0 - postcss: 8.4.35 - postcss-import: 15.1.0(postcss@8.4.35) - postcss-js: 4.0.1(postcss@8.4.35) - postcss-load-config: 4.0.1(postcss@8.4.35) - postcss-nested: 6.0.1(postcss@8.4.35) + postcss: 8.4.38 + postcss-import: 15.1.0(postcss@8.4.38) + postcss-js: 4.0.1(postcss@8.4.38) + postcss-load-config: 4.0.1(postcss@8.4.38) + postcss-nested: 6.0.1(postcss@8.4.38) postcss-selector-parser: 6.0.13 - resolve: 1.22.4 + resolve: 1.22.8 sucrase: 3.34.0 transitivePeerDependencies: - ts-node @@ -20326,20 +20964,20 @@ packages: uglify-js: optional: true dependencies: - '@jridgewell/trace-mapping': 0.3.20 + '@jridgewell/trace-mapping': 0.3.25 esbuild: 0.19.11 jest-worker: 27.5.1 schema-utils: 3.3.0 serialize-javascript: 6.0.2 - terser: 5.27.0 + terser: 5.29.2 webpack: 5.90.3(esbuild@0.19.11)(webpack-cli@5.1.4) - /terser@5.27.0: - resolution: {integrity: sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==} + /terser@5.29.2: + resolution: {integrity: sha512-ZiGkhUBIM+7LwkNjXYJq8svgkd+QK3UUr0wJqY4MieaezBSAIPgbSPZyIx0idM6XWK5CMzSWa8MJIzmRcB8Caw==} engines: {node: '>=10'} hasBin: true dependencies: - '@jridgewell/source-map': 0.3.5 + '@jridgewell/source-map': 0.3.6 acorn: 8.11.3 commander: 2.20.3 source-map-support: 0.5.21 @@ -20405,8 +21043,8 @@ packages: dependencies: any-promise: 1.3.0 - /three@0.161.0: - resolution: {integrity: sha512-LC28VFtjbOyEu5b93K0bNRLw1rQlMJ85lilKsYj6dgTu+7i17W+JCCEbvrpmNHF1F3NAUqDSWq50UD7w9H2xQw==} + /three@0.162.0: + resolution: {integrity: sha512-xfCYj4RnlozReCmUd+XQzj6/5OjDNHBy5nT6rVwrOKGENAvpXe2z1jL+DZYaMu4/9pNsjH/4Os/VvS9IrH7IOQ==} dev: false /throat@5.0.0: @@ -20545,13 +21183,13 @@ packages: resolution: {integrity: sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==} dev: false - /ts-api-utils@1.0.1(typescript@5.3.3): + /ts-api-utils@1.0.1(typescript@5.4.3): resolution: {integrity: sha512-lC/RGlPmwdrIBFTX59wwNzqh7aR2otPNPR/5brHZm/XKFYKsfqxihXUe9pU3JI+3vGkl+vyCoNNnPhJn3aLK1A==} engines: {node: '>=16.13.0'} peerDependencies: typescript: '>=4.2.0' dependencies: - typescript: 5.3.3 + typescript: 5.4.3 dev: true /ts-interface-checker@0.1.13: @@ -20597,7 +21235,7 @@ packages: engines: {node: '>=0.6.x'} dev: false - /tsup@8.0.2(postcss@8.4.35)(typescript@5.3.3): + /tsup@8.0.2(postcss@8.4.38)(typescript@5.4.3): resolution: {integrity: sha512-NY8xtQXdH7hDUAZwcQdY/Vzlw9johQsaqf7iwZ6g1DOUlFYQ5/AtVAjTvihhEyeRlGo4dLRVHtrRaL35M1daqQ==} engines: {node: '>=18'} hasBin: true @@ -20624,14 +21262,14 @@ packages: execa: 5.1.1 globby: 11.1.0 joycon: 3.1.1 - postcss: 8.4.35 - postcss-load-config: 4.0.1(postcss@8.4.35) + postcss: 8.4.38 + postcss-load-config: 4.0.1(postcss@8.4.38) resolve-from: 5.0.0 - rollup: 4.9.2 + rollup: 4.13.0 source-map: 0.8.0-beta.0 sucrase: 3.34.0 tree-kill: 1.2.2 - typescript: 5.3.3 + typescript: 5.4.3 transitivePeerDependencies: - supports-color - ts-node @@ -20789,8 +21427,8 @@ packages: resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==} dev: true - /typescript@5.3.3: - resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==} + /typescript@5.4.3: + resolution: {integrity: sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==} engines: {node: '>=14.17'} hasBin: true @@ -20802,6 +21440,10 @@ packages: resolution: {integrity: sha512-DffL94LsNOccVn4hyfRe5rdKa273swqeA5DJpMOeFmEn1wCDc7nAbbB0gXlgBCL7TNzeTv6G7XVWzan7iJtfig==} dev: true + /ufo@1.4.0: + resolution: {integrity: sha512-Hhy+BhRBleFjpJ2vchUNN40qgkh0366FWJGqVLYBHev0vpHTrXSA0ryT+74UiW6KWsldNurQMKGqCm1M2zBciQ==} + dev: true + /uglify-js@3.17.4: resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==} engines: {node: '>=0.8.0'} @@ -21081,7 +21723,7 @@ packages: resolution: {integrity: sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==} engines: {node: '>=10.12.0'} dependencies: - '@jridgewell/trace-mapping': 0.3.20 + '@jridgewell/trace-mapping': 0.3.25 '@types/istanbul-lib-coverage': 2.0.6 convert-source-map: 1.8.0 dev: false @@ -21133,12 +21775,35 @@ packages: vfile-message: 2.0.4 dev: false - /vite@5.0.12(@types/node@18.19.25): - resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==} + /vite-plugin-pages@0.32.0(vite@5.2.2): + resolution: {integrity: sha512-OxS3n0zUo5wsfgNCAuw2FiG/KD1ipgQV+2Flst4RyeI2iPv+m0YueVq+nx41k5NOWJj/zhqEas6I0b7HXveXjA==} + peerDependencies: + '@vue/compiler-sfc': ^2.7.0 || ^3.0.0 + vite: ^2.0.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0 + peerDependenciesMeta: + '@vue/compiler-sfc': + optional: true + dependencies: + '@types/debug': 4.1.12 + debug: 4.3.4(supports-color@8.1.1) + deep-equal: 2.2.3 + extract-comments: 1.1.0 + fast-glob: 3.3.2 + json5: 2.2.3 + local-pkg: 0.5.0 + picocolors: 1.0.0 + vite: 5.2.2(@types/node@18.19.28) + yaml: 2.4.1 + transitivePeerDependencies: + - supports-color + dev: true + + /vite@5.2.2(@types/node@18.19.28): + resolution: {integrity: sha512-FWZbz0oSdLq5snUI0b6sULbz58iXFXdvkZfZWR/F0ZJuKTSPO7v72QPXt6KqYeMFb0yytNp6kZosxJ96Nr/wDQ==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: - '@types/node': ^18.19.25 + '@types/node': ^18.19.28 less: '*' lightningcss: ^1.21.0 sass: '*' @@ -21161,10 +21826,10 @@ packages: terser: optional: true dependencies: - '@types/node': 18.19.25 - esbuild: 0.19.11 - postcss: 8.4.35 - rollup: 4.9.2 + '@types/node': 18.19.28 + esbuild: 0.20.2 + postcss: 8.4.38 + rollup: 4.13.0 optionalDependencies: fsevents: 2.3.3 dev: true @@ -21687,6 +22352,12 @@ packages: /yaml@2.3.4: resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==} engines: {node: '>= 14'} + dev: true + + /yaml@2.4.1: + resolution: {integrity: sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==} + engines: {node: '>= 14'} + hasBin: true /yargs-parser@18.1.3: resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==} @@ -21805,3 +22476,36 @@ packages: /zwitch@1.0.5: resolution: {integrity: sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==} dev: false + + file:packages/pigment-css-react(@types/react@18.2.55)(react@18.2.0): + resolution: {directory: packages/pigment-css-react, type: directory} + id: file:packages/pigment-css-react + name: '@pigment-css/react' + peerDependencies: + react: ^17.0.0 || ^18.0.0 + dependencies: + '@babel/core': 7.24.3 + '@babel/helper-module-imports': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/parser': 7.24.1 + '@babel/types': 7.24.0 + '@emotion/css': 11.11.2 + '@emotion/is-prop-valid': 1.2.2 + '@emotion/react': 11.11.4(@types/react@18.2.55)(react@18.2.0) + '@emotion/serialize': 1.1.3 + '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) + '@mui/system': link:packages/mui-system/build + '@wyw-in-js/processor-utils': 0.5.0 + '@wyw-in-js/shared': 0.5.0 + '@wyw-in-js/transform': 0.5.0 + clsx: 2.1.0 + cssesc: 3.0.0 + csstype: 3.1.3 + lodash: 4.17.21 + react: 18.2.0 + stylis: 4.3.1 + stylis-plugin-rtl: 2.1.1(stylis@4.3.1) + transitivePeerDependencies: + - '@types/react' + - supports-color + dev: false diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 1df4b976eee7ea..b02f0b0d8d9901 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -5,3 +5,4 @@ packages: - 'packages-internal/*' - 'docs' - 'test' + - 'apps/*' diff --git a/scripts/README.md b/scripts/README.md index 713c7947b497ad..d9aec080797fe4 100644 --- a/scripts/README.md +++ b/scripts/README.md @@ -65,13 +65,19 @@ To do so, follow these steps: git remote add material-ui-docs https://github.com/mui/material-ui-docs.git ``` -2. Switch to the `latest` branch from `material-ui-docs` remote: +2. Fetch the latest changes from the `material-ui-docs` remote: + + ```bash + git fetch material-ui-docs latest + ``` + +3. Switch to the `latest` branch from `material-ui-docs` remote: ```bash git switch --detach material-ui-docs/latest ``` -3. Cherry-pick the commit(s) that you want to include in the new deployment: +4. Cherry-pick the commit(s) that you want to include in the new deployment: ```bash git cherry-pick @@ -81,13 +87,17 @@ To do so, follow these steps: In case of conflicts you will need to resolve them and commit the changes manually. -4. Push the changes to the `material-ui-docs` remote: + If this command fails with the message 'bad revision', it means that the commit doesn't exist on your local repository. + The commit might have been created on a remote branch, probably when merging into `master` or `next`. + In this case, you'll have to fetch the latest changes of the corresponding remote branch and then try again. + +5. Push the changes to the `material-ui-docs` remote: ```bash git push material-ui-docs HEAD:latest ``` -5. Switch from detached `HEAD` back to your last checked out branch: +6. Switch from detached `HEAD` back to your last checked out branch: ```bash git checkout - diff --git a/scripts/pigmentcss-render-mui-demos.mjs b/scripts/pigmentcss-render-mui-demos.mjs index c099bbcc52dfd9..e40244f0588b46 100644 --- a/scripts/pigmentcss-render-mui-demos.mjs +++ b/scripts/pigmentcss-render-mui-demos.mjs @@ -2,19 +2,20 @@ import path from 'path'; import fse from 'fs-extra'; import * as prettier from 'prettier'; -function capitalize(string) { +function pascalCase(string) { if (typeof string !== 'string') { - throw new Error('`capitalize(string)` expects a string argument.'); + throw new Error('`pascalCase(string)` expects a string argument.'); } - return string.charAt(0).toUpperCase() + string.slice(1); + const result = string.replace(/-([a-z])/g, (g) => g[1].toUpperCase()); + + return result.charAt(0).toUpperCase() + result.slice(1); } function titleCase(str) { const result = str.replace(/([A-Z])/g, ' $1'); return result.charAt(0).toUpperCase() + result.slice(1); } - const args = process.argv.slice(2); async function run() { @@ -57,11 +58,14 @@ async function run() { const componentName = filename.replace('.tsx', ''); return `import ${componentName} from '../../../../../../docs/data/material/components/${dataFolderName}/${componentName}';`; }); + + const functionName = pascalCase(dataFolderName); + const nextFileContent = `'use client'; import * as React from 'react'; ${nextImports.join('\n')} -export default function ${capitalize(dataFolderName)}() { +export default function ${functionName}() { return ( ${renders.join('\n')} @@ -93,10 +97,10 @@ ${renders.join('\n')} import MaterialUILayout from '../../Layout'; ${viteImports.join('\n')} -export default function ${capitalize(dataFolderName)}() { +export default function ${functionName}() { return ( -

${capitalize(dataFolderName)}

+

${functionName}

${renders.join('\n')} ); diff --git a/scripts/releaseChangelog.mjs b/scripts/releaseChangelog.mjs index 6f8d5c7808c1bb..2c6b15abcf84ee 100644 --- a/scripts/releaseChangelog.mjs +++ b/scripts/releaseChangelog.mjs @@ -195,7 +195,7 @@ yargs(process.argv.slice(2)) }) .option('release', { // #default-branch-switch - default: 'master', + default: 'next', describe: 'Ref which we want to release', type: 'string', }) diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js index 0d40434955fc49..6a63b053c7ae50 100644 --- a/scripts/sizeSnapshot/webpack.config.js +++ b/scripts/sizeSnapshot/webpack.config.js @@ -90,15 +90,15 @@ async function getWebpackEntries() { }, { id: '@material-ui/system', - path: 'packages/mui-system/build/esm/index.js', + path: 'packages/mui-system/build/index.js', }, { id: 'createBox', - path: 'packages/mui-system/build/esm/createBox.js', + path: 'packages/mui-system/build/createBox/index.js', }, { id: 'createStyled', - path: 'packages/mui-system/build/esm/createStyled.js', + path: 'packages/mui-system/build/createStyled/index.js', }, { id: '@material-ui/core/styles/createTheme', @@ -106,7 +106,7 @@ async function getWebpackEntries() { }, { id: 'colorManipulator', - path: 'packages/mui-system/build/colorManipulator.js', + path: 'packages/mui-system/build/colorManipulator/index.js', }, { id: 'useAutocomplete', diff --git a/test/package.json b/test/package.json index 95c44493b32902..1e6dfd957b8b89 100644 --- a/test/package.json +++ b/test/package.json @@ -19,7 +19,7 @@ "@mui/utils": "workspace:^", "@playwright/test": "1.42.1", "@testing-library/dom": "^9.3.4", - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/react": "^18.2.55", "@types/react-is": "^18.2.4", "@types/sinon": "^10.0.20", diff --git a/test/regressions/index.js b/test/regressions/index.js index 3591aae89c78ec..29e521fc490585 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -27,6 +27,12 @@ importRegressionFixtures.keys().forEach((path) => { }, []); const blacklist = [ + 'docs-getting-started-templates-sign-in-side/CustomIcons.png', // Theme file + 'docs-getting-started-templates-sign-in/CustomIcons.png', // Theme file + 'docs-getting-started-templates-sign-up/CustomIcons.png', // Theme file + 'docs-getting-started-templates-sign-in-side/getSignInSideTheme.png', // Theme file + 'docs-getting-started-templates-sign-in/getSignInTheme.png', // Theme file + 'docs-getting-started-templates-sign-up/getSignUpTheme.png', // Theme file 'docs-getting-started-templates-checkout/getCheckoutTheme.png', // Theme file 'docs-getting-started-templates-landing-page/getLPTheme.png', // Theme file 'docs-joy-getting-started-templates/TemplateCollection.png', // No public components diff --git a/tsup.config.ts b/tsup.config.ts index 159ef80835ef07..255be9ede538e7 100644 --- a/tsup.config.ts +++ b/tsup.config.ts @@ -30,4 +30,7 @@ export default defineConfig({ env: { PACKAGE_NAME: pkgJson.name, }, + loader: { + '.js': 'jsx', + }, });