diff --git a/.circleci/config.yml b/.circleci/config.yml index 305d7ac6155054..c892050bbb708f 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -244,7 +244,7 @@ jobs: name: Lint writing style command: | vale sync - pnpm run valelint + pnpm valelint test_static: <<: *default-job steps: @@ -380,7 +380,7 @@ jobs: <<: *default-job resource_class: 'medium+' docker: - - image: mcr.microsoft.com/playwright:v1.42.1-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -410,7 +410,7 @@ jobs: test_e2e: <<: *default-job docker: - - image: mcr.microsoft.com/playwright:v1.42.1-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -430,7 +430,7 @@ jobs: # NOTE: This workflow runs after successful docs deploy. See /test/e2e-website/README.md#ci <<: *default-job docker: - - image: mcr.microsoft.com/playwright:v1.42.1-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -445,7 +445,7 @@ jobs: test_profile: <<: *default-job docker: - - image: mcr.microsoft.com/playwright:v1.42.1-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -472,7 +472,7 @@ jobs: test_regressions: <<: *default-job docker: - - image: mcr.microsoft.com/playwright:v1.42.1-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -526,7 +526,7 @@ jobs: <<: *default-job working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack4/ docker: - - image: mcr.microsoft.com/playwright:v1.42.1-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -550,7 +550,7 @@ jobs: <<: *default-job working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack5/ docker: - - image: mcr.microsoft.com/playwright:v1.42.1-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -574,7 +574,7 @@ jobs: <<: *default-job working_directory: /tmp/material-ui/test/bundling/fixtures/create-react-app/ docker: - - image: mcr.microsoft.com/playwright:v1.42.1-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -598,7 +598,7 @@ jobs: <<: *default-job working_directory: /tmp/material-ui/test/bundling/fixtures/snowpack/ docker: - - image: mcr.microsoft.com/playwright:v1.42.1-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -622,7 +622,7 @@ jobs: <<: *default-job working_directory: /tmp/material-ui/test/bundling/fixtures/vite/ docker: - - image: mcr.microsoft.com/playwright:v1.42.1-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -646,7 +646,7 @@ jobs: <<: *default-job working_directory: /tmp/material-ui/test/bundling/fixtures/esbuild/ docker: - - image: mcr.microsoft.com/playwright:v1.42.1-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -674,7 +674,7 @@ jobs: <<: *default-job working_directory: /tmp/material-ui/test/bundling/fixtures/gatsby/ docker: - - image: mcr.microsoft.com/playwright:v1.42.1-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -775,7 +775,7 @@ jobs: test_benchmark: <<: *default-job docker: - - image: mcr.microsoft.com/playwright:v1.42.1-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: diff --git a/.github/ISSUE_TEMPLATE/1.bug.yml b/.github/ISSUE_TEMPLATE/1.bug.yml index 44f994ac9fd282..f1b828fc6d3db3 100644 --- a/.github/ISSUE_TEMPLATE/1.bug.yml +++ b/.github/ISSUE_TEMPLATE/1.bug.yml @@ -1,5 +1,5 @@ name: Bug report 🐛 -description: Create a bug report for Material UI, Base UI, MUI System, or Joy UI. +description: Create a bug report for Material UI, MUI System, or Joy UI. labels: ['status: waiting for maintainer'] body: - type: markdown diff --git a/.github/ISSUE_TEMPLATE/2.feature.yml b/.github/ISSUE_TEMPLATE/2.feature.yml index 080e31177c3b1c..054d5527f7e13a 100644 --- a/.github/ISSUE_TEMPLATE/2.feature.yml +++ b/.github/ISSUE_TEMPLATE/2.feature.yml @@ -1,5 +1,5 @@ name: Feature request 💄 -description: Suggest a new idea for Material UI, Base UI, MUI System, or Joy UI. +description: Suggest a new idea for Material UI, MUI System, or Joy UI. labels: ['status: waiting for maintainer'] body: - type: markdown diff --git a/.github/ISSUE_TEMPLATE/4.docs-feedback.yml b/.github/ISSUE_TEMPLATE/4.docs-feedback.yml index 70d90a31e8a690..21f9ae7ba38356 100644 --- a/.github/ISSUE_TEMPLATE/4.docs-feedback.yml +++ b/.github/ISSUE_TEMPLATE/4.docs-feedback.yml @@ -1,5 +1,5 @@ name: Docs feedback -description: Improve documentation about Material UI, Base UI, MUI System, or Joy UI. +description: Improve documentation about Material UI, MUI System, or Joy UI. labels: ['status: waiting for maintainer', 'support: docs-feedback'] title: '[docs] ' body: diff --git a/.github/ISSUE_TEMPLATE/5.priority-support.yml b/.github/ISSUE_TEMPLATE/5.priority-support.yml index 530a16772a5c62..cf5e0a75321209 100644 --- a/.github/ISSUE_TEMPLATE/5.priority-support.yml +++ b/.github/ISSUE_TEMPLATE/5.priority-support.yml @@ -1,5 +1,5 @@ name: 'Priority Support: SLA ⏰' -description: I'm an MUI X Premium user and we have purchased the Priority Support add-on. I can't find a solution to my problem with Material UI, Base UI, MUI System, or Joy UI. +description: I'm an MUI X Premium user and we have purchased the Priority Support add-on. I can't find a solution to my problem with Material UI, MUI System, or Joy UI. title: '[question] ' labels: ['status: waiting for maintainer', 'support: unknown'] body: diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 1bc33bd5c715cb..9a2f57519c8df2 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1,4 +1,4 @@ contact_links: - name: Support ❔ url: https://mui.com/getting-started/support/ - about: I need support with Material UI, Base UI, MUI System, or Joy UI. + about: I need support with Material UI, MUI System, or Joy UI. diff --git a/.github/workflows/cherry-pick-next-to-master.yml b/.github/workflows/cherry-pick-next-to-master.yml new file mode 100644 index 00000000000000..2fe2a126d4c30a --- /dev/null +++ b/.github/workflows/cherry-pick-next-to-master.yml @@ -0,0 +1,34 @@ +name: Cherry pick next to master + +on: + pull_request_target: + branches: + - next + types: ['closed'] + +permissions: {} + +jobs: + cherry_pick_to_master: + runs-on: ubuntu-latest + name: Cherry pick into master + permissions: + pull-requests: write + contents: write + if: ${{ contains(github.event.pull_request.labels.*.name, 'needs cherry-pick') && github.event.pull_request.merged == true }} + steps: + - name: Checkout + uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 + with: + fetch-depth: 0 + - name: Cherry pick and create the new PR + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + uses: carloscastrojumo/github-cherry-pick-action@503773289f4a459069c832dc628826685b75b4b3 # v1.0.10 + with: + branch: master + body: 'Cherry-pick of #{old_pull_request_id}' + cherry-pick-branch: ${{ format('cherry-pick-{0}', github.event.number) }} + title: '{old_title} (@${{ github.event.pull_request.user.login }})' + labels: | + cherry-pick diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index fc0c4f59babfe7..0aee3528195eb3 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@1b1aada464948af03b950897e5eb522f92603cc2 # v3.24.9 + uses: github/codeql-action/init@4355270be187e1b672a7a1c7c7bae5afdc1ab94a # v3.24.10 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@1b1aada464948af03b950897e5eb522f92603cc2 # v3.24.9 + uses: github/codeql-action/analyze@4355270be187e1b672a7a1c7c7bae5afdc1ab94a # v3.24.10 diff --git a/.github/workflows/priority-support-validation-prompt.yml b/.github/workflows/priority-support-validation-prompt.yml index 61d99765fbd83e..ad69c7604bdea3 100644 --- a/.github/workflows/priority-support-validation-prompt.yml +++ b/.github/workflows/priority-support-validation-prompt.yml @@ -16,7 +16,7 @@ jobs: steps: - name: Find Comment - uses: peter-evans/find-comment@d5fe37641ad8451bdd80312415672ba26c86575e # v3 + uses: peter-evans/find-comment@3eae4d37986fb5a8592848f6a574fdf654e61f9e # v3 id: findComment with: issue-number: ${{ github.event.issue.number }} diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml index eb89daf450ca4c..6b65948ab310ff 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@1b1aada464948af03b950897e5eb522f92603cc2 # v3.24.9 + uses: github/codeql-action/upload-sarif@4355270be187e1b672a7a1c7c7bae5afdc1ab94a # v3.24.10 with: sarif_file: results.sarif diff --git a/CHANGELOG.md b/CHANGELOG.md index bbf5c0e1837948..b359e9a43437de 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,131 @@ # [Versions](https://mui.com/versions/) +## v6.0.0-alpha.2 + + + +_Apr 9, 2024_ + +A big thanks to the 5 contributors who made this release possible. +This release was mostly about 🐛 bug fixes and 📚 documentation improvements. + +### `@mui/material@6.0.0-alpha.2` + +- ​[typescript][Select] Fix `muiName` property TypeScript error (#41726) @EyaOuenniche +- ​[l10n] Fix typo in is-IS locale (#41810) @magnimarels + +### `@pigment-css/react@0.0.6` + +- ​[core] Remove `muiName` during eval phase (#41811) @brijeshb42 + +### `@pigment-css/nextjs-plugin@0.0.6` + +- ​[nextjs] Handle file references passed through imports (#41817) @brijeshb42 +- ​[nextjs] Allow usage of url() CSS function (#41758) @brijeshb42 + +### Docs + +- ​[docs] Fix 301 links @oliviertassinari +- ​[pigment-css][docs] Fix README typo (#41808) @aarongarciah +- ​[pigment-css][docs] Fix output on dynamic styles example (#41805) @aarongarciah +- ​[material-ui][docs] Fix Material 3 message typo (#41821) @aarongarciah +- ​[material-ui][docs] Add stray design tweaks to free templates (#41696) @zanivan + +### Core + +- ​[core] Remove unused files (#41818) @mnajdova +- ​[docs-infra] Fix analytics about inline ads (#41474) (#41819) @alexfauquette +- ​[docs-infra] Fix drawer performances (#41807) @alexfauquette + +All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @brijeshb42, @EyaOuenniche, @oliviertassinari + +## v6.0.0-alpha.1 + + + +_Apr 5, 2024_ + +A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨: + +- 🔥 Converted 3 more Material UI components to use Pigment CSS. Current progress is 36%! +- 🚀 Added a spacing CSS variable to the Material UI and Joy UI themes. +- 💫 Added 3 redesigned free Material UI templates: [Sign-in](https://next.mui.com/material-ui/getting-started/templates/sign-in/), [Sign-in side](https://next.mui.com/material-ui/getting-started/templates/sign-in-side/), and [Sign-up](https://next.mui.com/material-ui/getting-started/templates/sign-up/). + +### `@mui/material@6.0.0-alpha.1` + +- [AppBar] Convert to support CSS extraction (#41247) @mnajdova +- [Badge] Deprecate components and componentsProps (#41655) @skmanoj322 +- [Button] Convert to support CSS extraction (#41378) @siriwatknp +- [ButtonGroup] Convert to support CSS extraction (#41666) @zanivan +- [RadioGroup] Apply classnames (#41610) @ZeeshanTamboli +- [Slider] Move palette styles to the bottom (#41676) @siriwatknp +- Add the `spacing` theme token (#40224) @siriwatknp + +### `@mui/system@6.0.0-alpha.1` + +- Add the `spacing` theme token to be used in `theme.spacing()` (#40224) @siriwatknp + +### `@mui/codemod@6.0.0-alpha.1` + +- [codemod] Setup v6 codemod structure (#41668) @DiegoAndai + +### `@mui/lab@6.0.0-alpha.1` + +- [TabPanel] Add keepMounted prop to match Joy UI (#41651) @ppaskaris-plooto + +### `@mui/joy@5.0.0-beta.34` + +- Add `spacing` theme token (#40224) @siriwatknp + +### `@pigment-css/react@0.0.5` + +- Improve sx prop support (#41589) @brijeshb42 +- Fix Emotion styled error (#41699) @siriwatknp +- Fix propTypes removal during eval stage (#41695) @brijeshb42 +- Fix props forwarding (#41688) @siriwatknp +- Fix sx prop transformation on Box (#41705) @brijeshb42 + +### `@pigment-css/vite-plugin@0.0.5` + +- Use constant filename for pigment styles (#41667) @brijeshb42 + +### `@pigment-css/nextjs-plugin@0.0.5` + +- Add missing RTL implementation (#41751) @brijeshb42 + +### Docs + +- [pigment-css] Update README.md installation to use the next tag (#41649) @mnajdova +- [pigment-css] Add "Building design system components" guide with Pigment CSS (#41635) @siriwatknp +- Continue migration of Base UI to sperate repository @oliviertassinari +- Stick to one way to write IE 11 @oliviertassinari +- Fix typo in CONTRIBUTING.md (#41670) @adriancuadrado +- Drop IE 11 official support (#41611) @iammminzzy +- [material-ui] Fix typo on the Accordion page (#41687) @connorshea +- [pigment-css] Add small edits on the README (#41646) @danilo-leal +- [pigment-css] Edit the example app's README files (#41639) @danilo-leal + +### Core + +- [code-infra] Move BrandingProvider/brandingTheme/InfoCard to @mui/docs (#41206) @Janpot +- [core] Automate cherry-pick of PRs from `next` -> `master` (#41741) @aarongarciah +- [core] Update the prettier script to use the next branch (#41637) @mnajdova +- [docs-infra] Skip loading source for non-editable modules (#41588) @bharatkashyap +- [docs-infra] Vale rule for M3 (#41737) @oliviertassinari +- [docs-infra] Allows to remove edit button (#41702) @alexfauquette +- [pigment-css][examples] Add example project with Remix (#41700) @brijeshb42 +- [examples] Update MUI's packages to the next version (#41701) @mnajdova +- [material-ui] Refine the Sign-in and Sign-up templates (#41192) @zanivan +- [test] Add test to display options provided to the options prop even if loading is true. (#41675) @ZeeshanTamboli +- [blog] Refresh the design slightly (#41697) @danilo-leal +- [website] Use en-US over en-UK for career link @oliviertassinari +- [website] Add Aarón to About Us (#41736) @aarongarciah +- [website] Refine button design and other details (#41686) @danilo-leal +- [website] Improve job og image (#41672) @oliviertassinari +- [website] Page should have no dots @oliviertassinari + +All contributors of this release in alphabetical order: @aarongarciah, @adriancuadrado, @alexfauquette, @bharatkashyap, @brijeshb42, @connorshea, @danilo-leal, @DiegoAndai, @iammminzzy, @Janpot, @JCQuintas, @levigunz, @mnajdova, @oliviertassinari, @ppaskaris-plooto, @siriwatknp, @skmanoj322, @zanivan, @ZeeshanTamboli + ## v6.0.0-alpha.0 <!-- generated comparing v5.15.14..next --> @@ -79,6 +205,46 @@ A big thanks to the 18 contributors who made this release possible. Here are som 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.15 + +<!-- generated comparing v5.15.14..master --> + +_Apr 4, 2024_ + +A big thanks to the 7 contributors who made this release possible. Here are some highlights ✨: +This release was mostly about 🐛 bug fixes and 📚 documentation improvements. + +### `@mui/material@5.15.15` + +- [Autocomplete] Display options provided to the `options` prop even if loading is true (#41677) @ZeeshanTamboli +- [RadioGroup] Apply classnames (#41681) @ZeeshanTamboli + +### `@mui/system@5.15.15` + +- Fix typo to avoid infinite recursion in function call (#41678) @ZeeshanTamboli + +### Docs + +- [material-ui][Slider] Remove `valueLabelFormat` from restricted values demo so that the tooltip thumb label displays the same as the value text (#41679) @ZeeshanTamboli +- [material-ui] Remove deleted page from the sidenav (#41594) @danilo-leal +- [material-ui] Fix typo in CSS theme variables customization (#41680) @ZeeshanTamboli +- Continue migration of Base UI to sperate repository @oliviertassinari +- Add notification for MUI X v7 blog post (#41587) (#41605) @cherniavskii +- Update the versions dropdown to show v6 (#41557) @mnajdova + +### Core + +- [blog] Link to Romain's blog post in MUI X v7 announcement post (#41641) @cherniavskii +- [blog] Blog post with MUI X v7.0.0 annoucement (#41563) (#41604) @cherniavskii +- [blog] Add post about remote (#41565) @danilo-leal +- [core] Continue rename of Toolpad @oliviertassinari +- [docs-infra] Add Toolpad product/category IDs to types (#41551) @bharatkashyap +- [website] Add Aarón to About Us (#41747) @aarongarciah +- [website] Add stray design adjustments throughout the site (#41642) @mnajdova +- [website] Update pricing table (#41606) @cherniavskii + +All contributors of this release in alphabetical order: @aarongarciah, @bharatkashyap, @cherniavskii, @danilo-leal, @mnajdova, @oliviertassinari, @ZeeshanTamboli + ## v5.15.14 <!-- generated comparing v5.15.13..master --> @@ -893,7 +1059,7 @@ A big thanks to the 22 contributors who made this release possible. Here are som - [material-ui] Revise the Alert demo page (#34892) @samuelsycamore - [material-ui] Revise the Accordion page (#40284) @anle9650 - [material-ui] Add docs for complementary Card components (#40346) @anle9650 -- [material-ui] Add Material 3 components page (#40350) @DiegoAndai +- [material-ui] Add Material Design 3 components page (#40350) @DiegoAndai - Fix strange italic style @oliviertassinari - Fix references to ESLint @oliviertassinari - Fix 301 redirections @oliviertassinari @@ -8001,7 +8167,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som <a href="https://mui.com/components/tables/#unstyled-table"><img width="800" alt="unstyled table" src="https://user-images.githubusercontent.com/4512430/144862194-584356ef-7d9d-462c-a631-186a7e716193.png"></a> - You can follow our progress with unstyled components at https://github.com/mui/material-ui/issues/27170. + You can follow our progress with unstyled components at https://github.com/mui/base-ui/issues/10. - 🎉 We have added an example of how to use MUI with [Remix](https://remix.run/) (#29952) @mnajdova @@ -9471,7 +9637,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som <a href="https://mui.com/components/switches/#unstyled"><img width="832" alt="switch" src="https://user-images.githubusercontent.com/3165635/125192249-236f8a80-e247-11eb-9df9-17d476379a32.png"></a> - You can follow our progress at https://github.com/mui/material-ui/issues/27170. + You can follow our progress at https://github.com/mui/base-ui/issues/10. - 💄 We have updated the default `info` `success` `warning` color to be more accessible (#26817) @siriwatknp. You can find the new [default values](https://mui.com/material-ui/customization/palette/#default-values) in the documentation. @@ -13057,7 +13223,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 642641f9f3f8f3..55cfa20ae6c9cf 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,4 +1,4 @@ -# Contributing to Material UI, Base UI, MUI System, Joy UI +# Contributing to Material UI, MUI System, Joy UI If you're reading this, you're awesome! Thank you for being a part of the community and helping us make these projects great. diff --git a/apps/pigment-css-next-app/README.md b/apps/pigment-css-next-app/README.md index 11f66aa10d4f20..ed983b5fd8b560 100644 --- a/apps/pigment-css-next-app/README.md +++ b/apps/pigment-css-next-app/README.md @@ -1,10 +1,10 @@ -# Demo Next.js app for Zero Runtime +# Pigment CSS with Next.js - Demo app -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app). +This is a Pigment CSS and [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app). ## Getting started -First, build all the packages in the workspace atleast once. Run +First, build all the packages in the workspace at least once. Run ```bash pnpm build:zero @@ -16,21 +16,21 @@ Then start the Next.js development server: pnpm run --filter=@app/next-app dev ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +Open [http://localhost:3000](http://localhost:3000) to see the app running live. You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. -If you see and error like package `@pigment-css/react` not found, add it as a peer-dependency in `@mui/material`'s `package.json` file and run `pnpm build` and `pnpm install` again. Make sure to not push this change to git. +If you encounter an error that says "package `@pigment-css/react` not found," add it as a peer dependency in the `package.json` for `@mui/material`, then run `pnpm build` and `pnpm install` again. Make sure to not push this change to git. ### Note -If you are testing changes in pigmentcss packages itself while also running this demo app, start the watch command in a separate terminal to watch and build pigmentcss package files as they change - +If you're testing changes in Pigment CSS-related packages while also running this demo app, run the watch command in a separate terminal to watch and build Pigment CSS package files as they change: ```bash pnpm watch:zero ``` -You might have to restart the next.js server. +You might have to restart the Next.js server. ## Build diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json index 32eb78e8966d16..84ef8fd91759f2 100644 --- a/apps/pigment-css-next-app/package.json +++ b/apps/pigment-css-next-app/package.json @@ -12,6 +12,7 @@ "@pigment-css/react": "workspace:^", "@mui/utils": "workspace:^", "@mui/base": "workspace:^", + "@mui/lab": "workspace:^", "@mui/material": "workspace:^", "@mui/system": "workspace:^", "@mui/material-nextjs": "workspace:^", @@ -28,7 +29,7 @@ "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "eslint": "^8.57.0", - "typescript": "^5.4.3" + "typescript": "^5.4.5" }, "nx": { "targets": { diff --git a/apps/pigment-css-next-app/src/app/layout.tsx b/apps/pigment-css-next-app/src/app/layout.tsx index 3907673a0fdf0a..77126c9b714539 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,16 @@ export const metadata: Metadata = { export default function RootLayout(props: { children: React.ReactNode }) { return ( <html lang="en"> - <body className={inter.className}> - <AppRouterCacheProvider options={{ enableCssLayer: true }}> + <body + className={`${inter.className} ${css` + background-color: ${({ theme: t }) => t.vars.palette.background.default}; + color: ${({ theme: t }) => t.vars.palette.text.primary}; + background-image: url('@/assets/mui.svg'); + background-repeat: no-repeat; + background-position: 1rem 1rem; + `}`} + > + <AppRouterCacheProvider> <ThemeProvider theme={theme}> <CssBaseline /> {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/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/page.tsx index 3a7c71710986c5..bcea6b4568eaef 100644 --- a/apps/pigment-css-next-app/src/app/material-ui/page.tsx +++ b/apps/pigment-css-next-app/src/app/material-ui/page.tsx @@ -4,6 +4,7 @@ import Link from 'next/link'; import fs from 'fs/promises'; import path from 'path'; import { css } from '@pigment-css/react'; +import Box from '@pigment-css/react/Box'; export default async function MaterialUIPage() { const rootPaths = await fs.readdir(path.join(process.cwd(), `src/app/material-ui`)); @@ -11,8 +12,9 @@ export default async function MaterialUIPage() { <div> <h1>Material UI Components</h1> <nav> - <ul - className={css({ + <Box + as="ul" + sx={{ margin: 0, marginBlock: '1rem', padding: 0, @@ -20,7 +22,7 @@ export default async function MaterialUIPage() { display: 'flex', flexDirection: 'column', gap: '0.5rem', - })} + }} > {rootPaths .filter((item) => !item.match(/\.(js|tsx)$/)) @@ -37,7 +39,7 @@ export default async function MaterialUIPage() { </Link> </li> ))} - </ul> + </Box> </nav> </div> ); 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 ( + <React.Fragment> + <section> + <h2> Back To Top</h2> + <div className="demo-container"> + <BackToTop /> + </div> + </section> + <section> + <h2> Bottom App Bar</h2> + <div className="demo-container"> + <BottomAppBar /> + </div> + </section> + <section> + <h2> Button App Bar</h2> + <div className="demo-container"> + <ButtonAppBar /> + </div> + </section> + <section> + <h2> Dense App Bar</h2> + <div className="demo-container"> + <DenseAppBar /> + </div> + </section> + <section> + <h2> Drawer App Bar</h2> + <div className="demo-container"> + <DrawerAppBar /> + </div> + </section> + <section> + <h2> Elevate App Bar</h2> + <div className="demo-container"> + <ElevateAppBar /> + </div> + </section> + <section> + <h2> Enable Color On Dark App Bar</h2> + <div className="demo-container"> + <EnableColorOnDarkAppBar /> + </div> + </section> + <section> + <h2> Hide App Bar</h2> + <div className="demo-container"> + <HideAppBar /> + </div> + </section> + <section> + <h2> Menu App Bar</h2> + <div className="demo-container"> + <MenuAppBar /> + </div> + </section> + <section> + <h2> Primary Search App Bar</h2> + <div className="demo-container"> + <PrimarySearchAppBar /> + </div> + </section> + <section> + <h2> Prominent App Bar</h2> + <div className="demo-container"> + <ProminentAppBar /> + </div> + </section> + <section> + <h2> Responsive App Bar</h2> + <div className="demo-container"> + <ResponsiveAppBar /> + </div> + </section> + <section> + <h2> Search App Bar</h2> + <div className="demo-container"> + <SearchAppBar /> + </div> + </section> + </React.Fragment> + ); +} 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 ( + <React.Fragment> + <section> + <h2> Basic Button Group</h2> + <div className="demo-container"> + <BasicButtonGroup /> + </div> + </section> + <section> + <h2> Disable Elevation</h2> + <div className="demo-container"> + <DisableElevation /> + </div> + </section> + <section> + <h2> Group Orientation</h2> + <div className="demo-container"> + <GroupOrientation /> + </div> + </section> + <section> + <h2> Group Sizes Colors</h2> + <div className="demo-container"> + <GroupSizesColors /> + </div> + </section> + <section> + <h2> Loading Button Group</h2> + <div className="demo-container"> + <LoadingButtonGroup /> + </div> + </section> + <section> + <h2> Split Button</h2> + <div className="demo-container"> + <SplitButton /> + </div> + </section> + <section> + <h2> Variant Button Group</h2> + <div className="demo-container"> + <VariantButtonGroup /> + </div> + </section> + </React.Fragment> + ); +} 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 ( + <React.Fragment> + <section> + <h2> Basic Buttons</h2> + <div className="demo-container"> + <BasicButtons /> + </div> + </section> + <section> + <h2> Button Base Demo</h2> + <div className="demo-container"> + <ButtonBaseDemo /> + </div> + </section> + <section> + <h2> Button Sizes</h2> + <div className="demo-container"> + <ButtonSizes /> + </div> + </section> + <section> + <h2> Color Buttons</h2> + <div className="demo-container"> + <ColorButtons /> + </div> + </section> + <section> + <h2> Contained Buttons</h2> + <div className="demo-container"> + <ContainedButtons /> + </div> + </section> + <section> + <h2> Customized Buttons</h2> + <div className="demo-container"> + <CustomizedButtons /> + </div> + </section> + <section> + <h2> Disable Elevation</h2> + <div className="demo-container"> + <DisableElevation /> + </div> + </section> + <section> + <h2> Icon Button Colors</h2> + <div className="demo-container"> + <IconButtonColors /> + </div> + </section> + <section> + <h2> Icon Button Sizes</h2> + <div className="demo-container"> + <IconButtonSizes /> + </div> + </section> + <section> + <h2> Icon Buttons</h2> + <div className="demo-container"> + <IconButtons /> + </div> + </section> + <section> + <h2> Icon Label Buttons</h2> + <div className="demo-container"> + <IconLabelButtons /> + </div> + </section> + <section> + <h2> Input File Upload</h2> + <div className="demo-container"> + <InputFileUpload /> + </div> + </section> + <section> + <h2> Loading Buttons</h2> + <div className="demo-container"> + <LoadingButtons /> + </div> + </section> + <section> + <h2> Loading Buttons Transition</h2> + <div className="demo-container"> + <LoadingButtonsTransition /> + </div> + </section> + <section> + <h2> Outlined Buttons</h2> + <div className="demo-container"> + <OutlinedButtons /> + </div> + </section> + <section> + <h2> Text Buttons</h2> + <div className="demo-container"> + <TextButtons /> + </div> + </section> + </React.Fragment> + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-floating-action-button/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-floating-action-button/page.tsx new file mode 100644 index 00000000000000..4e39c5f719b8dd --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-floating-action-button/page.tsx @@ -0,0 +1,37 @@ +'use client'; +import * as React from 'react'; +import FloatingActionButtonExtendedSize from '../../../../../../docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize'; +import FloatingActionButtonSize from '../../../../../../docs/data/material/components/floating-action-button/FloatingActionButtonSize'; +import FloatingActionButtonZoom from '../../../../../../docs/data/material/components/floating-action-button/FloatingActionButtonZoom'; +import FloatingActionButtons from '../../../../../../docs/data/material/components/floating-action-button/FloatingActionButtons'; + +export default function FloatingActionButton() { + return ( + <React.Fragment> + <section> + <h2> Floating Action Button Extended Size</h2> + <div className="demo-container"> + <FloatingActionButtonExtendedSize /> + </div> + </section> + <section> + <h2> Floating Action Button Size</h2> + <div className="demo-container"> + <FloatingActionButtonSize /> + </div> + </section> + <section> + <h2> Floating Action Button Zoom</h2> + <div className="demo-container"> + <FloatingActionButtonZoom /> + </div> + </section> + <section> + <h2> Floating Action Buttons</h2> + <div className="demo-container"> + <FloatingActionButtons /> + </div> + </section> + </React.Fragment> + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-pagination/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-pagination/page.tsx new file mode 100644 index 00000000000000..89723ca9e16b84 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-pagination/page.tsx @@ -0,0 +1,86 @@ +'use client'; +import * as React from 'react'; +import BasicPagination from '../../../../../../docs/data/material/components/pagination/BasicPagination'; +import CustomIcons from '../../../../../../docs/data/material/components/pagination/CustomIcons'; +import PaginationButtons from '../../../../../../docs/data/material/components/pagination/PaginationButtons'; +import PaginationControlled from '../../../../../../docs/data/material/components/pagination/PaginationControlled'; +import PaginationLink from '../../../../../../docs/data/material/components/pagination/PaginationLink'; +import PaginationOutlined from '../../../../../../docs/data/material/components/pagination/PaginationOutlined'; +import PaginationRanges from '../../../../../../docs/data/material/components/pagination/PaginationRanges'; +import PaginationRounded from '../../../../../../docs/data/material/components/pagination/PaginationRounded'; +import PaginationSize from '../../../../../../docs/data/material/components/pagination/PaginationSize'; +import TablePaginationDemo from '../../../../../../docs/data/material/components/pagination/TablePaginationDemo'; +import UsePagination from '../../../../../../docs/data/material/components/pagination/UsePagination'; + +export default function Pagination() { + return ( + <React.Fragment> + <section> + <h2> Basic Pagination</h2> + <div className="demo-container"> + <BasicPagination /> + </div> + </section> + <section> + <h2> Custom Icons</h2> + <div className="demo-container"> + <CustomIcons /> + </div> + </section> + <section> + <h2> Pagination Buttons</h2> + <div className="demo-container"> + <PaginationButtons /> + </div> + </section> + <section> + <h2> Pagination Controlled</h2> + <div className="demo-container"> + <PaginationControlled /> + </div> + </section> + <section> + <h2> Pagination Link</h2> + <div className="demo-container"> + <PaginationLink /> + </div> + </section> + <section> + <h2> Pagination Outlined</h2> + <div className="demo-container"> + <PaginationOutlined /> + </div> + </section> + <section> + <h2> Pagination Ranges</h2> + <div className="demo-container"> + <PaginationRanges /> + </div> + </section> + <section> + <h2> Pagination Rounded</h2> + <div className="demo-container"> + <PaginationRounded /> + </div> + </section> + <section> + <h2> Pagination Size</h2> + <div className="demo-container"> + <PaginationSize /> + </div> + </section> + <section> + <h2> Table Pagination Demo</h2> + <div className="demo-container"> + <TablePaginationDemo /> + </div> + </section> + <section> + <h2> Use Pagination</h2> + <div className="demo-container"> + <UsePagination /> + </div> + </section> + </React.Fragment> + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-progress/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-progress/page.tsx new file mode 100644 index 00000000000000..1a804f5d65e92a --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-progress/page.tsx @@ -0,0 +1,100 @@ +'use client'; +import * as React from 'react'; +import CircularColor from '../../../../../../docs/data/material/components/progress/CircularColor'; +import CircularDeterminate from '../../../../../../docs/data/material/components/progress/CircularDeterminate'; +import CircularIndeterminate from '../../../../../../docs/data/material/components/progress/CircularIndeterminate'; +import CircularIntegration from '../../../../../../docs/data/material/components/progress/CircularIntegration'; +import CircularUnderLoad from '../../../../../../docs/data/material/components/progress/CircularUnderLoad'; +import CircularWithValueLabel from '../../../../../../docs/data/material/components/progress/CircularWithValueLabel'; +import CustomizedProgressBars from '../../../../../../docs/data/material/components/progress/CustomizedProgressBars'; +import DelayingAppearance from '../../../../../../docs/data/material/components/progress/DelayingAppearance'; +import LinearBuffer from '../../../../../../docs/data/material/components/progress/LinearBuffer'; +import LinearColor from '../../../../../../docs/data/material/components/progress/LinearColor'; +import LinearDeterminate from '../../../../../../docs/data/material/components/progress/LinearDeterminate'; +import LinearIndeterminate from '../../../../../../docs/data/material/components/progress/LinearIndeterminate'; +import LinearWithValueLabel from '../../../../../../docs/data/material/components/progress/LinearWithValueLabel'; + +export default function Progress() { + return ( + <React.Fragment> + <section> + <h2> Circular Color</h2> + <div className="demo-container"> + <CircularColor /> + </div> + </section> + <section> + <h2> Circular Determinate</h2> + <div className="demo-container"> + <CircularDeterminate /> + </div> + </section> + <section> + <h2> Circular Indeterminate</h2> + <div className="demo-container"> + <CircularIndeterminate /> + </div> + </section> + <section> + <h2> Circular Integration</h2> + <div className="demo-container"> + <CircularIntegration /> + </div> + </section> + <section> + <h2> Circular Under Load</h2> + <div className="demo-container"> + <CircularUnderLoad /> + </div> + </section> + <section> + <h2> Circular With Value Label</h2> + <div className="demo-container"> + <CircularWithValueLabel /> + </div> + </section> + <section> + <h2> Customized Progress Bars</h2> + <div className="demo-container"> + <CustomizedProgressBars /> + </div> + </section> + <section> + <h2> Delaying Appearance</h2> + <div className="demo-container"> + <DelayingAppearance /> + </div> + </section> + <section> + <h2> Linear Buffer</h2> + <div className="demo-container"> + <LinearBuffer /> + </div> + </section> + <section> + <h2> Linear Color</h2> + <div className="demo-container"> + <LinearColor /> + </div> + </section> + <section> + <h2> Linear Determinate</h2> + <div className="demo-container"> + <LinearDeterminate /> + </div> + </section> + <section> + <h2> Linear Indeterminate</h2> + <div className="demo-container"> + <LinearIndeterminate /> + </div> + </section> + <section> + <h2> Linear With Value Label</h2> + <div className="demo-container"> + <LinearWithValueLabel /> + </div> + </section> + </React.Fragment> + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-toggle-button/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-toggle-button/page.tsx new file mode 100644 index 00000000000000..1ff789e4f6d4bf --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-toggle-button/page.tsx @@ -0,0 +1,65 @@ +'use client'; +import * as React from 'react'; +import ColorToggleButton from '../../../../../../docs/data/material/components/toggle-button/ColorToggleButton'; +import CustomizedDividers from '../../../../../../docs/data/material/components/toggle-button/CustomizedDividers'; +import StandaloneToggleButton from '../../../../../../docs/data/material/components/toggle-button/StandaloneToggleButton'; +import ToggleButtonNotEmpty from '../../../../../../docs/data/material/components/toggle-button/ToggleButtonNotEmpty'; +import ToggleButtonSizes from '../../../../../../docs/data/material/components/toggle-button/ToggleButtonSizes'; +import ToggleButtons from '../../../../../../docs/data/material/components/toggle-button/ToggleButtons'; +import ToggleButtonsMultiple from '../../../../../../docs/data/material/components/toggle-button/ToggleButtonsMultiple'; +import VerticalToggleButtons from '../../../../../../docs/data/material/components/toggle-button/VerticalToggleButtons'; + +export default function ToggleButton() { + return ( + <React.Fragment> + <section> + <h2> Color Toggle Button</h2> + <div className="demo-container"> + <ColorToggleButton /> + </div> + </section> + <section> + <h2> Customized Dividers</h2> + <div className="demo-container"> + <CustomizedDividers /> + </div> + </section> + <section> + <h2> Standalone Toggle Button</h2> + <div className="demo-container"> + <StandaloneToggleButton /> + </div> + </section> + <section> + <h2> Toggle Button Not Empty</h2> + <div className="demo-container"> + <ToggleButtonNotEmpty /> + </div> + </section> + <section> + <h2> Toggle Button Sizes</h2> + <div className="demo-container"> + <ToggleButtonSizes /> + </div> + </section> + <section> + <h2> Toggle Buttons</h2> + <div className="demo-container"> + <ToggleButtons /> + </div> + </section> + <section> + <h2> Toggle Buttons Multiple</h2> + <div className="demo-container"> + <ToggleButtonsMultiple /> + </div> + </section> + <section> + <h2> Vertical Toggle Buttons</h2> + <div className="demo-container"> + <VerticalToggleButtons /> + </div> + </section> + </React.Fragment> + ); +} diff --git a/apps/pigment-css-next-app/src/assets/mui.svg b/apps/pigment-css-next-app/src/assets/mui.svg new file mode 100644 index 00000000000000..dea1f22374461e --- /dev/null +++ b/apps/pigment-css-next-app/src/assets/mui.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="36" height="32" viewBox="0 0 36 32" fill="none"><path d="M30.343 21.976a1 1 0 00.502-.864l.018-5.787a1 1 0 01.502-.864l3.137-1.802a1 1 0 011.498.867v10.521a1 1 0 01-.502.867l-11.839 6.8a1 1 0 01-.994.001l-9.291-5.314a1 1 0 01-.504-.868v-5.305c0-.006.007-.01.013-.007.005.003.012 0 .012-.007v-.006c0-.004.002-.008.006-.01l7.652-4.396c.007-.004.004-.015-.004-.015a.008.008 0 01-.008-.008l.015-5.201a1 1 0 00-1.5-.87l-5.687 3.277a1 1 0 01-.998 0L6.666 9.7a1 1 0 00-1.499.866v9.4a1 1 0 01-1.496.869l-3.166-1.81a1 1 0 01-.504-.87l.028-16.43A1 1 0 011.527.86l10.845 6.229a1 1 0 00.996 0L24.21.86a1 1 0 011.498.868v16.434a1 1 0 01-.501.867l-5.678 3.27a1 1 0 00.004 1.735l3.132 1.783a1 1 0 00.993-.002l6.685-3.839zM31 7.234a1 1 0 001.514.857l3-1.8A1 1 0 0036 5.434V1.766A1 1 0 0034.486.91l-3 1.8a1 1 0 00-.486.857v3.668z" fill="#007FFF" /></svg> diff --git a/apps/pigment-css-vite-app/README.md b/apps/pigment-css-vite-app/README.md index 40f1dcc6ced468..a9491647bf3268 100644 --- a/apps/pigment-css-vite-app/README.md +++ b/apps/pigment-css-vite-app/README.md @@ -1,27 +1,27 @@ -# Vite App +# Pigment CSS with Vite - Demo app -A sample vite application to test the working of zero runtime library. +This is a Pigment CSS with [Vite](https://vitejs.dev/) project. This project is not part of the workspace yet. ## How to run -You can either run `pnpm build` command to build all the packages, or you need to build, the the minimum - +You can either run `pnpm build` to build all packages or else build the two most important ones: 1. `@pigment-css/react` 2. `@pigment-css/vite-plugin` -Make sure you have also run `pnpm release:build` at least once because we also use `@mui/material` and `@mui/system` packages. On subsequent runs, you can only build the above packages using - +Make sure to run `pnpm release:build` at least once because the project uses the `@mui/material` and `@mui/system` packages. On subsequent runs, you can build only the above packages using: ```bash pnpm build ``` -After building, you can run the project by changing into the directory and then +After building, you can run the project by changing into the directory and then: 1. Install dependencies using `pnpm install` 2. Start the dev server using `pnpm dev` 3. Build the code using `pnpm build` -Optionally, before running the dev server, you can run `pnpm vite optimize --force` if it logged some error during `pnpm vite`. +Optionally, before running the dev server, you can run `pnpm vite optimize --force` if it logs an error while running `pnpm vite`. -If you see and error like package `@pigment-css/react` not found, add it as a peer-dependency in `@mui/material`'s `package.json` file and run `pnpm build` and `pnpm install` again. Make sure to not push this change to git. +If you encounter an error that says "package `@pigment-css/react` not found," add it as a peer dependency in the `package.json` for `@mui/material`, then run `pnpm build` and `pnpm install` again. Make sure to not push this change to git. diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json index 144b6e3d2c92a7..1e662ef5ad83cf 100644 --- a/apps/pigment-css-vite-app/package.json +++ b/apps/pigment-css-vite-app/package.json @@ -12,6 +12,7 @@ "@pigment-css/react": "workspace:^", "@mui/utils": "workspace:^", "@mui/base": "workspace:^", + "@mui/lab": "workspace:^", "@mui/material": "workspace:^", "@mui/system": "workspace:^", "@mui/icons-material": "workspace:^", @@ -20,8 +21,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-error-boundary": "^4.0.13", - "react-router": "^6.22.1", - "react-router-dom": "^6.22.1" + "react-router": "^6.22.3", + "react-router-dom": "^6.22.3" }, "devDependencies": { "@babel/preset-react": "^7.24.1", @@ -32,8 +33,8 @@ "@vitejs/plugin-react": "^4.2.1", "postcss": "^8.4.38", "postcss-combine-media-query": "^1.0.1", - "vite": "5.2.2", - "vite-plugin-pages": "^0.32.0" + "vite": "5.2.8", + "vite-plugin-pages": "^0.32.1" }, "nx": { "targets": { @@ -41,6 +42,11 @@ "dependsOn": [ "^build" ] + }, + "dev": { + "dependsOn": [ + "^build" + ] } } } diff --git a/apps/pigment-css-vite-app/src/main.tsx b/apps/pigment-css-vite-app/src/main.tsx index 9760ba4a72aef3..15e708be89b719 100644 --- a/apps/pigment-css-vite-app/src/main.tsx +++ b/apps/pigment-css-vite-app/src/main.tsx @@ -5,7 +5,7 @@ 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 Box from '@pigment-css/react/Box'; import { ErrorBoundary } from 'react-error-boundary'; import routes from '~react-pages'; import '@pigment-css/react/styles.css'; 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 index 4f78230508237e..9e7fadd4922b39 100644 --- a/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx +++ b/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useLocation, matchRoutes, Link } from 'react-router-dom'; -import { css } from '@pigment-css/react'; +import Box from '@pigment-css/react/Box'; import routes from '~react-pages'; import Layout from '../../Layout'; @@ -17,8 +17,9 @@ export default function MaterialIndex() { <div> <h1>Material UI Components</h1> <nav> - <ul - className={css({ + <Box + as="ul" + sx={{ margin: 0, marginBlock: '1rem', padding: 0, @@ -26,24 +27,25 @@ export default function MaterialIndex() { display: 'flex', flexDirection: 'column', gap: '0.5rem', - })} + }} > {childRoutes .filter((item) => !!item.path) .map((item) => ( <li key={item.path}> - <Link + <Box + as={Link} to={`/material-ui/${item.path}`} - className={css({ + sx={{ textDecoration: 'underline', fontSize: '17px', - })} + }} > {item.path} - </Link> + </Box> </li> ))} - </ul> + </Box> </nav> </div> </Layout> 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 ( + <MaterialUILayout> + <h1>AppBar</h1> + <section> + <h2> Back To Top</h2> + <div className="demo-container"> + <BackToTop /> + </div> + </section> + <section> + <h2> Bottom App Bar</h2> + <div className="demo-container"> + <BottomAppBar /> + </div> + </section> + <section> + <h2> Button App Bar</h2> + <div className="demo-container"> + <ButtonAppBar /> + </div> + </section> + <section> + <h2> Dense App Bar</h2> + <div className="demo-container"> + <DenseAppBar /> + </div> + </section> + <section> + <h2> Drawer App Bar</h2> + <div className="demo-container"> + <DrawerAppBar /> + </div> + </section> + <section> + <h2> Elevate App Bar</h2> + <div className="demo-container"> + <ElevateAppBar /> + </div> + </section> + <section> + <h2> Enable Color On Dark App Bar</h2> + <div className="demo-container"> + <EnableColorOnDarkAppBar /> + </div> + </section> + <section> + <h2> Hide App Bar</h2> + <div className="demo-container"> + <HideAppBar /> + </div> + </section> + <section> + <h2> Menu App Bar</h2> + <div className="demo-container"> + <MenuAppBar /> + </div> + </section> + <section> + <h2> Primary Search App Bar</h2> + <div className="demo-container"> + <PrimarySearchAppBar /> + </div> + </section> + <section> + <h2> Prominent App Bar</h2> + <div className="demo-container"> + <ProminentAppBar /> + </div> + </section> + <section> + <h2> Responsive App Bar</h2> + <div className="demo-container"> + <ResponsiveAppBar /> + </div> + </section> + <section> + <h2> Search App Bar</h2> + <div className="demo-container"> + <SearchAppBar /> + </div> + </section> + </MaterialUILayout> + ); +} 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 ( + <MaterialUILayout> + <h1>Button-group</h1> + <section> + <h2> Basic Button Group</h2> + <div className="demo-container"> + <BasicButtonGroup /> + </div> + </section> + <section> + <h2> Disable Elevation</h2> + <div className="demo-container"> + <DisableElevation /> + </div> + </section> + <section> + <h2> Group Orientation</h2> + <div className="demo-container"> + <GroupOrientation /> + </div> + </section> + <section> + <h2> Group Sizes Colors</h2> + <div className="demo-container"> + <GroupSizesColors /> + </div> + </section> + <section> + <h2> Loading Button Group</h2> + <div className="demo-container"> + <LoadingButtonGroup /> + </div> + </section> + <section> + <h2> Split Button</h2> + <div className="demo-container"> + <SplitButton /> + </div> + </section> + <section> + <h2> Variant Button Group</h2> + <div className="demo-container"> + <VariantButtonGroup /> + </div> + </section> + </MaterialUILayout> + ); +} 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 ( + <MaterialUILayout> + <h1>Buttons</h1> + <section> + <h2> Basic Buttons</h2> + <div className="demo-container"> + <BasicButtons /> + </div> + </section> + <section> + <h2> Button Base Demo</h2> + <div className="demo-container"> + <ButtonBaseDemo /> + </div> + </section> + <section> + <h2> Button Sizes</h2> + <div className="demo-container"> + <ButtonSizes /> + </div> + </section> + <section> + <h2> Color Buttons</h2> + <div className="demo-container"> + <ColorButtons /> + </div> + </section> + <section> + <h2> Contained Buttons</h2> + <div className="demo-container"> + <ContainedButtons /> + </div> + </section> + <section> + <h2> Customized Buttons</h2> + <div className="demo-container"> + <CustomizedButtons /> + </div> + </section> + <section> + <h2> Disable Elevation</h2> + <div className="demo-container"> + <DisableElevation /> + </div> + </section> + <section> + <h2> Icon Button Colors</h2> + <div className="demo-container"> + <IconButtonColors /> + </div> + </section> + <section> + <h2> Icon Button Sizes</h2> + <div className="demo-container"> + <IconButtonSizes /> + </div> + </section> + <section> + <h2> Icon Buttons</h2> + <div className="demo-container"> + <IconButtons /> + </div> + </section> + <section> + <h2> Icon Label Buttons</h2> + <div className="demo-container"> + <IconLabelButtons /> + </div> + </section> + <section> + <h2> Input File Upload</h2> + <div className="demo-container"> + <InputFileUpload /> + </div> + </section> + <section> + <h2> Loading Buttons</h2> + <div className="demo-container"> + <LoadingButtons /> + </div> + </section> + <section> + <h2> Loading Buttons Transition</h2> + <div className="demo-container"> + <LoadingButtonsTransition /> + </div> + </section> + <section> + <h2> Outlined Buttons</h2> + <div className="demo-container"> + <OutlinedButtons /> + </div> + </section> + <section> + <h2> Text Buttons</h2> + <div className="demo-container"> + <TextButtons /> + </div> + </section> + </MaterialUILayout> + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-floating-action-button.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-floating-action-button.tsx new file mode 100644 index 00000000000000..4ea79e2f36f093 --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-floating-action-button.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import FloatingActionButtonExtendedSize from '../../../../../docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.tsx'; +import FloatingActionButtonSize from '../../../../../docs/data/material/components/floating-action-button/FloatingActionButtonSize.tsx'; +import FloatingActionButtonZoom from '../../../../../docs/data/material/components/floating-action-button/FloatingActionButtonZoom.tsx'; +import FloatingActionButtons from '../../../../../docs/data/material/components/floating-action-button/FloatingActionButtons.tsx'; + +export default function FloatingActionButton() { + return ( + <MaterialUILayout> + <h1>FloatingActionButton</h1> + <section> + <h2> Floating Action Button Extended Size</h2> + <div className="demo-container"> + <FloatingActionButtonExtendedSize /> + </div> + </section> + <section> + <h2> Floating Action Button Size</h2> + <div className="demo-container"> + <FloatingActionButtonSize /> + </div> + </section> + <section> + <h2> Floating Action Button Zoom</h2> + <div className="demo-container"> + <FloatingActionButtonZoom /> + </div> + </section> + <section> + <h2> Floating Action Buttons</h2> + <div className="demo-container"> + <FloatingActionButtons /> + </div> + </section> + </MaterialUILayout> + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-pagination.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-pagination.tsx new file mode 100644 index 00000000000000..0c98e85fc85307 --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-pagination.tsx @@ -0,0 +1,87 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import BasicPagination from '../../../../../docs/data/material/components/pagination/BasicPagination.tsx'; +import CustomIcons from '../../../../../docs/data/material/components/pagination/CustomIcons.tsx'; +import PaginationButtons from '../../../../../docs/data/material/components/pagination/PaginationButtons.tsx'; +import PaginationControlled from '../../../../../docs/data/material/components/pagination/PaginationControlled.tsx'; +import PaginationLink from '../../../../../docs/data/material/components/pagination/PaginationLink.tsx'; +import PaginationOutlined from '../../../../../docs/data/material/components/pagination/PaginationOutlined.tsx'; +import PaginationRanges from '../../../../../docs/data/material/components/pagination/PaginationRanges.tsx'; +import PaginationRounded from '../../../../../docs/data/material/components/pagination/PaginationRounded.tsx'; +import PaginationSize from '../../../../../docs/data/material/components/pagination/PaginationSize.tsx'; +import TablePaginationDemo from '../../../../../docs/data/material/components/pagination/TablePaginationDemo.tsx'; +import UsePagination from '../../../../../docs/data/material/components/pagination/UsePagination.tsx'; + +export default function Pagination() { + return ( + <MaterialUILayout> + <h1>Pagination</h1> + <section> + <h2> Basic Pagination</h2> + <div className="demo-container"> + <BasicPagination /> + </div> + </section> + <section> + <h2> Custom Icons</h2> + <div className="demo-container"> + <CustomIcons /> + </div> + </section> + <section> + <h2> Pagination Buttons</h2> + <div className="demo-container"> + <PaginationButtons /> + </div> + </section> + <section> + <h2> Pagination Controlled</h2> + <div className="demo-container"> + <PaginationControlled /> + </div> + </section> + <section> + <h2> Pagination Link</h2> + <div className="demo-container"> + <PaginationLink /> + </div> + </section> + <section> + <h2> Pagination Outlined</h2> + <div className="demo-container"> + <PaginationOutlined /> + </div> + </section> + <section> + <h2> Pagination Ranges</h2> + <div className="demo-container"> + <PaginationRanges /> + </div> + </section> + <section> + <h2> Pagination Rounded</h2> + <div className="demo-container"> + <PaginationRounded /> + </div> + </section> + <section> + <h2> Pagination Size</h2> + <div className="demo-container"> + <PaginationSize /> + </div> + </section> + <section> + <h2> Table Pagination Demo</h2> + <div className="demo-container"> + <TablePaginationDemo /> + </div> + </section> + <section> + <h2> Use Pagination</h2> + <div className="demo-container"> + <UsePagination /> + </div> + </section> + </MaterialUILayout> + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx new file mode 100644 index 00000000000000..b1ecf1ebee01ba --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx @@ -0,0 +1,101 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import CircularColor from '../../../../../docs/data/material/components/progress/CircularColor.tsx'; +import CircularDeterminate from '../../../../../docs/data/material/components/progress/CircularDeterminate.tsx'; +import CircularIndeterminate from '../../../../../docs/data/material/components/progress/CircularIndeterminate.tsx'; +import CircularIntegration from '../../../../../docs/data/material/components/progress/CircularIntegration.tsx'; +import CircularUnderLoad from '../../../../../docs/data/material/components/progress/CircularUnderLoad.tsx'; +import CircularWithValueLabel from '../../../../../docs/data/material/components/progress/CircularWithValueLabel.tsx'; +import CustomizedProgressBars from '../../../../../docs/data/material/components/progress/CustomizedProgressBars.tsx'; +import DelayingAppearance from '../../../../../docs/data/material/components/progress/DelayingAppearance.tsx'; +import LinearBuffer from '../../../../../docs/data/material/components/progress/LinearBuffer.tsx'; +import LinearColor from '../../../../../docs/data/material/components/progress/LinearColor.tsx'; +import LinearDeterminate from '../../../../../docs/data/material/components/progress/LinearDeterminate.tsx'; +import LinearIndeterminate from '../../../../../docs/data/material/components/progress/LinearIndeterminate.tsx'; +import LinearWithValueLabel from '../../../../../docs/data/material/components/progress/LinearWithValueLabel.tsx'; + +export default function Progress() { + return ( + <MaterialUILayout> + <h1>Progress</h1> + <section> + <h2> Circular Color</h2> + <div className="demo-container"> + <CircularColor /> + </div> + </section> + <section> + <h2> Circular Determinate</h2> + <div className="demo-container"> + <CircularDeterminate /> + </div> + </section> + <section> + <h2> Circular Indeterminate</h2> + <div className="demo-container"> + <CircularIndeterminate /> + </div> + </section> + <section> + <h2> Circular Integration</h2> + <div className="demo-container"> + <CircularIntegration /> + </div> + </section> + <section> + <h2> Circular Under Load</h2> + <div className="demo-container"> + <CircularUnderLoad /> + </div> + </section> + <section> + <h2> Circular With Value Label</h2> + <div className="demo-container"> + <CircularWithValueLabel /> + </div> + </section> + <section> + <h2> Customized Progress Bars</h2> + <div className="demo-container"> + <CustomizedProgressBars /> + </div> + </section> + <section> + <h2> Delaying Appearance</h2> + <div className="demo-container"> + <DelayingAppearance /> + </div> + </section> + <section> + <h2> Linear Buffer</h2> + <div className="demo-container"> + <LinearBuffer /> + </div> + </section> + <section> + <h2> Linear Color</h2> + <div className="demo-container"> + <LinearColor /> + </div> + </section> + <section> + <h2> Linear Determinate</h2> + <div className="demo-container"> + <LinearDeterminate /> + </div> + </section> + <section> + <h2> Linear Indeterminate</h2> + <div className="demo-container"> + <LinearIndeterminate /> + </div> + </section> + <section> + <h2> Linear With Value Label</h2> + <div className="demo-container"> + <LinearWithValueLabel /> + </div> + </section> + </MaterialUILayout> + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-toggle-button.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-toggle-button.tsx new file mode 100644 index 00000000000000..1e55ee245bf656 --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-toggle-button.tsx @@ -0,0 +1,66 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import ColorToggleButton from '../../../../../docs/data/material/components/toggle-button/ColorToggleButton.tsx'; +import CustomizedDividers from '../../../../../docs/data/material/components/toggle-button/CustomizedDividers.tsx'; +import StandaloneToggleButton from '../../../../../docs/data/material/components/toggle-button/StandaloneToggleButton.tsx'; +import ToggleButtonNotEmpty from '../../../../../docs/data/material/components/toggle-button/ToggleButtonNotEmpty.tsx'; +import ToggleButtonSizes from '../../../../../docs/data/material/components/toggle-button/ToggleButtonSizes.tsx'; +import ToggleButtons from '../../../../../docs/data/material/components/toggle-button/ToggleButtons.tsx'; +import ToggleButtonsMultiple from '../../../../../docs/data/material/components/toggle-button/ToggleButtonsMultiple.tsx'; +import VerticalToggleButtons from '../../../../../docs/data/material/components/toggle-button/VerticalToggleButtons.tsx'; + +export default function ToggleButton() { + return ( + <MaterialUILayout> + <h1>ToggleButton</h1> + <section> + <h2> Color Toggle Button</h2> + <div className="demo-container"> + <ColorToggleButton /> + </div> + </section> + <section> + <h2> Customized Dividers</h2> + <div className="demo-container"> + <CustomizedDividers /> + </div> + </section> + <section> + <h2> Standalone Toggle Button</h2> + <div className="demo-container"> + <StandaloneToggleButton /> + </div> + </section> + <section> + <h2> Toggle Button Not Empty</h2> + <div className="demo-container"> + <ToggleButtonNotEmpty /> + </div> + </section> + <section> + <h2> Toggle Button Sizes</h2> + <div className="demo-container"> + <ToggleButtonSizes /> + </div> + </section> + <section> + <h2> Toggle Buttons</h2> + <div className="demo-container"> + <ToggleButtons /> + </div> + </section> + <section> + <h2> Toggle Buttons Multiple</h2> + <div className="demo-container"> + <ToggleButtonsMultiple /> + </div> + </section> + <section> + <h2> Vertical Toggle Buttons</h2> + <div className="demo-container"> + <VerticalToggleButtons /> + </div> + </section> + </MaterialUILayout> + ); +} diff --git a/apps/pnpm-lock.yaml b/apps/pnpm-lock.yaml deleted file mode 100644 index ecd3a0782023dc..00000000000000 --- a/apps/pnpm-lock.yaml +++ /dev/null @@ -1,9205 +0,0 @@ -lockfileVersion: '6.0' - -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false - -importers: - - ../packages-internal/scripts: - dependencies: - '@babel/core': - specifier: ^7.23.9 - version: 7.23.9 - '@babel/plugin-syntax-class-properties': - specifier: ^7.12.13 - version: 7.12.13(@babel/core@7.23.9) - '@babel/plugin-syntax-jsx': - specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) - '@babel/plugin-syntax-typescript': - specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) - '@babel/types': - specifier: ^7.23.9 - version: 7.23.9 - '@mui-internal/docs-utils': - specifier: workspace:^ - version: link:../../packages/docs-utils - doctrine: - specifier: ^3.0.0 - version: 3.0.0 - lodash: - specifier: ^4.17.21 - version: 4.17.21 - typescript: - specifier: ^5.3.3 - version: 5.3.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) - '@types/babel__core': - specifier: ^7.20.5 - version: 7.20.5 - '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 - '@types/doctrine': - specifier: ^0.0.9 - version: 0.0.9 - '@types/lodash': - specifier: ^4.14.202 - version: 4.14.202 - '@types/node': - specifier: ^18.19.22 - version: 18.19.22 - '@types/prettier': - specifier: ^2.7.3 - version: 2.7.3 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - '@types/uuid': - specifier: ^9.0.8 - version: 9.0.8 - chai: - specifier: ^4.4.1 - version: 4.4.1 - fast-glob: - specifier: ^3.3.2 - version: 3.3.2 - prettier: - specifier: ^3.2.5 - version: 3.2.5 - rimraf: - specifier: ^5.0.5 - version: 5.0.5 - - ../packages/docs-utils: - dependencies: - rimraf: - specifier: ^5.0.5 - version: 5.0.5 - typescript: - specifier: ^5.3.3 - version: 5.3.3 - - ../packages/mui-babel-macros: - dependencies: - '@babel/helper-module-imports': - specifier: ^7.22.15 - version: 7.22.15 - '@babel/runtime': - specifier: ^7.23.9 - version: 7.23.9 - '@mui/utils': - specifier: ^5.0.0 - version: link:../mui-utils/build - babel-plugin-macros: - specifier: ^3.1.0 - version: 3.1.0 - devDependencies: - '@mui/internal-babel-macros': - specifier: workspace:* - version: 'link:' - '@types/babel-plugin-macros': - specifier: ^3.1.3 - version: 3.1.3 - '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 - '@types/mocha': - specifier: ^10.0.6 - version: 10.0.6 - '@types/node': - specifier: ^18.19.22 - version: 18.19.22 - babel-plugin-tester: - specifier: ^11.0.4 - version: 11.0.4(@babel/core@7.23.9) - chai: - specifier: ^4.4.1 - version: 4.4.1 - - ../packages/mui-base: - dependencies: - '@babel/runtime': - specifier: ^7.23.9 - version: 7.23.9 - '@floating-ui/react-dom': - specifier: ^2.0.8 - version: 2.0.8(react-dom@18.2.0)(react@18.2.0) - '@mui/types': - specifier: workspace:^ - version: link:../mui-types/build - '@mui/utils': - specifier: workspace:^ - version: link:../mui-utils/build - '@popperjs/core': - specifier: ^2.11.8 - version: 2.11.8 - clsx: - specifier: ^2.1.0 - version: 2.1.0 - prop-types: - specifier: ^15.8.1 - version: 15.8.1 - devDependencies: - '@mui-internal/test-utils': - specifier: workspace:^ - version: link:../test-utils - '@mui/internal-babel-macros': - 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) - '@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 - '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 - '@types/react': - specifier: 18.2.55 - version: 18.2.55 - '@types/react-dom': - specifier: 18.2.19 - version: 18.2.19 - '@types/sinon': - specifier: ^10.0.20 - version: 10.0.20 - chai: - specifier: ^4.4.1 - version: 4.4.1 - fast-glob: - specifier: ^3.3.2 - version: 3.3.2 - lodash: - specifier: ^4.17.21 - version: 4.17.21 - react: - specifier: ^18.2.0 - version: 18.2.0 - react-dom: - specifier: ^18.2.0 - version: 18.2.0(react@18.2.0) - sinon: - specifier: ^15.2.0 - version: 15.2.0 - publishDirectory: build - - ../packages/mui-codemod: - dependencies: - '@babel/core': - specifier: ^7.23.9 - version: 7.23.9 - '@babel/runtime': - specifier: ^7.23.9 - version: 7.23.9 - '@babel/traverse': - specifier: ^7.23.9 - version: 7.23.9 - jscodeshift: - specifier: ^0.13.1 - version: 0.13.1(@babel/preset-env@7.23.9) - jscodeshift-add-imports: - specifier: ^1.0.10 - version: 1.0.10(jscodeshift@0.13.1) - postcss: - specifier: ^8.4.35 - version: 8.4.35 - postcss-cli: - specifier: ^8.3.1 - version: 8.3.1(postcss@8.4.35) - yargs: - specifier: ^17.7.2 - version: 17.7.2 - devDependencies: - '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 - '@types/jscodeshift': - specifier: 0.11.5 - version: 0.11.5 - chai: - specifier: ^4.4.1 - version: 4.4.1 - publishDirectory: build - - ../packages/mui-core-downloads-tracker: - publishDirectory: build - - ../packages/mui-docs: - dependencies: - '@babel/runtime': - specifier: ^7.23.9 - version: 7.23.9 - '@mui/base': - specifier: workspace:* - version: link:../mui-base/build - '@mui/material': - specifier: workspace:^ - version: link:../mui-material/build - '@mui/utils': - specifier: workspace:^ - version: link:../mui-utils/build - clsx: - specifier: ^2.1.0 - version: 2.1.0 - nprogress: - specifier: ^0.2.0 - version: 0.2.0 - prop-types: - specifier: ^15.8.1 - version: 15.8.1 - devDependencies: - '@types/node': - specifier: ^18.19.22 - version: 18.19.22 - '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - next: - specifier: ^13.5.1 - version: 13.5.1(react-dom@18.2.0)(react@18.2.0) - react: - specifier: ^18.2.0 - version: 18.2.0 - publishDirectory: build - - ../packages/mui-envinfo: - dependencies: - envinfo: - specifier: ^7.11.1 - version: 7.11.1 - devDependencies: - '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 - chai: - specifier: ^4.4.1 - version: 4.4.1 - fs-extra: - specifier: ^11.2.0 - version: 11.2.0 - - ../packages/mui-icons-material: - dependencies: - '@babel/runtime': - specifier: ^7.23.9 - version: 7.23.9 - devDependencies: - '@mui/icons-material': - specifier: workspace:* - version: link:build - '@mui/internal-waterfall': - specifier: workspace:^ - version: link:../waterfall - '@mui/material': - specifier: workspace:^ - version: link:../mui-material/build - '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - chai: - specifier: ^4.4.1 - version: 4.4.1 - chalk: - specifier: ^5.3.0 - version: 5.3.0 - cross-fetch: - specifier: ^4.0.0 - version: 4.0.0 - fast-glob: - specifier: ^3.3.2 - version: 3.3.2 - fs-extra: - specifier: ^11.2.0 - version: 11.2.0 - lodash: - specifier: ^4.17.21 - version: 4.17.21 - mustache: - specifier: ^4.2.0 - version: 4.2.0 - react: - specifier: ^18.2.0 - version: 18.2.0 - rimraf: - specifier: ^5.0.5 - version: 5.0.5 - shx: - specifier: ^0.3.4 - version: 0.3.4 - svgo: - specifier: ^3.2.0 - version: 3.2.0 - yargs: - specifier: ^17.7.2 - version: 17.7.2 - publishDirectory: build - - ../packages/mui-joy: - dependencies: - '@babel/runtime': - specifier: ^7.23.9 - version: 7.23.9 - '@emotion/react': - specifier: ^11.5.0 - version: 11.11.3(@types/react@18.2.55)(react@18.2.0) - '@emotion/styled': - specifier: ^11.3.0 - version: 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.55)(react@18.2.0) - '@mui/base': - specifier: workspace:* - version: link:../mui-base/build - '@mui/core-downloads-tracker': - specifier: workspace:^ - version: link:../mui-core-downloads-tracker/build - '@mui/system': - specifier: workspace:^ - version: link:../mui-system/build - '@mui/types': - specifier: workspace:^ - version: link:../mui-types/build - '@mui/utils': - specifier: workspace:^ - version: link:../mui-utils/build - clsx: - specifier: ^2.1.0 - version: 2.1.0 - prop-types: - specifier: ^15.8.1 - version: 15.8.1 - devDependencies: - '@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 - '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - '@types/react-dom': - specifier: ^18.2.19 - version: 18.2.19 - '@types/sinon': - specifier: ^10.0.20 - version: 10.0.20 - chai: - specifier: ^4.4.1 - version: 4.4.1 - fast-glob: - specifier: ^3.3.2 - version: 3.3.2 - lodash: - specifier: ^4.17.21 - version: 4.17.21 - next: - specifier: ^13.4.19 - version: 13.5.1(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) - sinon: - specifier: ^15.2.0 - version: 15.2.0 - publishDirectory: build - - ../packages/mui-lab: - dependencies: - '@babel/runtime': - specifier: ^7.23.9 - version: 7.23.9 - '@emotion/react': - specifier: ^11.5.0 - version: 11.11.3(@types/react@18.2.55)(react@18.2.0) - '@emotion/styled': - specifier: ^11.3.0 - version: 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.55)(react@18.2.0) - '@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 - '@mui/types': - specifier: workspace:^ - version: link:../mui-types/build - '@mui/utils': - specifier: workspace:^ - version: link:../mui-utils/build - clsx: - specifier: ^2.1.0 - version: 2.1.0 - prop-types: - specifier: ^15.8.1 - version: 15.8.1 - devDependencies: - '@mui-internal/test-utils': - specifier: workspace:^ - version: link:../test-utils - '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 - '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - '@types/react-dom': - specifier: ^18.2.19 - version: 18.2.19 - '@types/sinon': - specifier: ^10.0.20 - version: 10.0.20 - chai: - specifier: ^4.4.1 - version: 4.4.1 - react: - specifier: ^18.2.0 - version: 18.2.0 - react-dom: - specifier: ^18.2.0 - version: 18.2.0(react@18.2.0) - sinon: - specifier: ^15.2.0 - version: 15.2.0 - publishDirectory: build - - ../packages/mui-material: - dependencies: - '@babel/runtime': - specifier: ^7.23.9 - version: 7.23.9 - '@emotion/react': - specifier: ^11.5.0 - version: 11.11.3(@types/react@18.2.55)(react@18.2.0) - '@emotion/styled': - specifier: ^11.3.0 - version: 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.55)(react@18.2.0) - '@mui/base': - specifier: workspace:* - version: link:../mui-base/build - '@mui/core-downloads-tracker': - specifier: workspace:^ - version: link:../mui-core-downloads-tracker/build - '@mui/system': - specifier: workspace:^ - version: link:../mui-system/build - '@mui/types': - specifier: workspace:^ - version: link:../mui-types/build - '@mui/utils': - specifier: workspace:^ - version: link:../mui-utils/build - '@types/react-transition-group': - specifier: ^4.4.10 - version: 4.4.10 - clsx: - specifier: ^2.1.0 - version: 2.1.0 - csstype: - specifier: ^3.1.3 - version: 3.1.3 - prop-types: - specifier: ^15.8.1 - version: 15.8.1 - react-is: - specifier: ^18.2.0 - version: 18.2.0 - react-transition-group: - specifier: ^4.4.5 - version: 4.4.5(react-dom@18.2.0)(react@18.2.0) - devDependencies: - '@mui-internal/test-utils': - specifier: workspace:^ - version: link:../test-utils - '@mui/internal-babel-macros': - specifier: workspace:^ - version: link:../mui-babel-macros - '@popperjs/core': - specifier: ^2.11.8 - version: 2.11.8 - '@rollup/plugin-replace': - specifier: ^5.0.5 - version: 5.0.5(rollup@3.29.4) - '@testing-library/dom': - specifier: ^9.3.4 - version: 9.3.4 - '@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 - '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - '@types/react-dom': - specifier: ^18.2.19 - version: 18.2.19 - '@types/sinon': - specifier: ^10.0.20 - version: 10.0.20 - chai: - specifier: ^4.4.1 - version: 4.4.1 - css-mediaquery: - specifier: ^0.1.2 - version: 0.1.2 - express: - specifier: ^4.18.3 - version: 4.18.3 - fast-glob: - specifier: ^3.3.2 - version: 3.3.2 - fs-extra: - specifier: ^11.2.0 - version: 11.2.0 - lodash: - specifier: ^4.17.21 - version: 4.17.21 - playwright: - specifier: ^1.42.1 - version: 1.42.1 - react: - specifier: ^18.2.0 - version: 18.2.0 - react-dom: - specifier: ^18.2.0 - version: 18.2.0(react@18.2.0) - react-router-dom: - specifier: ^6.21.3 - version: 6.22.1(react-dom@18.2.0)(react@18.2.0) - rollup: - specifier: ^3.29.4 - version: 3.29.4 - rollup-plugin-babel: - specifier: ^4.4.0 - version: 4.4.0(@babel/core@7.23.9)(rollup@3.29.4) - rollup-plugin-commonjs: - specifier: ^10.1.0 - version: 10.1.0(rollup@3.29.4) - rollup-plugin-node-globals: - specifier: ^1.4.0 - version: 1.4.0 - rollup-plugin-node-resolve: - specifier: ^5.2.0 - version: 5.2.0(rollup@3.29.4) - rollup-plugin-terser: - specifier: ^7.0.2 - version: 7.0.2(rollup@3.29.4) - sinon: - specifier: ^15.2.0 - version: 15.2.0 - publishDirectory: build - - ../packages/mui-material-next: - dependencies: - '@babel/runtime': - specifier: ^7.23.9 - version: 7.23.9 - '@emotion/styled': - specifier: ^11.3.0 - version: 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) - '@mui/base': - specifier: workspace:* - version: link:../mui-base/build - '@mui/material': - specifier: workspace:^ - version: link:../mui-material/build - '@mui/system': - specifier: workspace:^ - version: link:../mui-system/build - '@mui/types': - specifier: workspace:^ - version: link:../mui-types/build - '@mui/utils': - specifier: workspace:^ - version: link:../mui-utils/build - '@types/react-transition-group': - specifier: ^4.4.10 - version: 4.4.10 - clsx: - specifier: ^2.1.0 - version: 2.1.0 - prop-types: - specifier: ^15.8.1 - version: 15.8.1 - react-is: - specifier: ^18.2.0 - version: 18.2.0 - react-transition-group: - specifier: ^4.4.5 - version: 4.4.5(react-dom@18.2.0)(react@18.2.0) - devDependencies: - '@emotion/react': - specifier: ^11.11.4 - version: 11.11.4(@types/react@18.2.55)(react@18.2.0) - '@mui-internal/test-utils': - specifier: workspace:^ - version: link:../test-utils - '@mui/internal-babel-macros': - specifier: workspace:^ - version: link:../mui-babel-macros - '@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 - '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - '@types/react-dom': - specifier: ^18.2.19 - version: 18.2.19 - '@types/react-is': - specifier: ^18.2.4 - version: 18.2.4 - '@types/sinon': - specifier: ^10.0.20 - version: 10.0.20 - chai: - specifier: ^4.4.1 - version: 4.4.1 - lodash: - specifier: ^4.17.21 - version: 4.17.21 - react: - specifier: ^18.2.0 - version: 18.2.0 - react-dom: - specifier: ^18.2.0 - version: 18.2.0(react@18.2.0) - react-router-dom: - specifier: ^6.21.3 - version: 6.22.1(react-dom@18.2.0)(react@18.2.0) - sinon: - specifier: ^15.2.0 - version: 15.2.0 - publishDirectory: build - - ../packages/mui-material-nextjs: - dependencies: - '@babel/runtime': - specifier: ^7.23.9 - version: 7.23.9 - '@mui/material': - specifier: ^5.0.0 - version: link:../mui-material/build - devDependencies: - '@emotion/cache': - specifier: ^11.11.0 - version: 11.11.0 - '@emotion/react': - specifier: ^11.11.4 - version: 11.11.4(@types/react@18.2.55)(react@18.2.0) - '@emotion/server': - specifier: ^11.11.0 - version: 11.11.0 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - next: - specifier: 13.5.1 - version: 13.5.1(react-dom@18.2.0)(react@18.2.0) - react: - specifier: ^18.2.0 - version: 18.2.0 - publishDirectory: build - - ../packages/mui-private-theming: - dependencies: - '@babel/runtime': - specifier: ^7.23.9 - version: 7.23.9 - '@mui/utils': - specifier: workspace:^ - version: link:../mui-utils/build - prop-types: - specifier: ^15.8.1 - version: 15.8.1 - devDependencies: - '@mui-internal/test-utils': - specifier: workspace:^ - version: link:../test-utils - '@mui/types': - specifier: workspace:^ - version: link:../mui-types/build - '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - chai: - specifier: ^4.4.1 - version: 4.4.1 - react: - specifier: ^18.2.0 - version: 18.2.0 - publishDirectory: build - - ../packages/mui-styled-engine: - dependencies: - '@babel/runtime': - specifier: ^7.23.9 - version: 7.23.9 - '@emotion/cache': - specifier: ^11.11.0 - version: 11.11.0 - csstype: - specifier: ^3.1.3 - version: 3.1.3 - prop-types: - specifier: ^15.8.1 - version: 15.8.1 - devDependencies: - '@emotion/react': - specifier: ^11.11.4 - version: 11.11.4(@types/react@18.2.55)(react@18.2.0) - '@emotion/styled': - specifier: ^11.11.0 - version: 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) - '@mui-internal/test-utils': - specifier: workspace:^ - version: link:../test-utils - '@mui/styled-engine': - specifier: workspace:* - version: link:build - '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - chai: - specifier: ^4.4.1 - version: 4.4.1 - react: - specifier: ^18.2.0 - version: 18.2.0 - publishDirectory: build - - ../packages/mui-styled-engine-sc: - dependencies: - '@babel/runtime': - specifier: ^7.23.9 - version: 7.23.9 - csstype: - specifier: ^3.1.3 - version: 3.1.3 - hoist-non-react-statics: - specifier: ^3.3.2 - version: 3.3.2 - prop-types: - specifier: ^15.8.1 - version: 15.8.1 - devDependencies: - '@mui-internal/test-utils': - specifier: workspace:^ - version: link:../test-utils - '@mui/styled-engine-sc': - specifier: workspace:* - version: link:build - '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 - '@types/hoist-non-react-statics': - specifier: ^3.3.5 - version: 3.3.5 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - chai: - specifier: ^4.4.1 - version: 4.4.1 - react: - specifier: ^18.2.0 - version: 18.2.0 - styled-components: - specifier: ^6.1.8 - version: 6.1.8(react-dom@18.2.0)(react@18.2.0) - publishDirectory: build - - ../packages/mui-styles: - dependencies: - '@babel/runtime': - specifier: ^7.23.9 - version: 7.23.9 - '@emotion/hash': - specifier: ^0.9.1 - version: 0.9.1 - '@mui/private-theming': - specifier: workspace:^ - version: link:../mui-private-theming/build - '@mui/types': - specifier: workspace:^ - version: link:../mui-types/build - '@mui/utils': - specifier: workspace:^ - version: link:../mui-utils/build - clsx: - specifier: ^2.1.0 - version: 2.1.0 - csstype: - specifier: ^3.1.3 - version: 3.1.3 - hoist-non-react-statics: - specifier: ^3.3.2 - version: 3.3.2 - jss: - specifier: ^10.10.0 - version: 10.10.0 - jss-plugin-camel-case: - specifier: ^10.10.0 - version: 10.10.0 - jss-plugin-default-unit: - specifier: ^10.10.0 - version: 10.10.0 - jss-plugin-global: - specifier: ^10.10.0 - version: 10.10.0 - jss-plugin-nested: - specifier: ^10.10.0 - version: 10.10.0 - jss-plugin-props-sort: - specifier: ^10.10.0 - version: 10.10.0 - jss-plugin-rule-value-function: - specifier: ^10.10.0 - version: 10.10.0 - jss-plugin-vendor-prefixer: - specifier: ^10.10.0 - version: 10.10.0 - prop-types: - specifier: ^15.8.1 - version: 15.8.1 - devDependencies: - '@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 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - '@types/react-dom': - specifier: ^18.2.19 - version: 18.2.19 - '@types/sinon': - specifier: ^10.0.20 - version: 10.0.20 - chai: - specifier: ^4.4.1 - version: 4.4.1 - react: - specifier: ^18.2.0 - version: 18.2.0 - react-dom: - specifier: ^18.2.0 - version: 18.2.0(react@18.2.0) - sinon: - specifier: ^15.2.0 - version: 15.2.0 - publishDirectory: build - - ../packages/mui-system: - dependencies: - '@babel/runtime': - specifier: ^7.23.9 - version: 7.23.9 - '@mui/private-theming': - specifier: workspace:^ - version: link:../mui-private-theming/build - '@mui/styled-engine': - specifier: workspace:^ - version: link:../mui-styled-engine/build - '@mui/types': - specifier: workspace:^ - version: link:../mui-types/build - '@mui/utils': - specifier: workspace:^ - version: link:../mui-utils/build - clsx: - specifier: ^2.1.0 - version: 2.1.0 - csstype: - specifier: ^3.1.3 - version: 3.1.3 - prop-types: - specifier: ^15.8.1 - version: 15.8.1 - devDependencies: - '@emotion/react': - specifier: ^11.11.4 - version: 11.11.4(@types/react@18.2.55)(react@18.2.0) - '@emotion/styled': - specifier: ^11.11.0 - version: 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) - '@mui-internal/test-utils': - specifier: workspace:^ - version: link:../test-utils - '@mui/internal-babel-macros': - specifier: workspace:^ - version: link:../mui-babel-macros - '@mui/system': - specifier: workspace:* - version: link:build - '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 - '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - '@types/sinon': - specifier: ^10.0.20 - version: 10.0.20 - chai: - specifier: ^4.4.1 - version: 4.4.1 - fast-glob: - specifier: ^3.3.2 - version: 3.3.2 - lodash: - specifier: ^4.17.21 - version: 4.17.21 - react: - specifier: ^18.2.0 - version: 18.2.0 - sinon: - specifier: ^15.2.0 - version: 15.2.0 - styled-components: - specifier: ^6.1.8 - version: 6.1.8(react-dom@18.2.0)(react@18.2.0) - publishDirectory: build - - ../packages/mui-types: - devDependencies: - '@mui/types': - specifier: workspace:* - version: link:build - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - publishDirectory: build - - ../packages/mui-utils: - dependencies: - '@babel/runtime': - specifier: ^7.23.9 - version: 7.23.9 - '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 - prop-types: - specifier: ^15.8.1 - version: 15.8.1 - react-is: - specifier: ^18.2.0 - version: 18.2.0 - devDependencies: - '@mui-internal/test-utils': - specifier: workspace:^ - version: link:../test-utils - '@mui/internal-babel-macros': - specifier: workspace:^ - version: link:../mui-babel-macros - '@mui/types': - specifier: workspace:^ - version: link:../mui-types/build - '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 - '@types/mocha': - specifier: ^10.0.6 - version: 10.0.6 - '@types/node': - specifier: ^18.19.22 - version: 18.19.22 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - '@types/react-dom': - specifier: ^18.2.19 - version: 18.2.19 - '@types/react-is': - specifier: ^18.2.4 - version: 18.2.4 - '@types/sinon': - specifier: ^10.0.20 - version: 10.0.20 - chai: - specifier: ^4.4.1 - version: 4.4.1 - react: - specifier: ^18.2.0 - version: 18.2.0 - react-dom: - specifier: ^18.2.0 - version: 18.2.0(react@18.2.0) - sinon: - specifier: ^15.2.0 - version: 15.2.0 - publishDirectory: build - - ../packages/pigment-css-nextjs-plugin: - dependencies: - '@pigment-css/unplugin': - specifier: workspace:^ - version: link:../pigment-css-unplugin - devDependencies: - next: - specifier: ^13.5.1 - version: 13.5.1(react-dom@18.2.0)(react@18.2.0) - - ../packages/pigment-css-react: - dependencies: - '@babel/core': - specifier: ^7.23.9 - version: 7.23.9 - '@babel/helper-module-imports': - specifier: ^7.22.15 - version: 7.22.15 - '@babel/helper-plugin-utils': - specifier: ^7.22.5 - version: 7.22.5 - '@babel/parser': - specifier: ^7.23.9 - version: 7.23.9 - '@babel/types': - specifier: ^7.23.9 - version: 7.23.9 - '@emotion/css': - specifier: ^11.11.2 - version: 11.11.2 - '@emotion/react': - specifier: ^11.11.4 - version: 11.11.4(@types/react@18.2.55)(react@18.2.0) - '@emotion/serialize': - specifier: ^1.1.3 - version: 1.1.3 - '@emotion/styled': - specifier: ^11.11.0 - version: 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) - '@mui/system': - specifier: workspace:^ - version: link:../mui-system/build - '@wyw-in-js/processor-utils': - specifier: ^0.5.0 - version: 0.5.0 - '@wyw-in-js/shared': - specifier: ^0.5.0 - version: 0.5.0 - '@wyw-in-js/transform': - specifier: ^0.5.0 - version: 0.5.0(typescript@5.3.3) - clsx: - specifier: ^2.1.0 - version: 2.1.0 - cssesc: - specifier: ^3.0.0 - version: 3.0.0 - csstype: - specifier: ^3.1.3 - version: 3.1.3 - lodash: - specifier: ^4.17.21 - version: 4.17.21 - stylis: - specifier: ^4.3.1 - version: 4.3.1 - devDependencies: - '@babel/plugin-syntax-jsx': - specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) - '@types/babel__core': - specifier: ^7.20.5 - version: 7.20.5 - '@types/babel__helper-module-imports': - specifier: ^7.18.3 - version: 7.18.3 - '@types/babel__helper-plugin-utils': - specifier: ^7.10.3 - version: 7.10.3 - '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 - '@types/cssesc': - specifier: ^3.0.2 - version: 3.0.2 - '@types/lodash': - specifier: ^4.14.202 - version: 4.14.202 - '@types/mocha': - specifier: ^10.0.6 - version: 10.0.6 - '@types/node': - specifier: ^18.19.22 - version: 18.19.22 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - '@types/stylis': - specifier: ^4.2.5 - version: 4.2.5 - chai: - specifier: ^4.4.1 - version: 4.4.1 - prettier: - specifier: ^3.2.5 - version: 3.2.5 - react: - specifier: ^18.2.0 - version: 18.2.0 - - ../packages/pigment-css-unplugin: - dependencies: - '@babel/core': - specifier: ^7.23.9 - version: 7.23.9 - '@pigment-css/react': - specifier: workspace:^ - version: link:../pigment-css-react - '@wyw-in-js/shared': - specifier: ^0.5.0 - version: 0.5.0 - '@wyw-in-js/transform': - specifier: ^0.5.0 - version: 0.5.0(typescript@5.3.3) - babel-plugin-transform-react-remove-prop-types: - specifier: ^0.4.24 - version: 0.4.24 - unplugin: - specifier: ^1.7.1 - version: 1.7.1 - devDependencies: - '@types/babel__core': - specifier: ^7.20.5 - version: 7.20.5 - - ../packages/pigment-css-vite-plugin: - dependencies: - '@babel/core': - specifier: ^7.23.9 - version: 7.23.9 - '@babel/preset-typescript': - specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) - '@pigment-css/react': - specifier: workspace:^ - version: link:../pigment-css-react - '@wyw-in-js/shared': - specifier: ^0.5.0 - version: 0.5.0 - '@wyw-in-js/transform': - specifier: ^0.5.0 - version: 0.5.0(typescript@5.3.3) - babel-plugin-transform-react-remove-prop-types: - specifier: ^0.4.24 - version: 0.4.24 - devDependencies: - '@types/babel__core': - specifier: ^7.20.5 - version: 7.20.5 - vite: - specifier: ^5.0.12 - version: 5.0.12 - - ../packages/test-utils: - dependencies: - '@babel/plugin-transform-modules-commonjs': - specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) - '@babel/preset-typescript': - specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) - '@babel/register': - specifier: ^7.23.7 - version: 7.23.7(@babel/core@7.23.9) - '@babel/runtime': - specifier: ^7.23.9 - version: 7.23.9 - '@emotion/cache': - specifier: ^11.11.0 - version: 11.11.0 - '@emotion/react': - specifier: ^11.11.4 - version: 11.11.4(@types/react@18.2.55)(react@18.2.0) - '@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) - '@testing-library/dom': - 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) - chai: - specifier: ^4.4.1 - version: 4.4.1 - chai-dom: - specifier: ^1.12.0 - version: 1.12.0(chai@4.4.1) - dom-accessibility-api: - specifier: ^0.6.3 - version: 0.6.3 - enzyme: - specifier: ^3.11.0 - version: 3.11.0 - format-util: - specifier: ^1.0.5 - version: 1.0.5 - fs-extra: - specifier: ^11.2.0 - version: 11.2.0 - jsdom: - specifier: ^24.0.0 - version: 24.0.0 - lodash: - specifier: ^4.17.21 - version: 4.17.21 - mocha: - specifier: ^10.3.0 - version: 10.3.0 - playwright: - specifier: ^1.42.1 - version: 1.42.1 - prop-types: - specifier: ^15.8.1 - version: 15.8.1 - react: - specifier: ^18.2.0 - version: 18.2.0 - react-dom: - specifier: ^18.2.0 - version: 18.2.0(react@18.2.0) - react-test-renderer: - specifier: ^18.2.0 - version: 18.2.0(react@18.2.0) - sinon: - specifier: ^15.2.0 - version: 15.2.0 - devDependencies: - '@types/chai': - specifier: ^4.3.12 - version: 4.3.12 - '@types/chai-dom': - specifier: ^1.11.3 - version: 1.11.3 - '@types/enzyme': - specifier: ^3.10.18 - version: 3.10.18 - '@types/format-util': - specifier: ^1.0.4 - version: 1.0.4 - '@types/prop-types': - specifier: ^15.7.11 - version: 15.7.11 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - '@types/react-dom': - specifier: ^18.2.19 - version: 18.2.19 - '@types/react-test-renderer': - specifier: ^18.0.7 - version: 18.0.7 - '@types/sinon': - specifier: ^10.0.20 - version: 10.0.20 - typescript: - specifier: ^5.3.3 - version: 5.3.3 - - ../packages/waterfall: {} - - 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)(typescript@5.3.3) - - pigment-css-next-app: - dependencies: - '@emotion/cache': - specifier: latest - version: 11.11.0 - '@mui/base': - specifier: file:../../packages/mui-base/build - 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.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.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) - '@mui/utils': - specifier: file:../../packages/mui-utils/build - version: file:../packages/mui-utils/build(@types/react@18.2.55)(react@18.2.0) - '@pigment-css/react': - specifier: file:../../packages/pigment-css-react - version: file:../packages/pigment-css-react(@types/react@18.2.55)(react@18.2.0)(typescript@5.3.3) - local-ui-lib: - specifier: workspace:^ - version: link:../local-ui-lib - next: - specifier: latest - version: 14.1.3(@babel/core@7.23.9)(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: file:../../packages/pigment-css-nextjs-plugin - version: file:../packages/pigment-css-nextjs-plugin(next@14.1.3) - '@pigment-css/unplugin': - specifier: file:../../packages/pigment-css-unplugin - version: file:../packages/pigment-css-unplugin(typescript@5.3.3) - '@types/node': - specifier: ^20.5.7 - version: 20.11.22 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - '@types/react-dom': - specifier: ^18.2.19 - version: 18.2.19 - eslint: - specifier: ^8.56.0 - version: 8.57.0 - typescript: - specifier: ^5.3.3 - version: 5.3.3 - - pigment-css-vite-app: - dependencies: - '@mui/base': - specifier: file:../../packages/mui-base/build - 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.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/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) - '@mui/utils': - specifier: file:../../packages/mui-utils/build - version: file:../packages/mui-utils/build(@types/react@18.2.55)(react@18.2.0) - '@pigment-css/react': - specifier: file:../../packages/pigment-css-react - version: file:../packages/pigment-css-react(@types/react@18.2.55)(react@18.2.0)(typescript@5.3.3) - 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-router: - specifier: ^6.22.1 - version: 6.22.1(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-env': - specifier: ^7.23.9 - version: 7.23.9(@babel/core@7.23.9) - '@babel/preset-react': - specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) - '@babel/preset-typescript': - specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) - '@pigment-css/vite-plugin': - specifier: file:../../packages/pigment-css-vite-plugin - version: file:../packages/pigment-css-vite-plugin(vite@5.0.12) - '@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.0.12) - postcss: - specifier: ^8.4.35 - version: 8.4.35 - postcss-combine-media-query: - specifier: ^1.0.1 - version: 1.0.1 - vite: - specifier: 5.0.12 - version: 5.0.12 - vite-plugin-pages: - specifier: ^0.32.0 - version: 0.32.0(vite@5.0.12) - -packages: - - /@aashutoshrathi/word-wrap@1.2.6: - resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==} - engines: {node: '>=0.10.0'} - dev: true - - /@ampproject/remapping@2.2.1: - resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==} - engines: {node: '>=6.0.0'} - dependencies: - '@jridgewell/gen-mapping': 0.3.4 - '@jridgewell/trace-mapping': 0.3.23 - - /@babel/code-frame@7.23.5: - resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/highlight': 7.23.4 - chalk: 2.4.2 - - /@babel/compat-data@7.23.5: - resolution: {integrity: sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==} - engines: {node: '>=6.9.0'} - - /@babel/core@7.23.9: - resolution: {integrity: sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==} - engines: {node: '>=6.9.0'} - dependencies: - '@ampproject/remapping': 2.2.1 - '@babel/code-frame': 7.23.5 - '@babel/generator': 7.23.6 - '@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 - convert-source-map: 2.0.0 - debug: 4.3.4(supports-color@8.1.1) - gensync: 1.0.0-beta.2 - json5: 2.2.3 - semver: 6.3.1 - transitivePeerDependencies: - - supports-color - - /@babel/generator@7.23.6: - resolution: {integrity: sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.23.9 - '@jridgewell/gen-mapping': 0.3.4 - '@jridgewell/trace-mapping': 0.3.23 - 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/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/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/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.10(@babel/core@7.23.9): - resolution: {integrity: sha512-2XpP2XhkXzgxecPNEEK8Vz8Asj9aRxt08oKOqtiZoqV2UGZ5T+EkyP9sXQ9nwMxBIG34a7jmasVqoMop7VdPUw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - dependencies: - '@babel/core': 7.23.9 - '@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-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): - resolution: {integrity: sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - dependencies: - '@babel/core': 7.23.9 - '@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==} - peerDependencies: - '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-compilation-targets': 7.23.6 - '@babel/helper-plugin-utils': 7.22.5 - debug: 4.3.4(supports-color@8.1.1) - lodash.debounce: 4.0.8 - resolve: 1.22.8 - transitivePeerDependencies: - - supports-color - - /@babel/helper-environment-visitor@7.22.20: - resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==} - engines: {node: '>=6.9.0'} - - /@babel/helper-function-name@7.23.0: - resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/template': 7.23.9 - '@babel/types': 7.23.9 - - /@babel/helper-hoist-variables@7.22.5: - resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.23.9 - - /@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/helper-module-imports@7.22.15: - resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.23.9 - - /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-module-imports': 7.22.15 - '@babel/helper-simple-access': 7.22.5 - '@babel/helper-split-export-declaration': 7.22.6 - '@babel/helper-validator-identifier': 7.22.20 - - /@babel/helper-optimise-call-expression@7.22.5: - resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.23.9 - - /@babel/helper-plugin-utils@7.22.5: - resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==} - engines: {node: '>=6.9.0'} - - /@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.23.9): - resolution: {integrity: sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - dependencies: - '@babel/core': 7.23.9 - '@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==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-member-expression-to-functions': 7.23.0 - '@babel/helper-optimise-call-expression': 7.22.5 - - /@babel/helper-simple-access@7.22.5: - resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.23.9 - - /@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/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/helper-string-parser@7.23.4: - resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==} - engines: {node: '>=6.9.0'} - - /@babel/helper-validator-identifier@7.22.20: - resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==} - engines: {node: '>=6.9.0'} - - /@babel/helper-validator-option@7.23.5: - resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==} - engines: {node: '>=6.9.0'} - - /@babel/helper-wrap-function@7.22.20: - resolution: {integrity: sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/helper-function-name': 7.23.0 - '@babel/template': 7.23.9 - '@babel/types': 7.23.9 - - /@babel/helpers@7.23.9: - resolution: {integrity: sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/template': 7.23.9 - '@babel/traverse': 7.23.9 - '@babel/types': 7.23.9 - transitivePeerDependencies: - - supports-color - - /@babel/highlight@7.23.4: - resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/helper-validator-identifier': 7.22.20 - chalk: 2.4.2 - js-tokens: 4.0.0 - - /@babel/parser@7.23.9: - resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==} - engines: {node: '>=6.0.0'} - hasBin: true - dependencies: - '@babel/types': 7.23.9 - - /@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==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-WwlxbfMNdVEpQjZmK5mhm7oSwD3dS6eU+Iwsi4Knl9wAletWem7kaRsGOG+8UEbRyqxY4SS5zvtfXwX+jMxUwQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.13.0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-transform-optional-chaining': 7.23.4(@babel/core@7.23.9) - - /@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==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.23.9): - 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.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-create-class-features-plugin': 7.23.10(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 - dev: false - - /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.23.9): - 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.0.0-0 - 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) - dev: false - - /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.23.9): - 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.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.9) - dev: false - - /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.23.9): - resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - - /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.23.9): - resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.23.9): - resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@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): - resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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): - resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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): - resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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): - resolution: {integrity: sha512-YZiAIpkJAwQXBJLIQbRFayR5c+gJ35Vcz3bg954k7cd73zqjvhacJuL9RbrzPz8qPmZdgqP6EUKwy0PCNhaaPA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - dev: false - - /@babel/plugin-syntax-import-assertions@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-lPgDSU+SJLK3xmFDTV2ZRQAiM7UuUjGidwBywFavObCiZc1BeAAcMtHJKUya92hPHO+at63JJPLygilZard8jw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-syntax-import-attributes@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-pawnE0P9g10xgoP7yKr6CK63K2FMsTE+FZidZO/1PwRdzmAPVs+HS1mAURUsgaoxammTJvULUdIkEK0gOcU2tA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.23.9): - resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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): - resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-syntax-jsx@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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): - resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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): - resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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): - resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.23.9): - resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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): - resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.23.9): - resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@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): - resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.23.9): - resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-syntax-typescript@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.23.9): - resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - 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/plugin-transform-arrow-functions@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-NzQcQrzaQPkaEwoTm4Mhyl8jI1huEL/WWIEvudjTCMJ9aBZNpsJbMASx7EQECtQQPS/DcnFpo0FIh3LvEO9cxQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-async-generator-functions@7.23.9(@babel/core@7.23.9): - resolution: {integrity: sha512-8Q3veQEDGe14dTYuwagbRtwxQDnytyg1JFu4/HwEMETeofocrB0U0ejBJIXoeG/t2oXZ8kzCyI0ZZfbT80VFNQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@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/plugin-transform-async-to-generator@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-A7LFsKi4U4fomjqXJlZg/u0ft/n8/7n7lpffUP/ZULx/DtV9SGlNKZolHH6PE8Xl1ngCc0M11OaeZptXVkfKSw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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/plugin-transform-block-scoped-functions@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-vI+0sIaPIO6CNuM9Kk5VmXcMVRiOpDh7w2zZt9GXzmE/9KD70CUEVhvPR/etAeNK/FAEkhxQtXOzVF3EuRL41A==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-block-scoping@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-0QqbP6B6HOh7/8iNR4CQU2Th/bbRtBp4KS9vcaZd1fZ0wSh5Fyssg0UCIHwxh+ka+pNDREbVLQnHCMHKZfPwfw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-class-properties@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-uM+AN8yCIjDPccsKGlw271xjJtGii+xQIF/uMPS8H15L12jZTsLfF4o5vNO7d/oUguOyfdikHGc/yi9ge4SGIg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-create-class-features-plugin': 7.23.10(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-class-static-block@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-nsWu/1M+ggti1SOALj3hfx5FXzAY06fwPJsUZD4/A5e1bWi46VUIWtD+kOX6/IdhXGsXBWllLFDSnqSCdUNydQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.12.0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-create-class-features-plugin': 7.23.10(@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/plugin-transform-classes@7.23.8(@babel/core@7.23.9): - resolution: {integrity: sha512-yAYslGsY1bX6Knmg46RjiCiNSwJKv2IUC8qOdYKqMMr0491SXFhcHqOdRDeCRohOOIzwN/90C6mQ9qAKgrP7dg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@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-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==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/template': 7.23.9 - - /@babel/plugin-transform-destructuring@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-n225npDqjDIr967cMScVKHXJs7rout1q+tt50inyBCPkyZ8KxeI6d+GIbSBTT/w/9WdlWDOej3V9HE5Lgk57gw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-dotall-regex@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-vgnFYDHAKzFaTVp+mneDsIEbnJ2Np/9ng9iviHw3P/KVcgONxpNULEW/51Z/BaFojG2GI2GwwXck5uV1+1NOYQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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/plugin-transform-duplicate-keys@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-RrqQ+BQmU3Oyav3J+7/myfvRCq7Tbz+kKLLshUmMwNlDHExbGL7ARhajvoBJEvc+fCguPPu887N+3RRXBVKZUA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-dynamic-import@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-V6jIbLhdJK86MaLh4Jpghi8ho5fGzt3imHOBu/x0jlBaPYqDoWz4RDXjmMOfnh+JWNaQleEAByZLV0QzBT4YQQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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/plugin-transform-exponentiation-operator@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-5fhCsl1odX96u7ILKHBj4/Y8vipoqwsJMh4csSA8qFfxrZDEA4Ssku2DyNvMJSmZNOEBT750LfFPbtrnTP90BQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-builder-binary-assignment-operator-visitor': 7.22.15 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-export-namespace-from@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-GzuSBcKkx62dGzZI1WVgTWvkkz84FZO5TC5T8dl/Tht/rAla6Dg/Mz9Yhypg+ezVACf/rgDuQt3kbWEv7LdUDQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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/plugin-transform-flow-strip-types@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-26/pQTf9nQSNVJCrLB1IkHUKyPxR+lMrH2QDPG89+Znu9rAMbtrybdbWeE9bb7gzjmE5iXHEY+e0HUwM6Co93Q==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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) - dev: false - - /@babel/plugin-transform-for-of@7.23.6(@babel/core@7.23.9): - resolution: {integrity: sha512-aYH4ytZ0qSuBbpfhuofbg/e96oQ7U2w1Aw/UQmKT+1l39uEhUPoFS3fHevDc1G0OvewyDudfMKY1OulczHzWIw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@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==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-compilation-targets': 7.23.6 - '@babel/helper-function-name': 7.23.0 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-json-strings@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-81nTOqM1dMwZ/aRXQ59zVubN9wHGqk6UtqRK+/q+ciXmRy8fSolhGVvG09HHRGo4l6fr/c4ZhXUQH0uFW7PZbg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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/plugin-transform-literals@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-wZ0PIXRxnwZvl9AYpqNUxpZ5BiTGrYt7kueGQ+N5FiQ7RCOD4cm8iShd6S6ggfVIWaJf2EMk8eRzAh52RfP4rQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-logical-assignment-operators@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-Mc/ALf1rmZTP4JKKEhUwiORU+vcfarFVLfcFiolKUo6sewoxSEgl36ak5t+4WamRsNr6nzjZXQjM35WsU+9vbg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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/plugin-transform-member-expression-literals@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-sC3LdDBDi5x96LA+Ytekz2ZPk8i/Ck+DEuDbRAll5rknJ5XRTSaPKEYwomLcs1AA8wg9b3KjIQRsnApj+q51Ag==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-modules-amd@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-vJYQGxeKM4t8hYCKVBlZX/gtIY2I7mRGFNcm85sgXGMTBcoV3QdVtdpbcWEbzbfUIUZKwvgFT82mRvaQIebZzw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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/plugin-transform-modules-commonjs@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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/helper-simple-access': 7.22.5 - - /@babel/plugin-transform-modules-systemjs@7.23.9(@babel/core@7.23.9): - resolution: {integrity: sha512-KDlPRM6sLo4o1FkiSlXoAa8edLXFsKKIda779fbLrvmeuc3itnjCtaO6RrtoaANsIJANj+Vk1zqbZIMhkCAHVw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@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-validator-identifier': 7.22.20 - - /@babel/plugin-transform-modules-umd@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-zHsy9iXX2nIsCBFPud3jKn1IRPWg3Ing1qOZgeKV39m1ZgIdpJqvlWVeiHBZC6ITRG0MfskhYe9cLgntfSFPIg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.23.9): - resolution: {integrity: sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - 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/plugin-transform-new-target@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-YJ3xKqtJMAT5/TIZnpAR3I+K+WaDowYbN3xyxI8zxx/Gsypwf9B9h0VB+1Nh6ACAAPRS5NSRje0uVv5i79HYGQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-nullish-coalescing-operator@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-jHE9EVVqHKAQx+VePv5LLGHjmHSJR76vawFPTdlxR/LVJPfOEGxREQwQfjuZEOPTwG92X3LINSh3M40Rv4zpVA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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/plugin-transform-numeric-separator@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-mps6auzgwjRrwKEZA05cOwuDc9FAzoyFS4ZsG/8F43bTLf/TgkJg7QXOrPO1JO599iA3qgK9MXdMGOEC8O1h6Q==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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/plugin-transform-object-rest-spread@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-9x9K1YyeQVw0iOXJlIzwm8ltobIIv7j2iLyP2jIhEbqPRQ7ScNgwQufU2I0Gq11VjyG4gI4yMXt2VFags+1N3g==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/compat-data': 7.23.5 - '@babel/core': 7.23.9 - '@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/plugin-transform-object-super@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-BwQ8q0x2JG+3lxCVFohg+KbQM7plfpBwThdW9A6TMtWwLsbDA01Ek2Zb/AgDN39BiZsExm4qrXxjk+P1/fzGrA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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/plugin-transform-optional-catch-binding@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-XIq8t0rJPHf6Wvmbn9nFxU6ao4c7WhghTR5WyV8SrJfUFzyxhCm4nhC+iAp3HFhbAKLfYpgzhJ6t4XCtVwqO5A==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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/plugin-transform-optional-chaining@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-ZU8y5zWOfjM5vZ+asjgAPwDaBjJzgufjES89Rs4Lpq63O300R/kOz30WCLo6BxxX6QVEilwSlpClnG5cZaikTA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.9) - - /@babel/plugin-transform-parameters@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-09lMt6UsUb3/34BbECKVbVwrT9bO6lILWln237z7sLaWnMsTi7Yc9fhX5DLpkJzAGfaReXI22wP41SZmnAA3Vw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-private-methods@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-UzqRcRtWsDMTLrRWFvUBDwmw06tCQH9Rl1uAjfh6ijMSmGYQ+fpdB+cnqRC8EMh5tuuxSv0/TejGL+7vyj+50g==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-create-class-features-plugin': 7.23.10(@babel/core@7.23.9) - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-private-property-in-object@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-9G3K1YqTq3F4Vt88Djx1UZ79PDyj+yKRnUy7cZGSMe+a7jkwD259uKKuUzQlPkGam7R+8RJwh5z4xO27fA1o2A==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-create-class-features-plugin': 7.23.10(@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/plugin-transform-property-literals@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-jR3Jn3y7cZp4oEWPFAlRsSWjxKe4PZILGBSd4nis1TsC5qeSpb+nrtihJuDhNI7QHiVbUaiXa0X2RZY3/TI6Nw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-react-display-name@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-GnvhtVfA2OAtzdX58FJxU19rhoGeQzyVndw3GgtdECQvQFXPEZIOVULHVZGAYmOgmqjXpVpfocAbSjh99V/Fqw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - dev: true - - /@babel/plugin-transform-react-jsx-development@7.22.5(@babel/core@7.23.9): - resolution: {integrity: sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.23.9) - dev: true - - /@babel/plugin-transform-react-jsx-self@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - dev: true - - /@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==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - dev: true - - /@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.9): - resolution: {integrity: sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@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 - dev: true - - /@babel/plugin-transform-react-pure-annotations@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-qMFdSS+TUhB7Q/3HVPnEdYJDQIk57jkntAwSuz9xfSE4n+3I+vHYCli3HoHawN1Z3RfCz/y1zXA/JXjG6cVImQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-plugin-utils': 7.22.5 - dev: true - - /@babel/plugin-transform-regenerator@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-KP+75h0KghBMcVpuKisx3XTu9Ncut8Q8TuvGO4IhY+9D5DFEckQefOuIsB/gQ2tG71lCke4NMrtIPS8pOj18BQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - regenerator-transform: 0.15.2 - - /@babel/plugin-transform-reserved-words@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-QnNTazY54YqgGxwIexMZva9gqbPa15t/x9VS+0fsEFWplwVpXYZivtgl43Z1vMpc1bdPP2PP8siFeVcnFvA3Cg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-shorthand-properties@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-ED2fgqZLmexWiN+YNFX26fx4gh5qHDhn1O2gvEhreLW2iI63Sqm4llRLCXALKrCnbN4Jy0VcMQZl/SAzqug/jg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-spread@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-VvfVYlrlBVu+77xVTOAoxQ6mZbnIq5FM0aGBSFEcIh03qHf+zNqA4DC/3XMUozTg7bZV3e3mZQ0i13VB6v5yUg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@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==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-template-literals@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-Flok06AYNp7GV2oJPZZcP9vZdszev6vPBkHLwxwSpaIqx75wn6mUd3UFWsSsA0l8nXAKkyCmL/sR02m8RYGeHg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-typeof-symbol@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-4t15ViVnaFdrPC74be1gXBSMzXk3B4Us9lP7uLRQHTFpV5Dvt33pn+2MyyNxmN3VTTm3oTrZVMUmuw3oBnQ2oQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-typescript@7.23.6(@babel/core@7.23.9): - resolution: {integrity: sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-create-class-features-plugin': 7.23.10(@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/plugin-transform-unicode-escapes@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-OMCUx/bU6ChE3r4+ZdylEqAjaQgHAgipgW8nsCfu5pGqDcFytVd91AwRvUJSBZDz0exPGgnjoqhgRYLRjFZc9Q==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - - /@babel/plugin-transform-unicode-property-regex@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-KcLIm+pDZkWZQAFJ9pdfmh89EwVfmNovFBcXko8szpBeF8z68kWIPeKlmSOkT9BXJxs2C0uk+5LxoxIv62MROA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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/plugin-transform-unicode-regex@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-wMHpNA4x2cIA32b/ci3AfwNgheiva2W0WUKWTK7vBHBhDKfPsc5cFGNWm69WBqpwd86u1qwZ9PWevKqm1A3yAw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - 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/plugin-transform-unicode-sets-regex@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-W7lliA/v9bNR83Qc3q1ip9CQMZ09CcHDbHfbLRDNuAhn1Mvkr1ZNF7hPmztMQvtTGVLJ9m8IZqWsTkXOml8dbw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - 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/preset-env@7.23.9(@babel/core@7.23.9): - resolution: {integrity: sha512-3kBGTNBBk9DQiPoXYS0g0BYlwTQYUTifqgKTjxUwEUkduRT2QOa0FPGBJ+NROQhGyYO5BuTJwGvBnqKDykac6A==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/compat-data': 7.23.5 - '@babel/core': 7.23.9 - '@babel/helper-compilation-targets': 7.23.6 - '@babel/helper-plugin-utils': 7.22.5 - '@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': 7.23.3(@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.36.0 - 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==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-validator-option': 7.23.5 - '@babel/plugin-transform-flow-strip-types': 7.23.3(@babel/core@7.23.9) - dev: false - - /@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.23.9): - resolution: {integrity: sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==} - peerDependencies: - '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/types': 7.23.9 - esutils: 2.0.3 - - /@babel/preset-react@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-tbkHOS9axH6Ysf2OUEqoSZ6T3Fa2SrNH6WTWSPBboxKzdxNc9qOICeLXkNG0ZEwbQ1HY8liwOce4aN/Ceyuq6w==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@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) - dev: true - - /@babel/preset-typescript@7.23.3(@babel/core@7.23.9): - resolution: {integrity: sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-plugin-utils': 7.22.5 - '@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/register@7.23.7(@babel/core@7.23.9): - resolution: {integrity: sha512-EjJeB6+kvpk+Y5DAkEAmbOBEFkh9OASx0huoEkqYTFxAZHzOAX2Oh5uwAUuL2rUddqfM0SA+KPXV2TbzoZ2kvQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - clone-deep: 4.0.1 - find-cache-dir: 2.1.0 - make-dir: 2.1.0 - pirates: 4.0.6 - source-map-support: 0.5.21 - - /@babel/regjsgen@0.8.0: - resolution: {integrity: sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==} - - /@babel/runtime@7.23.9: - resolution: {integrity: sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==} - engines: {node: '>=6.9.0'} - dependencies: - regenerator-runtime: 0.14.1 - - /@babel/template@7.23.9: - resolution: {integrity: sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/code-frame': 7.23.5 - '@babel/parser': 7.23.9 - '@babel/types': 7.23.9 - - /@babel/traverse@7.23.9: - resolution: {integrity: sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/code-frame': 7.23.5 - '@babel/generator': 7.23.6 - '@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 - 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==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/helper-string-parser': 7.23.4 - '@babel/helper-validator-identifier': 7.22.20 - to-fast-properties: 2.0.0 - - /@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 - '@emotion/hash': 0.9.1 - '@emotion/memoize': 0.8.1 - '@emotion/serialize': 1.1.3 - babel-plugin-macros: 3.1.0 - convert-source-map: 1.9.0 - escape-string-regexp: 4.0.0 - find-root: 1.1.0 - source-map: 0.5.7 - stylis: 4.2.0 - - /@emotion/cache@11.11.0: - resolution: {integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==} - dependencies: - '@emotion/memoize': 0.8.1 - '@emotion/sheet': 1.2.2 - '@emotion/utils': 1.2.1 - '@emotion/weak-memoize': 0.3.1 - stylis: 4.2.0 - - /@emotion/css@11.11.2: - resolution: {integrity: sha512-VJxe1ucoMYMS7DkiMdC2T7PWNbrEI0a39YRiyDvK2qq4lXwjRbVP/z4lpG+odCsRzadlR+1ywwrTzhdm5HNdew==} - dependencies: - '@emotion/babel-plugin': 11.11.0 - '@emotion/cache': 11.11.0 - '@emotion/serialize': 1.1.3 - '@emotion/sheet': 1.2.2 - '@emotion/utils': 1.2.1 - dev: false - - /@emotion/hash@0.9.1: - resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==} - - /@emotion/is-prop-valid@1.2.1: - resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==} - dependencies: - '@emotion/memoize': 0.8.1 - - /@emotion/memoize@0.8.1: - resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} - - /@emotion/react@11.11.3(@types/react@18.2.55)(react@18.2.0): - resolution: {integrity: sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA==} - peerDependencies: - '@types/react': '*' - react: '>=16.8.0' - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.23.9 - '@emotion/babel-plugin': 11.11.0 - '@emotion/cache': 11.11.0 - '@emotion/serialize': 1.1.3 - '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0) - '@emotion/utils': 1.2.1 - '@emotion/weak-memoize': 0.3.1 - '@types/react': 18.2.55 - hoist-non-react-statics: 3.3.2 - react: 18.2.0 - dev: false - - /@emotion/react@11.11.4(@types/react@18.2.55)(react@18.2.0): - resolution: {integrity: sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==} - peerDependencies: - '@types/react': '*' - react: '>=16.8.0' - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.23.9 - '@emotion/babel-plugin': 11.11.0 - '@emotion/cache': 11.11.0 - '@emotion/serialize': 1.1.3 - '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0) - '@emotion/utils': 1.2.1 - '@emotion/weak-memoize': 0.3.1 - '@types/react': 18.2.55 - hoist-non-react-statics: 3.3.2 - react: 18.2.0 - - /@emotion/serialize@1.1.3: - resolution: {integrity: sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==} - dependencies: - '@emotion/hash': 0.9.1 - '@emotion/memoize': 0.8.1 - '@emotion/unitless': 0.8.1 - '@emotion/utils': 1.2.1 - csstype: 3.1.3 - - /@emotion/server@11.11.0: - resolution: {integrity: sha512-6q89fj2z8VBTx9w93kJ5n51hsmtYuFPtZgnc1L8VzRx9ti4EU6EyvF6Nn1H1x3vcCQCF7u2dB2lY4AYJwUW4PA==} - peerDependencies: - '@emotion/css': ^11.0.0-rc.0 - peerDependenciesMeta: - '@emotion/css': - optional: true - dependencies: - '@emotion/utils': 1.2.1 - html-tokenize: 2.0.1 - multipipe: 1.0.2 - through: 2.3.8 - dev: true - - /@emotion/sheet@1.2.2: - resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==} - - /@emotion/styled@11.11.0(@emotion/react@11.11.3)(@types/react@18.2.55)(react@18.2.0): - resolution: {integrity: sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==} - peerDependencies: - '@emotion/react': ^11.0.0-rc.0 - '@types/react': '*' - react: '>=16.8.0' - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.23.9 - '@emotion/babel-plugin': 11.11.0 - '@emotion/is-prop-valid': 1.2.1 - '@emotion/react': 11.11.3(@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) - '@emotion/utils': 1.2.1 - '@types/react': 18.2.55 - react: 18.2.0 - dev: false - - /@emotion/styled@11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0): - resolution: {integrity: sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==} - peerDependencies: - '@emotion/react': ^11.0.0-rc.0 - '@types/react': '*' - react: '>=16.8.0' - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.23.9 - '@emotion/babel-plugin': 11.11.0 - '@emotion/is-prop-valid': 1.2.1 - '@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) - '@emotion/utils': 1.2.1 - '@types/react': 18.2.55 - react: 18.2.0 - - /@emotion/unitless@0.8.0: - resolution: {integrity: sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==} - dev: true - - /@emotion/unitless@0.8.1: - resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==} - - /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0): - resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==} - peerDependencies: - react: '>=16.8.0' - dependencies: - react: 18.2.0 - - /@emotion/utils@1.2.1: - resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==} - - /@emotion/weak-memoize@0.3.1: - resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==} - - /@esbuild/aix-ppc64@0.19.12: - resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==} - engines: {node: '>=12'} - cpu: [ppc64] - os: [aix] - requiresBuild: true - dev: true - optional: true - - /@esbuild/android-arm64@0.19.12: - resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==} - engines: {node: '>=12'} - cpu: [arm64] - os: [android] - requiresBuild: true - dev: true - optional: true - - /@esbuild/android-arm@0.19.12: - resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==} - engines: {node: '>=12'} - cpu: [arm] - os: [android] - requiresBuild: true - dev: true - optional: true - - /@esbuild/android-x64@0.19.12: - resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==} - engines: {node: '>=12'} - cpu: [x64] - os: [android] - requiresBuild: true - dev: true - optional: true - - /@esbuild/darwin-arm64@0.19.12: - resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==} - engines: {node: '>=12'} - cpu: [arm64] - os: [darwin] - requiresBuild: true - dev: true - optional: true - - /@esbuild/darwin-x64@0.19.12: - resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==} - engines: {node: '>=12'} - cpu: [x64] - os: [darwin] - requiresBuild: true - dev: true - optional: true - - /@esbuild/freebsd-arm64@0.19.12: - resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==} - engines: {node: '>=12'} - cpu: [arm64] - os: [freebsd] - requiresBuild: true - dev: true - optional: true - - /@esbuild/freebsd-x64@0.19.12: - resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==} - engines: {node: '>=12'} - cpu: [x64] - os: [freebsd] - requiresBuild: true - dev: true - optional: true - - /@esbuild/linux-arm64@0.19.12: - resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==} - engines: {node: '>=12'} - cpu: [arm64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@esbuild/linux-arm@0.19.12: - resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==} - engines: {node: '>=12'} - cpu: [arm] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@esbuild/linux-ia32@0.19.12: - resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==} - engines: {node: '>=12'} - cpu: [ia32] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@esbuild/linux-loong64@0.19.12: - resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==} - engines: {node: '>=12'} - cpu: [loong64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@esbuild/linux-mips64el@0.19.12: - resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==} - engines: {node: '>=12'} - cpu: [mips64el] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@esbuild/linux-ppc64@0.19.12: - resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==} - engines: {node: '>=12'} - cpu: [ppc64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@esbuild/linux-riscv64@0.19.12: - resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==} - engines: {node: '>=12'} - cpu: [riscv64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@esbuild/linux-s390x@0.19.12: - resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==} - engines: {node: '>=12'} - cpu: [s390x] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@esbuild/linux-x64@0.19.12: - resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==} - engines: {node: '>=12'} - cpu: [x64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@esbuild/netbsd-x64@0.19.12: - resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==} - engines: {node: '>=12'} - cpu: [x64] - os: [netbsd] - requiresBuild: true - dev: true - optional: true - - /@esbuild/openbsd-x64@0.19.12: - resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==} - engines: {node: '>=12'} - cpu: [x64] - os: [openbsd] - requiresBuild: true - dev: true - optional: true - - /@esbuild/sunos-x64@0.19.12: - resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==} - engines: {node: '>=12'} - cpu: [x64] - os: [sunos] - requiresBuild: true - dev: true - optional: true - - /@esbuild/win32-arm64@0.19.12: - resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==} - engines: {node: '>=12'} - cpu: [arm64] - os: [win32] - requiresBuild: true - dev: true - optional: true - - /@esbuild/win32-ia32@0.19.12: - resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==} - engines: {node: '>=12'} - cpu: [ia32] - os: [win32] - requiresBuild: true - dev: true - optional: true - - /@esbuild/win32-x64@0.19.12: - resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==} - 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.57.0 - eslint-visitor-keys: 3.4.3 - dev: true - - /@eslint-community/regexpp@4.10.0: - resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==} - engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0} - dev: true - - /@eslint/eslintrc@2.1.4: - resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==} - engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} - dependencies: - ajv: 6.12.6 - debug: 4.3.4(supports-color@8.1.1) - espree: 9.6.1 - globals: 13.24.0 - ignore: 5.3.1 - import-fresh: 3.3.0 - js-yaml: 4.1.0 - minimatch: 3.1.2 - strip-json-comments: 3.1.1 - transitivePeerDependencies: - - supports-color - dev: true - - /@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 - - /@floating-ui/core@1.6.0: - resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==} - dependencies: - '@floating-ui/utils': 0.2.1 - dev: false - - /@floating-ui/dom@1.6.3: - resolution: {integrity: sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==} - dependencies: - '@floating-ui/core': 1.6.0 - '@floating-ui/utils': 0.2.1 - dev: false - - /@floating-ui/react-dom@2.0.8(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==} - peerDependencies: - react: '>=16.8.0' - react-dom: '>=16.8.0' - dependencies: - '@floating-ui/dom': 1.6.3 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: false - - /@floating-ui/utils@0.2.1: - resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==} - dev: false - - /@humanwhocodes/config-array@0.11.14: - resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==} - engines: {node: '>=10.10.0'} - dependencies: - '@humanwhocodes/object-schema': 2.0.2 - debug: 4.3.4(supports-color@8.1.1) - minimatch: 3.1.2 - transitivePeerDependencies: - - supports-color - dev: true - - /@humanwhocodes/module-importer@1.0.1: - resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==} - engines: {node: '>=12.22'} - dev: true - - /@humanwhocodes/object-schema@2.0.2: - resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==} - dev: true - - /@isaacs/cliui@8.0.2: - resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} - engines: {node: '>=12'} - dependencies: - string-width: 5.1.2 - string-width-cjs: /string-width@4.2.3 - strip-ansi: 7.1.0 - strip-ansi-cjs: /strip-ansi@6.0.1 - wrap-ansi: 8.1.0 - wrap-ansi-cjs: /wrap-ansi@7.0.0 - - /@jridgewell/gen-mapping@0.3.4: - resolution: {integrity: sha512-Oud2QPM5dHviZNn4y/WhhYKSXksv+1xLEIsNrAbGcFzUN3ubqWRFT5gwPchNc5NuzILOU4tPBDTZ4VwhL8Y7cw==} - engines: {node: '>=6.0.0'} - dependencies: - '@jridgewell/set-array': 1.1.2 - '@jridgewell/sourcemap-codec': 1.4.15 - '@jridgewell/trace-mapping': 0.3.23 - - /@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==} - engines: {node: '>=6.0.0'} - - /@jridgewell/source-map@0.3.5: - resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==} - dependencies: - '@jridgewell/gen-mapping': 0.3.4 - '@jridgewell/trace-mapping': 0.3.23 - dev: true - - /@jridgewell/sourcemap-codec@1.4.15: - resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} - - /@jridgewell/trace-mapping@0.3.23: - resolution: {integrity: sha512-9/4foRoUKp8s96tSkh8DlAAc5A0Ty8vLXld+l9gjKKY6ckwI8G15f0hskGmuLZu78ZlGa1vtsfOa+lnB4vG6Jg==} - dependencies: - '@jridgewell/resolve-uri': 3.1.2 - '@jridgewell/sourcemap-codec': 1.4.15 - - /@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==} - peerDependencies: - enzyme: ^3.0.0 - react: ^18.0.0 - react-dom: ^18.0.0 - dependencies: - enzyme: 3.11.0 - enzyme-adapter-utils: 1.14.2(react@18.2.0) - enzyme-shallow-equal: 1.0.7 - has: 1.0.4 - object.assign: 4.1.5 - object.values: 1.1.7 - prop-types: 15.8.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-is: 18.2.0 - react-reconciler: 0.29.0(react@18.2.0) - react-test-renderer: 18.2.0(react@18.2.0) - semver: 5.7.2 - dev: false - - /@next/env@13.5.1: - resolution: {integrity: sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==} - dev: true - - /@next/env@14.1.3: - resolution: {integrity: sha512-VhgXTvrgeBRxNPjyfBsDIMvgsKDxjlpw4IAUsHCX8Gjl1vtHUYRT3+xfQ/wwvLPDd/6kqfLqk9Pt4+7gysuCKQ==} - - /@next/swc-darwin-arm64@13.5.1: - resolution: {integrity: sha512-Bcd0VFrLHZnMmJy6LqV1CydZ7lYaBao8YBEdQUVzV8Ypn/l5s//j5ffjfvMzpEQ4mzlAj3fIY+Bmd9NxpWhACw==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [darwin] - requiresBuild: true - dev: true - optional: true - - /@next/swc-darwin-arm64@14.1.3: - resolution: {integrity: sha512-LALu0yIBPRiG9ANrD5ncB3pjpO0Gli9ZLhxdOu6ZUNf3x1r3ea1rd9Q+4xxUkGrUXLqKVK9/lDkpYIJaCJ6AHQ==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [darwin] - requiresBuild: true - optional: true - - /@next/swc-darwin-x64@13.5.1: - resolution: {integrity: sha512-uvTZrZa4D0bdWa1jJ7X1tBGIxzpqSnw/ATxWvoRO9CVBvXSx87JyuISY+BWsfLFF59IRodESdeZwkWM2l6+Kjg==} - engines: {node: '>= 10'} - cpu: [x64] - os: [darwin] - requiresBuild: true - dev: true - optional: true - - /@next/swc-darwin-x64@14.1.3: - resolution: {integrity: sha512-E/9WQeXxkqw2dfcn5UcjApFgUq73jqNKaE5bysDm58hEUdUGedVrnRhblhJM7HbCZNhtVl0j+6TXsK0PuzXTCg==} - engines: {node: '>= 10'} - cpu: [x64] - os: [darwin] - requiresBuild: true - optional: true - - /@next/swc-linux-arm64-gnu@13.5.1: - resolution: {integrity: sha512-/52ThlqdORPQt3+AlMoO+omicdYyUEDeRDGPAj86ULpV4dg+/GCFCKAmFWT0Q4zChFwsAoZUECLcKbRdcc0SNg==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@next/swc-linux-arm64-gnu@14.1.3: - resolution: {integrity: sha512-USArX9B+3rZSXYLFvgy0NVWQgqh6LHWDmMt38O4lmiJNQcwazeI6xRvSsliDLKt+78KChVacNiwvOMbl6g6BBw==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [linux] - requiresBuild: true - optional: true - - /@next/swc-linux-arm64-musl@13.5.1: - resolution: {integrity: sha512-L4qNXSOHeu1hEAeeNsBgIYVnvm0gg9fj2O2Yx/qawgQEGuFBfcKqlmIE/Vp8z6gwlppxz5d7v6pmHs1NB6R37w==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@next/swc-linux-arm64-musl@14.1.3: - resolution: {integrity: sha512-esk1RkRBLSIEp1qaQXv1+s6ZdYzuVCnDAZySpa62iFTMGTisCyNQmqyCTL9P+cLJ4N9FKCI3ojtSfsyPHJDQNw==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [linux] - requiresBuild: true - optional: true - - /@next/swc-linux-x64-gnu@13.5.1: - resolution: {integrity: sha512-QVvMrlrFFYvLtABk092kcZ5Mzlmsk2+SV3xYuAu8sbTuIoh0U2+HGNhVklmuYCuM3DAAxdiMQTNlRQmNH11udw==} - engines: {node: '>= 10'} - cpu: [x64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@next/swc-linux-x64-gnu@14.1.3: - resolution: {integrity: sha512-8uOgRlYEYiKo0L8YGeS+3TudHVDWDjPVDUcST+z+dUzgBbTEwSSIaSgF/vkcC1T/iwl4QX9iuUyUdQEl0Kxalg==} - engines: {node: '>= 10'} - cpu: [x64] - os: [linux] - requiresBuild: true - optional: true - - /@next/swc-linux-x64-musl@13.5.1: - resolution: {integrity: sha512-bBnr+XuWc28r9e8gQ35XBtyi5KLHLhTbEvrSgcWna8atI48sNggjIK8IyiEBO3KIrcUVXYkldAzGXPEYMnKt1g==} - engines: {node: '>= 10'} - cpu: [x64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@next/swc-linux-x64-musl@14.1.3: - resolution: {integrity: sha512-DX2zqz05ziElLoxskgHasaJBREC5Y9TJcbR2LYqu4r7naff25B4iXkfXWfcp69uD75/0URmmoSgT8JclJtrBoQ==} - engines: {node: '>= 10'} - cpu: [x64] - os: [linux] - requiresBuild: true - optional: true - - /@next/swc-win32-arm64-msvc@13.5.1: - resolution: {integrity: sha512-EQGeE4S5c9v06jje9gr4UlxqUEA+zrsgPi6kg9VwR+dQHirzbnVJISF69UfKVkmLntknZJJI9XpWPB6q0Z7mTg==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [win32] - requiresBuild: true - dev: true - optional: true - - /@next/swc-win32-arm64-msvc@14.1.3: - resolution: {integrity: sha512-HjssFsCdsD4GHstXSQxsi2l70F/5FsRTRQp8xNgmQs15SxUfUJRvSI9qKny/jLkY3gLgiCR3+6A7wzzK0DBlfA==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [win32] - requiresBuild: true - optional: true - - /@next/swc-win32-ia32-msvc@13.5.1: - resolution: {integrity: sha512-1y31Q6awzofVjmbTLtRl92OX3s+W0ZfO8AP8fTnITcIo9a6ATDc/eqa08fd6tSpFu6IFpxOBbdevOjwYTGx/AQ==} - engines: {node: '>= 10'} - cpu: [ia32] - os: [win32] - requiresBuild: true - dev: true - optional: true - - /@next/swc-win32-ia32-msvc@14.1.3: - resolution: {integrity: sha512-DRuxD5axfDM1/Ue4VahwSxl1O5rn61hX8/sF0HY8y0iCbpqdxw3rB3QasdHn/LJ6Wb2y5DoWzXcz3L1Cr+Thrw==} - engines: {node: '>= 10'} - cpu: [ia32] - os: [win32] - requiresBuild: true - optional: true - - /@next/swc-win32-x64-msvc@13.5.1: - resolution: {integrity: sha512-+9XBQizy7X/GuwNegq+5QkkxAPV7SBsIwapVRQd9WSvvU20YO23B3bZUpevdabi4fsd25y9RJDDncljy/V54ww==} - engines: {node: '>= 10'} - cpu: [x64] - os: [win32] - requiresBuild: true - dev: true - optional: true - - /@next/swc-win32-x64-msvc@14.1.3: - resolution: {integrity: sha512-uC2DaDoWH7h1P/aJ4Fok3Xiw6P0Lo4ez7NbowW2VGNXw/Xv6tOuLUcxhBYZxsSUJtpeknCi8/fvnSpyCFp4Rcg==} - engines: {node: '>= 10'} - cpu: [x64] - os: [win32] - requiresBuild: true - optional: true - - /@nodelib/fs.scandir@2.1.5: - resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} - engines: {node: '>= 8'} - dependencies: - '@nodelib/fs.stat': 2.0.5 - run-parallel: 1.2.0 - - /@nodelib/fs.stat@2.0.5: - resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==} - engines: {node: '>= 8'} - - /@nodelib/fs.walk@1.2.8: - resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} - engines: {node: '>= 8'} - dependencies: - '@nodelib/fs.scandir': 2.1.5 - fastq: 1.17.1 - - /@pkgjs/parseargs@0.11.0: - resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} - engines: {node: '>=14'} - requiresBuild: true - optional: true - - /@popperjs/core@2.11.8: - resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} - - /@remix-run/router@1.15.1: - resolution: {integrity: sha512-zcU0gM3z+3iqj8UX45AmWY810l3oUmXM7uH4dt5xtzvMhRtYVhKGOmgOd1877dOPPepfCjUv57w+syamWIYe7w==} - engines: {node: '>=14.0.0'} - - /@rollup/plugin-replace@5.0.5(rollup@3.29.4): - resolution: {integrity: sha512-rYO4fOi8lMaTg/z5Jb+hKnrHHVn8j2lwkqwyS4kTRhKyWOLf2wST2sWXr4WzWiTcoHTp2sTjqUbqIj2E39slKQ==} - engines: {node: '>=14.0.0'} - peerDependencies: - rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 - peerDependenciesMeta: - rollup: - optional: true - dependencies: - '@rollup/pluginutils': 5.1.0(rollup@3.29.4) - magic-string: 0.30.7 - rollup: 3.29.4 - dev: true - - /@rollup/pluginutils@5.1.0(rollup@3.29.4): - resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==} - engines: {node: '>=14.0.0'} - peerDependencies: - rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 - peerDependenciesMeta: - rollup: - optional: true - dependencies: - '@types/estree': 1.0.5 - estree-walker: 2.0.2 - picomatch: 2.3.1 - rollup: 3.29.4 - dev: true - - /@rollup/rollup-android-arm-eabi@4.12.0: - resolution: {integrity: sha512-+ac02NL/2TCKRrJu2wffk1kZ+RyqxVUlbjSagNgPm94frxtr+XDL12E5Ll1enWskLrtrZ2r8L3wED1orIibV/w==} - cpu: [arm] - os: [android] - requiresBuild: true - dev: true - optional: true - - /@rollup/rollup-android-arm64@4.12.0: - resolution: {integrity: sha512-OBqcX2BMe6nvjQ0Nyp7cC90cnumt8PXmO7Dp3gfAju/6YwG0Tj74z1vKrfRz7qAv23nBcYM8BCbhrsWqO7PzQQ==} - cpu: [arm64] - os: [android] - requiresBuild: true - dev: true - optional: true - - /@rollup/rollup-darwin-arm64@4.12.0: - resolution: {integrity: sha512-X64tZd8dRE/QTrBIEs63kaOBG0b5GVEd3ccoLtyf6IdXtHdh8h+I56C2yC3PtC9Ucnv0CpNFJLqKFVgCYe0lOQ==} - cpu: [arm64] - os: [darwin] - requiresBuild: true - dev: true - optional: true - - /@rollup/rollup-darwin-x64@4.12.0: - resolution: {integrity: sha512-cc71KUZoVbUJmGP2cOuiZ9HSOP14AzBAThn3OU+9LcA1+IUqswJyR1cAJj3Mg55HbjZP6OLAIscbQsQLrpgTOg==} - cpu: [x64] - os: [darwin] - requiresBuild: true - dev: true - optional: true - - /@rollup/rollup-linux-arm-gnueabihf@4.12.0: - resolution: {integrity: sha512-a6w/Y3hyyO6GlpKL2xJ4IOh/7d+APaqLYdMf86xnczU3nurFTaVN9s9jOXQg97BE4nYm/7Ga51rjec5nfRdrvA==} - cpu: [arm] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@rollup/rollup-linux-arm64-gnu@4.12.0: - resolution: {integrity: sha512-0fZBq27b+D7Ar5CQMofVN8sggOVhEtzFUwOwPppQt0k+VR+7UHMZZY4y+64WJ06XOhBTKXtQB/Sv0NwQMXyNAA==} - cpu: [arm64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@rollup/rollup-linux-arm64-musl@4.12.0: - resolution: {integrity: sha512-eTvzUS3hhhlgeAv6bfigekzWZjaEX9xP9HhxB0Dvrdbkk5w/b+1Sxct2ZuDxNJKzsRStSq1EaEkVSEe7A7ipgQ==} - cpu: [arm64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@rollup/rollup-linux-riscv64-gnu@4.12.0: - resolution: {integrity: sha512-ix+qAB9qmrCRiaO71VFfY8rkiAZJL8zQRXveS27HS+pKdjwUfEhqo2+YF2oI+H/22Xsiski+qqwIBxVewLK7sw==} - cpu: [riscv64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@rollup/rollup-linux-x64-gnu@4.12.0: - resolution: {integrity: sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==} - cpu: [x64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@rollup/rollup-linux-x64-musl@4.12.0: - resolution: {integrity: sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw==} - cpu: [x64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /@rollup/rollup-win32-arm64-msvc@4.12.0: - resolution: {integrity: sha512-JPDxovheWNp6d7AHCgsUlkuCKvtu3RB55iNEkaQcf0ttsDU/JZF+iQnYcQJSk/7PtT4mjjVG8N1kpwnI9SLYaw==} - cpu: [arm64] - os: [win32] - requiresBuild: true - dev: true - optional: true - - /@rollup/rollup-win32-ia32-msvc@4.12.0: - resolution: {integrity: sha512-fjtuvMWRGJn1oZacG8IPnzIV6GF2/XG+h71FKn76OYFqySXInJtseAqdprVTDTyqPxQOG9Exak5/E9Z3+EJ8ZA==} - cpu: [ia32] - os: [win32] - requiresBuild: true - dev: true - optional: true - - /@rollup/rollup-win32-x64-msvc@4.12.0: - resolution: {integrity: sha512-ZYmr5mS2wd4Dew/JjT0Fqi2NPB/ZhZ2VvPp7SmvPZb4Y1CG/LRcS6tcRo2cYU7zLK5A7cdbhWnnWmUjoI4qapg==} - cpu: [x64] - os: [win32] - requiresBuild: true - dev: true - optional: true - - /@sinonjs/commons@2.0.0: - resolution: {integrity: sha512-uLa0j859mMrg2slwQYdO/AkrOfmH+X6LTVmNTS9CqexuE2IvVORIkSpJLqePAbEnKJ77aMmCwr1NUZ57120Xcg==} - dependencies: - type-detect: 4.0.8 - - /@sinonjs/commons@3.0.1: - resolution: {integrity: sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==} - dependencies: - type-detect: 4.0.8 - - /@sinonjs/fake-timers@10.3.0: - resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==} - dependencies: - '@sinonjs/commons': 3.0.1 - - /@sinonjs/fake-timers@11.2.2: - resolution: {integrity: sha512-G2piCSxQ7oWOxwGSAyFHfPIsyeJGXYtc6mFbnFA+kRXkiEnTl8c/8jul2S329iFBnDI9HGoeWWAZvuvOkZccgw==} - dependencies: - '@sinonjs/commons': 3.0.1 - - /@sinonjs/samsam@8.0.0: - resolution: {integrity: sha512-Bp8KUVlLp8ibJZrnvq2foVhP0IVX2CIprMJPK0vqGqgrDa0OHVKeZyBykqskkrdxV6yKBPmGasO8LVjAKR3Gew==} - dependencies: - '@sinonjs/commons': 2.0.0 - lodash.get: 4.4.2 - type-detect: 4.0.8 - - /@sinonjs/text-encoding@0.7.2: - resolution: {integrity: sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==} - - /@swc/helpers@0.5.2: - resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==} - dependencies: - tslib: 2.6.2 - - /@testing-library/dom@9.3.4: - resolution: {integrity: sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==} - engines: {node: '>=14'} - dependencies: - '@babel/code-frame': 7.23.5 - '@babel/runtime': 7.23.9 - '@types/aria-query': 5.0.4 - aria-query: 5.1.3 - chalk: 4.1.2 - dom-accessibility-api: 0.5.16 - 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==} - engines: {node: '>=14'} - peerDependencies: - react: ^18.0.0 - react-dom: ^18.0.0 - dependencies: - '@babel/runtime': 7.23.9 - '@testing-library/dom': 9.3.4 - '@types/react-dom': 18.2.19 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - - /@testing-library/user-event@14.5.2(@testing-library/dom@9.3.4): - resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==} - engines: {node: '>=12', npm: '>=6'} - peerDependencies: - '@testing-library/dom': '>=7.21.4' - dependencies: - '@testing-library/dom': 9.3.4 - dev: true - - /@trysound/sax@0.2.0: - resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} - engines: {node: '>=10.13.0'} - dev: true - - /@types/aria-query@5.0.4: - resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==} - - /@types/babel-plugin-macros@3.1.3: - resolution: {integrity: sha512-JU+MgpsHK3taY18mBETy5XlwY6LVngte7QXYzUuXEaaX0CN8dBqbjXtADe+gJmkSQE1FJHufzPj++OWZlhRmGw==} - dependencies: - '@types/babel__core': 7.20.5 - dev: true - - /@types/babel__core@7.20.5: - resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} - dependencies: - '@babel/parser': 7.23.9 - '@babel/types': 7.23.9 - '@types/babel__generator': 7.6.8 - '@types/babel__template': 7.4.4 - '@types/babel__traverse': 7.20.5 - dev: true - - /@types/babel__generator@7.6.8: - resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==} - dependencies: - '@babel/types': 7.23.9 - dev: true - - /@types/babel__helper-module-imports@7.18.3: - resolution: {integrity: sha512-2pyr9Vlriessj2KI85SEF7qma8vA3vzquQMw3wn6kL5lsfjH/YxJ1Noytk4/FJElpYybUbyaC37CVfEgfyme9A==} - dependencies: - '@types/babel__core': 7.20.5 - '@types/babel__traverse': 7.20.5 - dev: true - - /@types/babel__helper-plugin-utils@7.10.3: - resolution: {integrity: sha512-FcLBBPXInqKfULB2nvOBskQPcnSMZ0s1Y2q76u9H1NPPWaLcTeq38xBeKfF/RBUECK333qeaqRdYoPSwW7rTNQ==} - dependencies: - '@types/babel__core': 7.20.5 - dev: true - - /@types/babel__template@7.4.4: - resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==} - dependencies: - '@babel/parser': 7.23.9 - '@babel/types': 7.23.9 - dev: true - - /@types/babel__traverse@7.20.5: - resolution: {integrity: sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==} - dependencies: - '@babel/types': 7.23.9 - dev: true - - /@types/chai-dom@1.11.3: - resolution: {integrity: sha512-EUEZI7uID4ewzxnU7DJXtyvykhQuwe+etJ1wwOiJyQRTH/ifMWKX+ghiXkxCUvNJ6IQDodf0JXhuP6zZcy2qXQ==} - dependencies: - '@types/chai': 4.3.12 - dev: true - - /@types/chai@4.3.12: - resolution: {integrity: sha512-zNKDHG/1yxm8Il6uCCVsm+dRdEsJlFoDu73X17y09bId6UwoYww+vFBsAcRzl8knM1sab3Dp1VRikFQwDOtDDw==} - dev: true - - /@types/cheerio@0.22.35: - resolution: {integrity: sha512-yD57BchKRvTV+JD53UZ6PD8KWY5g5rvvMLRnZR3EQBCZXiDT/HR+pKpMzFGlWNhFrXlo7VPZXtKvIEwZkAWOIA==} - dependencies: - '@types/node': 20.11.22 - dev: true - - /@types/cssesc@3.0.2: - 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 - - /@types/enzyme@3.10.18: - resolution: {integrity: sha512-RaO/TyyHZvXkpzinbMTZmd/S5biU4zxkvDsn22ujC29t9FMSzq8tnn8f2MxQ2P8GVhFRG5jTAL05DXKyTtpEQQ==} - dependencies: - '@types/cheerio': 0.22.35 - '@types/react': 16.14.57 - dev: true - - /@types/estree@1.0.5: - resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} - dev: true - - /@types/format-util@1.0.4: - resolution: {integrity: sha512-xrCYOdHh5zA3LUrn6CvspYwlzSWxPso11Lx32WnAG6KvLCRecKZ/Rh21PLXUkzUFsQmrGcx/traJAFjR6dVS5Q==} - dev: true - - /@types/hoist-non-react-statics@3.3.5: - resolution: {integrity: sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==} - dependencies: - '@types/react': 18.2.55 - hoist-non-react-statics: 3.3.2 - dev: true - - /@types/jscodeshift@0.11.5: - resolution: {integrity: sha512-7JV0qdblTeWFigevmwFUgROXX395F+MQx6v0YqPn8Bx0B4Sng6alEejz9PENzgLYpG+zL0O4tGdBzc4gKZH8XA==} - dependencies: - ast-types: 0.14.2 - recast: 0.20.5 - dev: true - - /@types/lodash@4.14.202: - resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==} - dev: true - - /@types/mocha@10.0.6: - resolution: {integrity: sha512-dJvrYWxP/UcXm36Qn36fxhUKu8A/xMRXVT2cliFF1Z7UA9liG5Psj3ezNSZw+5puH2czDXRLcXQxf8JbJt0ejg==} - dev: true - - /@types/ms@0.7.34: - resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==} - dev: true - - /@types/node@18.19.22: - resolution: {integrity: sha512-p3pDIfuMg/aXBmhkyanPshdfJuX5c5+bQjYLIikPLXAUycEogij/c50n/C+8XOA5L93cU4ZRXtn+dNQGi0IZqQ==} - dependencies: - undici-types: 5.26.5 - dev: true - - /@types/node@20.11.22: - resolution: {integrity: sha512-/G+IxWxma6V3E+pqK1tSl2Fo1kl41pK1yeCyDsgkF9WlVAme4j5ISYM2zR11bgLFJGLN5sVK40T4RJNuiZbEjA==} - dependencies: - undici-types: 5.26.5 - dev: true - - /@types/parse-json@4.0.2: - resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==} - - /@types/prettier@2.7.3: - resolution: {integrity: sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==} - dev: true - - /@types/prop-types@15.7.11: - resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==} - - /@types/react-dom@18.2.19: - resolution: {integrity: sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==} - dependencies: - '@types/react': 18.2.55 - - /@types/react-is@18.2.4: - resolution: {integrity: sha512-wBc7HgmbCcrvw0fZjxbgz/xrrlZKzEqmABBMeSvpTvdm25u6KI6xdIi9pRE2G0C1Lw5ETFdcn4UbYZ4/rpqUYw==} - dependencies: - '@types/react': 18.2.55 - dev: true - - /@types/react-test-renderer@18.0.7: - resolution: {integrity: sha512-1+ANPOWc6rB3IkSnElhjv6VLlKg2dSv/OWClUyZimbLsQyBn8Js9Vtdsi3UICJ2rIQ3k2la06dkB+C92QfhKmg==} - dependencies: - '@types/react': 18.2.55 - dev: true - - /@types/react-transition-group@4.4.10: - resolution: {integrity: sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==} - dependencies: - '@types/react': 18.2.55 - dev: false - - /@types/react@16.14.57: - resolution: {integrity: sha512-fuNq/GV1a6GgqSuVuC457vYeTbm4E1CUBQVZwSPxqYnRhIzSXCJ1gGqyv+PKhqLyfbKCga9dXHJDzv+4XE41fw==} - dependencies: - '@types/prop-types': 15.7.11 - '@types/scheduler': 0.16.8 - csstype: 3.1.3 - dev: true - - /@types/react@18.2.55: - resolution: {integrity: sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==} - dependencies: - '@types/prop-types': 15.7.11 - '@types/scheduler': 0.16.8 - csstype: 3.1.3 - - /@types/resolve@0.0.8: - resolution: {integrity: sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==} - dependencies: - '@types/node': 20.11.22 - dev: true - - /@types/scheduler@0.16.8: - resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==} - - /@types/sinon@10.0.20: - resolution: {integrity: sha512-2APKKruFNCAZgx3daAyACGzWuJ028VVCUDk6o2rw/Z4PXT0ogwdV4KUegW0MwVs0Zu59auPXbbuBJHF12Sx1Eg==} - dependencies: - '@types/sinonjs__fake-timers': 8.1.5 - dev: true - - /@types/sinonjs__fake-timers@8.1.5: - resolution: {integrity: sha512-mQkU2jY8jJEF7YHjHvsQO8+3ughTL1mcnn96igfhONmR+fUPSKIkefQYpSe8bsly2Ep7oQbn/6VG5/9/0qcArQ==} - dev: true - - /@types/stylis@4.2.0: - resolution: {integrity: sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==} - dev: true - - /@types/stylis@4.2.5: - resolution: {integrity: sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==} - dev: true - - /@types/uuid@9.0.8: - resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==} - dev: true - - /@ungap/structured-clone@1.2.0: - resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} - dev: true - - /@vitejs/plugin-react@4.2.1(vite@5.0.12): - 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.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) - '@types/babel__core': 7.20.5 - react-refresh: 0.14.0 - vite: 5.0.12 - transitivePeerDependencies: - - supports-color - dev: true - - /@wyw-in-js/processor-utils@0.5.0: - resolution: {integrity: sha512-3sRwuDTMy2GmD+44bhCTcBasCrjBexzYRzhxkmMrX49cpVDmQOH+4O7kX5OMRbmzMXe6Z5MsnxIlDlm3bJlcww==} - engines: {node: '>=16.0.0'} - dependencies: - '@babel/generator': 7.23.6 - '@wyw-in-js/shared': 0.5.0 - transitivePeerDependencies: - - supports-color - - /@wyw-in-js/shared@0.5.0: - resolution: {integrity: sha512-W6Uic3cqRs75XZfXGOYH/0fADbl3Wz/kqnNaowgyNTdTN7/9vdlqk/D/gMT5WGolj4t418+rYe2FHHs0LdlmvA==} - engines: {node: '>=16.0.0'} - dependencies: - debug: 4.3.4(supports-color@8.1.1) - find-up: 5.0.0 - minimatch: 9.0.3 - transitivePeerDependencies: - - supports-color - - /@wyw-in-js/transform@0.5.0(typescript@5.3.3): - 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 - '@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) - cosmiconfig: 8.3.6(typescript@5.3.3) - happy-dom: 12.10.3 - source-map: 0.7.4 - stylis: 4.3.1 - ts-invariant: 0.10.3 - transitivePeerDependencies: - - supports-color - - typescript - - /accepts@1.3.8: - resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==} - engines: {node: '>= 0.6'} - dependencies: - mime-types: 2.1.35 - negotiator: 0.6.3 - dev: true - - /acorn-jsx@5.3.2(acorn@8.11.3): - resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} - peerDependencies: - acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 - dependencies: - acorn: 8.11.3 - dev: true - - /acorn@5.7.4: - resolution: {integrity: sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==} - engines: {node: '>=0.4.0'} - hasBin: true - dev: true - - /acorn@8.11.3: - resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==} - engines: {node: '>=0.4.0'} - hasBin: true - - /agent-base@7.1.0: - resolution: {integrity: sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==} - engines: {node: '>= 14'} - dependencies: - debug: 4.3.4(supports-color@8.1.1) - transitivePeerDependencies: - - supports-color - dev: false - - /airbnb-prop-types@2.16.0(react@18.2.0): - resolution: {integrity: sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==} - peerDependencies: - react: ^0.14 || ^15.0.0 || ^16.0.0-alpha - dependencies: - array.prototype.find: 2.2.2 - function.prototype.name: 1.1.6 - is-regex: 1.1.4 - object-is: 1.1.5 - object.assign: 4.1.5 - object.entries: 1.1.7 - prop-types: 15.8.1 - prop-types-exact: 1.2.0 - react: 18.2.0 - react-is: 16.13.1 - dev: false - - /ajv@6.12.6: - resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==} - dependencies: - fast-deep-equal: 3.1.3 - fast-json-stable-stringify: 2.1.0 - json-schema-traverse: 0.4.1 - uri-js: 4.4.1 - dev: true - - /ansi-colors@4.1.1: - resolution: {integrity: sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==} - engines: {node: '>=6'} - dev: false - - /ansi-regex@5.0.1: - resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} - engines: {node: '>=8'} - - /ansi-regex@6.0.1: - resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==} - engines: {node: '>=12'} - - /ansi-styles@3.2.1: - resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==} - engines: {node: '>=4'} - dependencies: - color-convert: 1.9.3 - - /ansi-styles@4.3.0: - resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==} - engines: {node: '>=8'} - dependencies: - color-convert: 2.0.1 - - /ansi-styles@5.2.0: - resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==} - engines: {node: '>=10'} - - /ansi-styles@6.2.1: - resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==} - engines: {node: '>=12'} - - /anymatch@3.1.3: - resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} - engines: {node: '>= 8'} - dependencies: - normalize-path: 3.0.0 - picomatch: 2.3.1 - - /argparse@2.0.1: - resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} - - /aria-query@5.1.3: - resolution: {integrity: sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==} - dependencies: - deep-equal: 2.2.3 - - /arr-diff@4.0.0: - resolution: {integrity: sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==} - engines: {node: '>=0.10.0'} - dev: false - - /arr-flatten@1.1.0: - resolution: {integrity: sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==} - engines: {node: '>=0.10.0'} - dev: false - - /arr-union@3.1.0: - resolution: {integrity: sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==} - engines: {node: '>=0.10.0'} - dev: false - - /array-buffer-byte-length@1.0.1: - resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - is-array-buffer: 3.0.4 - - /array-flatten@1.1.1: - resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==} - dev: true - - /array-union@2.1.0: - resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==} - engines: {node: '>=8'} - dev: false - - /array-unique@0.3.2: - resolution: {integrity: sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==} - engines: {node: '>=0.10.0'} - dev: false - - /array.prototype.filter@1.0.3: - resolution: {integrity: sha512-VizNcj/RGJiUyQBgzwxzE5oHdeuXY5hSbbmKMlphj1cy1Vl7Pn2asCGbSrru6hSQjmCzqTBPVWAF/whmEOVHbw==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - define-properties: 1.2.1 - es-abstract: 1.22.4 - es-array-method-boxes-properly: 1.0.0 - is-string: 1.0.7 - dev: false - - /array.prototype.find@2.2.2: - resolution: {integrity: sha512-DRumkfW97iZGOfn+lIXbkVrXL04sfYKX+EfOodo8XboR5sxPDVvOjZTF/rysusa9lmhmSOeD6Vp6RKQP+eP4Tg==} - dependencies: - call-bind: 1.0.7 - define-properties: 1.2.1 - es-abstract: 1.22.4 - es-shim-unscopables: 1.0.2 - dev: false - - /array.prototype.flat@1.3.2: - resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - define-properties: 1.2.1 - es-abstract: 1.22.4 - es-shim-unscopables: 1.0.2 - dev: false - - /arraybuffer.prototype.slice@1.0.3: - resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==} - engines: {node: '>= 0.4'} - dependencies: - array-buffer-byte-length: 1.0.1 - call-bind: 1.0.7 - define-properties: 1.2.1 - es-abstract: 1.22.4 - es-errors: 1.3.0 - get-intrinsic: 1.2.4 - is-array-buffer: 3.0.4 - is-shared-array-buffer: 1.0.3 - dev: false - - /assertion-error@1.1.0: - resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==} - - /assign-symbols@1.0.0: - resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==} - engines: {node: '>=0.10.0'} - dev: false - - /ast-types@0.14.2: - resolution: {integrity: sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==} - engines: {node: '>=4'} - dependencies: - tslib: 2.6.2 - - /asynckit@0.4.0: - resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} - dev: false - - /at-least-node@1.0.0: - resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==} - engines: {node: '>= 4.0.0'} - dev: false - - /atob@2.1.2: - resolution: {integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==} - engines: {node: '>= 4.5.0'} - hasBin: true - dev: false - - /available-typed-arrays@1.0.7: - resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==} - engines: {node: '>= 0.4'} - dependencies: - possible-typed-array-names: 1.0.0 - - /babel-core@7.0.0-bridge.0(@babel/core@7.23.9): - resolution: {integrity: sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.23.9 - dev: false - - /babel-merge@3.0.0(@babel/core@7.23.9): - 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.0.0 - dependencies: - '@babel/core': 7.23.9 - deepmerge: 2.2.1 - object.omit: 3.0.0 - - /babel-plugin-macros@3.1.0: - resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==} - engines: {node: '>=10', npm: '>=6'} - dependencies: - '@babel/runtime': 7.23.9 - cosmiconfig: 7.1.0 - resolve: 1.22.8 - - /babel-plugin-polyfill-corejs2@0.4.8(@babel/core@7.23.9): - resolution: {integrity: sha512-OtIuQfafSzpo/LhnJaykc0R/MMnuLSSVjVYy9mHArIZ9qTCSZ6TpWCuEKZYVoN//t8HqBNScHrOtCrIK5IaGLg==} - peerDependencies: - '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 - 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) - 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==} - peerDependencies: - '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-define-polyfill-provider': 0.5.0(@babel/core@7.23.9) - core-js-compat: 3.36.0 - transitivePeerDependencies: - - supports-color - - /babel-plugin-polyfill-regenerator@0.5.5(@babel/core@7.23.9): - resolution: {integrity: sha512-OJGYZlhLqBh2DDHeqAxWB1XIvr49CxiJ2gIt61/PU55CQK4Z58OzMqjDe1zwQdQk+rBYsRc+1rJmdajM3gimHg==} - peerDependencies: - '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-define-polyfill-provider': 0.5.0(@babel/core@7.23.9) - transitivePeerDependencies: - - supports-color - - /babel-plugin-tester@11.0.4(@babel/core@7.23.9): - resolution: {integrity: sha512-cqswtpSPo0e++rZB0l/54EG17LL25l9gLgh59yXfnmNxX+2lZTIOpx2zt4YI9QIClVXc8xf63J6yWwKkzy0jNg==} - engines: {node: ^14.20.0 || ^16.16.0 || >=18.5.0} - peerDependencies: - '@babel/core': '>=7.11.6' - dependencies: - '@babel/core': 7.23.9 - core-js: 3.36.0 - debug: 4.3.4(supports-color@8.1.1) - lodash.mergewith: 4.6.2 - prettier: 2.8.8 - strip-indent: 3.0.0 - transitivePeerDependencies: - - supports-color - dev: true - - /babel-plugin-transform-react-remove-prop-types@0.4.24: - resolution: {integrity: sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==} - - /balanced-match@1.0.2: - resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} - - /base@0.11.2: - resolution: {integrity: sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==} - engines: {node: '>=0.10.0'} - dependencies: - cache-base: 1.0.1 - class-utils: 0.3.6 - component-emitter: 1.3.1 - define-property: 1.0.0 - isobject: 3.0.1 - mixin-deep: 1.3.2 - pascalcase: 0.1.1 - dev: false - - /binary-extensions@2.2.0: - resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} - engines: {node: '>=8'} - - /body-parser@1.20.2: - resolution: {integrity: sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==} - engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16} - dependencies: - bytes: 3.1.2 - content-type: 1.0.5 - debug: 2.6.9 - depd: 2.0.0 - destroy: 1.2.0 - http-errors: 2.0.0 - iconv-lite: 0.4.24 - on-finished: 2.4.1 - qs: 6.11.0 - raw-body: 2.5.2 - type-is: 1.6.18 - unpipe: 1.0.0 - transitivePeerDependencies: - - supports-color - dev: true - - /boolbase@1.0.0: - resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} - - /brace-expansion@1.1.11: - resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==} - dependencies: - balanced-match: 1.0.2 - concat-map: 0.0.1 - - /brace-expansion@2.0.1: - resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==} - dependencies: - balanced-match: 1.0.2 - - /braces@2.3.2: - resolution: {integrity: sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==} - engines: {node: '>=0.10.0'} - dependencies: - arr-flatten: 1.1.0 - array-unique: 0.3.2 - extend-shallow: 2.0.1 - fill-range: 4.0.0 - isobject: 3.0.1 - repeat-element: 1.1.4 - snapdragon: 0.8.2 - snapdragon-node: 2.1.1 - split-string: 3.1.0 - to-regex: 3.0.2 - transitivePeerDependencies: - - supports-color - dev: false - - /braces@3.0.2: - resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==} - engines: {node: '>=8'} - dependencies: - fill-range: 7.0.1 - - /browser-stdout@1.3.1: - resolution: {integrity: sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==} - dev: false - - /browserslist@4.23.0: - resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==} - engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} - hasBin: true - dependencies: - caniuse-lite: 1.0.30001591 - electron-to-chromium: 1.4.682 - node-releases: 2.0.14 - update-browserslist-db: 1.0.13(browserslist@4.23.0) - - /buffer-es6@4.9.3: - resolution: {integrity: sha512-Ibt+oXxhmeYJSsCkODPqNpPmyegefiD8rfutH1NYGhMZQhSp95Rz7haemgnJ6dxa6LT+JLLbtgOMORRluwKktw==} - dev: true - - /buffer-from@0.1.2: - resolution: {integrity: sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg==} - dev: true - - /buffer-from@1.1.2: - resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==} - - /builtin-modules@3.3.0: - resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==} - engines: {node: '>=6'} - dev: true - - /busboy@1.6.0: - resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==} - engines: {node: '>=10.16.0'} - dependencies: - streamsearch: 1.1.0 - - /bytes@3.1.2: - resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==} - engines: {node: '>= 0.8'} - dev: true - - /cache-base@1.0.1: - resolution: {integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==} - engines: {node: '>=0.10.0'} - dependencies: - collection-visit: 1.0.0 - component-emitter: 1.3.1 - get-value: 2.0.6 - has-value: 1.0.0 - isobject: 3.0.1 - set-value: 2.0.1 - to-object-path: 0.3.0 - union-value: 1.0.1 - unset-value: 1.0.0 - dev: false - - /call-bind@1.0.7: - resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==} - engines: {node: '>= 0.4'} - dependencies: - es-define-property: 1.0.0 - es-errors: 1.3.0 - function-bind: 1.1.2 - get-intrinsic: 1.2.4 - set-function-length: 1.2.1 - - /callsites@3.1.0: - resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} - engines: {node: '>=6'} - - /camelcase@6.3.0: - resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==} - engines: {node: '>=10'} - dev: false - - /camelize@1.0.1: - resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==} - dev: true - - /caniuse-lite@1.0.30001591: - resolution: {integrity: sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ==} - - /chai-dom@1.12.0(chai@4.4.1): - resolution: {integrity: sha512-pLP8h6IBR8z1AdeQ+EMcJ7dXPdsax/1Q7gdGZjsnAmSBl3/gItQUYSCo32br1qOy4SlcBjvqId7ilAf3uJ2K1w==} - engines: {node: '>= 0.12.0'} - peerDependencies: - chai: '>= 3' - dependencies: - chai: 4.4.1 - dev: false - - /chai@4.4.1: - resolution: {integrity: sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==} - engines: {node: '>=4'} - dependencies: - assertion-error: 1.1.0 - check-error: 1.0.3 - deep-eql: 4.1.3 - get-func-name: 2.0.2 - loupe: 2.3.7 - pathval: 1.1.1 - type-detect: 4.0.8 - - /chalk@2.4.2: - resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==} - engines: {node: '>=4'} - dependencies: - ansi-styles: 3.2.1 - escape-string-regexp: 1.0.5 - supports-color: 5.5.0 - - /chalk@4.1.2: - resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} - engines: {node: '>=10'} - dependencies: - ansi-styles: 4.3.0 - supports-color: 7.2.0 - - /chalk@5.3.0: - resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==} - engines: {node: ^12.17.0 || ^14.13 || >=16.0.0} - dev: true - - /check-error@1.0.3: - resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==} - dependencies: - get-func-name: 2.0.2 - - /cheerio-select@2.1.0: - resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==} - dependencies: - boolbase: 1.0.0 - css-select: 5.1.0 - css-what: 6.1.0 - domelementtype: 2.3.0 - domhandler: 5.0.3 - domutils: 3.1.0 - dev: false - - /cheerio@1.0.0-rc.12: - resolution: {integrity: sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==} - engines: {node: '>= 6'} - dependencies: - cheerio-select: 2.1.0 - dom-serializer: 2.0.0 - domhandler: 5.0.3 - domutils: 3.1.0 - htmlparser2: 8.0.2 - parse5: 7.1.2 - parse5-htmlparser2-tree-adapter: 7.0.0 - dev: false - - /chokidar@3.5.3: - resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==} - engines: {node: '>= 8.10.0'} - dependencies: - anymatch: 3.1.3 - braces: 3.0.2 - glob-parent: 5.1.2 - is-binary-path: 2.1.0 - is-glob: 4.0.3 - normalize-path: 3.0.0 - readdirp: 3.6.0 - optionalDependencies: - fsevents: 2.3.3 - dev: false - - /chokidar@3.6.0: - resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} - engines: {node: '>= 8.10.0'} - dependencies: - anymatch: 3.1.3 - braces: 3.0.2 - glob-parent: 5.1.2 - is-binary-path: 2.1.0 - is-glob: 4.0.3 - normalize-path: 3.0.0 - readdirp: 3.6.0 - optionalDependencies: - fsevents: 2.3.3 - - /class-utils@0.3.6: - resolution: {integrity: sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==} - engines: {node: '>=0.10.0'} - dependencies: - arr-union: 3.1.0 - define-property: 0.2.5 - isobject: 3.0.1 - static-extend: 0.1.2 - dev: false - - /client-only@0.0.1: - resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==} - - /cliui@7.0.4: - resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==} - dependencies: - string-width: 4.2.3 - strip-ansi: 6.0.1 - wrap-ansi: 7.0.0 - dev: false - - /cliui@8.0.1: - resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==} - engines: {node: '>=12'} - dependencies: - string-width: 4.2.3 - strip-ansi: 6.0.1 - wrap-ansi: 7.0.0 - - /clone-deep@4.0.1: - resolution: {integrity: sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==} - engines: {node: '>=6'} - dependencies: - is-plain-object: 2.0.4 - kind-of: 6.0.3 - shallow-clone: 3.0.1 - - /clsx@2.1.0: - resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==} - engines: {node: '>=6'} - dev: false - - /collection-visit@1.0.0: - resolution: {integrity: sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==} - engines: {node: '>=0.10.0'} - dependencies: - map-visit: 1.0.0 - object-visit: 1.0.1 - dev: false - - /color-convert@1.9.3: - resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} - dependencies: - color-name: 1.1.3 - - /color-convert@2.0.1: - resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} - engines: {node: '>=7.0.0'} - dependencies: - color-name: 1.1.4 - - /color-name@1.1.3: - resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==} - - /color-name@1.1.4: - resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} - - /combined-stream@1.0.8: - resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} - engines: {node: '>= 0.8'} - dependencies: - delayed-stream: 1.0.0 - dev: false - - /commander@2.20.3: - resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} - - /commander@7.2.0: - resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} - engines: {node: '>= 10'} - dev: true - - /commondir@1.0.1: - resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==} - - /component-emitter@1.3.1: - resolution: {integrity: sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==} - dev: false - - /concat-map@0.0.1: - resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} - - /content-disposition@0.5.4: - resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==} - engines: {node: '>= 0.6'} - dependencies: - safe-buffer: 5.2.1 - dev: true - - /content-type@1.0.5: - resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==} - engines: {node: '>= 0.6'} - dev: true - - /convert-source-map@1.9.0: - resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==} - - /convert-source-map@2.0.0: - resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} - - /cookie-signature@1.0.6: - resolution: {integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==} - dev: true - - /cookie@0.5.0: - resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==} - engines: {node: '>= 0.6'} - dev: true - - /copy-descriptor@0.1.1: - resolution: {integrity: sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==} - engines: {node: '>=0.10.0'} - dev: false - - /core-js-compat@3.36.0: - resolution: {integrity: sha512-iV9Pd/PsgjNWBXeq8XRtWVSgz2tKAfhfvBs7qxYty+RlRd+OCksaWmOnc4JKrTc1cToXL1N0s3l/vwlxPtdElw==} - dependencies: - browserslist: 4.23.0 - - /core-js@3.36.0: - resolution: {integrity: sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==} - requiresBuild: true - dev: true - - /core-util-is@1.0.3: - resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} - dev: true - - /cosmiconfig@7.1.0: - resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==} - engines: {node: '>=10'} - dependencies: - '@types/parse-json': 4.0.2 - import-fresh: 3.3.0 - parse-json: 5.2.0 - path-type: 4.0.0 - yaml: 1.10.2 - - /cosmiconfig@8.3.6(typescript@5.3.3): - resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==} - engines: {node: '>=14'} - peerDependencies: - typescript: '>=4.9.5' - peerDependenciesMeta: - typescript: - optional: true - dependencies: - import-fresh: 3.3.0 - js-yaml: 4.1.0 - parse-json: 5.2.0 - path-type: 4.0.0 - typescript: 5.3.3 - - /cross-fetch@4.0.0: - resolution: {integrity: sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==} - dependencies: - node-fetch: 2.7.0 - transitivePeerDependencies: - - encoding - dev: true - - /cross-spawn@7.0.3: - resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} - engines: {node: '>= 8'} - dependencies: - path-key: 3.1.1 - shebang-command: 2.0.0 - which: 2.0.2 - - /css-color-keywords@1.0.0: - resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==} - engines: {node: '>=4'} - dev: true - - /css-mediaquery@0.1.2: - resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==} - dev: true - - /css-select@5.1.0: - resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} - dependencies: - boolbase: 1.0.0 - css-what: 6.1.0 - domhandler: 5.0.3 - domutils: 3.1.0 - nth-check: 2.1.1 - - /css-to-react-native@3.2.0: - resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==} - dependencies: - camelize: 1.0.1 - css-color-keywords: 1.0.0 - postcss-value-parser: 4.2.0 - dev: true - - /css-tree@2.2.1: - resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==} - 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 - dev: true - - /css-tree@2.3.1: - resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} - engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} - dependencies: - mdn-data: 2.0.30 - source-map-js: 1.0.2 - dev: true - - /css-vendor@2.0.8: - resolution: {integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==} - dependencies: - '@babel/runtime': 7.23.9 - is-in-browser: 1.1.3 - dev: false - - /css-what@6.1.0: - resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} - engines: {node: '>= 6'} - - /css.escape@1.5.1: - resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==} - - /cssesc@3.0.0: - resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} - engines: {node: '>=4'} - hasBin: true - dev: false - - /csso@5.0.5: - resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==} - engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} - dependencies: - css-tree: 2.2.1 - dev: true - - /cssstyle@4.0.1: - resolution: {integrity: sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==} - engines: {node: '>=18'} - dependencies: - rrweb-cssom: 0.6.0 - dev: false - - /csstype@3.1.2: - resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} - dev: true - - /csstype@3.1.3: - resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} - - /data-urls@5.0.0: - resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==} - engines: {node: '>=18'} - dependencies: - whatwg-mimetype: 4.0.0 - whatwg-url: 14.0.0 - dev: false - - /debug@2.6.9: - resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true - dependencies: - ms: 2.0.0 - - /debug@4.3.4(supports-color@8.1.1): - resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} - engines: {node: '>=6.0'} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true - dependencies: - ms: 2.1.2 - supports-color: 8.1.1 - - /decamelize@4.0.0: - resolution: {integrity: sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==} - engines: {node: '>=10'} - dev: false - - /decimal.js@10.4.3: - resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==} - dev: false - - /decode-uri-component@0.2.2: - resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==} - engines: {node: '>=0.10'} - dev: false - - /deep-eql@4.1.3: - resolution: {integrity: sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==} - engines: {node: '>=6'} - dependencies: - type-detect: 4.0.8 - - /deep-equal@2.2.3: - resolution: {integrity: sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==} - engines: {node: '>= 0.4'} - dependencies: - array-buffer-byte-length: 1.0.1 - call-bind: 1.0.7 - es-get-iterator: 1.1.3 - get-intrinsic: 1.2.4 - is-arguments: 1.1.1 - is-array-buffer: 3.0.4 - is-date-object: 1.0.5 - is-regex: 1.1.4 - is-shared-array-buffer: 1.0.3 - isarray: 2.0.5 - object-is: 1.1.5 - object-keys: 1.1.1 - object.assign: 4.1.5 - regexp.prototype.flags: 1.5.2 - side-channel: 1.0.5 - which-boxed-primitive: 1.0.2 - which-collection: 1.0.1 - which-typed-array: 1.1.14 - - /deep-is@0.1.4: - resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} - dev: true - - /deepmerge@2.2.1: - resolution: {integrity: sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==} - engines: {node: '>=0.10.0'} - - /define-data-property@1.1.4: - resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==} - engines: {node: '>= 0.4'} - dependencies: - es-define-property: 1.0.0 - es-errors: 1.3.0 - gopd: 1.0.1 - - /define-properties@1.2.1: - resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==} - engines: {node: '>= 0.4'} - dependencies: - define-data-property: 1.1.4 - has-property-descriptors: 1.0.2 - object-keys: 1.1.1 - - /define-property@0.2.5: - resolution: {integrity: sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==} - engines: {node: '>=0.10.0'} - dependencies: - is-descriptor: 0.1.7 - dev: false - - /define-property@1.0.0: - resolution: {integrity: sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==} - engines: {node: '>=0.10.0'} - dependencies: - is-descriptor: 1.0.3 - dev: false - - /define-property@2.0.2: - resolution: {integrity: sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==} - engines: {node: '>=0.10.0'} - dependencies: - is-descriptor: 1.0.3 - isobject: 3.0.1 - dev: false - - /delayed-stream@1.0.0: - resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} - engines: {node: '>=0.4.0'} - dev: false - - /depd@2.0.0: - resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==} - engines: {node: '>= 0.8'} - dev: true - - /dependency-graph@0.9.0: - resolution: {integrity: sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==} - engines: {node: '>= 0.6.0'} - dev: false - - /destroy@1.2.0: - resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==} - engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16} - dev: true - - /diff@5.0.0: - resolution: {integrity: sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==} - engines: {node: '>=0.3.1'} - dev: false - - /diff@5.2.0: - resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==} - engines: {node: '>=0.3.1'} - - /dir-glob@3.0.1: - resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} - engines: {node: '>=8'} - dependencies: - path-type: 4.0.0 - dev: false - - /discontinuous-range@1.0.0: - resolution: {integrity: sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ==} - dev: false - - /doctrine@3.0.0: - resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==} - engines: {node: '>=6.0.0'} - dependencies: - esutils: 2.0.3 - - /dom-accessibility-api@0.5.16: - resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==} - - /dom-accessibility-api@0.6.3: - resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==} - dev: false - - /dom-helpers@5.2.1: - resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==} - dependencies: - '@babel/runtime': 7.23.9 - csstype: 3.1.3 - dev: false - - /dom-serializer@2.0.0: - resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==} - dependencies: - domelementtype: 2.3.0 - domhandler: 5.0.3 - entities: 4.5.0 - - /domelementtype@2.3.0: - resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==} - - /domhandler@5.0.3: - resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==} - engines: {node: '>= 4'} - dependencies: - domelementtype: 2.3.0 - - /domutils@3.1.0: - resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==} - dependencies: - dom-serializer: 2.0.0 - domelementtype: 2.3.0 - domhandler: 5.0.3 - - /duplexer2@0.1.4: - resolution: {integrity: sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==} - dependencies: - readable-stream: 2.3.8 - dev: true - - /eastasianwidth@0.2.0: - resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} - - /ee-first@1.1.1: - resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==} - dev: true - - /electron-to-chromium@1.4.682: - resolution: {integrity: sha512-oCglfs8yYKs9RQjJFOHonSnhikPK3y+0SvSYc/YpYJV//6rqc0/hbwd0c7vgK4vrl6y2gJAwjkhkSGWK+z4KRA==} - - /emoji-regex@8.0.0: - resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} - - /emoji-regex@9.2.2: - resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==} - - /encodeurl@1.0.2: - resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==} - engines: {node: '>= 0.8'} - dev: true - - /entities@4.5.0: - resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} - engines: {node: '>=0.12'} - - /envinfo@7.11.1: - resolution: {integrity: sha512-8PiZgZNIB4q/Lw4AhOvAfB/ityHAd2bli3lESSWmWSzSsl5dKpy5N1d1Rfkd2teq/g9xN90lc6o98DOjMeYHpg==} - engines: {node: '>=4'} - hasBin: true - dev: false - - /enzyme-adapter-utils@1.14.2(react@18.2.0): - resolution: {integrity: sha512-1ZC++RlsYRaiOWE5NRaF5OgsMt7F5rn/VuaJIgc7eW/fmgg8eS1/Ut7EugSPPi7VMdWMLcymRnMF+mJUJ4B8KA==} - peerDependencies: - react: 0.13.x || 0.14.x || ^15.0.0-0 || ^16.0.0-0 - dependencies: - airbnb-prop-types: 2.16.0(react@18.2.0) - function.prototype.name: 1.1.6 - hasown: 2.0.1 - object.assign: 4.1.5 - object.fromentries: 2.0.7 - prop-types: 15.8.1 - react: 18.2.0 - semver: 6.3.1 - dev: false - - /enzyme-shallow-equal@1.0.7: - resolution: {integrity: sha512-/um0GFqUXnpM9SvKtje+9Tjoz3f1fpBC3eXRFrNs8kpYn69JljciYP7KZTqM/YQbUY9KUjvKB4jo/q+L6WGGvg==} - dependencies: - hasown: 2.0.1 - object-is: 1.1.5 - dev: false - - /enzyme@3.11.0: - resolution: {integrity: sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==} - dependencies: - array.prototype.flat: 1.3.2 - cheerio: 1.0.0-rc.12 - enzyme-shallow-equal: 1.0.7 - function.prototype.name: 1.1.6 - has: 1.0.4 - html-element-map: 1.3.1 - is-boolean-object: 1.1.2 - is-callable: 1.2.7 - is-number-object: 1.0.7 - is-regex: 1.1.4 - is-string: 1.0.7 - is-subset: 0.1.1 - lodash.escape: 4.0.1 - lodash.isequal: 4.5.0 - object-inspect: 1.13.1 - object-is: 1.1.5 - object.assign: 4.1.5 - object.entries: 1.1.7 - object.values: 1.1.7 - raf: 3.4.1 - rst-selector-parser: 2.2.3 - string.prototype.trim: 1.2.8 - dev: false - - /error-ex@1.3.2: - resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==} - dependencies: - is-arrayish: 0.2.1 - - /es-abstract@1.22.4: - resolution: {integrity: sha512-vZYJlk2u6qHYxBOTjAeg7qUxHdNfih64Uu2J8QqWgXZ2cri0ZpJAkzDUK/q593+mvKwlxyaxr6F1Q+3LKoQRgg==} - engines: {node: '>= 0.4'} - dependencies: - array-buffer-byte-length: 1.0.1 - arraybuffer.prototype.slice: 1.0.3 - available-typed-arrays: 1.0.7 - call-bind: 1.0.7 - es-define-property: 1.0.0 - es-errors: 1.3.0 - es-set-tostringtag: 2.0.3 - es-to-primitive: 1.2.1 - function.prototype.name: 1.1.6 - get-intrinsic: 1.2.4 - get-symbol-description: 1.0.2 - globalthis: 1.0.3 - gopd: 1.0.1 - has-property-descriptors: 1.0.2 - has-proto: 1.0.3 - has-symbols: 1.0.3 - hasown: 2.0.1 - internal-slot: 1.0.7 - is-array-buffer: 3.0.4 - is-callable: 1.2.7 - is-negative-zero: 2.0.3 - is-regex: 1.1.4 - is-shared-array-buffer: 1.0.3 - is-string: 1.0.7 - is-typed-array: 1.1.13 - is-weakref: 1.0.2 - object-inspect: 1.13.1 - object-keys: 1.1.1 - object.assign: 4.1.5 - regexp.prototype.flags: 1.5.2 - safe-array-concat: 1.1.0 - safe-regex-test: 1.0.3 - string.prototype.trim: 1.2.8 - string.prototype.trimend: 1.0.7 - string.prototype.trimstart: 1.0.7 - typed-array-buffer: 1.0.2 - typed-array-byte-length: 1.0.1 - typed-array-byte-offset: 1.0.2 - typed-array-length: 1.0.5 - unbox-primitive: 1.0.2 - which-typed-array: 1.1.14 - dev: false - - /es-array-method-boxes-properly@1.0.0: - resolution: {integrity: sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==} - dev: false - - /es-define-property@1.0.0: - resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==} - engines: {node: '>= 0.4'} - dependencies: - get-intrinsic: 1.2.4 - - /es-errors@1.3.0: - resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==} - engines: {node: '>= 0.4'} - - /es-get-iterator@1.1.3: - resolution: {integrity: sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==} - dependencies: - call-bind: 1.0.7 - get-intrinsic: 1.2.4 - has-symbols: 1.0.3 - is-arguments: 1.1.1 - is-map: 2.0.2 - is-set: 2.0.2 - is-string: 1.0.7 - isarray: 2.0.5 - stop-iteration-iterator: 1.0.0 - - /es-set-tostringtag@2.0.3: - resolution: {integrity: sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==} - engines: {node: '>= 0.4'} - dependencies: - get-intrinsic: 1.2.4 - has-tostringtag: 1.0.2 - hasown: 2.0.1 - dev: false - - /es-shim-unscopables@1.0.2: - resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==} - dependencies: - hasown: 2.0.1 - dev: false - - /es-to-primitive@1.2.1: - resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==} - engines: {node: '>= 0.4'} - dependencies: - is-callable: 1.2.7 - is-date-object: 1.0.5 - is-symbol: 1.0.4 - dev: false - - /esbuild@0.19.12: - resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==} - engines: {node: '>=12'} - hasBin: true - requiresBuild: true - optionalDependencies: - '@esbuild/aix-ppc64': 0.19.12 - '@esbuild/android-arm': 0.19.12 - '@esbuild/android-arm64': 0.19.12 - '@esbuild/android-x64': 0.19.12 - '@esbuild/darwin-arm64': 0.19.12 - '@esbuild/darwin-x64': 0.19.12 - '@esbuild/freebsd-arm64': 0.19.12 - '@esbuild/freebsd-x64': 0.19.12 - '@esbuild/linux-arm': 0.19.12 - '@esbuild/linux-arm64': 0.19.12 - '@esbuild/linux-ia32': 0.19.12 - '@esbuild/linux-loong64': 0.19.12 - '@esbuild/linux-mips64el': 0.19.12 - '@esbuild/linux-ppc64': 0.19.12 - '@esbuild/linux-riscv64': 0.19.12 - '@esbuild/linux-s390x': 0.19.12 - '@esbuild/linux-x64': 0.19.12 - '@esbuild/netbsd-x64': 0.19.12 - '@esbuild/openbsd-x64': 0.19.12 - '@esbuild/sunos-x64': 0.19.12 - '@esbuild/win32-arm64': 0.19.12 - '@esbuild/win32-ia32': 0.19.12 - '@esbuild/win32-x64': 0.19.12 - dev: true - - /escalade@3.1.2: - resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==} - engines: {node: '>=6'} - - /escape-html@1.0.3: - resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==} - dev: true - - /escape-string-regexp@1.0.5: - resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==} - engines: {node: '>=0.8.0'} - - /escape-string-regexp@4.0.0: - resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} - engines: {node: '>=10'} - - /eslint-scope@7.2.2: - resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==} - engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} - dependencies: - esrecurse: 4.3.0 - estraverse: 5.3.0 - dev: true - - /eslint-visitor-keys@3.4.3: - resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==} - engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} - dev: true - - /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.57.0) - '@eslint-community/regexpp': 4.10.0 - '@eslint/eslintrc': 2.1.4 - '@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 - ajv: 6.12.6 - chalk: 4.1.2 - cross-spawn: 7.0.3 - debug: 4.3.4(supports-color@8.1.1) - doctrine: 3.0.0 - escape-string-regexp: 4.0.0 - eslint-scope: 7.2.2 - eslint-visitor-keys: 3.4.3 - espree: 9.6.1 - esquery: 1.5.0 - esutils: 2.0.3 - fast-deep-equal: 3.1.3 - file-entry-cache: 6.0.1 - find-up: 5.0.0 - glob-parent: 6.0.2 - globals: 13.24.0 - graphemer: 1.4.0 - ignore: 5.3.1 - imurmurhash: 0.1.4 - is-glob: 4.0.3 - is-path-inside: 3.0.3 - js-yaml: 4.1.0 - json-stable-stringify-without-jsonify: 1.0.1 - levn: 0.4.1 - lodash.merge: 4.6.2 - minimatch: 3.1.2 - natural-compare: 1.4.0 - optionator: 0.9.3 - strip-ansi: 6.0.1 - text-table: 0.2.0 - transitivePeerDependencies: - - supports-color - dev: true - - /espree@9.6.1: - resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==} - engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} - dependencies: - acorn: 8.11.3 - acorn-jsx: 5.3.2(acorn@8.11.3) - 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'} - hasBin: true - - /esquery@1.5.0: - resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==} - engines: {node: '>=0.10'} - dependencies: - estraverse: 5.3.0 - dev: true - - /esrecurse@4.3.0: - resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==} - engines: {node: '>=4.0'} - dependencies: - estraverse: 5.3.0 - dev: true - - /estraverse@5.3.0: - resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==} - engines: {node: '>=4.0'} - dev: true - - /estree-walker@0.5.2: - resolution: {integrity: sha512-XpCnW/AE10ws/kDAs37cngSkvgIR8aN3G0MS85m7dUpuK2EREo9VJ00uvw6Dg/hXEpfsE1I1TvJOJr+Z+TL+ig==} - dev: true - - /estree-walker@0.6.1: - resolution: {integrity: sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==} - dev: true - - /estree-walker@2.0.2: - resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} - dev: true - - /esutils@2.0.3: - resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} - engines: {node: '>=0.10.0'} - - /etag@1.8.1: - resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==} - engines: {node: '>= 0.6'} - dev: true - - /expand-brackets@2.1.4: - resolution: {integrity: sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==} - engines: {node: '>=0.10.0'} - dependencies: - debug: 2.6.9 - define-property: 0.2.5 - extend-shallow: 2.0.1 - posix-character-classes: 0.1.1 - regex-not: 1.0.2 - snapdragon: 0.8.2 - to-regex: 3.0.2 - transitivePeerDependencies: - - supports-color - dev: false - - /express@4.18.3: - resolution: {integrity: sha512-6VyCijWQ+9O7WuVMTRBTl+cjNNIzD5cY5mQ1WM8r/LEkI2u8EYpOotESNwzNlyCn3g+dmjKYI6BmNneSr/FSRw==} - engines: {node: '>= 0.10.0'} - dependencies: - accepts: 1.3.8 - array-flatten: 1.1.1 - body-parser: 1.20.2 - content-disposition: 0.5.4 - content-type: 1.0.5 - cookie: 0.5.0 - cookie-signature: 1.0.6 - debug: 2.6.9 - depd: 2.0.0 - encodeurl: 1.0.2 - escape-html: 1.0.3 - etag: 1.8.1 - finalhandler: 1.2.0 - fresh: 0.5.2 - http-errors: 2.0.0 - merge-descriptors: 1.0.1 - methods: 1.1.2 - on-finished: 2.4.1 - parseurl: 1.3.3 - path-to-regexp: 0.1.7 - proxy-addr: 2.0.7 - qs: 6.11.0 - range-parser: 1.2.1 - safe-buffer: 5.2.1 - send: 0.18.0 - serve-static: 1.15.0 - setprototypeof: 1.2.0 - statuses: 2.0.1 - type-is: 1.6.18 - utils-merge: 1.0.1 - vary: 1.1.2 - transitivePeerDependencies: - - supports-color - dev: true - - /extend-shallow@2.0.1: - resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==} - engines: {node: '>=0.10.0'} - dependencies: - is-extendable: 0.1.1 - dev: false - - /extend-shallow@3.0.2: - resolution: {integrity: sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==} - engines: {node: '>=0.10.0'} - dependencies: - assign-symbols: 1.0.0 - is-extendable: 1.0.1 - dev: false - - /extglob@2.0.4: - resolution: {integrity: sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==} - engines: {node: '>=0.10.0'} - dependencies: - array-unique: 0.3.2 - define-property: 1.0.0 - expand-brackets: 2.1.4 - extend-shallow: 2.0.1 - fragment-cache: 0.2.1 - regex-not: 1.0.2 - snapdragon: 0.8.2 - to-regex: 3.0.2 - transitivePeerDependencies: - - 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-deep-equal@3.1.3: - resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} - dev: true - - /fast-glob@3.3.2: - resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==} - engines: {node: '>=8.6.0'} - dependencies: - '@nodelib/fs.stat': 2.0.5 - '@nodelib/fs.walk': 1.2.8 - glob-parent: 5.1.2 - merge2: 1.4.1 - micromatch: 4.0.5 - - /fast-json-stable-stringify@2.1.0: - resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==} - dev: true - - /fast-levenshtein@2.0.6: - resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==} - dev: true - - /fastq@1.17.1: - resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==} - dependencies: - reusify: 1.0.4 - - /file-entry-cache@6.0.1: - resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==} - engines: {node: ^10.12.0 || >=12.0.0} - dependencies: - flat-cache: 3.2.0 - dev: true - - /fill-range@4.0.0: - resolution: {integrity: sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==} - engines: {node: '>=0.10.0'} - dependencies: - extend-shallow: 2.0.1 - is-number: 3.0.0 - repeat-string: 1.6.1 - to-regex-range: 2.1.1 - dev: false - - /fill-range@7.0.1: - resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==} - engines: {node: '>=8'} - dependencies: - to-regex-range: 5.0.1 - - /finalhandler@1.2.0: - resolution: {integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==} - engines: {node: '>= 0.8'} - dependencies: - debug: 2.6.9 - encodeurl: 1.0.2 - escape-html: 1.0.3 - on-finished: 2.4.1 - parseurl: 1.3.3 - statuses: 2.0.1 - unpipe: 1.0.0 - transitivePeerDependencies: - - supports-color - dev: true - - /find-cache-dir@2.1.0: - resolution: {integrity: sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==} - engines: {node: '>=6'} - dependencies: - commondir: 1.0.1 - make-dir: 2.1.0 - pkg-dir: 3.0.0 - - /find-root@1.1.0: - resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==} - - /find-up@3.0.0: - resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==} - engines: {node: '>=6'} - dependencies: - locate-path: 3.0.0 - - /find-up@5.0.0: - resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==} - engines: {node: '>=10'} - dependencies: - locate-path: 6.0.0 - path-exists: 4.0.0 - - /flat-cache@3.2.0: - resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==} - engines: {node: ^10.12.0 || >=12.0.0} - dependencies: - flatted: 3.3.1 - keyv: 4.5.4 - rimraf: 3.0.2 - dev: true - - /flat@5.0.2: - resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==} - hasBin: true - dev: false - - /flatted@3.3.1: - resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==} - dev: true - - /flow-parser@0.229.2: - resolution: {integrity: sha512-T72XV2Izvl7yV6dhHhLaJ630Y6vOZJl6dnOS6dN0bPW9ExuREu7xGAf3omtcxX76POTuux9TJPu9ZpS48a/rdw==} - engines: {node: '>=0.4.0'} - dev: false - - /for-each@0.3.3: - resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==} - dependencies: - is-callable: 1.2.7 - - /for-in@1.0.2: - resolution: {integrity: sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==} - engines: {node: '>=0.10.0'} - dev: false - - /foreground-child@3.1.1: - resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==} - engines: {node: '>=14'} - dependencies: - cross-spawn: 7.0.3 - signal-exit: 4.1.0 - - /form-data@4.0.0: - resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==} - engines: {node: '>= 6'} - dependencies: - asynckit: 0.4.0 - combined-stream: 1.0.8 - mime-types: 2.1.35 - dev: false - - /format-util@1.0.5: - resolution: {integrity: sha512-varLbTj0e0yVyRpqQhuWV+8hlePAgaoFRhNFj50BNjEIrw1/DphHSObtqwskVCPWNgzwPoQrZAbfa/SBiicNeg==} - dev: false - - /forwarded@0.2.0: - resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==} - engines: {node: '>= 0.6'} - dev: true - - /fragment-cache@0.2.1: - resolution: {integrity: sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==} - engines: {node: '>=0.10.0'} - dependencies: - map-cache: 0.2.2 - dev: false - - /fresh@0.5.2: - resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==} - engines: {node: '>= 0.6'} - dev: true - - /fs-extra@11.2.0: - resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==} - engines: {node: '>=14.14'} - dependencies: - graceful-fs: 4.2.11 - jsonfile: 6.1.0 - universalify: 2.0.1 - - /fs-extra@9.1.0: - resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==} - engines: {node: '>=10'} - dependencies: - at-least-node: 1.0.0 - graceful-fs: 4.2.11 - jsonfile: 6.1.0 - universalify: 2.0.1 - dev: false - - /fs.realpath@1.0.0: - resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} - - /fsevents@2.3.2: - resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} - engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} - os: [darwin] - requiresBuild: true - optional: true - - /fsevents@2.3.3: - resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} - engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} - os: [darwin] - requiresBuild: true - optional: true - - /function-bind@1.1.2: - resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==} - - /function.prototype.name@1.1.6: - resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - define-properties: 1.2.1 - es-abstract: 1.22.4 - functions-have-names: 1.2.3 - dev: false - - /functions-have-names@1.2.3: - resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==} - - /gensync@1.0.0-beta.2: - resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} - engines: {node: '>=6.9.0'} - - /get-caller-file@2.0.5: - resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==} - engines: {node: 6.* || 8.* || >= 10.*} - - /get-func-name@2.0.2: - resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==} - - /get-intrinsic@1.2.4: - resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==} - engines: {node: '>= 0.4'} - dependencies: - es-errors: 1.3.0 - function-bind: 1.1.2 - has-proto: 1.0.3 - has-symbols: 1.0.3 - hasown: 2.0.1 - - /get-stdin@8.0.0: - resolution: {integrity: sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==} - engines: {node: '>=10'} - dev: false - - /get-symbol-description@1.0.2: - resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - es-errors: 1.3.0 - get-intrinsic: 1.2.4 - dev: false - - /get-value@2.0.6: - resolution: {integrity: sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==} - engines: {node: '>=0.10.0'} - dev: false - - /glob-parent@5.1.2: - resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==} - engines: {node: '>= 6'} - dependencies: - is-glob: 4.0.3 - - /glob-parent@6.0.2: - resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==} - engines: {node: '>=10.13.0'} - dependencies: - is-glob: 4.0.3 - dev: true - - /glob-to-regexp@0.4.1: - resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==} - dev: true - - /glob@10.3.10: - resolution: {integrity: sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==} - engines: {node: '>=16 || 14 >=14.17'} - hasBin: true - dependencies: - foreground-child: 3.1.1 - jackspeak: 2.3.6 - minimatch: 9.0.3 - minipass: 7.0.4 - path-scurry: 1.10.1 - - /glob@7.2.3: - resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} - dependencies: - fs.realpath: 1.0.0 - inflight: 1.0.6 - inherits: 2.0.4 - minimatch: 3.1.2 - once: 1.4.0 - path-is-absolute: 1.0.1 - - /glob@8.1.0: - resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==} - engines: {node: '>=12'} - dependencies: - fs.realpath: 1.0.0 - inflight: 1.0.6 - inherits: 2.0.4 - minimatch: 5.0.1 - once: 1.4.0 - dev: false - - /globals@11.12.0: - resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==} - engines: {node: '>=4'} - - /globals@13.24.0: - resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==} - engines: {node: '>=8'} - dependencies: - type-fest: 0.20.2 - dev: true - - /globalthis@1.0.3: - resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==} - engines: {node: '>= 0.4'} - dependencies: - define-properties: 1.2.1 - dev: false - - /globby@11.1.0: - resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==} - engines: {node: '>=10'} - dependencies: - array-union: 2.1.0 - dir-glob: 3.0.1 - fast-glob: 3.3.2 - ignore: 5.3.1 - merge2: 1.4.1 - slash: 3.0.0 - dev: false - - /gopd@1.0.1: - resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==} - dependencies: - get-intrinsic: 1.2.4 - - /graceful-fs@4.2.11: - resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} - - /graphemer@1.4.0: - resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==} - dev: true - - /happy-dom@12.10.3: - resolution: {integrity: sha512-JzUXOh0wdNGY54oKng5hliuBkq/+aT1V3YpTM+lrN/GoLQTANZsMaIvmHiHe612rauHvPJnDZkZ+5GZR++1Abg==} - dependencies: - css.escape: 1.5.1 - entities: 4.5.0 - iconv-lite: 0.6.3 - webidl-conversions: 7.0.0 - whatwg-encoding: 2.0.0 - whatwg-mimetype: 3.0.0 - - /has-bigints@1.0.2: - resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==} - - /has-flag@3.0.0: - resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==} - engines: {node: '>=4'} - - /has-flag@4.0.0: - resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} - engines: {node: '>=8'} - - /has-property-descriptors@1.0.2: - resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==} - dependencies: - es-define-property: 1.0.0 - - /has-proto@1.0.3: - resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==} - engines: {node: '>= 0.4'} - - /has-symbols@1.0.3: - resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==} - engines: {node: '>= 0.4'} - - /has-tostringtag@1.0.2: - resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==} - engines: {node: '>= 0.4'} - dependencies: - has-symbols: 1.0.3 - - /has-value@0.3.1: - resolution: {integrity: sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==} - engines: {node: '>=0.10.0'} - dependencies: - get-value: 2.0.6 - has-values: 0.1.4 - isobject: 2.1.0 - dev: false - - /has-value@1.0.0: - resolution: {integrity: sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw==} - engines: {node: '>=0.10.0'} - dependencies: - get-value: 2.0.6 - has-values: 1.0.0 - isobject: 3.0.1 - dev: false - - /has-values@0.1.4: - resolution: {integrity: sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ==} - engines: {node: '>=0.10.0'} - dev: false - - /has-values@1.0.0: - resolution: {integrity: sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==} - engines: {node: '>=0.10.0'} - dependencies: - is-number: 3.0.0 - kind-of: 4.0.0 - dev: false - - /has@1.0.4: - resolution: {integrity: sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==} - engines: {node: '>= 0.4.0'} - dev: false - - /hasown@2.0.1: - resolution: {integrity: sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==} - engines: {node: '>= 0.4'} - dependencies: - function-bind: 1.1.2 - - /he@1.2.0: - resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==} - hasBin: true - dev: false - - /hoist-non-react-statics@3.3.2: - resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} - dependencies: - react-is: 16.13.1 - - /html-element-map@1.3.1: - resolution: {integrity: sha512-6XMlxrAFX4UEEGxctfFnmrFaaZFNf9i5fNuV5wZ3WWQ4FVaNP1aX1LkX9j2mfEx1NpjeE/rL3nmgEn23GdFmrg==} - dependencies: - array.prototype.filter: 1.0.3 - call-bind: 1.0.7 - dev: false - - /html-encoding-sniffer@4.0.0: - resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==} - engines: {node: '>=18'} - dependencies: - whatwg-encoding: 3.1.1 - dev: false - - /html-tokenize@2.0.1: - resolution: {integrity: sha512-QY6S+hZ0f5m1WT8WffYN+Hg+xm/w5I8XeUcAq/ZYP5wVC8xbKi4Whhru3FtrAebD5EhBW8rmFzkDI6eCAuFe2w==} - hasBin: true - dependencies: - buffer-from: 0.1.2 - inherits: 2.0.4 - minimist: 1.2.8 - readable-stream: 1.0.34 - through2: 0.4.2 - dev: true - - /htmlparser2@8.0.2: - resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==} - dependencies: - domelementtype: 2.3.0 - domhandler: 5.0.3 - domutils: 3.1.0 - entities: 4.5.0 - dev: false - - /http-errors@2.0.0: - resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==} - engines: {node: '>= 0.8'} - dependencies: - depd: 2.0.0 - inherits: 2.0.4 - setprototypeof: 1.2.0 - statuses: 2.0.1 - toidentifier: 1.0.1 - dev: true - - /http-proxy-agent@7.0.2: - resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==} - engines: {node: '>= 14'} - dependencies: - agent-base: 7.1.0 - debug: 4.3.4(supports-color@8.1.1) - transitivePeerDependencies: - - supports-color - dev: false - - /https-proxy-agent@7.0.4: - resolution: {integrity: sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==} - engines: {node: '>= 14'} - dependencies: - agent-base: 7.1.0 - debug: 4.3.4(supports-color@8.1.1) - transitivePeerDependencies: - - supports-color - dev: false - - /hyphenate-style-name@1.0.4: - resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==} - dev: false - - /iconv-lite@0.4.24: - resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==} - engines: {node: '>=0.10.0'} - dependencies: - safer-buffer: 2.1.2 - dev: true - - /iconv-lite@0.6.3: - resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} - engines: {node: '>=0.10.0'} - dependencies: - safer-buffer: 2.1.2 - - /ignore@5.3.1: - resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==} - engines: {node: '>= 4'} - - /import-fresh@3.3.0: - resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} - engines: {node: '>=6'} - dependencies: - parent-module: 1.0.1 - resolve-from: 4.0.0 - - /imurmurhash@0.1.4: - resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==} - engines: {node: '>=0.8.19'} - - /inflight@1.0.6: - resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} - dependencies: - once: 1.4.0 - wrappy: 1.0.2 - - /inherits@2.0.4: - resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} - - /internal-slot@1.0.7: - resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==} - engines: {node: '>= 0.4'} - dependencies: - es-errors: 1.3.0 - hasown: 2.0.1 - side-channel: 1.0.5 - - /interpret@1.4.0: - resolution: {integrity: sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==} - engines: {node: '>= 0.10'} - dev: true - - /ipaddr.js@1.9.1: - resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==} - engines: {node: '>= 0.10'} - dev: true - - /is-accessor-descriptor@1.0.1: - resolution: {integrity: sha512-YBUanLI8Yoihw923YeFUS5fs0fF2f5TSFTNiYAAzhhDscDa3lEqYuz1pDOEP5KvX94I9ey3vsqjJcLVFVU+3QA==} - engines: {node: '>= 0.10'} - dependencies: - hasown: 2.0.1 - dev: false - - /is-arguments@1.1.1: - resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - has-tostringtag: 1.0.2 - - /is-array-buffer@3.0.4: - resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - get-intrinsic: 1.2.4 - - /is-arrayish@0.2.1: - resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==} - - /is-bigint@1.0.4: - resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==} - dependencies: - has-bigints: 1.0.2 - - /is-binary-path@2.1.0: - resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} - engines: {node: '>=8'} - dependencies: - binary-extensions: 2.2.0 - - /is-boolean-object@1.1.2: - resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - has-tostringtag: 1.0.2 - - /is-buffer@1.1.6: - resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==} - dev: false - - /is-callable@1.2.7: - resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==} - engines: {node: '>= 0.4'} - - /is-core-module@2.13.1: - resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==} - dependencies: - hasown: 2.0.1 - - /is-data-descriptor@1.0.1: - resolution: {integrity: sha512-bc4NlCDiCr28U4aEsQ3Qs2491gVq4V8G7MQyws968ImqjKuYtTJXrl7Vq7jsN7Ly/C3xj5KWFrY7sHNeDkAzXw==} - engines: {node: '>= 0.4'} - dependencies: - hasown: 2.0.1 - dev: false - - /is-date-object@1.0.5: - resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==} - engines: {node: '>= 0.4'} - dependencies: - has-tostringtag: 1.0.2 - - /is-descriptor@0.1.7: - resolution: {integrity: sha512-C3grZTvObeN1xud4cRWl366OMXZTj0+HGyk4hvfpx4ZHt1Pb60ANSXqCK7pdOTeUQpRzECBSTphqvD7U+l22Eg==} - engines: {node: '>= 0.4'} - dependencies: - is-accessor-descriptor: 1.0.1 - is-data-descriptor: 1.0.1 - dev: false - - /is-descriptor@1.0.3: - resolution: {integrity: sha512-JCNNGbwWZEVaSPtS45mdtrneRWJFp07LLmykxeFV5F6oBvNF8vHSfJuJgoT472pSfk+Mf8VnlrspaFBHWM8JAw==} - engines: {node: '>= 0.4'} - dependencies: - is-accessor-descriptor: 1.0.1 - is-data-descriptor: 1.0.1 - dev: false - - /is-extendable@0.1.1: - resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==} - engines: {node: '>=0.10.0'} - dev: false - - /is-extendable@1.0.1: - resolution: {integrity: sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==} - engines: {node: '>=0.10.0'} - dependencies: - is-plain-object: 2.0.4 - - /is-extglob@2.1.1: - resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} - engines: {node: '>=0.10.0'} - - /is-fullwidth-code-point@3.0.0: - resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==} - engines: {node: '>=8'} - - /is-glob@4.0.3: - resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} - engines: {node: '>=0.10.0'} - dependencies: - is-extglob: 2.1.1 - - /is-in-browser@1.1.3: - resolution: {integrity: sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==} - dev: false - - /is-map@2.0.2: - resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==} - - /is-module@1.0.0: - resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==} - dev: true - - /is-negative-zero@2.0.3: - resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==} - engines: {node: '>= 0.4'} - dev: false - - /is-number-object@1.0.7: - resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==} - engines: {node: '>= 0.4'} - dependencies: - has-tostringtag: 1.0.2 - - /is-number@3.0.0: - resolution: {integrity: sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==} - engines: {node: '>=0.10.0'} - dependencies: - kind-of: 3.2.2 - dev: false - - /is-number@7.0.0: - resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} - engines: {node: '>=0.12.0'} - - /is-path-inside@3.0.3: - resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==} - engines: {node: '>=8'} - dev: true - - /is-plain-obj@2.1.0: - resolution: {integrity: sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==} - engines: {node: '>=8'} - dev: false - - /is-plain-object@2.0.4: - resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==} - engines: {node: '>=0.10.0'} - dependencies: - isobject: 3.0.1 - - /is-potential-custom-element-name@1.0.1: - resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==} - dev: false - - /is-reference@1.2.1: - resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==} - dependencies: - '@types/estree': 1.0.5 - dev: true - - /is-regex@1.1.4: - resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - has-tostringtag: 1.0.2 - - /is-set@2.0.2: - resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==} - - /is-shared-array-buffer@1.0.3: - resolution: {integrity: sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - - /is-string@1.0.7: - resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==} - engines: {node: '>= 0.4'} - dependencies: - has-tostringtag: 1.0.2 - - /is-subset@0.1.1: - resolution: {integrity: sha512-6Ybun0IkarhmEqxXCNw/C0bna6Zb/TkfUX9UbwJtK6ObwAVCxmAP308WWTHviM/zAqXk05cdhYsUsZeGQh99iw==} - dev: false - - /is-symbol@1.0.4: - resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==} - engines: {node: '>= 0.4'} - dependencies: - has-symbols: 1.0.3 - - /is-typed-array@1.1.13: - resolution: {integrity: sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==} - engines: {node: '>= 0.4'} - dependencies: - which-typed-array: 1.1.14 - dev: false - - /is-unicode-supported@0.1.0: - resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==} - engines: {node: '>=10'} - dev: false - - /is-weakmap@2.0.1: - resolution: {integrity: sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==} - - /is-weakref@1.0.2: - resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==} - dependencies: - call-bind: 1.0.7 - dev: false - - /is-weakset@2.0.2: - resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==} - dependencies: - call-bind: 1.0.7 - get-intrinsic: 1.2.4 - - /is-windows@1.0.2: - resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==} - engines: {node: '>=0.10.0'} - dev: false - - /isarray@0.0.1: - resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==} - dev: true - - /isarray@1.0.0: - resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==} - - /isarray@2.0.5: - resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==} - - /isexe@2.0.0: - resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} - - /isobject@2.1.0: - resolution: {integrity: sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==} - engines: {node: '>=0.10.0'} - dependencies: - isarray: 1.0.0 - dev: false - - /isobject@3.0.1: - resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==} - engines: {node: '>=0.10.0'} - - /jackspeak@2.3.6: - resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==} - engines: {node: '>=14'} - dependencies: - '@isaacs/cliui': 8.0.2 - optionalDependencies: - '@pkgjs/parseargs': 0.11.0 - - /jest-worker@26.6.2: - resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==} - engines: {node: '>= 10.13.0'} - dependencies: - '@types/node': 20.11.22 - merge-stream: 2.0.0 - supports-color: 7.2.0 - dev: true - - /js-tokens@4.0.0: - resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} - - /js-yaml@4.1.0: - resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==} - hasBin: true - dependencies: - argparse: 2.0.1 - - /jscodeshift-add-imports@1.0.10(jscodeshift@0.13.1): - resolution: {integrity: sha512-VUe9DJ3zkWIR62zSRQnmsOVeyt77yD8knvYNna/PzRZlF9j799hJw5sqTZu4EX16XLIqS3FxWz3nXuGuiw9iyQ==} - 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) - jscodeshift-find-imports: 2.0.4(jscodeshift@0.13.1) - transitivePeerDependencies: - - supports-color - dev: false - - /jscodeshift-find-imports@2.0.4(jscodeshift@0.13.1): - resolution: {integrity: sha512-HxOzjWDOFFSCf8EKSTQGqCxXeRFqZszOywnZ0HuMB9YPDFHVpxftGRsY+QS+Qq8o2qUojlmNU3JEHts5DWYS1A==} - 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) - dev: false - - /jscodeshift@0.13.1(@babel/preset-env@7.23.9): - resolution: {integrity: sha512-lGyiEbGOvmMRKgWk4vf+lUrCWO/8YR8sUR3FKF1Cq5fovjZDlIcw3Hu5ppLHAnEXshVffvaM0eyuY/AbOeYpnQ==} - hasBin: true - peerDependencies: - '@babel/preset-env': ^7.1.6 - 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) - chalk: 4.1.2 - flow-parser: 0.229.2 - graceful-fs: 4.2.11 - micromatch: 3.1.10 - neo-async: 2.6.2 - node-dir: 0.1.17 - recast: 0.20.5 - temp: 0.8.4 - write-file-atomic: 2.4.3 - transitivePeerDependencies: - - supports-color - dev: false - - /jsdom@24.0.0: - resolution: {integrity: sha512-UDS2NayCvmXSXVP6mpTj+73JnNQadZlr9N68189xib2tx5Mls7swlTNao26IoHv46BZJFvXygyRtyXd1feAk1A==} - engines: {node: '>=18'} - peerDependencies: - canvas: ^2.11.2 - peerDependenciesMeta: - canvas: - optional: true - dependencies: - cssstyle: 4.0.1 - data-urls: 5.0.0 - decimal.js: 10.4.3 - form-data: 4.0.0 - html-encoding-sniffer: 4.0.0 - http-proxy-agent: 7.0.2 - https-proxy-agent: 7.0.4 - is-potential-custom-element-name: 1.0.1 - nwsapi: 2.2.7 - parse5: 7.1.2 - rrweb-cssom: 0.6.0 - saxes: 6.0.0 - symbol-tree: 3.2.4 - tough-cookie: 4.1.3 - w3c-xmlserializer: 5.0.0 - webidl-conversions: 7.0.0 - whatwg-encoding: 3.1.1 - whatwg-mimetype: 4.0.0 - whatwg-url: 14.0.0 - ws: 8.16.0 - xml-name-validator: 5.0.0 - transitivePeerDependencies: - - bufferutil - - supports-color - - utf-8-validate - dev: false - - /jsesc@0.5.0: - resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==} - hasBin: true - - /jsesc@2.5.2: - resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==} - engines: {node: '>=4'} - hasBin: true - - /json-buffer@3.0.1: - resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==} - dev: true - - /json-parse-even-better-errors@2.3.1: - resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==} - - /json-schema-traverse@0.4.1: - resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==} - dev: true - - /json-stable-stringify-without-jsonify@1.0.1: - resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} - dev: true - - /json5@2.2.3: - resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==} - engines: {node: '>=6'} - hasBin: true - - /jsonc-parser@3.2.1: - resolution: {integrity: sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==} - dev: true - - /jsonfile@6.1.0: - resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==} - dependencies: - universalify: 2.0.1 - optionalDependencies: - graceful-fs: 4.2.11 - - /jss-plugin-camel-case@10.10.0: - resolution: {integrity: sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==} - dependencies: - '@babel/runtime': 7.23.9 - hyphenate-style-name: 1.0.4 - jss: 10.10.0 - dev: false - - /jss-plugin-default-unit@10.10.0: - resolution: {integrity: sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==} - dependencies: - '@babel/runtime': 7.23.9 - jss: 10.10.0 - dev: false - - /jss-plugin-global@10.10.0: - resolution: {integrity: sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==} - dependencies: - '@babel/runtime': 7.23.9 - jss: 10.10.0 - dev: false - - /jss-plugin-nested@10.10.0: - resolution: {integrity: sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==} - dependencies: - '@babel/runtime': 7.23.9 - jss: 10.10.0 - tiny-warning: 1.0.3 - dev: false - - /jss-plugin-props-sort@10.10.0: - resolution: {integrity: sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==} - dependencies: - '@babel/runtime': 7.23.9 - 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 - jss: 10.10.0 - tiny-warning: 1.0.3 - dev: false - - /jss-plugin-vendor-prefixer@10.10.0: - resolution: {integrity: sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==} - dependencies: - '@babel/runtime': 7.23.9 - css-vendor: 2.0.8 - jss: 10.10.0 - dev: false - - /jss@10.10.0: - resolution: {integrity: sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==} - dependencies: - '@babel/runtime': 7.23.9 - csstype: 3.1.3 - is-in-browser: 1.1.3 - tiny-warning: 1.0.3 - dev: false - - /just-extend@6.2.0: - resolution: {integrity: sha512-cYofQu2Xpom82S6qD778jBDpwvvy39s1l/hrYij2u9AMdQcGRpaBu6kY4mVhuno5kJVi1DAz4aiphA2WI1/OAw==} - - /keyv@4.5.4: - resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} - dependencies: - json-buffer: 3.0.1 - dev: true - - /kind-of@3.2.2: - resolution: {integrity: sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==} - engines: {node: '>=0.10.0'} - dependencies: - is-buffer: 1.1.6 - dev: false - - /kind-of@4.0.0: - resolution: {integrity: sha512-24XsCxmEbRwEDbz/qz3stgin8TTzZ1ESR56OMCN0ujYg+vRutNSiOj9bHH9u85DKgXguraugV5sFuvbD4FW/hw==} - engines: {node: '>=0.10.0'} - dependencies: - is-buffer: 1.1.6 - dev: false - - /kind-of@6.0.3: - resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} - engines: {node: '>=0.10.0'} - - /levn@0.4.1: - resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} - engines: {node: '>= 0.8.0'} - dependencies: - prelude-ls: 1.2.1 - type-check: 0.4.0 - dev: true - - /lilconfig@2.1.0: - resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==} - engines: {node: '>=10'} - dev: false - - /lines-and-columns@1.2.4: - resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} - - /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@3.0.0: - resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==} - engines: {node: '>=6'} - dependencies: - p-locate: 3.0.0 - path-exists: 3.0.0 - - /locate-path@6.0.0: - resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} - engines: {node: '>=10'} - dependencies: - p-locate: 5.0.0 - - /lodash.debounce@4.0.8: - resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} - - /lodash.escape@4.0.1: - resolution: {integrity: sha512-nXEOnb/jK9g0DYMr1/Xvq6l5xMD7GDG55+GSYIYmS0G4tBk/hURD4JR9WCavs04t33WmJx9kCyp9vJ+mr4BOUw==} - dev: false - - /lodash.flattendeep@4.4.0: - resolution: {integrity: sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==} - dev: false - - /lodash.get@4.4.2: - resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==} - - /lodash.isequal@4.5.0: - resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==} - dev: false - - /lodash.merge@4.6.2: - resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} - dev: true - - /lodash.mergewith@4.6.2: - resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==} - dev: true - - /lodash@4.17.21: - resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} - - /log-symbols@4.1.0: - resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==} - engines: {node: '>=10'} - dependencies: - chalk: 4.1.2 - is-unicode-supported: 0.1.0 - dev: false - - /loose-envify@1.4.0: - resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} - hasBin: true - dependencies: - js-tokens: 4.0.0 - - /loupe@2.3.7: - resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==} - dependencies: - get-func-name: 2.0.2 - - /lru-cache@10.2.0: - resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==} - engines: {node: 14 || >=16.14} - - /lru-cache@5.1.1: - resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} - dependencies: - yallist: 3.1.1 - - /lz-string@1.5.0: - resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==} - hasBin: true - - /magic-string@0.22.5: - resolution: {integrity: sha512-oreip9rJZkzvA8Qzk9HFs8fZGF/u7H/gtrE8EN6RjKJ9kh2HlC+yQ2QezifqTZfGyiuAV0dRv5a+y/8gBb1m9w==} - dependencies: - vlq: 0.2.3 - dev: true - - /magic-string@0.25.9: - resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==} - dependencies: - sourcemap-codec: 1.4.8 - dev: true - - /magic-string@0.30.7: - resolution: {integrity: sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==} - engines: {node: '>=12'} - dependencies: - '@jridgewell/sourcemap-codec': 1.4.15 - dev: true - - /make-dir@2.1.0: - resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==} - engines: {node: '>=6'} - dependencies: - pify: 4.0.1 - semver: 5.7.2 - - /map-cache@0.2.2: - resolution: {integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==} - engines: {node: '>=0.10.0'} - dev: false - - /map-visit@1.0.0: - resolution: {integrity: sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==} - engines: {node: '>=0.10.0'} - dependencies: - object-visit: 1.0.1 - dev: false - - /mdn-data@2.0.28: - resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==} - dev: true - - /mdn-data@2.0.30: - resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} - dev: true - - /media-typer@0.3.0: - resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==} - engines: {node: '>= 0.6'} - dev: true - - /merge-descriptors@1.0.1: - resolution: {integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==} - dev: true - - /merge-stream@2.0.0: - resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==} - dev: true - - /merge2@1.4.1: - resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} - engines: {node: '>= 8'} - - /methods@1.1.2: - resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==} - engines: {node: '>= 0.6'} - dev: true - - /micromatch@3.1.10: - resolution: {integrity: sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==} - engines: {node: '>=0.10.0'} - dependencies: - arr-diff: 4.0.0 - array-unique: 0.3.2 - braces: 2.3.2 - define-property: 2.0.2 - extend-shallow: 3.0.2 - extglob: 2.0.4 - fragment-cache: 0.2.1 - kind-of: 6.0.3 - nanomatch: 1.2.13 - object.pick: 1.3.0 - regex-not: 1.0.2 - snapdragon: 0.8.2 - to-regex: 3.0.2 - transitivePeerDependencies: - - supports-color - dev: false - - /micromatch@4.0.5: - resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==} - engines: {node: '>=8.6'} - dependencies: - braces: 3.0.2 - picomatch: 2.3.1 - - /mime-db@1.52.0: - resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} - engines: {node: '>= 0.6'} - - /mime-types@2.1.35: - resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==} - engines: {node: '>= 0.6'} - dependencies: - mime-db: 1.52.0 - - /mime@1.6.0: - resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==} - engines: {node: '>=4'} - hasBin: true - dev: true - - /min-indent@1.0.1: - resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==} - engines: {node: '>=4'} - dev: true - - /minimatch@3.1.2: - resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} - dependencies: - brace-expansion: 1.1.11 - - /minimatch@5.0.1: - resolution: {integrity: sha512-nLDxIFRyhDblz3qMuq+SoRZED4+miJ/G+tdDrjkkkRnjAsBexeGpgjLEQ0blJy7rHhR2b93rhQY4SvyWu9v03g==} - engines: {node: '>=10'} - dependencies: - brace-expansion: 2.0.1 - dev: false - - /minimatch@9.0.3: - resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==} - engines: {node: '>=16 || 14 >=14.17'} - dependencies: - brace-expansion: 2.0.1 - - /minimist@1.2.8: - resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==} - dev: true - - /minipass@7.0.4: - resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==} - engines: {node: '>=16 || 14 >=14.17'} - - /mixin-deep@1.3.2: - resolution: {integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==} - engines: {node: '>=0.10.0'} - dependencies: - for-in: 1.0.2 - is-extendable: 1.0.1 - dev: false - - /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'} - hasBin: true - dependencies: - ansi-colors: 4.1.1 - browser-stdout: 1.3.1 - chokidar: 3.5.3 - debug: 4.3.4(supports-color@8.1.1) - diff: 5.0.0 - escape-string-regexp: 4.0.0 - find-up: 5.0.0 - glob: 8.1.0 - he: 1.2.0 - js-yaml: 4.1.0 - log-symbols: 4.1.0 - minimatch: 5.0.1 - ms: 2.1.3 - serialize-javascript: 6.0.0 - strip-json-comments: 3.1.1 - supports-color: 8.1.1 - workerpool: 6.2.1 - yargs: 16.2.0 - yargs-parser: 20.2.4 - yargs-unparser: 2.0.0 - dev: false - - /moo@0.5.2: - resolution: {integrity: sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==} - dev: false - - /ms@2.0.0: - resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==} - - /ms@2.1.2: - resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} - - /ms@2.1.3: - resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} - - /multipipe@1.0.2: - resolution: {integrity: sha512-6uiC9OvY71vzSGX8lZvSqscE7ft9nPupJ8fMjrCNRAUy2LREUW42UL+V/NTrogr6rFgRydUrCX4ZitfpSNkSCQ==} - dependencies: - duplexer2: 0.1.4 - object-assign: 4.1.1 - dev: true - - /mustache@4.2.0: - resolution: {integrity: sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==} - hasBin: true - dev: true - - /nanoid@3.3.7: - resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==} - engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} - hasBin: true - - /nanomatch@1.2.13: - resolution: {integrity: sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==} - engines: {node: '>=0.10.0'} - dependencies: - arr-diff: 4.0.0 - array-unique: 0.3.2 - define-property: 2.0.2 - extend-shallow: 3.0.2 - fragment-cache: 0.2.1 - is-windows: 1.0.2 - kind-of: 6.0.3 - object.pick: 1.3.0 - regex-not: 1.0.2 - snapdragon: 0.8.2 - to-regex: 3.0.2 - transitivePeerDependencies: - - supports-color - dev: false - - /natural-compare@1.4.0: - resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} - dev: true - - /nearley@2.20.1: - resolution: {integrity: sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==} - hasBin: true - dependencies: - commander: 2.20.3 - moo: 0.5.2 - railroad-diagrams: 1.0.0 - randexp: 0.4.6 - dev: false - - /negotiator@0.6.3: - resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==} - engines: {node: '>= 0.6'} - dev: true - - /neo-async@2.6.2: - resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==} - dev: false - - /next@13.5.1(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-GIudNR7ggGUZoIL79mSZcxbXK9f5pwAIPZxEM8+j2yLqv5RODg4TkmUlaKSYVqE1bPQueamXSqdC3j7axiTSEg==} - engines: {node: '>=16.14.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': 13.5.1 - '@swc/helpers': 0.5.2 - busboy: 1.6.0 - caniuse-lite: 1.0.30001591 - 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)(react@18.2.0) - watchpack: 2.4.0 - zod: 3.21.4 - optionalDependencies: - '@next/swc-darwin-arm64': 13.5.1 - '@next/swc-darwin-x64': 13.5.1 - '@next/swc-linux-arm64-gnu': 13.5.1 - '@next/swc-linux-arm64-musl': 13.5.1 - '@next/swc-linux-x64-gnu': 13.5.1 - '@next/swc-linux-x64-musl': 13.5.1 - '@next/swc-win32-arm64-msvc': 13.5.1 - '@next/swc-win32-ia32-msvc': 13.5.1 - '@next/swc-win32-x64-msvc': 13.5.1 - transitivePeerDependencies: - - '@babel/core' - - babel-plugin-macros - dev: true - - /next@14.1.3(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-oexgMV2MapI0UIWiXKkixF8J8ORxpy64OuJ/J9oVUmIthXOUCcuVEZX+dtpgq7wIfIqtBwQsKEDXejcjTsan9g==} - 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.3 - '@swc/helpers': 0.5.2 - busboy: 1.6.0 - caniuse-lite: 1.0.30001591 - 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.23.9)(react@18.2.0) - optionalDependencies: - '@next/swc-darwin-arm64': 14.1.3 - '@next/swc-darwin-x64': 14.1.3 - '@next/swc-linux-arm64-gnu': 14.1.3 - '@next/swc-linux-arm64-musl': 14.1.3 - '@next/swc-linux-x64-gnu': 14.1.3 - '@next/swc-linux-x64-musl': 14.1.3 - '@next/swc-win32-arm64-msvc': 14.1.3 - '@next/swc-win32-ia32-msvc': 14.1.3 - '@next/swc-win32-x64-msvc': 14.1.3 - transitivePeerDependencies: - - '@babel/core' - - babel-plugin-macros - - /nise@5.1.9: - resolution: {integrity: sha512-qOnoujW4SV6e40dYxJOb3uvuoPHtmLzIk4TFo+j0jPJoC+5Z9xja5qH5JZobEPsa8+YYphMrOSwnrshEhG2qww==} - dependencies: - '@sinonjs/commons': 3.0.1 - '@sinonjs/fake-timers': 11.2.2 - '@sinonjs/text-encoding': 0.7.2 - just-extend: 6.2.0 - path-to-regexp: 6.2.1 - - /node-dir@0.1.17: - resolution: {integrity: sha512-tmPX422rYgofd4epzrNoOXiE8XFZYOcCq1vD7MAXCDO+O+zndlA2ztdKKMa+EeuBG5tHETpr4ml4RGgpqDCCAg==} - engines: {node: '>= 0.10.5'} - dependencies: - minimatch: 3.1.2 - dev: false - - /node-fetch@2.7.0: - resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==} - engines: {node: 4.x || >=6.0.0} - peerDependencies: - encoding: ^0.1.0 - peerDependenciesMeta: - encoding: - optional: true - dependencies: - whatwg-url: 5.0.0 - dev: true - - /node-releases@2.0.14: - resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==} - - /normalize-path@3.0.0: - resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} - engines: {node: '>=0.10.0'} - - /nprogress@0.2.0: - resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==} - dev: false - - /nth-check@2.1.1: - resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} - dependencies: - boolbase: 1.0.0 - - /nwsapi@2.2.7: - resolution: {integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==} - dev: false - - /object-assign@4.1.1: - resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} - engines: {node: '>=0.10.0'} - - /object-copy@0.1.0: - resolution: {integrity: sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==} - engines: {node: '>=0.10.0'} - dependencies: - copy-descriptor: 0.1.1 - define-property: 0.2.5 - kind-of: 3.2.2 - dev: false - - /object-inspect@1.13.1: - resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==} - - /object-is@1.1.5: - resolution: {integrity: sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - define-properties: 1.2.1 - - /object-keys@0.4.0: - resolution: {integrity: sha512-ncrLw+X55z7bkl5PnUvHwFK9FcGuFYo9gtjws2XtSzL+aZ8tm830P60WJ0dSmFVaSalWieW5MD7kEdnXda9yJw==} - dev: true - - /object-keys@1.1.1: - resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==} - engines: {node: '>= 0.4'} - - /object-visit@1.0.1: - resolution: {integrity: sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==} - engines: {node: '>=0.10.0'} - dependencies: - isobject: 3.0.1 - dev: false - - /object.assign@4.1.5: - resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - define-properties: 1.2.1 - has-symbols: 1.0.3 - object-keys: 1.1.1 - - /object.entries@1.1.7: - resolution: {integrity: sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - define-properties: 1.2.1 - es-abstract: 1.22.4 - dev: false - - /object.fromentries@2.0.7: - resolution: {integrity: sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - define-properties: 1.2.1 - es-abstract: 1.22.4 - dev: false - - /object.omit@3.0.0: - resolution: {integrity: sha512-EO+BCv6LJfu+gBIF3ggLicFebFLN5zqzz/WWJlMFfkMyGth+oBkhxzDl0wx2W4GkLzuQs/FsSkXZb2IMWQqmBQ==} - engines: {node: '>=0.10.0'} - dependencies: - is-extendable: 1.0.1 - - /object.pick@1.3.0: - resolution: {integrity: sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==} - engines: {node: '>=0.10.0'} - dependencies: - isobject: 3.0.1 - dev: false - - /object.values@1.1.7: - resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - define-properties: 1.2.1 - es-abstract: 1.22.4 - dev: false - - /on-finished@2.4.1: - resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==} - engines: {node: '>= 0.8'} - dependencies: - ee-first: 1.1.1 - dev: true - - /once@1.4.0: - resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} - dependencies: - wrappy: 1.0.2 - - /optionator@0.9.3: - resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==} - engines: {node: '>= 0.8.0'} - dependencies: - '@aashutoshrathi/word-wrap': 1.2.6 - deep-is: 0.1.4 - fast-levenshtein: 2.0.6 - levn: 0.4.1 - prelude-ls: 1.2.1 - type-check: 0.4.0 - dev: true - - /p-limit@2.3.0: - resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==} - engines: {node: '>=6'} - dependencies: - p-try: 2.2.0 - - /p-limit@3.1.0: - resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==} - engines: {node: '>=10'} - dependencies: - yocto-queue: 0.1.0 - - /p-locate@3.0.0: - resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==} - engines: {node: '>=6'} - dependencies: - p-limit: 2.3.0 - - /p-locate@5.0.0: - resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==} - engines: {node: '>=10'} - dependencies: - p-limit: 3.1.0 - - /p-try@2.2.0: - resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==} - engines: {node: '>=6'} - - /parent-module@1.0.1: - resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} - engines: {node: '>=6'} - dependencies: - callsites: 3.1.0 - - /parse-code-context@1.0.0: - resolution: {integrity: sha512-OZQaqKaQnR21iqhlnPfVisFjBWjhnMl5J9MgbP8xC+EwoVqbXrq78lp+9Zb3ahmLzrIX5Us/qbvBnaS3hkH6OA==} - engines: {node: '>=6'} - dev: true - - /parse-json@5.2.0: - resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==} - engines: {node: '>=8'} - dependencies: - '@babel/code-frame': 7.23.5 - error-ex: 1.3.2 - json-parse-even-better-errors: 2.3.1 - lines-and-columns: 1.2.4 - - /parse5-htmlparser2-tree-adapter@7.0.0: - resolution: {integrity: sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==} - dependencies: - domhandler: 5.0.3 - parse5: 7.1.2 - dev: false - - /parse5@7.1.2: - resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==} - dependencies: - entities: 4.5.0 - dev: false - - /parseurl@1.3.3: - resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==} - engines: {node: '>= 0.8'} - dev: true - - /pascalcase@0.1.1: - resolution: {integrity: sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==} - engines: {node: '>=0.10.0'} - dev: false - - /path-exists@3.0.0: - resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==} - engines: {node: '>=4'} - - /path-exists@4.0.0: - resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} - engines: {node: '>=8'} - - /path-is-absolute@1.0.1: - resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==} - engines: {node: '>=0.10.0'} - - /path-key@3.1.1: - resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==} - engines: {node: '>=8'} - - /path-parse@1.0.7: - resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} - - /path-scurry@1.10.1: - resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==} - engines: {node: '>=16 || 14 >=14.17'} - dependencies: - lru-cache: 10.2.0 - minipass: 7.0.4 - - /path-to-regexp@0.1.7: - resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==} - dev: true - - /path-to-regexp@6.2.1: - resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==} - - /path-type@4.0.0: - resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==} - engines: {node: '>=8'} - - /pathe@1.1.2: - resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==} - dev: true - - /pathval@1.1.1: - resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==} - - /performance-now@2.1.0: - resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==} - dev: false - - /picocolors@0.2.1: - resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==} - dev: true - - /picocolors@1.0.0: - resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} - - /picomatch@2.3.1: - resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} - engines: {node: '>=8.6'} - - /pify@2.3.0: - resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==} - engines: {node: '>=0.10.0'} - dev: false - - /pify@4.0.1: - resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==} - engines: {node: '>=6'} - - /pirates@4.0.6: - resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==} - engines: {node: '>= 6'} - - /pkg-dir@3.0.0: - resolution: {integrity: sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==} - engines: {node: '>=6'} - dependencies: - find-up: 3.0.0 - - /pkg-types@1.0.3: - resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==} - dependencies: - jsonc-parser: 3.2.1 - mlly: 1.6.1 - pathe: 1.1.2 - dev: true - - /playwright-core@1.42.1: - resolution: {integrity: sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==} - engines: {node: '>=16'} - hasBin: true - - /playwright@1.42.1: - resolution: {integrity: sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==} - engines: {node: '>=16'} - hasBin: true - dependencies: - playwright-core: 1.42.1 - optionalDependencies: - fsevents: 2.3.2 - - /posix-character-classes@0.1.1: - resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==} - engines: {node: '>=0.10.0'} - dev: false - - /possible-typed-array-names@1.0.0: - resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==} - engines: {node: '>= 0.4'} - - /postcss-cli@8.3.1(postcss@8.4.35): - resolution: {integrity: sha512-leHXsQRq89S3JC9zw/tKyiVV2jAhnfQe0J8VI4eQQbUjwIe0XxVqLrR+7UsahF1s9wi4GlqP6SJ8ydf44cgF2Q==} - engines: {node: '>=10'} - hasBin: true - peerDependencies: - postcss: ^8.0.0 - dependencies: - chalk: 4.1.2 - chokidar: 3.6.0 - dependency-graph: 0.9.0 - 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) - pretty-hrtime: 1.0.3 - read-cache: 1.0.0 - slash: 3.0.0 - yargs: 16.2.0 - transitivePeerDependencies: - - ts-node - dev: false - - /postcss-combine-media-query@1.0.1: - resolution: {integrity: sha512-DFSXuYy3ltDkC2esIF0ORoS9DCjlyfWhtoQkG9brZMuJY1ABOER95sm3dvccR6IEgSrYX4RgqiHD4Lq3JGrxyw==} - dependencies: - postcss: 7.0.39 - dev: true - - /postcss-load-config@3.1.4(postcss@8.4.35): - resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} - engines: {node: '>= 10'} - peerDependencies: - postcss: '>=8.0.9' - ts-node: '>=9.0.0' - peerDependenciesMeta: - postcss: - optional: true - ts-node: - optional: true - dependencies: - lilconfig: 2.1.0 - postcss: 8.4.35 - yaml: 1.10.2 - dev: false - - /postcss-reporter@7.1.0(postcss@8.4.35): - resolution: {integrity: sha512-/eoEylGWyy6/DOiMP5lmFRdmDKThqgn7D6hP2dXKJI/0rJSO1ADFNngZfDzxL0YAxFvws+Rtpuji1YIHj4mySA==} - engines: {node: '>=10'} - peerDependencies: - postcss: ^8.1.0 - dependencies: - picocolors: 1.0.0 - postcss: 8.4.35 - thenby: 1.3.4 - dev: false - - /postcss-value-parser@4.2.0: - resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} - dev: true - - /postcss@7.0.39: - resolution: {integrity: sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==} - engines: {node: '>=6.0.0'} - dependencies: - picocolors: 0.2.1 - source-map: 0.6.1 - dev: true - - /postcss@8.4.14: - resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==} - engines: {node: ^10 || ^12 || >=14} - dependencies: - nanoid: 3.3.7 - picocolors: 1.0.0 - source-map-js: 1.0.2 - dev: true - - /postcss@8.4.31: - resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==} - engines: {node: ^10 || ^12 || >=14} - dependencies: - nanoid: 3.3.7 - picocolors: 1.0.0 - source-map-js: 1.0.2 - - /postcss@8.4.35: - resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==} - engines: {node: ^10 || ^12 || >=14} - dependencies: - nanoid: 3.3.7 - picocolors: 1.0.0 - source-map-js: 1.0.2 - - /prelude-ls@1.2.1: - resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} - engines: {node: '>= 0.8.0'} - dev: true - - /prettier@2.8.8: - resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==} - engines: {node: '>=10.13.0'} - hasBin: true - dev: true - - /prettier@3.2.5: - resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==} - engines: {node: '>=14'} - hasBin: true - dev: true - - /pretty-format@27.5.1: - resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==} - engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} - dependencies: - ansi-regex: 5.0.1 - ansi-styles: 5.2.0 - react-is: 17.0.2 - - /pretty-hrtime@1.0.3: - resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==} - engines: {node: '>= 0.8'} - dev: false - - /process-es6@0.11.6: - resolution: {integrity: sha512-GYBRQtL4v3wgigq10Pv58jmTbFXlIiTbSfgnNqZLY0ldUPqy1rRxDI5fCjoCpnM6TqmHQI8ydzTBXW86OYc0gA==} - dev: true - - /process-nextick-args@2.0.1: - resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==} - dev: true - - /prop-types-exact@1.2.0: - resolution: {integrity: sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==} - dependencies: - has: 1.0.4 - object.assign: 4.1.5 - reflect.ownkeys: 0.2.0 - dev: false - - /prop-types@15.8.1: - resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==} - dependencies: - loose-envify: 1.4.0 - object-assign: 4.1.1 - react-is: 16.13.1 - dev: false - - /proxy-addr@2.0.7: - resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==} - engines: {node: '>= 0.10'} - dependencies: - forwarded: 0.2.0 - ipaddr.js: 1.9.1 - dev: true - - /psl@1.9.0: - resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==} - dev: false - - /punycode@2.3.1: - resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} - engines: {node: '>=6'} - - /qs@6.11.0: - resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==} - engines: {node: '>=0.6'} - dependencies: - side-channel: 1.0.5 - dev: true - - /querystringify@2.2.0: - resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==} - dev: false - - /queue-microtask@1.2.3: - resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} - - /raf@3.4.1: - resolution: {integrity: sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==} - dependencies: - performance-now: 2.1.0 - dev: false - - /railroad-diagrams@1.0.0: - resolution: {integrity: sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A==} - dev: false - - /randexp@0.4.6: - resolution: {integrity: sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==} - engines: {node: '>=0.12'} - dependencies: - discontinuous-range: 1.0.0 - ret: 0.1.15 - dev: false - - /randombytes@2.1.0: - resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} - dependencies: - safe-buffer: 5.2.1 - - /range-parser@1.2.1: - resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==} - engines: {node: '>= 0.6'} - dev: true - - /raw-body@2.5.2: - resolution: {integrity: sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==} - engines: {node: '>= 0.8'} - dependencies: - bytes: 3.1.2 - http-errors: 2.0.0 - iconv-lite: 0.4.24 - unpipe: 1.0.0 - dev: true - - /react-dom@18.2.0(react@18.2.0): - resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} - peerDependencies: - react: ^18.2.0 - dependencies: - loose-envify: 1.4.0 - react: 18.2.0 - scheduler: 0.23.0 - - /react-is@16.13.1: - resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} - - /react-is@17.0.2: - resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} - - /react-is@18.2.0: - resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} - dev: false - - /react-reconciler@0.29.0(react@18.2.0): - resolution: {integrity: sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==} - engines: {node: '>=0.10.0'} - peerDependencies: - react: ^18.2.0 - dependencies: - loose-envify: 1.4.0 - react: 18.2.0 - scheduler: 0.23.0 - dev: false - - /react-refresh@0.14.0: - resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} - engines: {node: '>=0.10.0'} - dev: true - - /react-router-dom@6.22.1(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-iwMyyyrbL7zkKY7MRjOVRy+TMnS/OPusaFVxM2P11x9dzSzGmLsebkCvYirGq0DWB9K9hOspHYYtDz33gE5Duw==} - engines: {node: '>=14.0.0'} - peerDependencies: - react: '>=16.8' - react-dom: '>=16.8' - dependencies: - '@remix-run/router': 1.15.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-router: 6.22.1(react@18.2.0) - - /react-router@6.22.1(react@18.2.0): - resolution: {integrity: sha512-0pdoRGwLtemnJqn1K0XHUbnKiX0S4X8CgvVVmHGOWmofESj31msHo/1YiqcJWK7Wxfq2a4uvvtS01KAQyWK/CQ==} - engines: {node: '>=14.0.0'} - peerDependencies: - react: '>=16.8' - dependencies: - '@remix-run/router': 1.15.1 - react: 18.2.0 - - /react-shallow-renderer@16.15.0(react@18.2.0): - resolution: {integrity: sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==} - peerDependencies: - react: ^16.0.0 || ^17.0.0 || ^18.0.0 - dependencies: - object-assign: 4.1.1 - react: 18.2.0 - react-is: 18.2.0 - dev: false - - /react-test-renderer@18.2.0(react@18.2.0): - resolution: {integrity: sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==} - peerDependencies: - react: ^18.2.0 - dependencies: - react: 18.2.0 - react-is: 18.2.0 - react-shallow-renderer: 16.15.0(react@18.2.0) - scheduler: 0.23.0 - dev: false - - /react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==} - peerDependencies: - react: '>=16.6.0' - react-dom: '>=16.6.0' - dependencies: - '@babel/runtime': 7.23.9 - dom-helpers: 5.2.1 - loose-envify: 1.4.0 - prop-types: 15.8.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: false - - /react@18.2.0: - resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} - engines: {node: '>=0.10.0'} - dependencies: - loose-envify: 1.4.0 - - /read-cache@1.0.0: - resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} - dependencies: - pify: 2.3.0 - dev: false - - /readable-stream@1.0.34: - resolution: {integrity: sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==} - dependencies: - core-util-is: 1.0.3 - inherits: 2.0.4 - isarray: 0.0.1 - string_decoder: 0.10.31 - dev: true - - /readable-stream@2.3.8: - resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==} - dependencies: - core-util-is: 1.0.3 - inherits: 2.0.4 - isarray: 1.0.0 - process-nextick-args: 2.0.1 - safe-buffer: 5.1.2 - string_decoder: 1.1.1 - util-deprecate: 1.0.2 - dev: true - - /readdirp@3.6.0: - resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} - engines: {node: '>=8.10.0'} - dependencies: - picomatch: 2.3.1 - - /recast@0.20.5: - resolution: {integrity: sha512-E5qICoPoNL4yU0H0NoBDntNB0Q5oMSNh9usFctYniLBluTthi3RsQVBXIJNbApOlvSwW/RGxIuokPcAc59J5fQ==} - engines: {node: '>= 4'} - dependencies: - ast-types: 0.14.2 - esprima: 4.0.1 - source-map: 0.6.1 - tslib: 2.6.2 - - /rechoir@0.6.2: - resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==} - engines: {node: '>= 0.10'} - dependencies: - resolve: 1.22.8 - dev: true - - /reflect.ownkeys@0.2.0: - resolution: {integrity: sha512-qOLsBKHCpSOFKK1NUOCGC5VyeufB6lEsFe92AL2bhIJsacZS1qdoOZSbPk3MYKuT2cFlRDnulKXuuElIrMjGUg==} - dev: false - - /regenerate-unicode-properties@10.1.1: - resolution: {integrity: sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==} - engines: {node: '>=4'} - dependencies: - regenerate: 1.4.2 - - /regenerate@1.4.2: - resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==} - - /regenerator-runtime@0.14.1: - resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==} - - /regenerator-transform@0.15.2: - resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==} - dependencies: - '@babel/runtime': 7.23.9 - - /regex-not@1.0.2: - resolution: {integrity: sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==} - engines: {node: '>=0.10.0'} - dependencies: - extend-shallow: 3.0.2 - safe-regex: 1.1.0 - dev: false - - /regexp.prototype.flags@1.5.2: - resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - define-properties: 1.2.1 - es-errors: 1.3.0 - set-function-name: 2.0.2 - - /regexpu-core@5.3.2: - resolution: {integrity: sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==} - engines: {node: '>=4'} - dependencies: - '@babel/regjsgen': 0.8.0 - regenerate: 1.4.2 - regenerate-unicode-properties: 10.1.1 - regjsparser: 0.9.1 - unicode-match-property-ecmascript: 2.0.0 - unicode-match-property-value-ecmascript: 2.1.0 - - /regjsparser@0.9.1: - resolution: {integrity: sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==} - hasBin: true - dependencies: - jsesc: 0.5.0 - - /repeat-element@1.1.4: - resolution: {integrity: sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==} - engines: {node: '>=0.10.0'} - dev: false - - /repeat-string@1.6.1: - resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==} - engines: {node: '>=0.10'} - dev: false - - /require-directory@2.1.1: - resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} - engines: {node: '>=0.10.0'} - - /requires-port@1.0.0: - resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==} - dev: false - - /resolve-from@4.0.0: - resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} - engines: {node: '>=4'} - - /resolve-url@0.2.1: - resolution: {integrity: sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==} - deprecated: https://github.com/lydell/resolve-url#deprecated - dev: false - - /resolve@1.22.8: - resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==} - hasBin: true - dependencies: - is-core-module: 2.13.1 - path-parse: 1.0.7 - supports-preserve-symlinks-flag: 1.0.0 - - /ret@0.1.15: - resolution: {integrity: sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==} - engines: {node: '>=0.12'} - dev: false - - /reusify@1.0.4: - resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==} - engines: {iojs: '>=1.0.0', node: '>=0.10.0'} - - /rimraf@2.6.3: - resolution: {integrity: sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==} - hasBin: true - dependencies: - glob: 7.2.3 - dev: false - - /rimraf@3.0.2: - resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==} - hasBin: true - dependencies: - glob: 7.2.3 - dev: true - - /rimraf@5.0.5: - resolution: {integrity: sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A==} - engines: {node: '>=14'} - hasBin: true - dependencies: - glob: 10.3.10 - - /rollup-plugin-babel@4.4.0(@babel/core@7.23.9)(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 || ^7.0.0-rc.2 - rollup: '>=0.60.0 <3' - dependencies: - '@babel/core': 7.23.9 - '@babel/helper-module-imports': 7.22.15 - rollup: 3.29.4 - rollup-pluginutils: 2.8.2 - dev: true - - /rollup-plugin-commonjs@10.1.0(rollup@3.29.4): - resolution: {integrity: sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q==} - deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-commonjs. - peerDependencies: - rollup: '>=1.12.0' - dependencies: - estree-walker: 0.6.1 - is-reference: 1.2.1 - magic-string: 0.25.9 - resolve: 1.22.8 - rollup: 3.29.4 - rollup-pluginutils: 2.8.2 - dev: true - - /rollup-plugin-node-globals@1.4.0: - resolution: {integrity: sha512-xRkB+W/m1KLIzPUmG0ofvR+CPNcvuCuNdjVBVS7ALKSxr3EDhnzNceGkGi1m8MToSli13AzKFYH4ie9w3I5L3g==} - dependencies: - acorn: 5.7.4 - buffer-es6: 4.9.3 - estree-walker: 0.5.2 - magic-string: 0.22.5 - process-es6: 0.11.6 - rollup-pluginutils: 2.8.2 - dev: true - - /rollup-plugin-node-resolve@5.2.0(rollup@3.29.4): - resolution: {integrity: sha512-jUlyaDXts7TW2CqQ4GaO5VJ4PwwaV8VUGA7+km3n6k6xtOEacf61u0VXwN80phY/evMcaS+9eIeJ9MOyDxt5Zw==} - deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-node-resolve. - peerDependencies: - rollup: '>=1.11.0' - dependencies: - '@types/resolve': 0.0.8 - builtin-modules: 3.3.0 - is-module: 1.0.0 - resolve: 1.22.8 - rollup: 3.29.4 - rollup-pluginutils: 2.8.2 - dev: true - - /rollup-plugin-terser@7.0.2(rollup@3.29.4): - resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==} - deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser - peerDependencies: - rollup: ^2.0.0 - dependencies: - '@babel/code-frame': 7.23.5 - jest-worker: 26.6.2 - rollup: 3.29.4 - serialize-javascript: 4.0.0 - terser: 5.28.1 - dev: true - - /rollup-pluginutils@2.8.2: - resolution: {integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==} - dependencies: - estree-walker: 0.6.1 - dev: true - - /rollup@3.29.4: - resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==} - engines: {node: '>=14.18.0', npm: '>=8.0.0'} - hasBin: true - optionalDependencies: - fsevents: 2.3.3 - dev: true - - /rollup@4.12.0: - resolution: {integrity: sha512-wz66wn4t1OHIJw3+XU7mJJQV/2NAfw5OAk6G6Hoo3zcvz/XOfQ52Vgi+AN4Uxoxi0KBBwk2g8zPrTDA4btSB/Q==} - engines: {node: '>=18.0.0', npm: '>=8.0.0'} - hasBin: true - dependencies: - '@types/estree': 1.0.5 - optionalDependencies: - '@rollup/rollup-android-arm-eabi': 4.12.0 - '@rollup/rollup-android-arm64': 4.12.0 - '@rollup/rollup-darwin-arm64': 4.12.0 - '@rollup/rollup-darwin-x64': 4.12.0 - '@rollup/rollup-linux-arm-gnueabihf': 4.12.0 - '@rollup/rollup-linux-arm64-gnu': 4.12.0 - '@rollup/rollup-linux-arm64-musl': 4.12.0 - '@rollup/rollup-linux-riscv64-gnu': 4.12.0 - '@rollup/rollup-linux-x64-gnu': 4.12.0 - '@rollup/rollup-linux-x64-musl': 4.12.0 - '@rollup/rollup-win32-arm64-msvc': 4.12.0 - '@rollup/rollup-win32-ia32-msvc': 4.12.0 - '@rollup/rollup-win32-x64-msvc': 4.12.0 - fsevents: 2.3.3 - dev: true - - /rrweb-cssom@0.6.0: - resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==} - dev: false - - /rst-selector-parser@2.2.3: - resolution: {integrity: sha512-nDG1rZeP6oFTLN6yNDV/uiAvs1+FS/KlrEwh7+y7dpuApDBy6bI2HTBcc0/V8lv9OTqfyD34eF7au2pm8aBbhA==} - dependencies: - lodash.flattendeep: 4.4.0 - nearley: 2.20.1 - dev: false - - /run-parallel@1.2.0: - resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} - dependencies: - queue-microtask: 1.2.3 - - /safe-array-concat@1.1.0: - resolution: {integrity: sha512-ZdQ0Jeb9Ofti4hbt5lX3T2JcAamT9hfzYU1MNB+z/jaEbB6wfFfPIR/zEORmZqobkCCJhSjodobH6WHNmJ97dg==} - engines: {node: '>=0.4'} - dependencies: - call-bind: 1.0.7 - get-intrinsic: 1.2.4 - has-symbols: 1.0.3 - isarray: 2.0.5 - dev: false - - /safe-buffer@5.1.2: - resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==} - dev: true - - /safe-buffer@5.2.1: - resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==} - - /safe-regex-test@1.0.3: - resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - es-errors: 1.3.0 - is-regex: 1.1.4 - dev: false - - /safe-regex@1.1.0: - resolution: {integrity: sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==} - dependencies: - ret: 0.1.15 - dev: false - - /safer-buffer@2.1.2: - resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} - - /saxes@6.0.0: - resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} - engines: {node: '>=v12.22.7'} - dependencies: - xmlchars: 2.2.0 - dev: false - - /scheduler@0.23.0: - resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} - dependencies: - loose-envify: 1.4.0 - - /semver@5.7.2: - resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==} - hasBin: true - - /semver@6.3.1: - resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} - hasBin: true - - /send@0.18.0: - resolution: {integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==} - engines: {node: '>= 0.8.0'} - dependencies: - debug: 2.6.9 - depd: 2.0.0 - destroy: 1.2.0 - encodeurl: 1.0.2 - escape-html: 1.0.3 - etag: 1.8.1 - fresh: 0.5.2 - http-errors: 2.0.0 - mime: 1.6.0 - ms: 2.1.3 - on-finished: 2.4.1 - range-parser: 1.2.1 - statuses: 2.0.1 - transitivePeerDependencies: - - supports-color - dev: true - - /serialize-javascript@4.0.0: - resolution: {integrity: sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==} - dependencies: - randombytes: 2.1.0 - dev: true - - /serialize-javascript@6.0.0: - resolution: {integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==} - dependencies: - randombytes: 2.1.0 - dev: false - - /serve-static@1.15.0: - resolution: {integrity: sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==} - engines: {node: '>= 0.8.0'} - dependencies: - encodeurl: 1.0.2 - escape-html: 1.0.3 - parseurl: 1.3.3 - send: 0.18.0 - transitivePeerDependencies: - - supports-color - dev: true - - /set-function-length@1.2.1: - resolution: {integrity: sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==} - engines: {node: '>= 0.4'} - dependencies: - define-data-property: 1.1.4 - es-errors: 1.3.0 - function-bind: 1.1.2 - get-intrinsic: 1.2.4 - gopd: 1.0.1 - has-property-descriptors: 1.0.2 - - /set-function-name@2.0.2: - resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==} - engines: {node: '>= 0.4'} - dependencies: - define-data-property: 1.1.4 - es-errors: 1.3.0 - functions-have-names: 1.2.3 - has-property-descriptors: 1.0.2 - - /set-value@2.0.1: - resolution: {integrity: sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==} - engines: {node: '>=0.10.0'} - dependencies: - extend-shallow: 2.0.1 - is-extendable: 0.1.1 - is-plain-object: 2.0.4 - split-string: 3.1.0 - dev: false - - /setprototypeof@1.2.0: - resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==} - dev: true - - /shallow-clone@3.0.1: - resolution: {integrity: sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==} - engines: {node: '>=8'} - dependencies: - kind-of: 6.0.3 - - /shallowequal@1.1.0: - resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==} - dev: true - - /shebang-command@2.0.0: - resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} - engines: {node: '>=8'} - dependencies: - shebang-regex: 3.0.0 - - /shebang-regex@3.0.0: - resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} - engines: {node: '>=8'} - - /shelljs@0.8.5: - resolution: {integrity: sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==} - engines: {node: '>=4'} - hasBin: true - dependencies: - glob: 7.2.3 - interpret: 1.4.0 - rechoir: 0.6.2 - dev: true - - /shx@0.3.4: - resolution: {integrity: sha512-N6A9MLVqjxZYcVn8hLmtneQWIJtp8IKzMP4eMnx+nqkvXoqinUPCbUFLp2UcWTEIUONhlk0ewxr/jaVGlc+J+g==} - engines: {node: '>=6'} - hasBin: true - dependencies: - minimist: 1.2.8 - shelljs: 0.8.5 - dev: true - - /side-channel@1.0.5: - resolution: {integrity: sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==} - 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 - - /signal-exit@3.0.7: - resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==} - dev: false - - /signal-exit@4.1.0: - resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==} - engines: {node: '>=14'} - - /sinon@15.2.0: - resolution: {integrity: sha512-nPS85arNqwBXaIsFCkolHjGIkFo+Oxu9vbgmBJizLAhqe6P2o3Qmj3KCUoRkfhHtvgDhZdWD3risLHAUJ8npjw==} - deprecated: 16.1.1 - dependencies: - '@sinonjs/commons': 3.0.1 - '@sinonjs/fake-timers': 10.3.0 - '@sinonjs/samsam': 8.0.0 - diff: 5.2.0 - nise: 5.1.9 - supports-color: 7.2.0 - - /slash@3.0.0: - resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==} - engines: {node: '>=8'} - dev: false - - /snapdragon-node@2.1.1: - resolution: {integrity: sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==} - engines: {node: '>=0.10.0'} - dependencies: - define-property: 1.0.0 - isobject: 3.0.1 - snapdragon-util: 3.0.1 - dev: false - - /snapdragon-util@3.0.1: - resolution: {integrity: sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==} - engines: {node: '>=0.10.0'} - dependencies: - kind-of: 3.2.2 - dev: false - - /snapdragon@0.8.2: - resolution: {integrity: sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==} - engines: {node: '>=0.10.0'} - dependencies: - base: 0.11.2 - debug: 2.6.9 - define-property: 0.2.5 - extend-shallow: 2.0.1 - map-cache: 0.2.2 - source-map: 0.5.7 - source-map-resolve: 0.5.3 - use: 3.1.1 - transitivePeerDependencies: - - supports-color - dev: false - - /source-map-js@1.0.2: - resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} - engines: {node: '>=0.10.0'} - - /source-map-resolve@0.5.3: - resolution: {integrity: sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==} - deprecated: See https://github.com/lydell/source-map-resolve#deprecated - dependencies: - atob: 2.1.2 - decode-uri-component: 0.2.2 - resolve-url: 0.2.1 - source-map-url: 0.4.1 - urix: 0.1.0 - dev: false - - /source-map-support@0.5.21: - resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==} - dependencies: - buffer-from: 1.1.2 - source-map: 0.6.1 - - /source-map-url@0.4.1: - resolution: {integrity: sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==} - deprecated: See https://github.com/lydell/source-map-url#deprecated - dev: false - - /source-map@0.5.7: - resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==} - engines: {node: '>=0.10.0'} - - /source-map@0.6.1: - resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} - engines: {node: '>=0.10.0'} - - /source-map@0.7.4: - resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==} - engines: {node: '>= 8'} - - /sourcemap-codec@1.4.8: - resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==} - deprecated: Please use @jridgewell/sourcemap-codec instead - dev: true - - /split-string@3.1.0: - resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==} - engines: {node: '>=0.10.0'} - dependencies: - extend-shallow: 3.0.2 - dev: false - - /static-extend@0.1.2: - resolution: {integrity: sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==} - engines: {node: '>=0.10.0'} - dependencies: - define-property: 0.2.5 - object-copy: 0.1.0 - dev: false - - /statuses@2.0.1: - resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==} - engines: {node: '>= 0.8'} - dev: true - - /stop-iteration-iterator@1.0.0: - resolution: {integrity: sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==} - engines: {node: '>= 0.4'} - dependencies: - internal-slot: 1.0.7 - - /streamsearch@1.1.0: - resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==} - engines: {node: '>=10.0.0'} - - /string-width@4.2.3: - resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==} - engines: {node: '>=8'} - dependencies: - emoji-regex: 8.0.0 - is-fullwidth-code-point: 3.0.0 - strip-ansi: 6.0.1 - - /string-width@5.1.2: - resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==} - engines: {node: '>=12'} - dependencies: - eastasianwidth: 0.2.0 - emoji-regex: 9.2.2 - strip-ansi: 7.1.0 - - /string.prototype.trim@1.2.8: - resolution: {integrity: sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - define-properties: 1.2.1 - es-abstract: 1.22.4 - dev: false - - /string.prototype.trimend@1.0.7: - resolution: {integrity: sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==} - dependencies: - call-bind: 1.0.7 - define-properties: 1.2.1 - es-abstract: 1.22.4 - dev: false - - /string.prototype.trimstart@1.0.7: - resolution: {integrity: sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==} - dependencies: - call-bind: 1.0.7 - define-properties: 1.2.1 - es-abstract: 1.22.4 - dev: false - - /string_decoder@0.10.31: - resolution: {integrity: sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==} - dev: true - - /string_decoder@1.1.1: - resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==} - dependencies: - safe-buffer: 5.1.2 - dev: true - - /strip-ansi@6.0.1: - resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==} - engines: {node: '>=8'} - dependencies: - ansi-regex: 5.0.1 - - /strip-ansi@7.1.0: - resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==} - engines: {node: '>=12'} - dependencies: - ansi-regex: 6.0.1 - - /strip-indent@3.0.0: - resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==} - engines: {node: '>=8'} - dependencies: - min-indent: 1.0.1 - dev: true - - /strip-json-comments@3.1.1: - resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} - engines: {node: '>=8'} - - /styled-components@6.1.8(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==} - engines: {node: '>= 16'} - peerDependencies: - react: '>= 16.8.0' - react-dom: '>= 16.8.0' - dependencies: - '@emotion/is-prop-valid': 1.2.1 - '@emotion/unitless': 0.8.0 - '@types/stylis': 4.2.0 - css-to-react-native: 3.2.0 - csstype: 3.1.2 - postcss: 8.4.31 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - shallowequal: 1.1.0 - stylis: 4.3.1 - tslib: 2.5.0 - dev: true - - /styled-jsx@5.1.1(@babel/core@7.23.9)(react@18.2.0): - resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==} - engines: {node: '>= 12.0.0'} - peerDependencies: - '@babel/core': '*' - babel-plugin-macros: '*' - react: '>= 16.8.0 || 17.x.x || ^18.0.0-0' - peerDependenciesMeta: - '@babel/core': - optional: true - babel-plugin-macros: - optional: true - dependencies: - '@babel/core': 7.23.9 - client-only: 0.0.1 - react: 18.2.0 - - /stylis@4.2.0: - resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==} - - /stylis@4.3.1: - resolution: {integrity: sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==} - - /supports-color@5.5.0: - resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} - engines: {node: '>=4'} - dependencies: - has-flag: 3.0.0 - - /supports-color@7.2.0: - resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} - engines: {node: '>=8'} - dependencies: - has-flag: 4.0.0 - - /supports-color@8.1.1: - resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==} - engines: {node: '>=10'} - dependencies: - has-flag: 4.0.0 - - /supports-preserve-symlinks-flag@1.0.0: - resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} - engines: {node: '>= 0.4'} - - /svgo@3.2.0: - resolution: {integrity: sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==} - engines: {node: '>=14.0.0'} - hasBin: true - dependencies: - '@trysound/sax': 0.2.0 - commander: 7.2.0 - css-select: 5.1.0 - css-tree: 2.3.1 - css-what: 6.1.0 - csso: 5.0.5 - picocolors: 1.0.0 - dev: true - - /symbol-tree@3.2.4: - resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} - dev: false - - /temp@0.8.4: - resolution: {integrity: sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg==} - engines: {node: '>=6.0.0'} - dependencies: - rimraf: 2.6.3 - dev: false - - /terser@5.28.1: - resolution: {integrity: sha512-wM+bZp54v/E9eRRGXb5ZFDvinrJIOaTapx3WUokyVGZu5ucVCK55zEgGd5Dl2fSr3jUo5sDiERErUWLY6QPFyA==} - engines: {node: '>=10'} - hasBin: true - dependencies: - '@jridgewell/source-map': 0.3.5 - acorn: 8.11.3 - commander: 2.20.3 - source-map-support: 0.5.21 - dev: true - - /text-table@0.2.0: - resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} - dev: true - - /thenby@1.3.4: - resolution: {integrity: sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==} - dev: false - - /through2@0.4.2: - resolution: {integrity: sha512-45Llu+EwHKtAZYTPPVn3XZHBgakWMN3rokhEv5hu596XP+cNgplMg+Gj+1nmAvj+L0K7+N49zBKx5rah5u0QIQ==} - dependencies: - readable-stream: 1.0.34 - xtend: 2.1.2 - dev: true - - /through@2.3.8: - resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==} - dev: true - - /tiny-warning@1.0.3: - resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==} - dev: false - - /to-fast-properties@2.0.0: - resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} - engines: {node: '>=4'} - - /to-object-path@0.3.0: - resolution: {integrity: sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==} - engines: {node: '>=0.10.0'} - dependencies: - kind-of: 3.2.2 - dev: false - - /to-regex-range@2.1.1: - resolution: {integrity: sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==} - engines: {node: '>=0.10.0'} - dependencies: - is-number: 3.0.0 - repeat-string: 1.6.1 - dev: false - - /to-regex-range@5.0.1: - resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} - engines: {node: '>=8.0'} - dependencies: - is-number: 7.0.0 - - /to-regex@3.0.2: - resolution: {integrity: sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==} - engines: {node: '>=0.10.0'} - dependencies: - define-property: 2.0.2 - extend-shallow: 3.0.2 - regex-not: 1.0.2 - safe-regex: 1.1.0 - dev: false - - /toidentifier@1.0.1: - resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==} - engines: {node: '>=0.6'} - dev: true - - /tough-cookie@4.1.3: - resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==} - engines: {node: '>=6'} - dependencies: - psl: 1.9.0 - punycode: 2.3.1 - universalify: 0.2.0 - url-parse: 1.5.10 - dev: false - - /tr46@0.0.3: - resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==} - dev: true - - /tr46@5.0.0: - resolution: {integrity: sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==} - engines: {node: '>=18'} - dependencies: - punycode: 2.3.1 - dev: false - - /ts-invariant@0.10.3: - resolution: {integrity: sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==} - engines: {node: '>=8'} - dependencies: - tslib: 2.6.2 - - /tslib@2.5.0: - resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==} - dev: true - - /tslib@2.6.2: - resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} - - /type-check@0.4.0: - resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} - engines: {node: '>= 0.8.0'} - dependencies: - prelude-ls: 1.2.1 - dev: true - - /type-detect@4.0.8: - resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==} - engines: {node: '>=4'} - - /type-fest@0.20.2: - resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==} - engines: {node: '>=10'} - dev: true - - /type-is@1.6.18: - resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==} - engines: {node: '>= 0.6'} - dependencies: - media-typer: 0.3.0 - mime-types: 2.1.35 - dev: true - - /typed-array-buffer@1.0.2: - resolution: {integrity: sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - es-errors: 1.3.0 - is-typed-array: 1.1.13 - dev: false - - /typed-array-byte-length@1.0.1: - resolution: {integrity: sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - for-each: 0.3.3 - gopd: 1.0.1 - has-proto: 1.0.3 - is-typed-array: 1.1.13 - dev: false - - /typed-array-byte-offset@1.0.2: - resolution: {integrity: sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==} - engines: {node: '>= 0.4'} - dependencies: - available-typed-arrays: 1.0.7 - call-bind: 1.0.7 - for-each: 0.3.3 - gopd: 1.0.1 - has-proto: 1.0.3 - is-typed-array: 1.1.13 - dev: false - - /typed-array-length@1.0.5: - resolution: {integrity: sha512-yMi0PlwuznKHxKmcpoOdeLwxBoVPkqZxd7q2FgMkmD3bNwvF5VW0+UlUQ1k1vmktTu4Yu13Q0RIxEP8+B+wloA==} - engines: {node: '>= 0.4'} - dependencies: - call-bind: 1.0.7 - for-each: 0.3.3 - gopd: 1.0.1 - has-proto: 1.0.3 - is-typed-array: 1.1.13 - possible-typed-array-names: 1.0.0 - dev: false - - /typescript@5.3.3: - resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==} - engines: {node: '>=14.17'} - hasBin: true - - /ufo@1.4.0: - resolution: {integrity: sha512-Hhy+BhRBleFjpJ2vchUNN40qgkh0366FWJGqVLYBHev0vpHTrXSA0ryT+74UiW6KWsldNurQMKGqCm1M2zBciQ==} - dev: true - - /unbox-primitive@1.0.2: - resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==} - dependencies: - call-bind: 1.0.7 - has-bigints: 1.0.2 - has-symbols: 1.0.3 - which-boxed-primitive: 1.0.2 - dev: false - - /undici-types@5.26.5: - resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==} - dev: true - - /unicode-canonical-property-names-ecmascript@2.0.0: - resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==} - engines: {node: '>=4'} - - /unicode-match-property-ecmascript@2.0.0: - resolution: {integrity: sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==} - engines: {node: '>=4'} - dependencies: - unicode-canonical-property-names-ecmascript: 2.0.0 - unicode-property-aliases-ecmascript: 2.1.0 - - /unicode-match-property-value-ecmascript@2.1.0: - resolution: {integrity: sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==} - engines: {node: '>=4'} - - /unicode-property-aliases-ecmascript@2.1.0: - resolution: {integrity: sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==} - engines: {node: '>=4'} - - /union-value@1.0.1: - resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==} - engines: {node: '>=0.10.0'} - dependencies: - arr-union: 3.1.0 - get-value: 2.0.6 - is-extendable: 0.1.1 - set-value: 2.0.1 - dev: false - - /universalify@0.2.0: - resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==} - engines: {node: '>= 4.0.0'} - dev: false - - /universalify@2.0.1: - resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==} - engines: {node: '>= 10.0.0'} - - /unpipe@1.0.0: - resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==} - engines: {node: '>= 0.8'} - dev: true - - /unplugin@1.7.1: - resolution: {integrity: sha512-JqzORDAPxxs8ErLV4x+LL7bk5pk3YlcWqpSNsIkAZj972KzFZLClc/ekppahKkOczGkwIG6ElFgdOgOlK4tXZw==} - dependencies: - acorn: 8.11.3 - chokidar: 3.6.0 - webpack-sources: 3.2.3 - webpack-virtual-modules: 0.6.1 - - /unset-value@1.0.0: - resolution: {integrity: sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==} - engines: {node: '>=0.10.0'} - dependencies: - has-value: 0.3.1 - isobject: 3.0.1 - dev: false - - /update-browserslist-db@1.0.13(browserslist@4.23.0): - resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==} - hasBin: true - peerDependencies: - browserslist: '>= 4.21.0' - dependencies: - browserslist: 4.23.0 - escalade: 3.1.2 - picocolors: 1.0.0 - - /uri-js@4.4.1: - resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} - dependencies: - punycode: 2.3.1 - dev: true - - /urix@0.1.0: - resolution: {integrity: sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==} - deprecated: Please see https://github.com/lydell/urix#deprecated - dev: false - - /url-parse@1.5.10: - resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==} - dependencies: - querystringify: 2.2.0 - requires-port: 1.0.0 - dev: false - - /use@3.1.1: - resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==} - engines: {node: '>=0.10.0'} - dev: false - - /util-deprecate@1.0.2: - resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} - dev: true - - /utils-merge@1.0.1: - resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==} - engines: {node: '>= 0.4.0'} - dev: true - - /uuid@9.0.1: - resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==} - hasBin: true - dev: false - - /vary@1.1.2: - resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==} - engines: {node: '>= 0.8'} - dev: true - - /vite-plugin-pages@0.32.0(vite@5.0.12): - 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.0.12 - yaml: 2.4.0 - transitivePeerDependencies: - - supports-color - dev: true - - /vite@5.0.12: - resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==} - engines: {node: ^18.0.0 || >=20.0.0} - hasBin: true - peerDependencies: - '@types/node': ^18.0.0 || >=20.0.0 - less: '*' - lightningcss: ^1.21.0 - sass: '*' - stylus: '*' - sugarss: '*' - terser: ^5.4.0 - peerDependenciesMeta: - '@types/node': - optional: true - less: - optional: true - lightningcss: - optional: true - sass: - optional: true - stylus: - optional: true - sugarss: - optional: true - terser: - optional: true - dependencies: - esbuild: 0.19.12 - postcss: 8.4.35 - rollup: 4.12.0 - optionalDependencies: - fsevents: 2.3.3 - dev: true - - /vlq@0.2.3: - resolution: {integrity: sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow==} - dev: true - - /w3c-xmlserializer@5.0.0: - resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==} - engines: {node: '>=18'} - dependencies: - xml-name-validator: 5.0.0 - dev: false - - /watchpack@2.4.0: - resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==} - engines: {node: '>=10.13.0'} - dependencies: - glob-to-regexp: 0.4.1 - graceful-fs: 4.2.11 - dev: true - - /webidl-conversions@3.0.1: - resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} - dev: true - - /webidl-conversions@7.0.0: - resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==} - engines: {node: '>=12'} - - /webpack-sources@3.2.3: - resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==} - engines: {node: '>=10.13.0'} - - /webpack-virtual-modules@0.6.1: - resolution: {integrity: sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==} - - /whatwg-encoding@2.0.0: - resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==} - engines: {node: '>=12'} - dependencies: - iconv-lite: 0.6.3 - - /whatwg-encoding@3.1.1: - resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==} - engines: {node: '>=18'} - dependencies: - iconv-lite: 0.6.3 - dev: false - - /whatwg-mimetype@3.0.0: - resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==} - engines: {node: '>=12'} - - /whatwg-mimetype@4.0.0: - resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==} - engines: {node: '>=18'} - dev: false - - /whatwg-url@14.0.0: - resolution: {integrity: sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==} - engines: {node: '>=18'} - dependencies: - tr46: 5.0.0 - webidl-conversions: 7.0.0 - dev: false - - /whatwg-url@5.0.0: - resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==} - dependencies: - tr46: 0.0.3 - webidl-conversions: 3.0.1 - dev: true - - /which-boxed-primitive@1.0.2: - resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==} - dependencies: - is-bigint: 1.0.4 - is-boolean-object: 1.1.2 - is-number-object: 1.0.7 - is-string: 1.0.7 - is-symbol: 1.0.4 - - /which-collection@1.0.1: - resolution: {integrity: sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==} - dependencies: - is-map: 2.0.2 - is-set: 2.0.2 - is-weakmap: 2.0.1 - is-weakset: 2.0.2 - - /which-typed-array@1.1.14: - resolution: {integrity: sha512-VnXFiIW8yNn9kIHN88xvZ4yOWchftKDsRJ8fEPacX/wl1lOvBrhsJ/OeJCXq7B0AaijRuqgzSKalJoPk+D8MPg==} - engines: {node: '>= 0.4'} - dependencies: - available-typed-arrays: 1.0.7 - call-bind: 1.0.7 - for-each: 0.3.3 - gopd: 1.0.1 - has-tostringtag: 1.0.2 - - /which@2.0.2: - resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} - engines: {node: '>= 8'} - hasBin: true - dependencies: - isexe: 2.0.0 - - /workerpool@6.2.1: - resolution: {integrity: sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==} - dev: false - - /wrap-ansi@7.0.0: - resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==} - engines: {node: '>=10'} - dependencies: - ansi-styles: 4.3.0 - string-width: 4.2.3 - strip-ansi: 6.0.1 - - /wrap-ansi@8.1.0: - resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==} - engines: {node: '>=12'} - dependencies: - ansi-styles: 6.2.1 - string-width: 5.1.2 - strip-ansi: 7.1.0 - - /wrappy@1.0.2: - resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} - - /write-file-atomic@2.4.3: - resolution: {integrity: sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==} - dependencies: - graceful-fs: 4.2.11 - imurmurhash: 0.1.4 - signal-exit: 3.0.7 - dev: false - - /ws@8.16.0: - resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==} - engines: {node: '>=10.0.0'} - peerDependencies: - bufferutil: ^4.0.1 - utf-8-validate: '>=5.0.2' - peerDependenciesMeta: - bufferutil: - optional: true - utf-8-validate: - optional: true - dev: false - - /xml-name-validator@5.0.0: - resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==} - engines: {node: '>=18'} - dev: false - - /xmlchars@2.2.0: - resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==} - dev: false - - /xtend@2.1.2: - resolution: {integrity: sha512-vMNKzr2rHP9Dp/e1NQFnLQlwlhp9L/LfvnsVdHxN1f+uggyVI3i08uD14GPvCToPkdsRfyPqIyYGmIk58V98ZQ==} - engines: {node: '>=0.4'} - dependencies: - object-keys: 0.4.0 - dev: true - - /y18n@5.0.8: - resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==} - engines: {node: '>=10'} - - /yallist@3.1.1: - resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} - - /yaml@1.10.2: - resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==} - engines: {node: '>= 6'} - - /yaml@2.4.0: - resolution: {integrity: sha512-j9iR8g+/t0lArF4V6NE/QCfT+CO7iLqrXAHZbJdo+LfjqP1vR8Fg5bSiaq6Q2lOD1AUEVrEVIgABvBFYojJVYQ==} - engines: {node: '>= 14'} - hasBin: true - dev: true - - /yargs-parser@20.2.4: - resolution: {integrity: sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==} - engines: {node: '>=10'} - dev: false - - /yargs-parser@20.2.9: - resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==} - engines: {node: '>=10'} - dev: false - - /yargs-parser@21.1.1: - resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==} - engines: {node: '>=12'} - - /yargs-unparser@2.0.0: - resolution: {integrity: sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==} - engines: {node: '>=10'} - dependencies: - camelcase: 6.3.0 - decamelize: 4.0.0 - flat: 5.0.2 - is-plain-obj: 2.1.0 - dev: false - - /yargs@16.2.0: - resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==} - engines: {node: '>=10'} - dependencies: - cliui: 7.0.4 - escalade: 3.1.2 - get-caller-file: 2.0.5 - require-directory: 2.1.1 - string-width: 4.2.3 - y18n: 5.0.8 - yargs-parser: 20.2.9 - dev: false - - /yargs@17.7.2: - resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==} - engines: {node: '>=12'} - dependencies: - cliui: 8.0.1 - escalade: 3.1.2 - get-caller-file: 2.0.5 - require-directory: 2.1.1 - string-width: 4.2.3 - y18n: 5.0.8 - yargs-parser: 21.1.1 - - /yocto-queue@0.1.0: - resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} - engines: {node: '>=10'} - - /zod@3.21.4: - resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==} - dev: true - - file:../packages/mui-base/build(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): - resolution: {directory: ../packages/mui-base/build, type: directory} - id: file:../packages/mui-base/build - name: '@mui/base' - engines: {node: '>=12.0.0'} - peerDependencies: - '@types/react': ^17.0.0 || ^18.0.0 - 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 - '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0)(react@18.2.0) - '@mui/types': link:../packages/mui-types/build - '@mui/utils': link:../packages/mui-utils/build - '@popperjs/core': 2.11.8 - '@types/react': 18.2.55 - clsx: 2.1.0 - prop-types: 15.8.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: false - - 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' - engines: {node: '>=12.0.0'} - peerDependencies: - '@mui/material': ^5.0.0 - '@types/react': ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.23.9 - '@mui/material': file:../packages/mui-material/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) - '@types/react': 18.2.55 - react: 18.2.0 - dev: false - - 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' - engines: {node: '>=12.0.0'} - peerDependencies: - '@emotion/cache': ^11.11.0 - '@emotion/server': ^11.11.0 - '@mui/material': ^5.0.0 - '@types/react': ^17.0.0 || ^18.0.0 - next: ^13.0.0 || ^14.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@emotion/cache': - optional: true - '@emotion/server': - optional: true - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.23.9 - '@emotion/cache': 11.11.0 - '@mui/material': file:../packages/mui-material/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) - '@types/react': 18.2.55 - next: 14.1.3(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) - react: 18.2.0 - dev: false - - file:../packages/mui-material/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): - resolution: {directory: ../packages/mui-material/build, type: directory} - id: file:../packages/mui-material/build - name: '@mui/material' - engines: {node: '>=12.0.0'} - peerDependencies: - '@emotion/react': ^11.5.0 - '@emotion/styled': ^11.3.0 - '@types/react': ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - react-dom: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@emotion/react': - optional: true - '@emotion/styled': - optional: true - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.23.9 - '@emotion/react': 11.11.4(@types/react@18.2.55)(react@18.2.0) - '@mui/base': link:../packages/mui-base/build - '@mui/core-downloads-tracker': link:../packages/mui-core-downloads-tracker/build - '@mui/system': link:../packages/mui-system/build - '@mui/types': link:../packages/mui-types/build - '@mui/utils': link:../packages/mui-utils/build - '@types/react': 18.2.55 - '@types/react-transition-group': 4.4.10 - clsx: 2.1.0 - csstype: 3.1.3 - prop-types: 15.8.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-is: 18.2.0 - react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0) - dev: false - - file:../packages/mui-system/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0): - resolution: {directory: ../packages/mui-system/build, type: directory} - id: file:../packages/mui-system/build - name: '@mui/system' - engines: {node: '>=12.0.0'} - peerDependencies: - '@emotion/react': ^11.5.0 - '@emotion/styled': ^11.3.0 - '@types/react': ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@emotion/react': - optional: true - '@emotion/styled': - optional: true - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.23.9 - '@emotion/react': 11.11.4(@types/react@18.2.55)(react@18.2.0) - '@mui/private-theming': link:../packages/mui-private-theming/build - '@mui/styled-engine': link:../packages/mui-styled-engine/build - '@mui/types': link:../packages/mui-types/build - '@mui/utils': link:../packages/mui-utils/build - '@types/react': 18.2.55 - clsx: 2.1.0 - csstype: 3.1.3 - prop-types: 15.8.1 - react: 18.2.0 - dev: false - - file:../packages/mui-utils/build(@types/react@18.2.55)(react@18.2.0): - resolution: {directory: ../packages/mui-utils/build, type: directory} - id: file:../packages/mui-utils/build - name: '@mui/utils' - engines: {node: '>=12.0.0'} - peerDependencies: - '@types/react': ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.23.9 - '@types/prop-types': 15.7.11 - '@types/react': 18.2.55 - prop-types: 15.8.1 - react: 18.2.0 - react-is: 18.2.0 - dev: false - - file:../packages/pigment-css-nextjs-plugin(next@14.1.3): - resolution: {directory: ../packages/pigment-css-nextjs-plugin, type: directory} - id: file:../packages/pigment-css-nextjs-plugin - name: '@pigment-css/nextjs-plugin' - peerDependencies: - next: ^12.0.0 || ^13.0.0 || ^14.0.0 - dependencies: - '@pigment-css/unplugin': link:../packages/pigment-css-unplugin - next: 14.1.3(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) - dev: true - - file:../packages/pigment-css-react(@types/react@18.2.55)(react@18.2.0)(typescript@5.3.3): - 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.23.9 - '@babel/helper-module-imports': 7.22.15 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/parser': 7.23.9 - '@babel/types': 7.23.9 - '@emotion/css': 11.11.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(typescript@5.3.3) - clsx: 2.1.0 - cssesc: 3.0.0 - csstype: 3.1.3 - lodash: 4.17.21 - react: 18.2.0 - stylis: 4.3.1 - transitivePeerDependencies: - - '@types/react' - - supports-color - - typescript - dev: false - - file:../packages/pigment-css-unplugin(typescript@5.3.3): - resolution: {directory: ../packages/pigment-css-unplugin, type: directory} - id: file:../packages/pigment-css-unplugin - name: '@pigment-css/unplugin' - dependencies: - '@babel/core': 7.23.9 - '@pigment-css/react': link:../packages/pigment-css-react - '@wyw-in-js/shared': 0.5.0 - '@wyw-in-js/transform': 0.5.0(typescript@5.3.3) - babel-plugin-transform-react-remove-prop-types: 0.4.24 - unplugin: 1.7.1 - transitivePeerDependencies: - - supports-color - - typescript - dev: true - - file:../packages/pigment-css-vite-plugin(vite@5.0.12): - resolution: {directory: ../packages/pigment-css-vite-plugin, type: directory} - id: file:../packages/pigment-css-vite-plugin - name: '@pigment-css/vite-plugin' - peerDependencies: - vite: ^4.0.0 || ^5.0.0 - dependencies: - '@babel/core': 7.23.9 - '@babel/preset-typescript': 7.23.3(@babel/core@7.23.9) - '@pigment-css/react': link:../packages/pigment-css-react - '@wyw-in-js/shared': 0.5.0 - '@wyw-in-js/transform': 0.5.0(typescript@5.3.3) - babel-plugin-transform-react-remove-prop-types: 0.4.24 - vite: 5.0.12 - transitivePeerDependencies: - - supports-color - - typescript - dev: true diff --git a/benchmark/package.json b/benchmark/package.json index 48ca1c919ad051..8fc00ccfc2e138 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -14,17 +14,17 @@ "@chakra-ui/system": "^2.6.2", "@emotion/react": "^11.11.4", "@emotion/server": "^11.11.0", - "@emotion/styled": "^11.11.0", + "@emotion/styled": "^11.11.5", "@mui/material": "workspace:^", "@mui/styles": "workspace:^", "@mui/system": "workspace:^", "@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", + "playwright": "^1.43.1", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/dangerfile.ts b/dangerfile.ts index 190f1941279805..930d859078c823 100644 --- a/dangerfile.ts +++ b/dangerfile.ts @@ -1,4 +1,4 @@ -// inspire by reacts dangerfile +// Inspired by React dangerfile // danger has to be the first thing required! import { danger, markdown } from 'danger'; import { exec } from 'child_process'; @@ -13,7 +13,7 @@ const parsedSizeChangeThreshold = 300; const gzipSizeChangeThreshold = 100; /** - * executes a git subcommand + * Executes a git subcommand. * @param {any} args */ function git(args: any) { @@ -40,8 +40,8 @@ async function reportBundleSizeCleanup() { } /** - * creates a callback for Object.entries(comparison).filter that excludes every - * entry that does not exceed the given threshold values for parsed and gzip size + * Creates a callback for Object.entries(comparison).filter that excludes every + * entry that does not exceed the given threshold values for parsed and gzip size. * @param {number} parsedThreshold * @param {number} gzipThreshold */ @@ -56,17 +56,7 @@ function createComparisonFilter(parsedThreshold: number, gzipThreshold: number) } /** - * checks if the bundle is of a package e.b. `@mui/material` but not - * `@mui/material/Paper` - * @param {[string, any]} comparisonEntry - */ -function isPackageComparison(comparisonEntry: [string, any]) { - const [bundleKey] = comparisonEntry; - return /^@[\w-]+\/[\w-]+$/.test(bundleKey); -} - -/** - * Generates a user-readable string from a percentage change + * Generates a user-readable string from a percentage change. * @param {number} change * @param {string} goodEmoji emoji on reduction * @param {string} badEmoji emoji on increase @@ -91,7 +81,7 @@ function generateEmphasizedChange([bundle, { parsed, gzip }]: [ } /** - * Puts results in different buckets wh + * Puts results in different buckets. * @param {*} results */ function sieveResults<T>(results: Array<[string, T]>) { @@ -137,8 +127,7 @@ async function loadLastComparison( } async function reportBundleSize() { - // Use git locally to grab the commit which represents the place - // where the branches differ + // Use git locally to grab the commit which represents the place where the branches differ const upstreamRepo = danger.github.pr.base.repo.full_name; const upstreamRef = danger.github.pr.base.ref; try { @@ -161,12 +150,25 @@ async function reportBundleSize() { if (anyResultsChanges.length > 0) { const importantChanges = mainResults .filter(createComparisonFilter(parsedSizeChangeThreshold, gzipSizeChangeThreshold)) - .filter(isPackageComparison) + .sort(([, a], [, b]) => { + const aDiff = Math.abs(a.parsed.absoluteDiff) + Math.abs(a.gzip.absoluteDiff); + const bDiff = Math.abs(b.parsed.absoluteDiff) + Math.abs(b.gzip.absoluteDiff); + return bDiff - aDiff; + }) .map(generateEmphasizedChange); // have to guard against empty strings if (importantChanges.length > 0) { - markdown(importantChanges.join('\n')); + const maxVisible = 20; + + const lines = importantChanges.slice(0, maxVisible); + + const nrOfHiddenChanges = Math.max(0, importantChanges.length - maxVisible); + if (nrOfHiddenChanges > 0) { + lines.push(`and [${nrOfHiddenChanges} more changes](${detailedComparisonToolpadUrl})`); + } + + markdown(lines.join('\n')); } const details = `## Bundle size report diff --git a/docs/data/about/teamMembers.json b/docs/data/about/teamMembers.json index 7750344851ac1c..e6b3607816325a 100644 --- a/docs/data/about/teamMembers.json +++ b/docs/data/about/teamMembers.json @@ -273,5 +273,22 @@ "locationCountry": "au", "about": "Enjoy creating open source libraries and reading about AI 🤖", "github": "atomiks" + }, + { + "name": "Aarón García", + "title": "Design Engineer - Core", + "location": "Alicante, Spain", + "locationCountry": "es", + "about": "Minimalism, web development, user experience, football, cycling", + "twitter": "aarongarciah", + "github": "aarongarciah" + }, + { + "name": "Jose Quintas", + "title": "React Engineer - X", + "location": "Amsterdam, Netherlands", + "locationCountry": "nl", + "about": "A general knowledge gatherer. Gamer and programmer in the off hours.", + "github": "JCQuintas" } ] diff --git a/docs/data/base/components/accordion/accordion.md b/docs/data/base/components/accordion/accordion.md index 5a82e1bbcc8ba3..a8b814bb190c27 100644 --- a/docs/data/base/components/accordion/accordion.md +++ b/docs/data/base/components/accordion/accordion.md @@ -10,5 +10,5 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ <p class="description">Accordions let users show and hide sections of related content on a page.</p> :::warning -The Base UI Accordion component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38037) to see it arrive sooner. +The Base UI Accordion component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/base-ui/issues/25) to see it arrive sooner. ::: diff --git a/docs/data/base/components/checkbox/checkbox.md b/docs/data/base/components/checkbox/checkbox.md index 58e682082f27b2..56ce9d252acf15 100644 --- a/docs/data/base/components/checkbox/checkbox.md +++ b/docs/data/base/components/checkbox/checkbox.md @@ -10,5 +10,5 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ <p class="description">Checkboxes give users binary choices when presented with multiple options in a series.</p> :::warning -The Base UI Checkbox component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38036) to see it arrive sooner. +The Base UI Checkbox component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/base-ui/issues/24) to see it arrive sooner. ::: diff --git a/docs/data/base/components/drawer/drawer.md b/docs/data/base/components/drawer/drawer.md index 5d046213e952bc..92f3253ea7d435 100644 --- a/docs/data/base/components/drawer/drawer.md +++ b/docs/data/base/components/drawer/drawer.md @@ -9,5 +9,5 @@ githubLabel: 'component: drawer' <p class="description">Navigation drawers (also known as sidebars) provide ergonomic access to different destinations without taking the user out of context.</p> :::warning -The Base UI Drawer component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38181) to see it arrive sooner. +The Base UI Drawer component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/base-ui/issues/38) to see it arrive sooner. ::: diff --git a/docs/data/base/components/number-input/number-input.md b/docs/data/base/components/number-input/number-input.md index e5b97522690dfc..ac0c977a23a795 100644 --- a/docs/data/base/components/number-input/number-input.md +++ b/docs/data/base/components/number-input/number-input.md @@ -152,7 +152,7 @@ For example, if `min={0}` and `step={2}`, valid values for the component would b ``` :::warning -Support for decimal values and step sizes isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38518) to see it arrive sooner. +Support for decimal values and step sizes isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/base-ui/issues/41) to see it arrive sooner. ::: When the input field is in focus, you can enter values that fall outside the valid range. diff --git a/docs/data/base/components/pagination/pagination.md b/docs/data/base/components/pagination/pagination.md index 6074346a5d8287..92283c4d830678 100644 --- a/docs/data/base/components/pagination/pagination.md +++ b/docs/data/base/components/pagination/pagination.md @@ -9,5 +9,5 @@ githubLabel: 'component: Pagination' <p class="description">The Pagination component lets the user select a specific page from a range of pages.</p> :::warning -The Base UI Pagination component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38042) to see it arrive sooner. +The Base UI Pagination component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/base-ui/issues/29) to see it arrive sooner. ::: diff --git a/docs/data/base/components/radio-group/radio-group.md b/docs/data/base/components/radio-group/radio-group.md index 1bcaf2cd8f7b72..0deac10f94b3bf 100644 --- a/docs/data/base/components/radio-group/radio-group.md +++ b/docs/data/base/components/radio-group/radio-group.md @@ -10,5 +10,5 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/radio/ <p class="description">Radio buttons enable the user to select one option from a set.</p> :::warning -The Base UI Radio Group component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38038) to see it arrive sooner. +The Base UI Radio Group component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/base-ui/issues/26) to see it arrive sooner. ::: diff --git a/docs/data/base/components/rating/rating.md b/docs/data/base/components/rating/rating.md index 69606427548431..08132d5682ff06 100644 --- a/docs/data/base/components/rating/rating.md +++ b/docs/data/base/components/rating/rating.md @@ -10,5 +10,5 @@ waiAria: https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating <p class="description">Rating components provide users with a simple action to give feedback as well as assess the opinions of others.</p> :::warning -The Base UI Rating component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38043) to see it arrive sooner. +The Base UI Rating component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/base-ui/issues/30) to see it arrive sooner. ::: diff --git a/docs/data/base/components/toggle-button-group/toggle-button-group.md b/docs/data/base/components/toggle-button-group/toggle-button-group.md index af6632edbf120b..4fa0dada8546c8 100644 --- a/docs/data/base/components/toggle-button-group/toggle-button-group.md +++ b/docs/data/base/components/toggle-button-group/toggle-button-group.md @@ -9,5 +9,5 @@ githubLabel: 'component: toggle button' <p class="description">Toggle Button Groups house sets of buttons with mutually exclusive actions.</p> :::warning -The Base UI Toggle Button Group component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38044) to see it arrive sooner. +The Base UI Toggle Button Group component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/base-ui/issues/31) to see it arrive sooner. ::: diff --git a/docs/data/base/components/tooltip/tooltip.md b/docs/data/base/components/tooltip/tooltip.md index 63e1a9c339420f..02ea58050debca 100644 --- a/docs/data/base/components/tooltip/tooltip.md +++ b/docs/data/base/components/tooltip/tooltip.md @@ -10,5 +10,5 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/ <p class="description">Tooltips display informative text when users hover over, focus on, or tap an element.</p> :::warning -The Base UI Tooltip component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38045) to see it arrive sooner. +The Base UI Tooltip component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/base-ui/issues/32) to see it arrive sooner. ::: diff --git a/docs/data/docs-infra/pages.ts b/docs/data/docs-infra/pages.ts index 0cd74435bba91f..a4c653c9a39f86 100644 --- a/docs/data/docs-infra/pages.ts +++ b/docs/data/docs-infra/pages.ts @@ -7,6 +7,7 @@ const pages: readonly MuiPage[] = [ children: [ { pathname: '/experiments/docs/headers' }, { pathname: '/experiments/docs/markdown' }, + { pathname: '/experiments/docs/og-card' }, ], }, { diff --git a/docs/data/joy/getting-started/templates/TemplateCollection.js b/docs/data/joy/getting-started/templates/TemplateCollection.js index 171ed4e5293c2c..28bad8f0d3e98f 100644 --- a/docs/data/joy/getting-started/templates/TemplateCollection.js +++ b/docs/data/joy/getting-started/templates/TemplateCollection.js @@ -88,7 +88,7 @@ const templates = [ author: authors.MUI, design: { name: 'Frames X', - link: 'https://framesxdesign.com/', + link: 'https://framesxdesign.com/product', }, }, ]; diff --git a/docs/data/joy/integrations/icon-libraries/icon-libraries.md b/docs/data/joy/integrations/icon-libraries/icon-libraries.md index bd0192f0351031..6e0ed174b76a69 100644 --- a/docs/data/joy/integrations/icon-libraries/icon-libraries.md +++ b/docs/data/joy/integrations/icon-libraries/icon-libraries.md @@ -189,7 +189,7 @@ Here is a collection of well-known icon libraries that you can use with Joy UI. ### Font Awesome Icons - [Browse icons](https://fontawesome.com/icons) -- [Installation](https://fontawesome.com/docs/web/use-with/react/) +- [Installation](https://docs.fontawesome.com/web/use-with/react) <iframe src="https://codesandbox.io/embed/joy-ui-fontawesome-kjbnqj?fontsize=12&hidenavigation=1&module=%2Fdemo.tsx&theme=dark" style="width:100%; height:250px; border:0; border-radius: 12px; overflow:hidden;" diff --git a/docs/data/material/components/app-bar/BackToTop.js b/docs/data/material/components/app-bar/BackToTop.js index ea7f7c46ef194c..6e454039aa54a8 100644 --- a/docs/data/material/components/app-bar/BackToTop.js +++ b/docs/data/material/components/app-bar/BackToTop.js @@ -48,7 +48,7 @@ function ScrollTop(props) { } ScrollTop.propTypes = { - children: PropTypes.element.isRequired, + children: PropTypes.element, /** * Injected by the documentation to work in an iframe. * You won't need it on your project. diff --git a/docs/data/material/components/app-bar/BackToTop.tsx b/docs/data/material/components/app-bar/BackToTop.tsx index 567ba0f51abe12..87eca489bf5c9f 100644 --- a/docs/data/material/components/app-bar/BackToTop.tsx +++ b/docs/data/material/components/app-bar/BackToTop.tsx @@ -16,7 +16,7 @@ interface Props { * You won't need it on your project. */ window?: () => Window; - children: React.ReactElement; + children?: React.ReactElement; } function ScrollTop(props: Props) { diff --git a/docs/data/material/components/app-bar/ElevateAppBar.js b/docs/data/material/components/app-bar/ElevateAppBar.js index 38c700c1f25447..1679f75e66c806 100644 --- a/docs/data/material/components/app-bar/ElevateAppBar.js +++ b/docs/data/material/components/app-bar/ElevateAppBar.js @@ -19,13 +19,15 @@ function ElevationScroll(props) { target: window ? window() : undefined, }); - return React.cloneElement(children, { - elevation: trigger ? 4 : 0, - }); + return children + ? React.cloneElement(children, { + elevation: trigger ? 4 : 0, + }) + : null; } ElevationScroll.propTypes = { - children: PropTypes.element.isRequired, + children: PropTypes.element, /** * Injected by the documentation to work in an iframe. * You won't need it on your project. diff --git a/docs/data/material/components/app-bar/ElevateAppBar.tsx b/docs/data/material/components/app-bar/ElevateAppBar.tsx index 2f077ee6723d20..195908dcaf13fe 100644 --- a/docs/data/material/components/app-bar/ElevateAppBar.tsx +++ b/docs/data/material/components/app-bar/ElevateAppBar.tsx @@ -13,7 +13,7 @@ interface Props { * You won't need it on your project. */ window?: () => Window; - children: React.ReactElement; + children?: React.ReactElement; } function ElevationScroll(props: Props) { @@ -27,9 +27,11 @@ function ElevationScroll(props: Props) { target: window ? window() : undefined, }); - return React.cloneElement(children, { - elevation: trigger ? 4 : 0, - }); + return children + ? React.cloneElement(children, { + elevation: trigger ? 4 : 0, + }) + : null; } export default function ElevateAppBar(props: Props) { diff --git a/docs/data/material/components/app-bar/HideAppBar.js b/docs/data/material/components/app-bar/HideAppBar.js index ce03ed56243c08..0753b6dd25b77b 100644 --- a/docs/data/material/components/app-bar/HideAppBar.js +++ b/docs/data/material/components/app-bar/HideAppBar.js @@ -20,13 +20,13 @@ function HideOnScroll(props) { return ( <Slide appear={false} direction="down" in={!trigger}> - {children} + {children ?? <div />} </Slide> ); } HideOnScroll.propTypes = { - children: PropTypes.element.isRequired, + children: PropTypes.element, /** * Injected by the documentation to work in an iframe. * You won't need it on your project. diff --git a/docs/data/material/components/app-bar/HideAppBar.tsx b/docs/data/material/components/app-bar/HideAppBar.tsx index 907ebfe124a2aa..4bc84bfc663305 100644 --- a/docs/data/material/components/app-bar/HideAppBar.tsx +++ b/docs/data/material/components/app-bar/HideAppBar.tsx @@ -14,7 +14,7 @@ interface Props { * You won't need it on your project. */ window?: () => Window; - children: React.ReactElement; + children?: React.ReactElement; } function HideOnScroll(props: Props) { @@ -28,7 +28,7 @@ function HideOnScroll(props: Props) { return ( <Slide appear={false} direction="down" in={!trigger}> - {children} + {children ?? <div />} </Slide> ); } diff --git a/docs/data/material/components/app-bar/app-bar.md b/docs/data/material/components/app-bar/app-bar.md index 976f9b2dab6dc8..10ea9272ec4390 100644 --- a/docs/data/material/components/app-bar/app-bar.md +++ b/docs/data/material/components/app-bar/app-bar.md @@ -62,7 +62,7 @@ A prominent app bar. When you render the app bar position fixed, the dimension of the element doesn't impact the rest of the page. This can cause some part of your content to be invisible, behind the app bar. Here are 3 possible solutions: -1. You can use `position="sticky"` instead of fixed. ⚠️ sticky is not supported by IE11. +1. You can use `position="sticky"` instead of fixed. 2. You can render a second `<Toolbar />` component: ```jsx diff --git a/docs/data/material/components/buttons/InputFileUpload.js b/docs/data/material/components/buttons/InputFileUpload.js index d1cfcba03567ac..e939eba055432b 100644 --- a/docs/data/material/components/buttons/InputFileUpload.js +++ b/docs/data/material/components/buttons/InputFileUpload.js @@ -24,8 +24,12 @@ export default function InputFileUpload() { tabIndex={-1} startIcon={<CloudUploadIcon />} > - Upload file - <VisuallyHiddenInput type="file" /> + Upload files + <VisuallyHiddenInput + type="file" + onChange={(event) => console.log(event.target.files)} + multiple + /> </Button> ); } diff --git a/docs/data/material/components/buttons/InputFileUpload.tsx b/docs/data/material/components/buttons/InputFileUpload.tsx index d1cfcba03567ac..e939eba055432b 100644 --- a/docs/data/material/components/buttons/InputFileUpload.tsx +++ b/docs/data/material/components/buttons/InputFileUpload.tsx @@ -24,8 +24,12 @@ export default function InputFileUpload() { tabIndex={-1} startIcon={<CloudUploadIcon />} > - Upload file - <VisuallyHiddenInput type="file" /> + Upload files + <VisuallyHiddenInput + type="file" + onChange={(event) => console.log(event.target.files)} + multiple + /> </Button> ); } diff --git a/docs/data/material/components/buttons/InputFileUpload.tsx.preview b/docs/data/material/components/buttons/InputFileUpload.tsx.preview index 69ab491553d7c8..c2dccf123cc789 100644 --- a/docs/data/material/components/buttons/InputFileUpload.tsx.preview +++ b/docs/data/material/components/buttons/InputFileUpload.tsx.preview @@ -5,6 +5,10 @@ tabIndex={-1} startIcon={<CloudUploadIcon />} > - Upload file - <VisuallyHiddenInput type="file" /> + Upload files + <VisuallyHiddenInput + type="file" + onChange={(event) => console.log(event.target.files)} + multiple + /> </Button> \ No newline at end of file diff --git a/docs/data/material/components/cards/cards.md b/docs/data/material/components/cards/cards.md index d36aa82992f0d4..fa18974f8bd743 100644 --- a/docs/data/material/components/cards/cards.md +++ b/docs/data/material/components/cards/cards.md @@ -59,10 +59,6 @@ By default, we use the combination of a `<div>` element and a _background image_ {{"demo": "ImgMediaCard.js", "bg": true}} -:::warning -When `component="img"`, CardMedia relies on `object-fit` for centering the image. It's not supported by IE11. -::: - ## Primary action Often a card allow users to interact with the entirety of its surface to trigger its main action, be it an expansion, a link to another screen or some other behavior. The action area of the card can be specified by wrapping its contents in a `CardActionArea` component. diff --git a/docs/data/material/components/icons/CreateSvgIcon.js b/docs/data/material/components/icons/CreateSvgIcon.js index ec540e8058cd14..ee8f3ae3156c51 100644 --- a/docs/data/material/components/icons/CreateSvgIcon.js +++ b/docs/data/material/components/icons/CreateSvgIcon.js @@ -8,7 +8,7 @@ const HomeIcon = createSvgIcon( ); const PlusIcon = createSvgIcon( - // credit: plus icon from https://heroicons.com/ + // credit: plus icon from https://heroicons.com <svg xmlns="http://www.w3.org/2000/svg" fill="none" diff --git a/docs/data/material/components/icons/CreateSvgIcon.tsx b/docs/data/material/components/icons/CreateSvgIcon.tsx index ec540e8058cd14..ee8f3ae3156c51 100644 --- a/docs/data/material/components/icons/CreateSvgIcon.tsx +++ b/docs/data/material/components/icons/CreateSvgIcon.tsx @@ -8,7 +8,7 @@ const HomeIcon = createSvgIcon( ); const PlusIcon = createSvgIcon( - // credit: plus icon from https://heroicons.com/ + // credit: plus icon from https://heroicons.com <svg xmlns="http://www.w3.org/2000/svg" fill="none" diff --git a/docs/data/material/components/icons/SvgIconChildren.js b/docs/data/material/components/icons/SvgIconChildren.js index d2a9d69ccdda22..553eab6356a6db 100644 --- a/docs/data/material/components/icons/SvgIconChildren.js +++ b/docs/data/material/components/icons/SvgIconChildren.js @@ -4,7 +4,7 @@ import SvgIcon from '@mui/material/SvgIcon'; export default function SvgIconChildren() { return ( <SvgIcon> - {/* credit: plus icon from https://heroicons.com/ */} + {/* credit: cog icon from https://heroicons.com */} <svg xmlns="http://www.w3.org/2000/svg" fill="none" diff --git a/docs/data/material/components/icons/SvgIconChildren.tsx b/docs/data/material/components/icons/SvgIconChildren.tsx index d2a9d69ccdda22..553eab6356a6db 100644 --- a/docs/data/material/components/icons/SvgIconChildren.tsx +++ b/docs/data/material/components/icons/SvgIconChildren.tsx @@ -4,7 +4,7 @@ import SvgIcon from '@mui/material/SvgIcon'; export default function SvgIconChildren() { return ( <SvgIcon> - {/* credit: plus icon from https://heroicons.com/ */} + {/* credit: cog icon from https://heroicons.com */} <svg xmlns="http://www.w3.org/2000/svg" fill="none" diff --git a/docs/data/material/components/icons/SvgIconChildren.tsx.preview b/docs/data/material/components/icons/SvgIconChildren.tsx.preview index 84f8a84a499291..ecad976fe24a73 100644 --- a/docs/data/material/components/icons/SvgIconChildren.tsx.preview +++ b/docs/data/material/components/icons/SvgIconChildren.tsx.preview @@ -1,5 +1,5 @@ <SvgIcon> - {/* credit: plus icon from https://heroicons.com/ */} + {/* credit: cog icon from https://heroicons.com */} <svg xmlns="http://www.w3.org/2000/svg" fill="none" diff --git a/docs/data/material/components/lists/lists.md b/docs/data/material/components/lists/lists.md index 9a9e213a003db5..0f9fd925005ecb 100644 --- a/docs/data/material/components/lists/lists.md +++ b/docs/data/material/components/lists/lists.md @@ -97,7 +97,6 @@ The switch is the secondary action and a separate target. Upon scrolling, subheaders remain pinned to the top of the screen until pushed off screen by the next subheader. This feature relies on CSS sticky positioning. -(⚠️ no IE 11 support) {{"demo": "PinnedSubheaderList.js", "bg": true}} diff --git a/docs/data/material/components/material-icons/material-icons.md b/docs/data/material/components/material-icons/material-icons.md index bb54929acc1204..ae09f5b703ff71 100644 --- a/docs/data/material/components/material-icons/material-icons.md +++ b/docs/data/material/components/material-icons/material-icons.md @@ -44,6 +44,8 @@ See the [Installation](/material-ui/getting-started/installation/) page for addi <hr/> +## Search Material Icons + Browse through the icons below to find the one you need. The search field supports synonyms—for example, try searching for "hamburger" or "logout." diff --git a/docs/data/material/components/progress/progress.md b/docs/data/material/components/progress/progress.md index 45deb2642dd285..74893d02d8496a 100644 --- a/docs/data/material/components/progress/progress.md +++ b/docs/data/material/components/progress/progress.md @@ -127,26 +127,3 @@ If you need to perform 30 re-renders per second or more, we recommend disabling transition: none; } ``` - -### IE 11 - -The circular progress component animation on IE 11 is degraded. -The stroke dash animation is not working (equivalent to `disableShrink`) and the circular animation wobbles. -You can solve the latter with: - -```css -.MuiCircularProgress-indeterminate { - animation: circular-rotate 1.4s linear infinite; -} - -@keyframes circular-rotate { - 0% { - transform: rotate(0deg); - /* Fix IE11 wobbly */ - transform-origin: 50% 50%; - } - 100% { - transform: rotate(360deg); - } -} -``` diff --git a/docs/data/material/components/slider/slider.md b/docs/data/material/components/slider/slider.md index 2420303b5989cb..3c902577906cd6 100644 --- a/docs/data/material/components/slider/slider.md +++ b/docs/data/material/components/slider/slider.md @@ -151,17 +151,3 @@ However, you need to make sure that: - Each thumb has a user-friendly text for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop. - -## Limitations - -### IE 11 - -The slider's value label is not centered in IE 11. -The alignment is not handled to make customizations easier with the latest browsers. -You can solve the issue with: - -```css -.MuiSlider-valueLabel { - left: calc(-50% - 4px); -} -``` diff --git a/docs/data/material/components/table/table.md b/docs/data/material/components/table/table.md index 51a333e5c0d763..e1d46204399ad9 100644 --- a/docs/data/material/components/table/table.md +++ b/docs/data/material/components/table/table.md @@ -33,11 +33,6 @@ This constraint makes building rich data tables challenging. The [`DataGrid` component](/x/react-data-grid/) is designed for use-cases that are focused on handling large amounts of tabular data. While it comes with a more rigid structure, in exchange, you gain more powerful features. -:::info -The demo below uses the MUI X Data Grid v7, which is currently in beta. -Visit [the documentation](https://next.mui.com/x/react-data-grid/) to learn more about it. -::: - {{"demo": "DataTable.js", "bg": "inline"}} ## Dense table @@ -88,7 +83,6 @@ The `ActionsComponent` prop of the `TablePagination` component allows the implem Here is an example of a table with scrollable rows and fixed column headers. It leverages the `stickyHeader` prop. -(⚠️ no IE 11 support) {{"demo": "StickyHeadTable.js", "bg": true}} diff --git a/docs/data/material/design-resources/connect/connect.md b/docs/data/material/design-resources/connect/connect.md new file mode 100644 index 00000000000000..b441a460c6ee6d --- /dev/null +++ b/docs/data/material/design-resources/connect/connect.md @@ -0,0 +1,301 @@ +# Connect plugin + +<p class="description">Connect is a Figma plugin that generates Material UI themes directly from design to code.</p> + +## Introduction + +[Connect](https://www.figma.com/community/plugin/1336346114713490235/) is a Figma plugin that lets you generate a theme from the [Material UI for Figma Design Kit](https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x/). + +:::warning +Connect works in combination with the [Material UI for Figma Design Kit v5.16.0](https://github.com/mui/mui-design-kits/releases) and later. +Other kits, such as the Joy UI Design Kit, are not supported yet. +::: + +<img src="/static/material-ui/design-resources/connect.png" style="width: 814px;" alt="Customizing the Material UI Switch component in Figma with the Connect plugin running." width="1628" height="400" /> + +## Running the plugin + +If you don't have the [complete and latest version](/store/items/figma-react/) of the Material UI for Figma Design Kit installed, you can test the plugin by using the [Community version](https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x/) instead. + +After installing and opening it in Figma, head over to the [Connect plugin page](https://www.figma.com/community/plugin/1336346114713490235/) on the Community tab and click on **Open in...** and select the Material UI for Figma Design Kit. + +<img src="/static/material-ui/design-resources/connect-access.png" style="width: 814px;" alt="Accessing Connect via the Resources menu in Figma." width="1628" height="400" /> + +## Customizing design tokens + +Design tokens are defined in the Design Kit's [local variable collections](https://help.figma.com/hc/en-us/articles/15145852043927-Create-and-manage-variables) and include color palettes, breakpoints, shapes, and spacing tokens. +Typography and shadow-related tokens are found in the [local styles collection](https://help.figma.com/hc/en-us/articles/360039820134-Manage-and-share-styles#:~:text=Local%20styles%20are%20styles%20that,or%20from%20the%20style%20picker.). + +### Altering existing tokens + +The Material UI for Figma Design Kit comes fully loaded with design tokens that map out to the [default theme of the Material UI React library](/material-ui/customization/default-theme/). + +To customize existing tokens, open the [local variable modal](https://help.figma.com/hc/en-us/articles/15145852043927-Create-and-manage-variables) by clicking on the filter icon as shown below. +Tweak any of the variables available in the collections (such as palettes, breakpoints, shapes, and spacing) as you see fit. + +<img src="/static/material-ui/design-resources/connect-variables.png" style="width: 814px; margin-bottom: 8px;" alt="The Local variables menu in Figma, where all design tokens are stored and new ones can be added." width="1628" height="400" /> + +Then open the Connect plugin and click on **Generate theme**. + +<img src="/static/material-ui/design-resources/connect-generate.png" style="width: 814px; margin-bottom: 8px;" alt="The Generate theme button in the Connect plugin UI." width="1628" height="400" /> + +A theme containing the altered tokens is generated and displayed in the plugin's Theme tab. + +<img src="/static/material-ui/design-resources/connect-code-editor.png" style="width: 814px; margin-bottom: 8px;" alt="The generated theme displayed in the Connect plugin UI." width="1628" height="400" /> + +You can also preview the generated theme and the customized tokens by navigating to the Storybook preview tab. + +<img src="/static/material-ui/design-resources/connect-storybook.png" style="width: 814px" alt="The generated theme previewed in Storybook in the Connect plugin UI." width="1628" height="400" /> + +### Adding new tokens + +You can extend the existing tokens set with your own either by adding new variables to the existing local variable collections, or by adding new elevation and typography styles to the local style collections. +After you've added your custom tokens, click on **Regenerate theme** to include these tokens in your theme. + +<img src="/static/material-ui/design-resources/connect-regenerate.png" style="width: 814px" alt="The Regenerate button in the Connect plugin UI." width="1628" height="400" /> + +## Customizing components + +Connect can also generate theme styles for customized components, enabling you to completely change their look and feel and create your custom design system from within Figma. + +:::info +This feature is currently limited to the Button, Switch, and Typography components. +Support for more components is coming soon. +::: + +As an example, here's how to customize the checked state, medium size, and primary color of a Switch component to replicate the iOS design system: + +:::warning +The Design Kit's component layer hierarchy and layer names must remain unaltered for Connect to correctly extract custom component styles and generate the theme. +::: + +<img src="/static/material-ui/design-resources/connect-component-variant.png" style="width: 814px; margin-bottom: 8px;" alt="A specific variant of the Switch component selected in the Design Kit." width="1628" height="400" /> + +Connect generates the following theme code for the customized Switch: + +```js +{ + components: { + MuiSwitch: { + styleOverrides: { + root: { + '&.MuiSwitch-sizeMedium:has(.MuiSwitch-colorPrimary)': { + '&:has(.Mui-checked):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible))': + { + width: '40px', + height: '21px', + padding: '0', + '& .MuiSwitch-switchBase': { + transform: 'translateX(19px) translateY(2px)', + padding: '0', + '& .MuiSwitch-thumb': { + width: '17px', + height: '17px', + background: '#FAFAFA', + }, + '& + .MuiSwitch-track': { + width: '38px', + height: '21px', + background: 'var(--mui-palette-success-light)', + opacity: '1', + }, + }, + }, + }, + }, + }, + }, + }, +} +``` + +The generated theme targets classes that correspond to the specific Switch configuration defined above, so styles are only applied when the props and state of the Material UI component match those of the customized Figma component. + +To customize other states, you need to apply the desired design changes to each variant in Figma by following these steps: + +1. Customize a single "base" variant—for example, a Switch component in the checked state, of medium size, and primary color. +2. Clone this variant and rename it to target the next variant you'd like to customize—for example, rename the cloned version of `Checked=True, Size=Medium, Color=Primary, State=Enabled` to `Checked=False, Size=Medium, Color=Primary, State=Enabled`. +3. Delete the old versions of the same variant. +4. Move the new version to the correct square in the variant grid. +5. Make the necessary style adjustments to the variant's child layers. + +Repeat this process for each variant you want to customize. +Here's an example of what this might look like: + +<img src="/static/material-ui/design-resources/connect-switch-component-customized.png" style="width: 814px; margin-bottom: 8px;" alt="A fully customized Switch component in the Material UI Design Kit." width="1628" height="400" /> + +You can run Connect to generate a new theme. +From here you can run Connect to generate a new theme—here's what would be generated from the example above: + +```js +{ + components: { + MuiSwitch: { + styleOverrides: { + root: { + "&.MuiSwitch-sizeMedium:has(.MuiSwitch-colorPrimary)": { + width: "40px", + height: "21px", + padding: "0", + "& .MuiSwitch-switchBase": { + padding: "0", + "& .MuiSwitch-thumb": { + width: "17px", + height: "17px", + background: "#FAFAFA", + }, + "& + .MuiSwitch-track": { + width: "38px", + height: "21px", + borderRadius: "100px", + opacity: "1", + }, + }, + "&:not(:has(.Mui-checked)):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible))": { + "& .MuiSwitch-switchBase": { + transform: "translateX(3px) translateY(2px)", + "& + .MuiSwitch-track": { + background: "#BDBDBD", + }, + }, + }, + "&:not(:has(.Mui-checked)):has(.Mui-disabled):not(:has(.Mui-focusVisible))": { + "& .MuiSwitch-switchBase": { + transform: "translateX(3px) translateY(2px)", + "& + .MuiSwitch-track": { + background: "rgba(229, 229, 229, 0.99)", + }, + }, + }, + "&:not(:has(.Mui-checked)):not(:has(.Mui-disabled)):has(.Mui-focusVisible)": { + "& .MuiSwitch-switchBase": { + transform: "translateX(3px) translateY(2px)", + "& + .MuiSwitch-track": { + border: "1px solid #000", + background: "#BDBDBD", + }, + }, + }, + "&:has(.Mui-checked):has(.Mui-disabled):not(:has(.Mui-focusVisible))": { + "& .MuiSwitch-switchBase": { + transform: "translateX(19px) translateY(2px)", + "& + .MuiSwitch-track": { + background: "rgba(187, 231, 188, 0.99)", + }, + }, + }, + "&:not(:has(.Mui-checked)):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible)):hover": { + "& .MuiSwitch-switchBase": { + transform: "translateX(3px) translateY(2px)", + "& + .MuiSwitch-track": { + background: "#616161", + }, + }, + }, + "&:has(.Mui-checked):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible))": { + "& .MuiSwitch-switchBase": { + transform: "translateX(19px) translateY(2px)", + "& + .MuiSwitch-track": { + background: "var(--mui-palette-success-light)", + }, + }, + }, + "&:has(.Mui-checked):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible)):hover": { + "& .MuiSwitch-switchBase": { + transform: "translateX(19px) translateY(2px)", + "& + .MuiSwitch-track": { + background: "var(--mui-palette-success-dark)", + }, + }, + }, + "&:has(.Mui-checked):not(:has(.Mui-disabled)):has(.Mui-focusVisible)": { + "& .MuiSwitch-switchBase": { + transform: "translateX(19px) translateY(2px)", + "& + .MuiSwitch-track": { + border: "1px solid #000", + background: "var(--mui-palette-success-light)", + }, + }, + }, + }, + }, + }, + }, + }, +} +``` + +:::info +The generated theme may contain the CSS `has()` selector, which is used to target specific child classes. +This selector is not used by other theme-related examples in the docs because it used to have limited browser support. +It is now [supported by all modern browsers](https://caniuse.com/css-has). +::: + +You can also check out the Storybook preview to test the Material UI version of your component. + +<img src="/static/material-ui/design-resources/connect-switch-component-customized-storybook.png" style="width: 814px" alt="A fully customized Switch component in Storybook." width="1628" height="400" /> + +## Using the generated theme + +:::warning +Themes generated by Connect must be used with Material UI's [`CssVarsProvider`](/material-ui/experimental-api/css-theme-variables/migration/)—the default [`ThemeProvider`](/material-ui/customization/theming/#theme-provider) is not supported. +::: + +Here's an example of how to add a Connect theme to your codebase: + +```tsx title="_app.tsx" +import { + experimental_extendTheme as extendTheme, + Experimental_CssVarsProvider as CssVarsProvider, +} from '@mui/material/styles'; + +export default function MyApp({ Component, pageProps }) { + const theme = extendTheme({ + shape: { + borderRadiusRound: 999, + }, + components: { + MuiSwitch: { + styleOverrides: { + root: { + '&.MuiSwitch-sizeMedium:has(.MuiSwitch-colorPrimary)': { + '&:has(.Mui-checked):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible))': + { + width: '40px', + height: '21px', + padding: '0', + '& .MuiSwitch-switchBase': { + transform: 'translateX(19px) translateY(2px)', + padding: '0', + '& .MuiSwitch-thumb': { + width: '17px', + height: '17px', + background: '#FAFAFA', + }, + '& + .MuiSwitch-track': { + width: '38px', + height: '21px', + background: 'var(--mui-palette-success-light)', + borderRadius: 'var(--mui-shape-borderRadiusRound)', + opacity: '1', + }, + }, + }, + }, + }, + }, + }, + }, + }); + + return ( + <CssVarsProvider theme={theme}> + <Component {...pageProps} /> + </CssVarsProvider> + ); +} +``` + +## Feedback and bug reports + +Use [the dedicated Connect feedback board](https://mui-connect.canny.io/feedback) to share feedback, report bugs, or drop feature requests. diff --git a/docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md b/docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md new file mode 100644 index 00000000000000..f3fb7295aa33d4 --- /dev/null +++ b/docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md @@ -0,0 +1,94 @@ +# Material UI for Figma + +<p class="description">Enhance designer-developer collaboration between Material UI and Figma.</p> + +## Getting started + +Material UI for Figma consists of representations of the library's React components in Figma so designers and developers can communicate and iterate more efficiently. +The kit includes: + +- components with the same design as Material UI +- additional components and features not covered by Material Design +- shared terminology from the React library for props, variables, design tokens, and other values + +### Community vs. full version + +The Material UI design kit is available in the [community (free) version](https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x) and the [full (paid) version](https://mui.com/store/items/figma-react/). + +| | Community | Full version | +| :-------------------------------- | --------: | -----------: | +| Components without customizations | All | All | +| Components with customizations | 4 | All | +| Figma variables | - | ✅ | + +### Installing the full version + +Start by extracting the `.zip` archive which contains the `.fig` files. +Then you can either follow [Figma's import guide](https://help.figma.com/hc/en-us/articles/360041003114-Import-files-into-Figma) or [add it to your team library](https://help.figma.com/hc/en-us/articles/360041051154-Getting-Started-with-Team-Library). + +## Theme + +### Local variables + +The design kit uses Figma's local variables to create a collection of styles comparable to the theme structure of Material UI code. +Follow the steps in the video below to see all the variables available: + +<iframe width="100%" height="490" src="https://www.youtube.com/embed/u3zR6p-OjKQ?si=DDVEsedwmJQeik3T" title="YouTube video player" frameborder="0" allowfullscreen></iframe> + +### Customizing colors + +Use the variables panel to customize colors as shown in the video below: + +<iframe width="100%" height="490" src="https://www.youtube.com/embed/YuzkWFm0-bA?si=XvgPR0vNGtiBPqKY" title="YouTube video player" frameborder="0" allowfullscreen></iframe> + +### Customizing typography + +Typography customization uses local styles rather than local variables. +The experience is similar to modifying colors, as shown in the video below: + +<iframe width="100%" height="490" src="https://www.youtube.com/embed/HepVDfrLmak?si=gklG_3ZZyxDWzlPM" title="YouTube video player" frameborder="0" allowfullscreen></iframe> + +### Switching between light and dark modes + +The design kit uses Figma's local variables to let you toggle the variable mode between light and dark, as shown in the video below: + +<iframe width="100%" height="490" src="https://www.youtube.com/embed/ydTF1HhLnJM?si=1Fj4CFLgVavfg4Fz" title="YouTube video player" frameborder="0" allowfullscreen></iframe> + +## Components + +### Editing the main components + +You can use the [Similayer](https://www.figma.com/community/plugin/735733267883397781/Similayer) plugin to select multiple components at once that share some property. + +<iframe width="100%" height="490" src="https://www.youtube.com/embed/eHBk0FbS0P8?si=QbOiMU2F1yvGB6s8" title="YouTube video player" frameborder="0" allowfullscreen></iframe> + +### Table component + +#### Adding new columns + +The video below shows how to add new columns by detaching cells from their row components, allowing you to freely move content around. + +<iframe src="https://www.loom.com/embed/6dd71cc374bc4d84af35ebb75d107d38?sid=1d3a4790-4c28-433e-94ce-97dd969601dd" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="width: 100%; height: 500px;"></iframe> + +#### Adding new columns in the main component + +The Table and Data Grid components come with a limited number of columns by default. +The video below shows how to add new columns by copying cells directly on the main component: + +<iframe width="100%" height="490" src="https://www.youtube.com/embed/s_n3LHm1daI?si=_QbXvtYPkc8EBd5d" title="YouTube video player" frameborder="0" allowfullscreen></iframe> + +## Code sync + +You can export theme tokens and component customizations to code using [the Connect plugin for Figma](/material-ui/design-resources/connect/). +Material UI for Figma has been built to be as close to the React components as possible, making it for a fluid integration with code. + +Learn more about the Material UI theme structure by visiting the [Theming](https://mui.com/material-ui/customization/theming/) and [Default theme viewer](https://mui.com/material-ui/customization/theming/) pages. + +## Using new design kit versions + +We generally don't release breaking changes in the updates—we add new content instead. +If you need to replace a single component that's been updated, there are a couple of options: + +1. Add the new version of the design kit as a library and use [the new Figma library swap feature](https://www.youtube.com/watch?v=GQ2jztKpxLk). The components must have the same names in both libraries. +2. Observe the new component and re-apply the changes to the existing projects. This is the recommended approach when you need to update multiple projects. +3. Copy and paste the new component into your existing project, give it a different temporary name, then re-link tokens to the new component. When using [Select Similar plugins](https://www.figma.com/community/plugin/792767780551514994/Select-Similar) this shouldn't take more than five minutes. Then you can remove the old component and update the new component name. diff --git a/docs/data/material/getting-started/design-resources/design-resources.md b/docs/data/material/getting-started/design-resources/design-resources.md index a99aeb2c28a711..97b939668f0230 100644 --- a/docs/data/material/getting-started/design-resources/design-resources.md +++ b/docs/data/material/getting-started/design-resources/design-resources.md @@ -2,12 +2,26 @@ <p class="description">Be more efficient designing and developing with the same library.</p> -## Official kits +## Design kits -Pick your favorite design tool to enjoy and use the Material UI component inventory, including over 1,500 unique elements with their full range of states and variations. +Material UI component designs are available for Figma, Sketch, and Adobe XD, providing accurate representations using shared terminology for all states, variants, and permutations of each component. + +The design kits are composed of over 1,500 unique elements built to speed up the development process and ease communication for teams of designers and developers using the library. {{"component": "modules/components/MaterialUIDesignResources.js"}} +## Connect Figma plugin + +Connect is a Figma plugin to help bridge the gap between designers and developers using Material UI. + +It generates a theme file that you can add to your codebase with all the design tokens and component customizations from Figma. +You can quickly preview all of the changes through an embedded Storybook panel directly in the plugin interface. + +Connect is currently in beta and [available for free](https://www.figma.com/community/plugin/1336346114713490235/) in the Figma Community. +Head over to [the Connect page](/material-ui/design-resources/connect/) to learn more. + +<img src="/static/material-ui/design-resources/connect.png" style="width: 814px;" alt="Customizing the Material UI Switch component in Figma with the Connect plugin running." width="1628" height="400" /> + ## Third-party resources ### UXPin diff --git a/docs/data/material/getting-started/overview/overview.md b/docs/data/material/getting-started/overview/overview.md index d337d170b89db9..89111a0c318083 100644 --- a/docs/data/material/getting-started/overview/overview.md +++ b/docs/data/material/getting-started/overview/overview.md @@ -14,7 +14,7 @@ It includes a comprehensive collection of prebuilt components that are ready for :::info Material UI v5 supports Material Design 2. -Adoption of Material Design 3 is tentatively planned for Material UI v6—see [the announcement blog post](/blog/2023-material-ui-v6-and-beyond/) for more details. +Adoption of Material Design 3 is tentatively planned for Material UI v7—see [the announcement blog post](/blog/2023-material-ui-v6-and-beyond/) for more details. You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/29345) for future updates. ::: diff --git a/docs/data/material/getting-started/supported-platforms/supported-platforms.md b/docs/data/material/getting-started/supported-platforms/supported-platforms.md index 51b971f5c4e50e..c490ec2d5b4e8d 100644 --- a/docs/data/material/getting-started/supported-platforms/supported-platforms.md +++ b/docs/data/material/getting-started/supported-platforms/supported-platforms.md @@ -9,9 +9,9 @@ You don't need to provide any JavaScript polyfill as it manages unsupported brow <!-- #stable-snapshot --> -| Edge | Firefox | Chrome | Safari (macOS) | Safari (iOS) | IE | -| :----- | :------ | :----- | :------------- | :----------- | :------------------- | -| >= 121 | >= 115 | >= 109 | >= 15.4 | >= 15.4 | 11 (partial support) | +| Edge | Firefox | Chrome | Safari (macOS) | Safari (iOS) | +| :----- | :------ | :----- | :------------- | :----------- | +| >= 121 | >= 115 | >= 109 | >= 15.4 | >= 15.4 | <!-- #default-branch-switch --> @@ -21,20 +21,6 @@ Because Googlebot uses a web rendering service (WRS) to index the page content, [WRS regularly updates the rendering engine it uses](https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html). You can expect Material UI's components to render without major issues. -### IE 11 - -Material UI provides **partial** supports for IE 11. Be aware of the following: - -- Some of the components have no support. For instance, the new components, the data grid, the date picker. -- Some of the components have degraded support. For instance, the outlined input border radius is missing, the combobox doesn't remove diacritics, the circular progress animation is wobbling. -- The documentation itself might crash. -- You need to install the [legacy bundle](/material-ui/guides/minimizing-bundle-size/#legacy-bundle). -- You might need to install polyfills. For instance for the [popper.js transitive dependency](https://popper.js.org/docs/v2/browser-support/#ie11). - -Overall, the library doesn't prioritize the support of IE 11 if it harms the most common use cases. For instance, we will close new issues opened about IE 11 and might not merge pull requests that improve IE 11 support. - -v6 will completely remove the support of IE 11. - ## Server <!-- #stable-snapshot --> diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.js b/docs/data/material/getting-started/templates/checkout/Checkout.js index d87b040ac4259a..d0929cac54591d 100644 --- a/docs/data/material/getting-started/templates/checkout/Checkout.js +++ b/docs/data/material/getting-started/templates/checkout/Checkout.js @@ -29,6 +29,7 @@ import InfoMobile from './InfoMobile'; import PaymentForm from './PaymentForm'; import Review from './Review'; import ToggleColorMode from './ToggleColorMode'; +import SitemarkIcon from './SitemarkIcon'; function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) { return ( @@ -47,7 +48,7 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) { exclusive value={showCustomTheme} onChange={toggleCustomTheme} - aria-label="Platform" + aria-label="Toggle design language" sx={{ backgroundColor: 'background.default', '& .Mui-selected': { @@ -74,13 +75,6 @@ ToggleCustomTheme.propTypes = { const steps = ['Shipping address', 'Payment details', 'Review your order']; -const logoStyle = { - width: '140px', - height: '56px', - marginLeft: '-4px', - marginRight: '-8px', -}; - function getStepContent(step) { switch (step) { case 0: @@ -152,13 +146,7 @@ export default function Checkout() { sx={{ ml: '-8px' }} > Back to - <img - src={ - 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e6faf73568658154dae_SitemarkDefault.svg' - } - style={logoStyle} - alt="Sitemark's logo" - /> + <SitemarkIcon /> </Button> </Box> <Box @@ -214,13 +202,7 @@ export default function Checkout() { sx={{ alignSelf: 'start' }} > Back to - <img - src={ - 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e6faf73568658154dae_SitemarkDefault.svg' - } - style={logoStyle} - alt="Sitemark's logo" - /> + <SitemarkIcon /> </Button> <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} /> </Box> diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.tsx b/docs/data/material/getting-started/templates/checkout/Checkout.tsx index f89270bc220afc..6c34f1ac523ef4 100644 --- a/docs/data/material/getting-started/templates/checkout/Checkout.tsx +++ b/docs/data/material/getting-started/templates/checkout/Checkout.tsx @@ -29,6 +29,7 @@ import InfoMobile from './InfoMobile'; import PaymentForm from './PaymentForm'; import Review from './Review'; import ToggleColorMode from './ToggleColorMode'; +import SitemarkIcon from './SitemarkIcon'; interface ToggleCustomThemeProps { showCustomTheme: Boolean; @@ -55,7 +56,7 @@ function ToggleCustomTheme({ exclusive value={showCustomTheme} onChange={toggleCustomTheme} - aria-label="Platform" + aria-label="Toggle design language" sx={{ backgroundColor: 'background.default', '& .Mui-selected': { @@ -75,13 +76,6 @@ function ToggleCustomTheme({ const steps = ['Shipping address', 'Payment details', 'Review your order']; -const logoStyle = { - width: '140px', - height: '56px', - marginLeft: '-4px', - marginRight: '-8px', -}; - function getStepContent(step: number) { switch (step) { case 0: @@ -153,13 +147,7 @@ export default function Checkout() { sx={{ ml: '-8px' }} > Back to - <img - src={ - 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e6faf73568658154dae_SitemarkDefault.svg' - } - style={logoStyle} - alt="Sitemark's logo" - /> + <SitemarkIcon /> </Button> </Box> <Box @@ -215,13 +203,7 @@ export default function Checkout() { sx={{ alignSelf: 'start' }} > Back to - <img - src={ - 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e6faf73568658154dae_SitemarkDefault.svg' - } - style={logoStyle} - alt="Sitemark's logo" - /> + <SitemarkIcon /> </Button> <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} /> </Box> diff --git a/docs/data/material/getting-started/templates/checkout/PaymentForm.js b/docs/data/material/getting-started/templates/checkout/PaymentForm.js index 219a48e8cade76..3c8e573a1e3005 100644 --- a/docs/data/material/getting-started/templates/checkout/PaymentForm.js +++ b/docs/data/material/getting-started/templates/checkout/PaymentForm.js @@ -73,39 +73,101 @@ export default function PaymentForm() { }} > <Card - raised={paymentType === 'creditCard'} - sx={{ + sx={(theme) => ({ maxWidth: { sm: '100%', md: '50%' }, flexGrow: 1, - outline: '1px solid', - outlineColor: - paymentType === 'creditCard' ? 'primary.main' : 'divider', - backgroundColor: - paymentType === 'creditCard' ? 'background.default' : '', - }} + border: '1px solid', + borderColor: 'divider', + '&:hover': { + background: + theme.palette.mode === 'light' + ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' + : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', + borderColor: + theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', + boxShadow: + theme.palette.mode === 'light' + ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' + : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', + }, + ...(paymentType === 'creditCard' && { + backgroundColor: 'action.selected', + borderColor: + theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', + }), + })} > - <CardActionArea onClick={() => setPaymentType('creditCard')}> + <CardActionArea + onClick={() => setPaymentType('creditCard')} + sx={{ + '.MuiCardActionArea-focusHighlight': { + backgroundColor: 'transparent', + }, + '&:focus-visible': { + backgroundColor: 'action.hover', + }, + }} + > <CardContent sx={{ display: 'flex', alignItems: 'center', gap: 1 }}> - <CreditCardRoundedIcon color="primary" fontSize="small" /> + <CreditCardRoundedIcon + fontSize="small" + sx={(theme) => ({ + color: theme.palette.mode === 'light' ? 'grey.400' : 'grey.600', + ...(paymentType === 'creditCard' && { + color: 'primary.main', + }), + })} + /> <Typography fontWeight="medium">Card</Typography> </CardContent> </CardActionArea> </Card> <Card - raised={paymentType === 'bankTransfer'} - sx={{ + sx={(theme) => ({ maxWidth: { sm: '100%', md: '50%' }, flexGrow: 1, - outline: '1px solid', - outlineColor: - paymentType === 'bankTransfer' ? 'primary.main' : 'divider', - backgroundColor: - paymentType === 'bankTransfer' ? 'background.default' : '', - }} + border: '1px solid', + borderColor: 'divider', + '&:hover': { + background: + theme.palette.mode === 'light' + ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' + : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', + borderColor: + theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', + boxShadow: + theme.palette.mode === 'light' + ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' + : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', + }, + ...(paymentType === 'bankTransfer' && { + backgroundColor: 'action.selected', + borderColor: + theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', + }), + })} > - <CardActionArea onClick={() => setPaymentType('bankTransfer')}> + <CardActionArea + onClick={() => setPaymentType('bankTransfer')} + sx={{ + '.MuiCardActionArea-focusHighlight': { + backgroundColor: 'transparent', + }, + '&:focus-visible': { + backgroundColor: 'action.hover', + }, + }} + > <CardContent sx={{ display: 'flex', alignItems: 'center', gap: 1 }}> - <AccountBalanceRoundedIcon color="primary" fontSize="small" /> + <AccountBalanceRoundedIcon + fontSize="small" + sx={(theme) => ({ + color: theme.palette.mode === 'light' ? 'grey.400' : 'grey.600', + ...(paymentType === 'bankTransfer' && { + color: 'primary.main', + }), + })} + /> <Typography fontWeight="medium">Bank account</Typography> </CardContent> </CardActionArea> @@ -132,7 +194,7 @@ export default function PaymentForm() { border: '1px solid ', borderColor: 'divider', backgroundColor: 'background.paper', - boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.05)', + boxShadow: '0px 4px 8px hsla(210, 0%, 0%, 0.05)', }} > <Box sx={{ display: 'flex', justifyContent: 'space-between' }}> diff --git a/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx b/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx index 86bd90611d6ec9..d6db3289ae9970 100644 --- a/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx +++ b/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx @@ -75,39 +75,101 @@ export default function PaymentForm() { }} > <Card - raised={paymentType === 'creditCard'} - sx={{ + sx={(theme) => ({ maxWidth: { sm: '100%', md: '50%' }, flexGrow: 1, - outline: '1px solid', - outlineColor: - paymentType === 'creditCard' ? 'primary.main' : 'divider', - backgroundColor: - paymentType === 'creditCard' ? 'background.default' : '', - }} + border: '1px solid', + borderColor: 'divider', + '&:hover': { + background: + theme.palette.mode === 'light' + ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' + : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', + borderColor: + theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', + boxShadow: + theme.palette.mode === 'light' + ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' + : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', + }, + ...(paymentType === 'creditCard' && { + backgroundColor: 'action.selected', + borderColor: + theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', + }), + })} > - <CardActionArea onClick={() => setPaymentType('creditCard')}> + <CardActionArea + onClick={() => setPaymentType('creditCard')} + sx={{ + '.MuiCardActionArea-focusHighlight': { + backgroundColor: 'transparent', + }, + '&:focus-visible': { + backgroundColor: 'action.hover', + }, + }} + > <CardContent sx={{ display: 'flex', alignItems: 'center', gap: 1 }}> - <CreditCardRoundedIcon color="primary" fontSize="small" /> + <CreditCardRoundedIcon + fontSize="small" + sx={(theme) => ({ + color: theme.palette.mode === 'light' ? 'grey.400' : 'grey.600', + ...(paymentType === 'creditCard' && { + color: 'primary.main', + }), + })} + /> <Typography fontWeight="medium">Card</Typography> </CardContent> </CardActionArea> </Card> <Card - raised={paymentType === 'bankTransfer'} - sx={{ + sx={(theme) => ({ maxWidth: { sm: '100%', md: '50%' }, flexGrow: 1, - outline: '1px solid', - outlineColor: - paymentType === 'bankTransfer' ? 'primary.main' : 'divider', - backgroundColor: - paymentType === 'bankTransfer' ? 'background.default' : '', - }} + border: '1px solid', + borderColor: 'divider', + '&:hover': { + background: + theme.palette.mode === 'light' + ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' + : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', + borderColor: + theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', + boxShadow: + theme.palette.mode === 'light' + ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' + : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', + }, + ...(paymentType === 'bankTransfer' && { + backgroundColor: 'action.selected', + borderColor: + theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', + }), + })} > - <CardActionArea onClick={() => setPaymentType('bankTransfer')}> + <CardActionArea + onClick={() => setPaymentType('bankTransfer')} + sx={{ + '.MuiCardActionArea-focusHighlight': { + backgroundColor: 'transparent', + }, + '&:focus-visible': { + backgroundColor: 'action.hover', + }, + }} + > <CardContent sx={{ display: 'flex', alignItems: 'center', gap: 1 }}> - <AccountBalanceRoundedIcon color="primary" fontSize="small" /> + <AccountBalanceRoundedIcon + fontSize="small" + sx={(theme) => ({ + color: theme.palette.mode === 'light' ? 'grey.400' : 'grey.600', + ...(paymentType === 'bankTransfer' && { + color: 'primary.main', + }), + })} + /> <Typography fontWeight="medium">Bank account</Typography> </CardContent> </CardActionArea> @@ -134,7 +196,7 @@ export default function PaymentForm() { border: '1px solid ', borderColor: 'divider', backgroundColor: 'background.paper', - boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.05)', + boxShadow: '0px 4px 8px hsla(210, 0%, 0%, 0.05)', }} > <Box sx={{ display: 'flex', justifyContent: 'space-between' }}> diff --git a/docs/data/material/getting-started/templates/checkout/SitemarkIcon.js b/docs/data/material/getting-started/templates/checkout/SitemarkIcon.js new file mode 100644 index 00000000000000..f313221f7f9a3c --- /dev/null +++ b/docs/data/material/getting-started/templates/checkout/SitemarkIcon.js @@ -0,0 +1,53 @@ +import * as React from 'react'; +import SvgIcon from '@mui/material/SvgIcon'; + +export default function SitemarkIcon() { + return ( + <SvgIcon sx={{ height: 21, width: 100, ml: 1 }}> + <svg + width={86} + height={19} + viewBox="0 0 86 19" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + fill="#B4C0D3" + d="m.787 12.567 6.055-2.675 3.485 2.006.704 6.583-4.295-.035.634-4.577-.74-.422-3.625 2.817-2.218-3.697Z" + /> + <path + fill="#00D3AB" + d="m10.714 11.616 5.352 3.908 2.112-3.767-4.295-1.725v-.845l4.295-1.76-2.112-3.732-5.352 3.908v4.013Z" + /> + <path + fill="#4876EF" + d="m10.327 7.286.704-6.583-4.295.07.634 4.577-.74.422-3.66-2.816L.786 6.617l6.055 2.676 3.485-2.007Z" + /> + <path + fill="#4876EE" + d="M32.507 8.804v6.167h2.312v-7.86h-3.366v1.693h1.054ZM32.435 6.006c.212.22.535.33.968.33.434 0 .751-.11.953-.33.213-.23.318-.516.318-.86 0-.354-.105-.641-.318-.86-.202-.23-.52-.345-.953-.345-.433 0-.756.115-.968.344-.202.22-.303.507-.303.86 0 .345.101.632.303.861ZM24.46 14.799c.655.296 1.46.444 2.413.444.896 0 1.667-.139 2.312-.416.645-.277 1.141-.664 1.488-1.162.357-.506.535-1.094.535-1.764 0-.65-.169-1.2-.506-1.649-.328-.459-.785-.818-1.373-1.076-.587-.267-1.266-.435-2.037-.502l-.809-.071c-.481-.039-.828-.168-1.04-.388a1.08 1.08 0 0 1-.318-.774c0-.23.058-.44.173-.631.116-.201.29-.359.52-.474.241-.114.535-.172.882-.172.366 0 .67.067.91.201.053.029.104.059.15.09l.012.009.052.037c.146.111.263.243.35.395.125.21.188.444.188.703h2.311c0-.689-.159-1.286-.476-1.793-.318-.516-.776-.913-1.373-1.19-.588-.287-1.296-.43-2.124-.43-.79 0-1.474.133-2.052.4a3.131 3.131 0 0 0-1.358 1.12c-.318.487-.477 1.066-.477 1.735 0 .927.314 1.673.94 2.237.626.564 1.464.89 2.514.976l.794.071c.645.058 1.113.187 1.401.388a.899.899 0 0 1 .434.788 1.181 1.181 0 0 1-.231.717c-.154.201-.38.36-.68.474-.298.115-.669.172-1.112.172-.49 0-.89-.067-1.199-.2-.308-.144-.539-.33-.694-.56a1.375 1.375 0 0 1-.216-.746h-2.297c0 .679.168 1.281.505 1.807.337.517.834.928 1.489 1.234ZM39.977 15.07c-.8 0-1.445-.095-1.936-.286a2.03 2.03 0 0 1-1.084-.99c-.221-.469-.332-1.1-.332-1.893V8.789h-1.2V7.11h1.2V4.988h2.153V7.11h2.312V8.79h-2.312v3.198c0 .373.096.66.289.86.202.192.486.287.852.287h1.17v1.937h-1.112Z" + /> + <path + fill="#4876EE" + fillRule="evenodd" + d="M43.873 14.899c.52.23 1.117.344 1.791.344.665 0 1.252-.115 1.763-.344.51-.23.934-.55 1.271-.96.337-.412.564-.88.679-1.407h-2.124c-.096.24-.279.44-.549.603-.27.162-.616.244-1.04.244-.262 0-.497-.031-.704-.093a1.572 1.572 0 0 1-.423-.194 1.662 1.662 0 0 1-.636-.803 3.159 3.159 0 0 1-.163-.645h5.784v-.775a4.28 4.28 0 0 0-.463-1.98 3.686 3.686 0 0 0-1.343-1.477c-.578-.382-1.291-.574-2.139-.574-.645 0-1.223.115-1.733.345-.501.22-.92.52-1.257.903a4.178 4.178 0 0 0-.78 1.305c-.174.478-.26.98-.26 1.506v.287c0 .507.086 1.004.26 1.492.183.478.443.913.78 1.305.347.382.775.688 1.286.918Zm-.094-4.674.02-.09a2.507 2.507 0 0 1 .117-.356c.145-.354.356-.622.636-.804.104-.067.217-.123.339-.165.204-.071.433-.107.686-.107.395 0 .723.09.983.272.27.173.472.426.607.76a2.487 2.487 0 0 1 .16.603h-3.57c.006-.038.013-.076.022-.113Z" + clipRule="evenodd" + /> + <path + fill="#4876EE" + d="M50.476 14.97V7.112h1.835v1.98a4.54 4.54 0 0 1 .173-.603c.202-.536.506-.937.91-1.205.405-.277.9-.416 1.488-.416h.101c.598 0 1.094.139 1.489.416.404.268.707.67.91 1.205l.016.04.013.037.028-.077c.212-.536.52-.937.925-1.205.405-.277.901-.416 1.489-.416h.1c.598 0 1.098.139 1.503.416.414.268.727.67.94 1.205.211.535.317 1.205.317 2.008v4.475h-2.312v-4.604c0-.43-.115-.78-.346-1.047-.222-.268-.54-.402-.954-.402-.414 0-.742.139-.982.416-.241.268-.362.626-.362 1.076v4.56h-2.326v-4.603c0-.43-.115-.78-.346-1.047-.222-.268-.535-.402-.94-.402-.423 0-.756.139-.996.416-.241.268-.362.626-.362 1.076v4.56h-2.311Z" + /> + <path + fill="#4876EE" + fillRule="evenodd" + d="M68.888 13.456v1.515h1.834v-4.82c0-.726-.144-1.319-.433-1.778-.289-.468-.712-.817-1.271-1.047-.549-.23-1.228-.344-2.037-.344a27.76 27.76 0 0 0-.896.014c-.318.01-.626.024-.924.043l-.229.016a36.79 36.79 0 0 0-.552.042v1.936a81.998 81.998 0 0 1 1.733-.09 37.806 37.806 0 0 1 1.171-.025c.424 0 .732.1.925.301.193.201.289.502.289.904v.029h-1.43c-.704 0-1.325.09-1.864.272-.54.172-.959.445-1.257.818-.299.363-.448.832-.448 1.405 0 .526.12.98.361 1.363.24.373.573.66.997.86.433.201.934.302 1.502.302.55 0 1.012-.1 1.388-.302.385-.2.683-.487.895-.86a2.443 2.443 0 0 0 .228-.498l.018-.056Zm-.39-1.397v-.63h-1.445c-.405 0-.718.1-.939.3-.212.192-.318.455-.318.79 0 .157.026.3.08.429a.99.99 0 0 0 .238.345c.221.191.534.287.939.287a2.125 2.125 0 0 0 .394-.038c.106-.021.206-.052.3-.092.212-.095.385-.253.52-.473.135-.22.212-.526.23-.918Z" + clipRule="evenodd" + /> + <path + fill="#4876EE" + d="M72.106 14.97V7.11h1.835v2.595c.088-.74.31-1.338.665-1.791.481-.603 1.174-.904 2.08-.904h.303v1.98h-.578c-.635 0-1.127.172-1.473.516-.347.334-.52.822-.52 1.463v4.001h-2.312ZM79.92 11.298h.767l2.499 3.672h2.6l-3.169-4.51 2.606-3.35h-2.427l-2.875 3.737V4.5h-2.312v10.47h2.312v-3.672Z" + /> + </svg> + </SvgIcon> + ); +} diff --git a/docs/data/material/getting-started/templates/checkout/SitemarkIcon.tsx b/docs/data/material/getting-started/templates/checkout/SitemarkIcon.tsx new file mode 100644 index 00000000000000..f313221f7f9a3c --- /dev/null +++ b/docs/data/material/getting-started/templates/checkout/SitemarkIcon.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; +import SvgIcon from '@mui/material/SvgIcon'; + +export default function SitemarkIcon() { + return ( + <SvgIcon sx={{ height: 21, width: 100, ml: 1 }}> + <svg + width={86} + height={19} + viewBox="0 0 86 19" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + fill="#B4C0D3" + d="m.787 12.567 6.055-2.675 3.485 2.006.704 6.583-4.295-.035.634-4.577-.74-.422-3.625 2.817-2.218-3.697Z" + /> + <path + fill="#00D3AB" + d="m10.714 11.616 5.352 3.908 2.112-3.767-4.295-1.725v-.845l4.295-1.76-2.112-3.732-5.352 3.908v4.013Z" + /> + <path + fill="#4876EF" + d="m10.327 7.286.704-6.583-4.295.07.634 4.577-.74.422-3.66-2.816L.786 6.617l6.055 2.676 3.485-2.007Z" + /> + <path + fill="#4876EE" + d="M32.507 8.804v6.167h2.312v-7.86h-3.366v1.693h1.054ZM32.435 6.006c.212.22.535.33.968.33.434 0 .751-.11.953-.33.213-.23.318-.516.318-.86 0-.354-.105-.641-.318-.86-.202-.23-.52-.345-.953-.345-.433 0-.756.115-.968.344-.202.22-.303.507-.303.86 0 .345.101.632.303.861ZM24.46 14.799c.655.296 1.46.444 2.413.444.896 0 1.667-.139 2.312-.416.645-.277 1.141-.664 1.488-1.162.357-.506.535-1.094.535-1.764 0-.65-.169-1.2-.506-1.649-.328-.459-.785-.818-1.373-1.076-.587-.267-1.266-.435-2.037-.502l-.809-.071c-.481-.039-.828-.168-1.04-.388a1.08 1.08 0 0 1-.318-.774c0-.23.058-.44.173-.631.116-.201.29-.359.52-.474.241-.114.535-.172.882-.172.366 0 .67.067.91.201.053.029.104.059.15.09l.012.009.052.037c.146.111.263.243.35.395.125.21.188.444.188.703h2.311c0-.689-.159-1.286-.476-1.793-.318-.516-.776-.913-1.373-1.19-.588-.287-1.296-.43-2.124-.43-.79 0-1.474.133-2.052.4a3.131 3.131 0 0 0-1.358 1.12c-.318.487-.477 1.066-.477 1.735 0 .927.314 1.673.94 2.237.626.564 1.464.89 2.514.976l.794.071c.645.058 1.113.187 1.401.388a.899.899 0 0 1 .434.788 1.181 1.181 0 0 1-.231.717c-.154.201-.38.36-.68.474-.298.115-.669.172-1.112.172-.49 0-.89-.067-1.199-.2-.308-.144-.539-.33-.694-.56a1.375 1.375 0 0 1-.216-.746h-2.297c0 .679.168 1.281.505 1.807.337.517.834.928 1.489 1.234ZM39.977 15.07c-.8 0-1.445-.095-1.936-.286a2.03 2.03 0 0 1-1.084-.99c-.221-.469-.332-1.1-.332-1.893V8.789h-1.2V7.11h1.2V4.988h2.153V7.11h2.312V8.79h-2.312v3.198c0 .373.096.66.289.86.202.192.486.287.852.287h1.17v1.937h-1.112Z" + /> + <path + fill="#4876EE" + fillRule="evenodd" + d="M43.873 14.899c.52.23 1.117.344 1.791.344.665 0 1.252-.115 1.763-.344.51-.23.934-.55 1.271-.96.337-.412.564-.88.679-1.407h-2.124c-.096.24-.279.44-.549.603-.27.162-.616.244-1.04.244-.262 0-.497-.031-.704-.093a1.572 1.572 0 0 1-.423-.194 1.662 1.662 0 0 1-.636-.803 3.159 3.159 0 0 1-.163-.645h5.784v-.775a4.28 4.28 0 0 0-.463-1.98 3.686 3.686 0 0 0-1.343-1.477c-.578-.382-1.291-.574-2.139-.574-.645 0-1.223.115-1.733.345-.501.22-.92.52-1.257.903a4.178 4.178 0 0 0-.78 1.305c-.174.478-.26.98-.26 1.506v.287c0 .507.086 1.004.26 1.492.183.478.443.913.78 1.305.347.382.775.688 1.286.918Zm-.094-4.674.02-.09a2.507 2.507 0 0 1 .117-.356c.145-.354.356-.622.636-.804.104-.067.217-.123.339-.165.204-.071.433-.107.686-.107.395 0 .723.09.983.272.27.173.472.426.607.76a2.487 2.487 0 0 1 .16.603h-3.57c.006-.038.013-.076.022-.113Z" + clipRule="evenodd" + /> + <path + fill="#4876EE" + d="M50.476 14.97V7.112h1.835v1.98a4.54 4.54 0 0 1 .173-.603c.202-.536.506-.937.91-1.205.405-.277.9-.416 1.488-.416h.101c.598 0 1.094.139 1.489.416.404.268.707.67.91 1.205l.016.04.013.037.028-.077c.212-.536.52-.937.925-1.205.405-.277.901-.416 1.489-.416h.1c.598 0 1.098.139 1.503.416.414.268.727.67.94 1.205.211.535.317 1.205.317 2.008v4.475h-2.312v-4.604c0-.43-.115-.78-.346-1.047-.222-.268-.54-.402-.954-.402-.414 0-.742.139-.982.416-.241.268-.362.626-.362 1.076v4.56h-2.326v-4.603c0-.43-.115-.78-.346-1.047-.222-.268-.535-.402-.94-.402-.423 0-.756.139-.996.416-.241.268-.362.626-.362 1.076v4.56h-2.311Z" + /> + <path + fill="#4876EE" + fillRule="evenodd" + d="M68.888 13.456v1.515h1.834v-4.82c0-.726-.144-1.319-.433-1.778-.289-.468-.712-.817-1.271-1.047-.549-.23-1.228-.344-2.037-.344a27.76 27.76 0 0 0-.896.014c-.318.01-.626.024-.924.043l-.229.016a36.79 36.79 0 0 0-.552.042v1.936a81.998 81.998 0 0 1 1.733-.09 37.806 37.806 0 0 1 1.171-.025c.424 0 .732.1.925.301.193.201.289.502.289.904v.029h-1.43c-.704 0-1.325.09-1.864.272-.54.172-.959.445-1.257.818-.299.363-.448.832-.448 1.405 0 .526.12.98.361 1.363.24.373.573.66.997.86.433.201.934.302 1.502.302.55 0 1.012-.1 1.388-.302.385-.2.683-.487.895-.86a2.443 2.443 0 0 0 .228-.498l.018-.056Zm-.39-1.397v-.63h-1.445c-.405 0-.718.1-.939.3-.212.192-.318.455-.318.79 0 .157.026.3.08.429a.99.99 0 0 0 .238.345c.221.191.534.287.939.287a2.125 2.125 0 0 0 .394-.038c.106-.021.206-.052.3-.092.212-.095.385-.253.52-.473.135-.22.212-.526.23-.918Z" + clipRule="evenodd" + /> + <path + fill="#4876EE" + d="M72.106 14.97V7.11h1.835v2.595c.088-.74.31-1.338.665-1.791.481-.603 1.174-.904 2.08-.904h.303v1.98h-.578c-.635 0-1.127.172-1.473.516-.347.334-.52.822-.52 1.463v4.001h-2.312ZM79.92 11.298h.767l2.499 3.672h2.6l-3.169-4.51 2.606-3.35h-2.427l-2.875 3.737V4.5h-2.312v10.47h2.312v-3.672Z" + /> + </svg> + </SvgIcon> + ); +} diff --git a/docs/data/material/getting-started/templates/checkout/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/checkout/ToggleColorMode.tsx index 3783eb9d80714d..1fd99c941fe0ab 100644 --- a/docs/data/material/getting-started/templates/checkout/ToggleColorMode.tsx +++ b/docs/data/material/getting-started/templates/checkout/ToggleColorMode.tsx @@ -11,7 +11,10 @@ interface ToggleColorModeProps { toggleColorMode: () => void; } -function ToggleColorMode({ mode, toggleColorMode }: ToggleColorModeProps) { +export default function ToggleColorMode({ + mode, + toggleColorMode, +}: ToggleColorModeProps) { return ( <IconButton onClick={toggleColorMode} @@ -26,5 +29,3 @@ function ToggleColorMode({ mode, toggleColorMode }: ToggleColorModeProps) { </IconButton> ); } - -export default ToggleColorMode; diff --git a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js index ba208dfca5bb32..300aba317f8cf6 100644 --- a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js +++ b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js @@ -1,69 +1,75 @@ -import { alpha } from '@mui/material/styles'; -import { red } from '@mui/material/colors'; +import * as React from 'react'; -export const brand = { - 50: '#F0F7FF', - 100: '#CEE5FD', - 200: '#9CCCFC', - 300: '#55A6F6', - 400: '#0A66C2', - 500: '#0959AA', - 600: '#064079', - 700: '#033363', - 800: '#02294F', - 900: '#021F3B', -}; +import { createTheme, alpha } from '@mui/material/styles'; + +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; -export const secondary = { - 50: '#F9F0FF', - 100: '#E9CEFD', - 200: '#D49CFC', - 300: '#B355F6', - 400: '#750AC2', - 500: '#6709AA', - 600: '#490679', - 700: '#3B0363', - 800: '#2F024F', - 900: '#23023B', +const customTheme = createTheme(); + +export const brand = { + 50: 'hsl(210, 100%, 97%)', + 100: 'hsl(210, 100%, 90%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', }; export const gray = { - 50: '#FBFCFE', - 100: '#EAF0F5', - 200: '#D6E2EB', - 300: '#BFCCD9', - 400: '#94A6B8', - 500: '#5B6B7C', - 600: '#4C5967', - 700: '#364049', - 800: '#131B20', - 900: '#090E10', + 50: 'hsl(220, 60%, 99%)', + 100: 'hsl(220, 35%, 94%)', + 200: 'hsl(220, 35%, 88%)', + 300: 'hsl(220, 25%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 25%, 35%)', + 700: 'hsl(220, 25%, 25%)', + 800: 'hsl(220, 25%, 10%)', + 900: 'hsl(220, 30%, 5%)', }; export const green = { - 50: '#F6FEF6', - 100: '#E3FBE3', - 200: '#C7F7C7', - 300: '#A1E8A1', - 400: '#51BC51', - 500: '#1F7A1F', - 600: '#136C13', - 700: '#0A470A', - 800: '#042F04', - 900: '#021D02', + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', }; export const orange = { - 50: '#FFFBF0', - 100: '#FDF1CE', - 200: '#FCE49C', - 300: '#F6CE55', - 400: '#C2940A', - 500: '#AA8109', - 600: '#795C06', - 700: '#634B03', - 800: '#4F3C02', - 900: '#3B2D02', + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', +}; + +export const red = { + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 20%)', + 800: 'hsl(0, 95%, 16%)', + 900: 'hsl(0, 93%, 12%)', }; const getDesignTokens = (mode) => ({ @@ -81,26 +87,25 @@ const getDesignTokens = (mode) => ({ dark: brand[800], }), }, - secondary: { - light: secondary[300], - main: secondary[500], - dark: secondary[800], + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], ...(mode === 'dark' && { - light: secondary[400], - main: secondary[500], - dark: secondary[900], + light: orange[400], + main: orange[500], + dark: orange[700], }), }, - 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' }), + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), }, success: { light: green[300], @@ -113,27 +118,18 @@ const getDesignTokens = (mode) => ({ }), }, 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], + ...gray, }, 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] }), + default: 'hsl(0, 0%, 100%)', + paper: gray[100], + ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), }, text: { primary: gray[800], secondary: gray[600], - ...(mode === 'dark' && { primary: '#fff', secondary: gray[400] }), + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), }, action: { selected: `${alpha(brand[200], 0.2)}`, @@ -145,51 +141,54 @@ const getDesignTokens = (mode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: 60, + fontSize: customTheme.typography.pxToRem(60), fontWeight: 600, - lineHeight: 78 / 70, - letterSpacing: -0.2, + lineHeight: 1.2, + letterSpacing: -0.5, }, h2: { - fontSize: 48, + fontSize: customTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: 42, + fontSize: customTheme.typography.pxToRem(42), lineHeight: 1.2, }, h4: { - fontSize: 36, + fontSize: customTheme.typography.pxToRem(36), fontWeight: 500, lineHeight: 1.5, }, h5: { - fontSize: 20, + fontSize: customTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle1: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: 16, + fontSize: customTheme.typography.pxToRem(16), }, body1: { + fontSize: customTheme.typography.pxToRem(15), fontWeight: 400, - fontSize: 15, }, body2: { + fontSize: customTheme.typography.pxToRem(14), fontWeight: 400, - fontSize: 14, }, caption: { + fontSize: customTheme.typography.pxToRem(12), fontWeight: 400, - fontSize: 12, }, }, + shape: { + borderRadius: 12, + }, }); export default function getCheckoutTheme(mode) { @@ -213,38 +212,6 @@ export default function getCheckoutTheme(mode) { }), }, }, - 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)}`, - }), - }), - }, - }, - 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] }, - }), - }), - }, - }, MuiButtonBase: { defaultProps: { disableTouchRipple: true, @@ -253,9 +220,9 @@ export default function getCheckoutTheme(mode) { styleOverrides: { root: { boxSizing: 'border-box', - transition: 'all 100ms ease-in', + transition: 'all 100ms ease', '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, + outline: `3px solid ${alpha(brand[400], 0.5)}`, outlineOffset: '2px', }, }, @@ -265,74 +232,125 @@ export default function getCheckoutTheme(mode) { styleOverrides: { root: ({ theme, ownerState }) => ({ boxShadow: 'none', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, textTransform: 'none', ...(ownerState.size === 'small' && { - maxHeight: '32px', + height: '2rem', // 32px + padding: '0 0.5rem', }), ...(ownerState.size === 'medium' && { - height: '40px', + height: '2.5rem', // 40px }), ...(ownerState.variant === 'contained' && ownerState.color === 'primary' && { - color: brand[50], - backgroundColor: brand[500], - backgroundImage: `linear-gradient(to bottom, ${brand[400]}, ${brand[500]})`, - boxShadow: `inset 0 1px ${alpha( - brand[300], - 0.5, - )}, inset 0 -2px ${alpha(brand[700], 0.5)}`, + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, border: `1px solid ${brand[500]}`, '&:hover': { - backgroundColor: brand[400], - backgroundImage: 'none', - boxShadow: `0 0 0 1px ${alpha(brand[300], 0.5)}`, + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, }, }), ...(ownerState.variant === 'outlined' && { + color: brand[700], backgroundColor: alpha(brand[300], 0.1), - borderColor: brand[300], - color: brand[500], + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', }, - }), - ...(ownerState.variant === 'text' && { - color: brand[500], - '&:hover': { + '&:active': { backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', }, }), - ...(theme.palette.mode === 'dark' && { - ...(ownerState.variant === 'contained' && - ownerState.color === 'primary' && { - border: `1px solid ${brand[600]}`, + ...(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: alpha(gray[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, backgroundImage: 'none', - 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], + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[700], '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + backgroundColor: alpha(gray[300], 0.3), }, }), - ...(ownerState.variant === 'text' && { - color: brand[300], + ...(theme.palette.mode === 'dark' && { + ...(ownerState.variant === 'outlined' && { + color: brand[200], + backgroundColor: alpha(brand[600], 0.1), + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', }, }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + color: gray[300], + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[700], 0.3), + }, + }), }), }), }, @@ -340,118 +358,93 @@ export default function getCheckoutTheme(mode) { MuiCard: { styleOverrides: { root: ({ theme, ownerState }) => ({ + transition: 'all 100ms ease', backgroundColor: gray[50], - borderRadius: 10, - outline: `1px solid ${alpha(gray[200], 0.8)}`, + borderRadius: theme.shape.borderRadius, + border: `1px solid ${alpha(gray[200], 0.5)}`, boxShadow: 'none', - transition: 'background-color, border, 80ms ease', ...(ownerState.variant === 'outlined' && { - boxSizing: 'border-box', - background: `linear-gradient(to bottom, #FFF, ${gray[50]})`, - '&:hover': { - borderColor: brand[300], - boxShadow: `0 0 24px ${brand[100]}`, - }, + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, }), ...(theme.palette.mode === 'dark' && { backgroundColor: alpha(gray[800], 0.6), - outline: `1px solid ${alpha(gray[700], 0.3)}`, + border: `1px solid ${alpha(gray[700], 0.3)}`, ...(ownerState.variant === 'outlined' && { - boxSizing: 'border-box', + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( gray[800], 0.5, )})`, - '&:hover': { - borderColor: brand[700], - boxShadow: `0 0 24px ${brand[800]}`, - }, }), }), }), }, }, - 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], - }), - }), + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + <CheckBoxOutlineBlankRoundedIcon + sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} + /> + ), + checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />, }, - }, - MuiOutlinedInput: { styleOverrides: { - notchedOutline: { - border: 'none', - }, root: ({ theme }) => ({ - '& .MuiInputBase-input': { - '&::placeholder': { - opacity: 0.7, - color: gray[500], - }, - }, - boxSizing: 'border-box', - flexGrow: 1, - maxHeight: 40, - height: '100%', - borderRadius: '10px', - border: '1px solid', - borderColor: gray[200], - boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.1)', + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', transition: 'border-color 120ms ease-in', backgroundColor: alpha(gray[100], 0.4), '&:hover': { borderColor: brand[300], }, - '&.Mui-focused': { + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', borderColor: brand[400], - outline: '4px solid', - outlineColor: brand[200], }, - ...(theme.palette.mode === 'dark' && { - '& .MuiInputBase-input': { - '&::placeholder': { - opacity: 1, - color: gray[500], - }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], }, - boxSizing: 'border-box', - flexGrow: 1, - minHeight: 40, - height: '100%', - borderRadius: '10px', - border: '1px solid', - borderColor: gray[700], - boxShadow: '0px 2px 2px rgb(0, 0, 0)', - backgroundColor: alpha(gray[800], 0.4), - transition: 'border-color 120ms ease-in', + }, + ...(theme.palette.mode === 'dark' && { + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), '&:hover': { borderColor: brand[300], }, - '&.Mui-focused': { + '&.Mui-focusVisible': { borderColor: brand[400], - outline: '4px solid', - outlineColor: alpha(brand[500], 0.5), + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', }, }), }), - input: { - paddingLeft: 10, - }, + }, + }, + MuiDivider: { + styleOverrides: { + root: ({ theme }) => ({ + borderColor: `${alpha(gray[200], 0.8)}`, + ...(theme.palette.mode === 'dark' && { + borderColor: `${alpha(gray[700], 0.4)}`, + }), + }), }, }, MuiFormLabel: { @@ -462,6 +455,32 @@ export default function getCheckoutTheme(mode) { }), }, }, + MuiIconButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...(ownerState.size === 'small' && { + height: '2rem', + width: '2rem', + }), + ...(ownerState.size === 'medium' && { + height: '2.5rem', + width: '2.5rem', + }), + color: brand[500], + '&: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], + }, + }), + }), + }, + }, MuiInputBase: { styleOverrides: { root: { @@ -469,102 +488,133 @@ export default function getCheckoutTheme(mode) { }, }, }, - MuiTextField: { + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: brand[700], + 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], + }), + }), + }, + }, + MuiOutlinedInput: { styleOverrides: { + notchedOutline: { + border: 'none', + }, + input: { + paddingLeft: 10, + }, root: ({ theme, ownerState }) => ({ - '& label .Mui-focused': { - color: 'white', + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, + maxHeight: '4px', + borderRadius: '8px', }, '& .MuiInputBase-input': { + fontSize: '1rem', '&::placeholder': { opacity: 0.7, color: gray[500], }, }, - '& .MuiOutlinedInput-root': { - boxSizing: 'border-box', - minWidth: 280, - minHeight: 40, - height: '100%', - borderRadius: '10px', - '& fieldset': { - border: 'none', - boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)', - background: `${alpha('#FFF', 0.3)}`, - }, - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - borderColor: brand[400], - outline: '4px solid', - outlineColor: brand[200], - }, + boxSizing: 'border-box', + flexGrow: 1, + height: '40px', + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], }, - ...(ownerState.variant === 'standard' && { - '&.MuiTextField-root': { - '& .MuiInput-root:hover:not(.Mui-disabled, .Mui-error):before': { - borderColor: brand[200], - }, - }, - '& :before': { - borderBottom: '1px solid', - borderColor: gray[200], - }, - '&:hover': { - '& :before': { - 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': { + fontSize: '1rem', '&::placeholder': { opacity: 1, color: gray[500], }, }, - '& .MuiOutlinedInput-root': { - boxSizing: 'border-box', - minWidth: 280, - minHeight: 40, - height: '100%', - borderRadius: '10px', - transition: 'border-color 120ms ease-in', - '& fieldset': { - border: 'none', - boxShadow: ' 0px 2px 4px rgba(0, 0, 0, 0.4)', - background: `${alpha(gray[800], 0.4)}`, - }, - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - borderColor: brand[400], - outline: '4px solid', - outlineColor: alpha(brand[500], 0.5), - }, + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + transition: 'border-color 120ms ease-in', + '&:hover': { + borderColor: brand[300], }, - ...(ownerState.variant === 'standard' && { - '&.MuiTextField-root': { - '& .MuiInput-root:hover:not(.Mui-disabled, .Mui-error):before': { - borderColor: brand[200], - }, - }, - '& :before': { - borderBottom: '1px solid', - borderColor: gray[700], - }, - '&:hover': { - '& :before': { - 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], }, }), }), }), }, }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiStack: { + defaultProps: { + useFlexGap: true, + }, + }, MuiStepConnector: { styleOverrides: { line: ({ theme }) => ({ @@ -575,16 +625,6 @@ export default function getCheckoutTheme(mode) { }), }, }, - MuiStepLabel: { - styleOverrides: { - label: ({ theme }) => ({ - '&.Mui-completed': { - opacity: 0.4, - ...(theme.palette.mode === 'dark' && { opacity: 0.3 }), - }, - }), - }, - }, MuiStepIcon: { variants: [ { @@ -627,6 +667,47 @@ export default function getCheckoutTheme(mode) { }), }, }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...(theme.palette.mode === 'dark' && { opacity: 0.5 }), + }, + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, + '& .Mui-selected': { + color: brand[500], + }, + ...(theme.palette.mode === 'dark' && { + '& .Mui-selected': { + color: 'hsl(0, 0%, 100%)', + }, + boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: theme.shape.borderRadius, + fontWeight: 500, + ...(theme.palette.mode === 'dark' && { + color: gray[400], + '&.Mui-selected': { color: brand[300] }, + }), + }), + }, + }, }, }; } diff --git a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx index 507e386b5627e9..89ddbb5ec4c39d 100644 --- a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx +++ b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx @@ -1,8 +1,11 @@ +import * as React from 'react'; import type {} from '@mui/material/themeCssVarsAugmentation'; -import { ThemeOptions, alpha } from '@mui/material/styles'; -import { red } from '@mui/material/colors'; +import { createTheme, 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; @@ -20,69 +23,71 @@ declare module '@mui/material/styles/createPalette' { 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', -}; +const customTheme = createTheme(); -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 brand = { + 50: 'hsl(210, 100%, 97%)', + 100: 'hsl(210, 100%, 90%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', }; export const gray = { - 50: '#FBFCFE', - 100: '#EAF0F5', - 200: '#D6E2EB', - 300: '#BFCCD9', - 400: '#94A6B8', - 500: '#5B6B7C', - 600: '#4C5967', - 700: '#364049', - 800: '#131B20', - 900: '#090E10', + 50: 'hsl(220, 60%, 99%)', + 100: 'hsl(220, 35%, 94%)', + 200: 'hsl(220, 35%, 88%)', + 300: 'hsl(220, 25%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 25%, 35%)', + 700: 'hsl(220, 25%, 25%)', + 800: 'hsl(220, 25%, 10%)', + 900: 'hsl(220, 30%, 5%)', }; export const green = { - 50: '#F6FEF6', - 100: '#E3FBE3', - 200: '#C7F7C7', - 300: '#A1E8A1', - 400: '#51BC51', - 500: '#1F7A1F', - 600: '#136C13', - 700: '#0A470A', - 800: '#042F04', - 900: '#021D02', + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', }; export const orange = { - 50: '#FFFBF0', - 100: '#FDF1CE', - 200: '#FCE49C', - 300: '#F6CE55', - 400: '#C2940A', - 500: '#AA8109', - 600: '#795C06', - 700: '#634B03', - 800: '#4F3C02', - 900: '#3B2D02', + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', +}; + +export const red = { + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 20%)', + 800: 'hsl(0, 95%, 16%)', + 900: 'hsl(0, 93%, 12%)', }; const getDesignTokens = (mode: PaletteMode) => ({ @@ -100,26 +105,25 @@ const getDesignTokens = (mode: PaletteMode) => ({ dark: brand[800], }), }, - secondary: { - light: secondary[300], - main: secondary[500], - dark: secondary[800], + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], ...(mode === 'dark' && { - light: secondary[400], - main: secondary[500], - dark: secondary[900], + light: orange[400], + main: orange[500], + dark: orange[700], }), }, - 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' }), + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), }, success: { light: green[300], @@ -132,27 +136,18 @@ const getDesignTokens = (mode: PaletteMode) => ({ }), }, 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], + ...gray, }, 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] }), + default: 'hsl(0, 0%, 100%)', + paper: gray[100], + ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), }, text: { primary: gray[800], secondary: gray[600], - ...(mode === 'dark' && { primary: '#fff', secondary: gray[400] }), + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), }, action: { selected: `${alpha(brand[200], 0.2)}`, @@ -164,51 +159,54 @@ const getDesignTokens = (mode: PaletteMode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: 60, + fontSize: customTheme.typography.pxToRem(60), fontWeight: 600, - lineHeight: 78 / 70, - letterSpacing: -0.2, + lineHeight: 1.2, + letterSpacing: -0.5, }, h2: { - fontSize: 48, + fontSize: customTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: 42, + fontSize: customTheme.typography.pxToRem(42), lineHeight: 1.2, }, h4: { - fontSize: 36, + fontSize: customTheme.typography.pxToRem(36), fontWeight: 500, lineHeight: 1.5, }, h5: { - fontSize: 20, + fontSize: customTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle1: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: 16, + fontSize: customTheme.typography.pxToRem(16), }, body1: { + fontSize: customTheme.typography.pxToRem(15), fontWeight: 400, - fontSize: 15, }, body2: { + fontSize: customTheme.typography.pxToRem(14), fontWeight: 400, - fontSize: 14, }, caption: { + fontSize: customTheme.typography.pxToRem(12), fontWeight: 400, - fontSize: 12, }, }, + shape: { + borderRadius: 12, + }, }); export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { @@ -232,38 +230,6 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { }), }, }, - 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)}`, - }), - }), - }, - }, - 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] }, - }), - }), - }, - }, MuiButtonBase: { defaultProps: { disableTouchRipple: true, @@ -272,9 +238,9 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { styleOverrides: { root: { boxSizing: 'border-box', - transition: 'all 100ms ease-in', + transition: 'all 100ms ease', '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, + outline: `3px solid ${alpha(brand[400], 0.5)}`, outlineOffset: '2px', }, }, @@ -284,74 +250,125 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { styleOverrides: { root: ({ theme, ownerState }) => ({ boxShadow: 'none', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, textTransform: 'none', ...(ownerState.size === 'small' && { - maxHeight: '32px', + height: '2rem', // 32px + padding: '0 0.5rem', }), ...(ownerState.size === 'medium' && { - height: '40px', + height: '2.5rem', // 40px }), ...(ownerState.variant === 'contained' && ownerState.color === 'primary' && { - color: brand[50], - backgroundColor: brand[500], - backgroundImage: `linear-gradient(to bottom, ${brand[400]}, ${brand[500]})`, - boxShadow: `inset 0 1px ${alpha( - brand[300], - 0.5, - )}, inset 0 -2px ${alpha(brand[700], 0.5)}`, + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, border: `1px solid ${brand[500]}`, '&:hover': { - backgroundColor: brand[400], - backgroundImage: 'none', - boxShadow: `0 0 0 1px ${alpha(brand[300], 0.5)}`, + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, }, }), ...(ownerState.variant === 'outlined' && { + color: brand[700], backgroundColor: alpha(brand[300], 0.1), - borderColor: brand[300], - color: brand[500], + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', }, - }), - ...(ownerState.variant === 'text' && { - color: brand[500], - '&:hover': { + '&:active': { backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', }, }), - ...(theme.palette.mode === 'dark' && { - ...(ownerState.variant === 'contained' && - ownerState.color === 'primary' && { - border: `1px solid ${brand[600]}`, + ...(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: alpha(gray[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, backgroundImage: 'none', - 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], + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[700], '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + backgroundColor: alpha(brand[300], 0.3), }, }), - ...(ownerState.variant === 'text' && { - color: brand[300], + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[700], '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + backgroundColor: alpha(gray[300], 0.3), }, }), + ...(theme.palette.mode === 'dark' && { + ...(ownerState.variant === 'outlined' && { + color: brand[200], + backgroundColor: alpha(brand[600], 0.1), + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + color: gray[300], + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[700], 0.3), + }, + }), }), }), }, @@ -359,118 +376,93 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { MuiCard: { styleOverrides: { root: ({ theme, ownerState }) => ({ + transition: 'all 100ms ease', backgroundColor: gray[50], - borderRadius: 10, - outline: `1px solid ${alpha(gray[200], 0.8)}`, + borderRadius: theme.shape.borderRadius, + border: `1px solid ${alpha(gray[200], 0.5)}`, boxShadow: 'none', - transition: 'background-color, border, 80ms ease', ...(ownerState.variant === 'outlined' && { - boxSizing: 'border-box', - background: `linear-gradient(to bottom, #FFF, ${gray[50]})`, - '&:hover': { - borderColor: brand[300], - boxShadow: `0 0 24px ${brand[100]}`, - }, + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, }), ...(theme.palette.mode === 'dark' && { backgroundColor: alpha(gray[800], 0.6), - outline: `1px solid ${alpha(gray[700], 0.3)}`, + border: `1px solid ${alpha(gray[700], 0.3)}`, ...(ownerState.variant === 'outlined' && { - boxSizing: 'border-box', + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( gray[800], 0.5, )})`, - '&:hover': { - borderColor: brand[700], - boxShadow: `0 0 24px ${brand[800]}`, - }, }), }), }), }, }, - 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], - }), - }), + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + <CheckBoxOutlineBlankRoundedIcon + sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} + /> + ), + checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />, }, - }, - MuiOutlinedInput: { styleOverrides: { - notchedOutline: { - border: 'none', - }, root: ({ theme }) => ({ - '& .MuiInputBase-input': { - '&::placeholder': { - opacity: 0.7, - color: gray[500], - }, - }, - boxSizing: 'border-box', - flexGrow: 1, - maxHeight: 40, - height: '100%', - borderRadius: '10px', - border: '1px solid', - borderColor: gray[200], - boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.1)', + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', transition: 'border-color 120ms ease-in', backgroundColor: alpha(gray[100], 0.4), '&:hover': { borderColor: brand[300], }, - '&.Mui-focused': { + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', borderColor: brand[400], - outline: '4px solid', - outlineColor: brand[200], }, - ...(theme.palette.mode === 'dark' && { - '& .MuiInputBase-input': { - '&::placeholder': { - opacity: 1, - color: gray[500], - }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], }, - boxSizing: 'border-box', - flexGrow: 1, - minHeight: 40, - height: '100%', - borderRadius: '10px', - border: '1px solid', - borderColor: gray[700], - boxShadow: '0px 2px 2px rgb(0, 0, 0)', - backgroundColor: alpha(gray[800], 0.4), - transition: 'border-color 120ms ease-in', + }, + ...(theme.palette.mode === 'dark' && { + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), '&:hover': { borderColor: brand[300], }, - '&.Mui-focused': { + '&.Mui-focusVisible': { borderColor: brand[400], - outline: '4px solid', - outlineColor: alpha(brand[500], 0.5), + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', }, }), }), - input: { - paddingLeft: 10, - }, + }, + }, + MuiDivider: { + styleOverrides: { + root: ({ theme }) => ({ + borderColor: `${alpha(gray[200], 0.8)}`, + ...(theme.palette.mode === 'dark' && { + borderColor: `${alpha(gray[700], 0.4)}`, + }), + }), }, }, MuiFormLabel: { @@ -481,6 +473,32 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { }), }, }, + MuiIconButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...(ownerState.size === 'small' && { + height: '2rem', + width: '2rem', + }), + ...(ownerState.size === 'medium' && { + height: '2.5rem', + width: '2.5rem', + }), + color: brand[500], + '&: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], + }, + }), + }), + }, + }, MuiInputBase: { styleOverrides: { root: { @@ -488,102 +506,133 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { }, }, }, - MuiTextField: { + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: brand[700], + 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], + }), + }), + }, + }, + MuiOutlinedInput: { styleOverrides: { + notchedOutline: { + border: 'none', + }, + input: { + paddingLeft: 10, + }, root: ({ theme, ownerState }) => ({ - '& label .Mui-focused': { - color: 'white', + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, + maxHeight: '4px', + borderRadius: '8px', }, '& .MuiInputBase-input': { + fontSize: '1rem', '&::placeholder': { opacity: 0.7, color: gray[500], }, }, - '& .MuiOutlinedInput-root': { - boxSizing: 'border-box', - minWidth: 280, - minHeight: 40, - height: '100%', - borderRadius: '10px', - '& fieldset': { - border: 'none', - boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)', - background: `${alpha('#FFF', 0.3)}`, - }, - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - borderColor: brand[400], - outline: '4px solid', - outlineColor: brand[200], - }, + boxSizing: 'border-box', + flexGrow: 1, + height: '40px', + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', + transition: 'border-color 120ms ease-in', + backgroundColor: alpha(gray[100], 0.4), + '&:hover': { + borderColor: brand[300], }, - ...(ownerState.variant === 'standard' && { - '&.MuiTextField-root': { - '& .MuiInput-root:hover:not(.Mui-disabled, .Mui-error):before': { - borderColor: brand[200], - }, - }, - '& :before': { - borderBottom: '1px solid', - borderColor: gray[200], - }, - '&:hover': { - '& :before': { - 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': { + fontSize: '1rem', '&::placeholder': { opacity: 1, color: gray[500], }, }, - '& .MuiOutlinedInput-root': { - boxSizing: 'border-box', - minWidth: 280, - minHeight: 40, - height: '100%', - borderRadius: '10px', - transition: 'border-color 120ms ease-in', - '& fieldset': { - border: 'none', - boxShadow: ' 0px 2px 4px rgba(0, 0, 0, 0.4)', - background: `${alpha(gray[800], 0.4)}`, - }, - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - borderColor: brand[400], - outline: '4px solid', - outlineColor: alpha(brand[500], 0.5), - }, + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + transition: 'border-color 120ms ease-in', + '&:hover': { + borderColor: brand[300], }, - ...(ownerState.variant === 'standard' && { - '&.MuiTextField-root': { - '& .MuiInput-root:hover:not(.Mui-disabled, .Mui-error):before': { - borderColor: brand[200], - }, - }, - '& :before': { - borderBottom: '1px solid', - borderColor: gray[700], - }, - '&:hover': { - '& :before': { - 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], }, }), }), }), }, }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiStack: { + defaultProps: { + useFlexGap: true, + }, + }, MuiStepConnector: { styleOverrides: { line: ({ theme }) => ({ @@ -594,16 +643,6 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { }), }, }, - MuiStepLabel: { - styleOverrides: { - label: ({ theme }) => ({ - '&.Mui-completed': { - opacity: 0.4, - ...(theme.palette.mode === 'dark' && { opacity: 0.3 }), - }, - }), - }, - }, MuiStepIcon: { variants: [ { @@ -646,6 +685,47 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { }), }, }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...(theme.palette.mode === 'dark' && { opacity: 0.5 }), + }, + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, + '& .Mui-selected': { + color: brand[500], + }, + ...(theme.palette.mode === 'dark' && { + '& .Mui-selected': { + color: 'hsl(0, 0%, 100%)', + }, + boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: theme.shape.borderRadius, + fontWeight: 500, + ...(theme.palette.mode === 'dark' && { + color: gray[400], + '&.Mui-selected': { color: brand[300] }, + }), + }), + }, + }, }, }; } diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.js b/docs/data/material/getting-started/templates/landing-page/LandingPage.js index e3d1172c1e9997..93382f406f9515 100644 --- a/docs/data/material/getting-started/templates/landing-page/LandingPage.js +++ b/docs/data/material/getting-started/templates/landing-page/LandingPage.js @@ -36,7 +36,7 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) { exclusive value={showCustomTheme} onChange={toggleCustomTheme} - aria-label="Platform" + aria-label="Toggle design language" sx={{ backgroundColor: 'background.default', '& .Mui-selected': { diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx b/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx index 9ea74b32eabe95..cd4441df77760f 100644 --- a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx +++ b/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx @@ -43,7 +43,7 @@ function ToggleCustomTheme({ exclusive value={showCustomTheme} onChange={toggleCustomTheme} - aria-label="Platform" + aria-label="Toggle design language" sx={{ backgroundColor: 'background.default', '& .Mui-selected': { diff --git a/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.js b/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.js index 51dd0fca296196..c7fcb939cb8b6b 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.js +++ b/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.js @@ -5,19 +5,16 @@ import Box from '@mui/material/Box'; import AppBar from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; import Button from '@mui/material/Button'; +import IconButton from '@mui/material/IconButton'; import Container from '@mui/material/Container'; import Divider from '@mui/material/Divider'; -import Typography from '@mui/material/Typography'; import MenuItem from '@mui/material/MenuItem'; import Drawer from '@mui/material/Drawer'; import MenuIcon from '@mui/icons-material/Menu'; +import CloseRoundedIcon from '@mui/icons-material/CloseRounded'; import ToggleColorMode from './ToggleColorMode'; -const logoStyle = { - width: '140px', - height: 'auto', - cursor: 'pointer', -}; +import Sitemark from './SitemarkIcon'; function AppAppBar({ mode, toggleColorMode }) { const [open, setOpen] = React.useState(false); @@ -41,201 +38,187 @@ function AppAppBar({ mode, toggleColorMode }) { }; return ( - <div> - <AppBar - position="fixed" - sx={{ - boxShadow: 0, - bgcolor: 'transparent', - backgroundImage: 'none', - mt: 2, - }} - > - <Container maxWidth="lg"> - <Toolbar - variant="regular" - sx={(theme) => ({ + <AppBar + position="fixed" + sx={{ + boxShadow: 0, + bgcolor: 'transparent', + backgroundImage: 'none', + mt: 2, + }} + > + <Container maxWidth="lg"> + <Toolbar + variant="regular" + sx={(theme) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + flexShrink: 0, + borderRadius: '999px', + bgcolor: + theme.palette.mode === 'light' + ? 'hsla(220, 60%, 99%, 0.6)' + : 'hsla(220, 0%, 0%, 0.7)', + backdropFilter: 'blur(24px)', + maxHeight: 40, + border: '1px solid', + borderColor: 'divider', + boxShadow: + theme.palette.mode === 'light' + ? '0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px hsla(210, 100%, 80%, 0.5)' + : '0 1px 2px hsla(210, 0%, 0%, 0.5), 0 2px 12px hsla(210, 100%, 25%, 0.3)', + })} + > + <Box + sx={{ + flexGrow: 1, display: 'flex', alignItems: 'center', - justifyContent: 'space-between', - flexShrink: 0, - borderRadius: '999px', - bgcolor: - theme.palette.mode === 'light' - ? 'rgba(255, 255, 255, 0.4)' - : 'rgba(0, 0, 0, 0.4)', - backdropFilter: 'blur(24px)', - maxHeight: 40, - border: '1px solid', - borderColor: 'divider', - boxShadow: - theme.palette.mode === 'light' - ? `0 0 1px rgba(85, 166, 246, 0.1), 1px 1.5px 2px -1px rgba(85, 166, 246, 0.15), 4px 4px 12px -2.5px rgba(85, 166, 246, 0.15)` - : '0 0 1px rgba(2, 31, 59, 0.7), 1px 1.5px 2px -1px rgba(2, 31, 59, 0.65), 4px 4px 12px -2.5px rgba(2, 31, 59, 0.65)', - })} + px: 0, + }} > - <Box - sx={{ - flexGrow: 1, - display: 'flex', - alignItems: 'center', - ml: '-18px', - px: 0, - }} - > - <img - src={ - 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e6faf73568658154dae_SitemarkDefault.svg' - } - style={logoStyle} - alt="logo of sitemark" - /> - <Box sx={{ display: { xs: 'none', md: 'flex' } }}> - <MenuItem - onClick={() => scrollToSection('features')} - sx={{ py: '6px', px: '12px' }} - > - <Typography variant="body2" color="text.primary"> - Features - </Typography> - </MenuItem> - <MenuItem - onClick={() => scrollToSection('testimonials')} - sx={{ py: '6px', px: '12px' }} - > - <Typography variant="body2" color="text.primary"> - Testimonials - </Typography> - </MenuItem> - <MenuItem - onClick={() => scrollToSection('highlights')} - sx={{ py: '6px', px: '12px' }} - > - <Typography variant="body2" color="text.primary"> - Highlights - </Typography> - </MenuItem> - <MenuItem - onClick={() => scrollToSection('pricing')} - sx={{ py: '6px', px: '12px' }} - > - <Typography variant="body2" color="text.primary"> - Pricing - </Typography> - </MenuItem> - <MenuItem - onClick={() => scrollToSection('faq')} - sx={{ py: '6px', px: '12px' }} - > - <Typography variant="body2" color="text.primary"> - FAQ - </Typography> - </MenuItem> - </Box> - </Box> - <Box - sx={{ - display: { xs: 'none', md: 'flex' }, - gap: 0.5, - alignItems: 'center', - }} - > - <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} /> + <Sitemark /> + <Box sx={{ display: { xs: 'none', md: 'flex' } }}> <Button - color="primary" variant="text" + color="info" size="small" - component="a" - href="/material-ui/getting-started/templates/sign-in/" - target="_blank" + onClick={() => scrollToSection('features')} > - Sign in + Features </Button> <Button - color="primary" - variant="contained" + variant="text" + color="info" size="small" - component="a" - href="/material-ui/getting-started/templates/sign-up/" - target="_blank" + onClick={() => scrollToSection('testimonials')} > - Sign up + Testimonials </Button> - </Box> - <Box sx={{ display: { sm: '', md: 'none' } }}> <Button variant="text" - color="primary" - aria-label="menu" - onClick={toggleDrawer(true)} - sx={{ minWidth: '30px', p: '4px' }} + color="info" + size="small" + onClick={() => scrollToSection('highlights')} + > + Highlights + </Button> + <Button + variant="text" + color="info" + size="small" + onClick={() => scrollToSection('pricing')} > - <MenuIcon /> + Pricing </Button> - <Drawer anchor="right" open={open} onClose={toggleDrawer(false)}> + <Button + variant="text" + color="info" + size="small" + onClick={() => scrollToSection('faq')} + sx={{ minWidth: 0 }} + > + FAQ + </Button> + </Box> + </Box> + <Box + sx={{ + display: { xs: 'none', md: 'flex' }, + gap: 0.5, + alignItems: 'center', + }} + > + <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} /> + <Button + color="primary" + variant="text" + size="small" + component="a" + href="/material-ui/getting-started/templates/sign-in/" + target="_blank" + > + Sign in + </Button> + <Button + color="primary" + variant="contained" + size="small" + component="a" + href="/material-ui/getting-started/templates/sign-up/" + target="_blank" + > + Sign up + </Button> + </Box> + <Box sx={{ display: { sm: 'flex', md: 'none' } }}> + <IconButton aria-label="Menu button" onClick={toggleDrawer(true)}> + <MenuIcon /> + </IconButton> + <Drawer anchor="top" open={open} onClose={toggleDrawer(false)}> + <Box + sx={{ + p: 2, + backgroundColor: 'background.default', + }} + > <Box sx={{ - minWidth: '60dvw', - p: 2, - backgroundColor: 'background.paper', - flexGrow: 1, + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', }} > - <Box - sx={{ - display: 'flex', - flexDirection: 'column', - alignItems: 'end', - flexGrow: 1, - }} - > - <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} /> - </Box> - <MenuItem onClick={() => scrollToSection('features')}> - Features - </MenuItem> - <MenuItem onClick={() => scrollToSection('testimonials')}> - Testimonials - </MenuItem> - <MenuItem onClick={() => scrollToSection('highlights')}> - Highlights - </MenuItem> - <MenuItem onClick={() => scrollToSection('pricing')}> - Pricing - </MenuItem> - <MenuItem onClick={() => scrollToSection('faq')}>FAQ</MenuItem> - <Divider /> - <MenuItem> - <Button - color="primary" - variant="contained" - component="a" - href="/material-ui/getting-started/templates/sign-up/" - target="_blank" - sx={{ width: '100%' }} - > - Sign up - </Button> - </MenuItem> - <MenuItem> - <Button - color="primary" - variant="outlined" - component="a" - href="/material-ui/getting-started/templates/sign-in/" - target="_blank" - sx={{ width: '100%' }} - > - Sign in - </Button> - </MenuItem> + <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} /> + <IconButton onClick={toggleDrawer(false)}> + <CloseRoundedIcon /> + </IconButton> </Box> - </Drawer> - </Box> - </Toolbar> - </Container> - </AppBar> - </div> + <Divider sx={{ my: 3 }} /> + <MenuItem onClick={() => scrollToSection('features')}> + Features + </MenuItem> + <MenuItem onClick={() => scrollToSection('testimonials')}> + Testimonials + </MenuItem> + <MenuItem onClick={() => scrollToSection('highlights')}> + Highlights + </MenuItem> + <MenuItem onClick={() => scrollToSection('pricing')}> + Pricing + </MenuItem> + <MenuItem onClick={() => scrollToSection('faq')}>FAQ</MenuItem> + <MenuItem> + <Button + color="primary" + variant="contained" + component="a" + href="/material-ui/getting-started/templates/sign-up/" + target="_blank" + fullWidth + > + Sign up + </Button> + </MenuItem> + <MenuItem> + <Button + color="primary" + variant="outlined" + component="a" + href="/material-ui/getting-started/templates/sign-in/" + target="_blank" + fullWidth + > + Sign in + </Button> + </MenuItem> + </Box> + </Drawer> + </Box> + </Toolbar> + </Container> + </AppBar> ); } diff --git a/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.tsx b/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.tsx index d9f387f32de999..d0b2a9b6e99a98 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.tsx +++ b/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.tsx @@ -4,26 +4,23 @@ import Box from '@mui/material/Box'; import AppBar from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; import Button from '@mui/material/Button'; +import IconButton from '@mui/material/IconButton'; import Container from '@mui/material/Container'; import Divider from '@mui/material/Divider'; -import Typography from '@mui/material/Typography'; import MenuItem from '@mui/material/MenuItem'; import Drawer from '@mui/material/Drawer'; import MenuIcon from '@mui/icons-material/Menu'; +import CloseRoundedIcon from '@mui/icons-material/CloseRounded'; import ToggleColorMode from './ToggleColorMode'; -const logoStyle = { - width: '140px', - height: 'auto', - cursor: 'pointer', -}; +import Sitemark from './SitemarkIcon'; interface AppAppBarProps { mode: PaletteMode; toggleColorMode: () => void; } -function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) { +export default function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) { const [open, setOpen] = React.useState(false); const toggleDrawer = (newOpen: boolean) => () => { @@ -45,202 +42,186 @@ function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) { }; return ( - <div> - <AppBar - position="fixed" - sx={{ - boxShadow: 0, - bgcolor: 'transparent', - backgroundImage: 'none', - mt: 2, - }} - > - <Container maxWidth="lg"> - <Toolbar - variant="regular" - sx={(theme) => ({ + <AppBar + position="fixed" + sx={{ + boxShadow: 0, + bgcolor: 'transparent', + backgroundImage: 'none', + mt: 2, + }} + > + <Container maxWidth="lg"> + <Toolbar + variant="regular" + sx={(theme) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + flexShrink: 0, + borderRadius: '999px', + bgcolor: + theme.palette.mode === 'light' + ? 'hsla(220, 60%, 99%, 0.6)' + : 'hsla(220, 0%, 0%, 0.7)', + backdropFilter: 'blur(24px)', + maxHeight: 40, + border: '1px solid', + borderColor: 'divider', + boxShadow: + theme.palette.mode === 'light' + ? '0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px hsla(210, 100%, 80%, 0.5)' + : '0 1px 2px hsla(210, 0%, 0%, 0.5), 0 2px 12px hsla(210, 100%, 25%, 0.3)', + })} + > + <Box + sx={{ + flexGrow: 1, display: 'flex', alignItems: 'center', - justifyContent: 'space-between', - flexShrink: 0, - borderRadius: '999px', - bgcolor: - theme.palette.mode === 'light' - ? 'rgba(255, 255, 255, 0.4)' - : 'rgba(0, 0, 0, 0.4)', - backdropFilter: 'blur(24px)', - maxHeight: 40, - border: '1px solid', - borderColor: 'divider', - boxShadow: - theme.palette.mode === 'light' - ? `0 0 1px rgba(85, 166, 246, 0.1), 1px 1.5px 2px -1px rgba(85, 166, 246, 0.15), 4px 4px 12px -2.5px rgba(85, 166, 246, 0.15)` - : '0 0 1px rgba(2, 31, 59, 0.7), 1px 1.5px 2px -1px rgba(2, 31, 59, 0.65), 4px 4px 12px -2.5px rgba(2, 31, 59, 0.65)', - })} + px: 0, + }} > - <Box - sx={{ - flexGrow: 1, - display: 'flex', - alignItems: 'center', - ml: '-18px', - px: 0, - }} - > - <img - src={ - 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e6faf73568658154dae_SitemarkDefault.svg' - } - style={logoStyle} - alt="logo of sitemark" - /> - <Box sx={{ display: { xs: 'none', md: 'flex' } }}> - <MenuItem - onClick={() => scrollToSection('features')} - sx={{ py: '6px', px: '12px' }} - > - <Typography variant="body2" color="text.primary"> - Features - </Typography> - </MenuItem> - <MenuItem - onClick={() => scrollToSection('testimonials')} - sx={{ py: '6px', px: '12px' }} - > - <Typography variant="body2" color="text.primary"> - Testimonials - </Typography> - </MenuItem> - <MenuItem - onClick={() => scrollToSection('highlights')} - sx={{ py: '6px', px: '12px' }} - > - <Typography variant="body2" color="text.primary"> - Highlights - </Typography> - </MenuItem> - <MenuItem - onClick={() => scrollToSection('pricing')} - sx={{ py: '6px', px: '12px' }} - > - <Typography variant="body2" color="text.primary"> - Pricing - </Typography> - </MenuItem> - <MenuItem - onClick={() => scrollToSection('faq')} - sx={{ py: '6px', px: '12px' }} - > - <Typography variant="body2" color="text.primary"> - FAQ - </Typography> - </MenuItem> - </Box> - </Box> - <Box - sx={{ - display: { xs: 'none', md: 'flex' }, - gap: 0.5, - alignItems: 'center', - }} - > - <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} /> + <Sitemark /> + <Box sx={{ display: { xs: 'none', md: 'flex' } }}> <Button - color="primary" variant="text" + color="info" size="small" - component="a" - href="/material-ui/getting-started/templates/sign-in/" - target="_blank" + onClick={() => scrollToSection('features')} > - Sign in + Features </Button> <Button - color="primary" - variant="contained" + variant="text" + color="info" size="small" - component="a" - href="/material-ui/getting-started/templates/sign-up/" - target="_blank" + onClick={() => scrollToSection('testimonials')} > - Sign up + Testimonials </Button> - </Box> - <Box sx={{ display: { sm: '', md: 'none' } }}> <Button variant="text" - color="primary" - aria-label="menu" - onClick={toggleDrawer(true)} - sx={{ minWidth: '30px', p: '4px' }} + color="info" + size="small" + onClick={() => scrollToSection('highlights')} > - <MenuIcon /> + Highlights </Button> - <Drawer anchor="right" open={open} onClose={toggleDrawer(false)}> + <Button + variant="text" + color="info" + size="small" + onClick={() => scrollToSection('pricing')} + > + Pricing + </Button> + <Button + variant="text" + color="info" + size="small" + onClick={() => scrollToSection('faq')} + sx={{ minWidth: 0 }} + > + FAQ + </Button> + </Box> + </Box> + <Box + sx={{ + display: { xs: 'none', md: 'flex' }, + gap: 0.5, + alignItems: 'center', + }} + > + <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} /> + <Button + color="primary" + variant="text" + size="small" + component="a" + href="/material-ui/getting-started/templates/sign-in/" + target="_blank" + > + Sign in + </Button> + <Button + color="primary" + variant="contained" + size="small" + component="a" + href="/material-ui/getting-started/templates/sign-up/" + target="_blank" + > + Sign up + </Button> + </Box> + <Box sx={{ display: { sm: 'flex', md: 'none' } }}> + <IconButton aria-label="Menu button" onClick={toggleDrawer(true)}> + <MenuIcon /> + </IconButton> + <Drawer anchor="top" open={open} onClose={toggleDrawer(false)}> + <Box + sx={{ + p: 2, + backgroundColor: 'background.default', + }} + > <Box sx={{ - minWidth: '60dvw', - p: 2, - backgroundColor: 'background.paper', - flexGrow: 1, + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', }} > - <Box - sx={{ - display: 'flex', - flexDirection: 'column', - alignItems: 'end', - flexGrow: 1, - }} - > - <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} /> - </Box> - <MenuItem onClick={() => scrollToSection('features')}> - Features - </MenuItem> - <MenuItem onClick={() => scrollToSection('testimonials')}> - Testimonials - </MenuItem> - <MenuItem onClick={() => scrollToSection('highlights')}> - Highlights - </MenuItem> - <MenuItem onClick={() => scrollToSection('pricing')}> - Pricing - </MenuItem> - <MenuItem onClick={() => scrollToSection('faq')}>FAQ</MenuItem> - <Divider /> - <MenuItem> - <Button - color="primary" - variant="contained" - component="a" - href="/material-ui/getting-started/templates/sign-up/" - target="_blank" - sx={{ width: '100%' }} - > - Sign up - </Button> - </MenuItem> - <MenuItem> - <Button - color="primary" - variant="outlined" - component="a" - href="/material-ui/getting-started/templates/sign-in/" - target="_blank" - sx={{ width: '100%' }} - > - Sign in - </Button> - </MenuItem> + <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} /> + <IconButton onClick={toggleDrawer(false)}> + <CloseRoundedIcon /> + </IconButton> </Box> - </Drawer> - </Box> - </Toolbar> - </Container> - </AppBar> - </div> + <Divider sx={{ my: 3 }} /> + <MenuItem onClick={() => scrollToSection('features')}> + Features + </MenuItem> + <MenuItem onClick={() => scrollToSection('testimonials')}> + Testimonials + </MenuItem> + <MenuItem onClick={() => scrollToSection('highlights')}> + Highlights + </MenuItem> + <MenuItem onClick={() => scrollToSection('pricing')}> + Pricing + </MenuItem> + <MenuItem onClick={() => scrollToSection('faq')}>FAQ</MenuItem> + <MenuItem> + <Button + color="primary" + variant="contained" + component="a" + href="/material-ui/getting-started/templates/sign-up/" + target="_blank" + fullWidth + > + Sign up + </Button> + </MenuItem> + <MenuItem> + <Button + color="primary" + variant="outlined" + component="a" + href="/material-ui/getting-started/templates/sign-in/" + target="_blank" + fullWidth + > + Sign in + </Button> + </MenuItem> + </Box> + </Drawer> + </Box> + </Toolbar> + </Container> + </AppBar> ); } - -export default AppAppBar; diff --git a/docs/data/material/getting-started/templates/landing-page/components/Features.js b/docs/data/material/getting-started/templates/landing-page/components/Features.js index f409b6b31d1a55..565084d9b210a9 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Features.js +++ b/docs/data/material/getting-started/templates/landing-page/components/Features.js @@ -62,9 +62,9 @@ export default function Features() { color="text.secondary" sx={{ mb: { xs: 2, sm: 4 } }} > - Here you can provide a brief overview of the key features of the - product. For example, you could list the number of features, the types - of features, add-ons, or the benefits of the features. + Provide a brief overview of the key features of the product. For + example, you could list the number of features, their types or + benefits, and add-ons. </Typography> </div> <Grid container item gap={1} sx={{ display: { xs: 'auto', sm: 'none' } }}> @@ -73,29 +73,24 @@ export default function Features() { key={index} label={title} onClick={() => handleItemClick(index)} - sx={{ - borderColor: (theme) => { - if (theme.palette.mode === 'light') { - return selectedItemIndex === index ? 'primary.light' : ''; - } - return selectedItemIndex === index ? 'primary.light' : ''; - }, - background: (theme) => { - if (theme.palette.mode === 'light') { - return selectedItemIndex === index ? 'none' : ''; - } - return selectedItemIndex === index ? 'none' : ''; - }, - backgroundColor: selectedItemIndex === index ? 'primary.main' : '', - '& .MuiChip-label': { - color: selectedItemIndex === index ? '#fff' : '', - }, - }} + sx={(theme) => ({ + ...(selectedItemIndex === index && { + borderColor: + theme.palette.mode === 'light' + ? 'primary.light' + : 'primary.dark', + background: + 'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))', + color: 'hsl(0, 0%, 100%)', + '& .MuiChip-label': { + color: 'hsl(0, 0%, 100%)', + }, + }), + })} /> ))} </Grid> - <Box - component={Card} + <Card variant="outlined" sx={{ display: { xs: 'auto', sm: 'none' }, @@ -114,10 +109,10 @@ export default function Features() { }} /> <Box sx={{ px: 2, pb: 2 }}> - <Typography color="text.primary" variant="body2" fontWeight="bold"> + <Typography color="text.primary" fontWeight="medium" gutterBottom> {selectedFeature.title} </Typography> - <Typography color="text.secondary" variant="body2" sx={{ my: 0.5 }}> + <Typography color="text.secondary" variant="body2" sx={{ mb: 1.5 }}> {selectedFeature.description} </Typography> <Link @@ -138,7 +133,7 @@ export default function Features() { /> </Link> </Box> - </Box> + </Card> <Stack direction="column" justifyContent="center" @@ -150,25 +145,35 @@ export default function Features() { {items.map(({ icon, title, description }, index) => ( <Card key={index} - variant="outlined" component={Button} onClick={() => handleItemClick(index)} - sx={{ + sx={(theme) => ({ p: 3, height: 'fit-content', width: '100%', background: 'none', - backgroundColor: - selectedItemIndex === index ? 'action.selected' : undefined, - borderColor: (theme) => { - if (theme.palette.mode === 'light') { - return selectedItemIndex === index + ...(selectedItemIndex === index && { + backgroundColor: 'action.selected', + borderColor: + theme.palette.mode === 'light' ? 'primary.light' - : 'grey.200'; - } - return selectedItemIndex === index ? 'primary.dark' : 'grey.800'; + : 'primary.dark', + }), + '&:hover': { + background: + theme.palette.mode === 'light' + ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' + : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', + borderColor: + theme.palette.mode === 'light' + ? 'primary.light' + : 'primary.dark', + boxShadow: + theme.palette.mode === 'light' + ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' + : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', }, - }} + })} > <Box sx={{ @@ -181,33 +186,28 @@ export default function Features() { }} > <Box - sx={{ - color: (theme) => { - if (theme.palette.mode === 'light') { - return selectedItemIndex === index - ? 'primary.main' - : 'grey.300'; - } - return selectedItemIndex === index - ? 'primary.main' - : 'grey.700'; - }, - }} + sx={(theme) => ({ + color: + theme.palette.mode === 'light' ? 'grey.400' : 'grey.600', + ...(selectedItemIndex === index && { + color: 'primary.main', + }), + })} > {icon} </Box> - <Box sx={{ textTransform: 'none' }}> + <div> <Typography color="text.primary" - variant="body2" - fontWeight="bold" + fontWeight="medium" + gutterBottom > {title} </Typography> <Typography color="text.secondary" variant="body2" - sx={{ my: 0.5 }} + sx={{ mb: 1.5 }} > {description} </Typography> @@ -231,7 +231,7 @@ export default function Features() { sx={{ mt: '1px', ml: '2px' }} /> </Link> - </Box> + </div> </Box> </Card> ))} diff --git a/docs/data/material/getting-started/templates/landing-page/components/Features.tsx b/docs/data/material/getting-started/templates/landing-page/components/Features.tsx index dd1ecf351e6096..f02afaa5483979 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Features.tsx +++ b/docs/data/material/getting-started/templates/landing-page/components/Features.tsx @@ -62,9 +62,9 @@ export default function Features() { color="text.secondary" sx={{ mb: { xs: 2, sm: 4 } }} > - Here you can provide a brief overview of the key features of the - product. For example, you could list the number of features, the types - of features, add-ons, or the benefits of the features. + Provide a brief overview of the key features of the product. For + example, you could list the number of features, their types or + benefits, and add-ons. </Typography> </div> <Grid container item gap={1} sx={{ display: { xs: 'auto', sm: 'none' } }}> @@ -73,29 +73,24 @@ export default function Features() { key={index} label={title} onClick={() => handleItemClick(index)} - sx={{ - borderColor: (theme) => { - if (theme.palette.mode === 'light') { - return selectedItemIndex === index ? 'primary.light' : ''; - } - return selectedItemIndex === index ? 'primary.light' : ''; - }, - background: (theme) => { - if (theme.palette.mode === 'light') { - return selectedItemIndex === index ? 'none' : ''; - } - return selectedItemIndex === index ? 'none' : ''; - }, - backgroundColor: selectedItemIndex === index ? 'primary.main' : '', - '& .MuiChip-label': { - color: selectedItemIndex === index ? '#fff' : '', - }, - }} + sx={(theme) => ({ + ...(selectedItemIndex === index && { + borderColor: + theme.palette.mode === 'light' + ? 'primary.light' + : 'primary.dark', + background: + 'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))', + color: 'hsl(0, 0%, 100%)', + '& .MuiChip-label': { + color: 'hsl(0, 0%, 100%)', + }, + }), + })} /> ))} </Grid> - <Box - component={Card} + <Card variant="outlined" sx={{ display: { xs: 'auto', sm: 'none' }, @@ -114,10 +109,10 @@ export default function Features() { }} /> <Box sx={{ px: 2, pb: 2 }}> - <Typography color="text.primary" variant="body2" fontWeight="bold"> + <Typography color="text.primary" fontWeight="medium" gutterBottom> {selectedFeature.title} </Typography> - <Typography color="text.secondary" variant="body2" sx={{ my: 0.5 }}> + <Typography color="text.secondary" variant="body2" sx={{ mb: 1.5 }}> {selectedFeature.description} </Typography> <Link @@ -138,7 +133,7 @@ export default function Features() { /> </Link> </Box> - </Box> + </Card> <Stack direction="column" justifyContent="center" @@ -150,25 +145,35 @@ export default function Features() { {items.map(({ icon, title, description }, index) => ( <Card key={index} - variant="outlined" component={Button} onClick={() => handleItemClick(index)} - sx={{ + sx={(theme) => ({ p: 3, height: 'fit-content', width: '100%', background: 'none', - backgroundColor: - selectedItemIndex === index ? 'action.selected' : undefined, - borderColor: (theme) => { - if (theme.palette.mode === 'light') { - return selectedItemIndex === index + ...(selectedItemIndex === index && { + backgroundColor: 'action.selected', + borderColor: + theme.palette.mode === 'light' ? 'primary.light' - : 'grey.200'; - } - return selectedItemIndex === index ? 'primary.dark' : 'grey.800'; + : 'primary.dark', + }), + '&:hover': { + background: + theme.palette.mode === 'light' + ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' + : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', + borderColor: + theme.palette.mode === 'light' + ? 'primary.light' + : 'primary.dark', + boxShadow: + theme.palette.mode === 'light' + ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' + : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', }, - }} + })} > <Box sx={{ @@ -181,33 +186,28 @@ export default function Features() { }} > <Box - sx={{ - color: (theme) => { - if (theme.palette.mode === 'light') { - return selectedItemIndex === index - ? 'primary.main' - : 'grey.300'; - } - return selectedItemIndex === index - ? 'primary.main' - : 'grey.700'; - }, - }} + sx={(theme) => ({ + color: + theme.palette.mode === 'light' ? 'grey.400' : 'grey.600', + ...(selectedItemIndex === index && { + color: 'primary.main', + }), + })} > {icon} </Box> - <Box sx={{ textTransform: 'none' }}> + <div> <Typography color="text.primary" - variant="body2" - fontWeight="bold" + fontWeight="medium" + gutterBottom > {title} </Typography> <Typography color="text.secondary" variant="body2" - sx={{ my: 0.5 }} + sx={{ mb: 1.5 }} > {description} </Typography> @@ -231,7 +231,7 @@ export default function Features() { sx={{ mt: '1px', ml: '2px' }} /> </Link> - </Box> + </div> </Box> </Card> ))} diff --git a/docs/data/material/getting-started/templates/landing-page/components/Footer.js b/docs/data/material/getting-started/templates/landing-page/components/Footer.js index 190eb078df052b..d635e85d260315 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Footer.js +++ b/docs/data/material/getting-started/templates/landing-page/components/Footer.js @@ -3,19 +3,19 @@ import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Container from '@mui/material/Container'; import IconButton from '@mui/material/IconButton'; +import InputLabel from '@mui/material/InputLabel'; import Link from '@mui/material/Link'; import Stack from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; +import { visuallyHidden } from '@mui/utils'; + import FacebookIcon from '@mui/icons-material/GitHub'; import LinkedInIcon from '@mui/icons-material/LinkedIn'; import TwitterIcon from '@mui/icons-material/X'; -const logoStyle = { - width: '140px', - height: 'auto', -}; +import SitemarkIcon from './SitemarkIcon'; function Copyright() { return ( @@ -56,24 +56,19 @@ export default function Footer() { }} > <Box sx={{ width: { xs: '100%', sm: '60%' } }}> - <Box sx={{ ml: '-15px' }}> - <img - src={ - 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e6faf73568658154dae_SitemarkDefault.svg' - } - style={logoStyle} - alt="logo of sitemark" - /> - </Box> - <Typography variant="body2" fontWeight={600} gutterBottom> - Newsletter + <SitemarkIcon /> + <Typography variant="body2" fontWeight={600} gutterBottom sx={{ mt: 2 }}> + Join the newsletter </Typography> <Typography variant="body2" color="text.secondary" mb={2}> - Subscribe to our newsletter for weekly updates and promotions. + Subscribe for weekly updates. No spams ever! </Typography> <Stack direction="row" spacing={1} useFlexGap> + <InputLabel htmlFor="email-newsletter" sx={visuallyHidden}> + Email + </InputLabel> <TextField - id="outlined-basic" + id="email-newsletter" hiddenLabel size="small" variant="outlined" @@ -98,22 +93,22 @@ export default function Footer() { gap: 1, }} > - <Typography variant="body2" fontWeight={600}> + <Typography variant="body2" fontWeight="medium"> Product </Typography> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Features </Link> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Testimonials </Link> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Highlights </Link> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Pricing </Link> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> FAQs </Link> </Box> @@ -124,16 +119,16 @@ export default function Footer() { gap: 1, }} > - <Typography variant="body2" fontWeight={600}> + <Typography variant="body2" fontWeight="medium"> Company </Typography> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> About us </Link> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Careers </Link> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Press </Link> </Box> @@ -144,16 +139,16 @@ export default function Footer() { gap: 1, }} > - <Typography variant="body2" fontWeight={600}> + <Typography variant="body2" fontWeight="medium"> Legal </Typography> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Terms </Link> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Privacy </Link> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Contact </Link> </Box> @@ -169,13 +164,13 @@ export default function Footer() { }} > <div> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Privacy Policy </Link> <Typography display="inline" sx={{ mx: 0.5, opacity: 0.5 }}>  •  </Typography> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Terms of Service </Link> <Copyright /> diff --git a/docs/data/material/getting-started/templates/landing-page/components/Footer.tsx b/docs/data/material/getting-started/templates/landing-page/components/Footer.tsx index 190eb078df052b..d635e85d260315 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Footer.tsx +++ b/docs/data/material/getting-started/templates/landing-page/components/Footer.tsx @@ -3,19 +3,19 @@ import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Container from '@mui/material/Container'; import IconButton from '@mui/material/IconButton'; +import InputLabel from '@mui/material/InputLabel'; import Link from '@mui/material/Link'; import Stack from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; +import { visuallyHidden } from '@mui/utils'; + import FacebookIcon from '@mui/icons-material/GitHub'; import LinkedInIcon from '@mui/icons-material/LinkedIn'; import TwitterIcon from '@mui/icons-material/X'; -const logoStyle = { - width: '140px', - height: 'auto', -}; +import SitemarkIcon from './SitemarkIcon'; function Copyright() { return ( @@ -56,24 +56,19 @@ export default function Footer() { }} > <Box sx={{ width: { xs: '100%', sm: '60%' } }}> - <Box sx={{ ml: '-15px' }}> - <img - src={ - 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e6faf73568658154dae_SitemarkDefault.svg' - } - style={logoStyle} - alt="logo of sitemark" - /> - </Box> - <Typography variant="body2" fontWeight={600} gutterBottom> - Newsletter + <SitemarkIcon /> + <Typography variant="body2" fontWeight={600} gutterBottom sx={{ mt: 2 }}> + Join the newsletter </Typography> <Typography variant="body2" color="text.secondary" mb={2}> - Subscribe to our newsletter for weekly updates and promotions. + Subscribe for weekly updates. No spams ever! </Typography> <Stack direction="row" spacing={1} useFlexGap> + <InputLabel htmlFor="email-newsletter" sx={visuallyHidden}> + Email + </InputLabel> <TextField - id="outlined-basic" + id="email-newsletter" hiddenLabel size="small" variant="outlined" @@ -98,22 +93,22 @@ export default function Footer() { gap: 1, }} > - <Typography variant="body2" fontWeight={600}> + <Typography variant="body2" fontWeight="medium"> Product </Typography> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Features </Link> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Testimonials </Link> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Highlights </Link> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Pricing </Link> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> FAQs </Link> </Box> @@ -124,16 +119,16 @@ export default function Footer() { gap: 1, }} > - <Typography variant="body2" fontWeight={600}> + <Typography variant="body2" fontWeight="medium"> Company </Typography> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> About us </Link> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Careers </Link> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Press </Link> </Box> @@ -144,16 +139,16 @@ export default function Footer() { gap: 1, }} > - <Typography variant="body2" fontWeight={600}> + <Typography variant="body2" fontWeight="medium"> Legal </Typography> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Terms </Link> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Privacy </Link> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Contact </Link> </Box> @@ -169,13 +164,13 @@ export default function Footer() { }} > <div> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Privacy Policy </Link> <Typography display="inline" sx={{ mx: 0.5, opacity: 0.5 }}>  •  </Typography> - <Link color="text.secondary" href="#"> + <Link color="text.secondary" variant="body2" href="#"> Terms of Service </Link> <Copyright /> diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.js b/docs/data/material/getting-started/templates/landing-page/components/Hero.js index 6813d4c96f4376..a8e9b21b0c2ef9 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Hero.js +++ b/docs/data/material/getting-started/templates/landing-page/components/Hero.js @@ -1,13 +1,15 @@ import * as React from 'react'; -import { alpha } from '@mui/material'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Container from '@mui/material/Container'; +import InputLabel from '@mui/material/InputLabel'; import Link from '@mui/material/Link'; import Stack from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; +import { visuallyHidden } from '@mui/utils'; + export default function Hero() { return ( <Box @@ -16,9 +18,8 @@ export default function Hero() { width: '100%', backgroundImage: theme.palette.mode === 'light' - ? 'linear-gradient(180deg, #CEE5FD, #FFF)' - : `linear-gradient(#02294F, ${alpha('#090E10', 0.0)})`, - backgroundSize: '100% 20%', + ? 'radial-gradient(ellipse 80% 50% at 50% -20%, hsl(210, 100%, 90%), transparent)' + : 'radial-gradient(ellipse 80% 50% at 50% -20%, hsl(210, 100%, 16%), transparent)', backgroundRepeat: 'no-repeat', })} > @@ -31,23 +32,27 @@ export default function Hero() { pb: { xs: 8, sm: 12 }, }} > - <Stack spacing={2} useFlexGap sx={{ width: { xs: '100%', sm: '70%' } }}> + <Stack + spacing={2} + alignItems="center" + useFlexGap + sx={{ width: { xs: '100%', sm: '70%' } }} + > <Typography variant="h1" sx={{ display: 'flex', - flexDirection: { xs: 'column', md: 'row' }, - alignSelf: 'center', - textAlign: 'center', - fontSize: 'clamp(3.5rem, 10vw, 4rem)', + flexDirection: { xs: 'column', sm: 'row' }, + alignItems: 'center', + fontSize: 'clamp(3rem, 10vw, 3.5rem)', }} > - Our latest  + Our latest  <Typography component="span" variant="h1" sx={{ - fontSize: 'clamp(3rem, 10vw, 4rem)', + fontSize: 'inherit', color: (theme) => theme.palette.mode === 'light' ? 'primary.main' : 'primary.light', }} @@ -58,7 +63,7 @@ export default function Hero() { <Typography textAlign="center" color="text.secondary" - sx={{ alignSelf: 'center', width: { sm: '100%', md: '80%' } }} + sx={{ width: { sm: '100%', md: '80%' } }} > Explore our cutting-edge dashboard, delivering high-quality solutions tailored to your needs. Elevate your experience with top-tier features @@ -66,13 +71,15 @@ export default function Hero() { </Typography> <Stack direction={{ xs: 'column', sm: 'row' }} - alignSelf="center" spacing={1} useFlexGap sx={{ pt: 2, width: { xs: '100%', sm: 'auto' } }} > + <InputLabel htmlFor="email-hero" sx={visuallyHidden}> + Email + </InputLabel> <TextField - id="outlined-basic" + id="email-hero" hiddenLabel size="small" variant="outlined" @@ -87,7 +94,7 @@ export default function Hero() { Start now </Button> </Stack> - <Typography variant="caption" textAlign="center" sx={{ opacity: 0.8 }}> + <Typography variant="caption" textAlign="center"> By clicking "Start now" you agree to our  <Link href="#" color="primary"> Terms & Conditions @@ -107,16 +114,16 @@ export default function Hero() { ? 'url("/static/images/templates/templates-images/hero-light.png")' : 'url("/static/images/templates/templates-images/hero-dark.png")', backgroundSize: 'cover', - borderRadius: '10px', + borderRadius: '12px', outline: '1px solid', outlineColor: theme.palette.mode === 'light' - ? alpha('#BFCCD9', 0.5) - : alpha('#9CCCFC', 0.1), + ? 'hsla(220, 25%, 80%, 0.5)' + : 'hsla(210, 100%, 80%, 0.1)', boxShadow: theme.palette.mode === 'light' - ? `0 0 12px 8px ${alpha('#9CCCFC', 0.2)}` - : `0 0 24px 12px ${alpha('#033363', 0.2)}`, + ? '0 0 12px 8px hsla(220, 25%, 80%, 0.2)' + : '0 0 24px 12px hsla(210, 100%, 25%, 0.2)', })} /> </Container> diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx b/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx index 6813d4c96f4376..a8e9b21b0c2ef9 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx +++ b/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx @@ -1,13 +1,15 @@ import * as React from 'react'; -import { alpha } from '@mui/material'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Container from '@mui/material/Container'; +import InputLabel from '@mui/material/InputLabel'; import Link from '@mui/material/Link'; import Stack from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; +import { visuallyHidden } from '@mui/utils'; + export default function Hero() { return ( <Box @@ -16,9 +18,8 @@ export default function Hero() { width: '100%', backgroundImage: theme.palette.mode === 'light' - ? 'linear-gradient(180deg, #CEE5FD, #FFF)' - : `linear-gradient(#02294F, ${alpha('#090E10', 0.0)})`, - backgroundSize: '100% 20%', + ? 'radial-gradient(ellipse 80% 50% at 50% -20%, hsl(210, 100%, 90%), transparent)' + : 'radial-gradient(ellipse 80% 50% at 50% -20%, hsl(210, 100%, 16%), transparent)', backgroundRepeat: 'no-repeat', })} > @@ -31,23 +32,27 @@ export default function Hero() { pb: { xs: 8, sm: 12 }, }} > - <Stack spacing={2} useFlexGap sx={{ width: { xs: '100%', sm: '70%' } }}> + <Stack + spacing={2} + alignItems="center" + useFlexGap + sx={{ width: { xs: '100%', sm: '70%' } }} + > <Typography variant="h1" sx={{ display: 'flex', - flexDirection: { xs: 'column', md: 'row' }, - alignSelf: 'center', - textAlign: 'center', - fontSize: 'clamp(3.5rem, 10vw, 4rem)', + flexDirection: { xs: 'column', sm: 'row' }, + alignItems: 'center', + fontSize: 'clamp(3rem, 10vw, 3.5rem)', }} > - Our latest  + Our latest  <Typography component="span" variant="h1" sx={{ - fontSize: 'clamp(3rem, 10vw, 4rem)', + fontSize: 'inherit', color: (theme) => theme.palette.mode === 'light' ? 'primary.main' : 'primary.light', }} @@ -58,7 +63,7 @@ export default function Hero() { <Typography textAlign="center" color="text.secondary" - sx={{ alignSelf: 'center', width: { sm: '100%', md: '80%' } }} + sx={{ width: { sm: '100%', md: '80%' } }} > Explore our cutting-edge dashboard, delivering high-quality solutions tailored to your needs. Elevate your experience with top-tier features @@ -66,13 +71,15 @@ export default function Hero() { </Typography> <Stack direction={{ xs: 'column', sm: 'row' }} - alignSelf="center" spacing={1} useFlexGap sx={{ pt: 2, width: { xs: '100%', sm: 'auto' } }} > + <InputLabel htmlFor="email-hero" sx={visuallyHidden}> + Email + </InputLabel> <TextField - id="outlined-basic" + id="email-hero" hiddenLabel size="small" variant="outlined" @@ -87,7 +94,7 @@ export default function Hero() { Start now </Button> </Stack> - <Typography variant="caption" textAlign="center" sx={{ opacity: 0.8 }}> + <Typography variant="caption" textAlign="center"> By clicking "Start now" you agree to our  <Link href="#" color="primary"> Terms & Conditions @@ -107,16 +114,16 @@ export default function Hero() { ? 'url("/static/images/templates/templates-images/hero-light.png")' : 'url("/static/images/templates/templates-images/hero-dark.png")', backgroundSize: 'cover', - borderRadius: '10px', + borderRadius: '12px', outline: '1px solid', outlineColor: theme.palette.mode === 'light' - ? alpha('#BFCCD9', 0.5) - : alpha('#9CCCFC', 0.1), + ? 'hsla(220, 25%, 80%, 0.5)' + : 'hsla(210, 100%, 80%, 0.1)', boxShadow: theme.palette.mode === 'light' - ? `0 0 12px 8px ${alpha('#9CCCFC', 0.2)}` - : `0 0 24px 12px ${alpha('#033363', 0.2)}`, + ? '0 0 12px 8px hsla(220, 25%, 80%, 0.2)' + : '0 0 24px 12px hsla(210, 100%, 25%, 0.2)', })} /> </Container> diff --git a/docs/data/material/getting-started/templates/landing-page/components/Highlights.js b/docs/data/material/getting-started/templates/landing-page/components/Highlights.js index cc8ec2b628aa7e..8adc8f06911b6e 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Highlights.js +++ b/docs/data/material/getting-started/templates/landing-page/components/Highlights.js @@ -59,7 +59,7 @@ export default function Highlights() { pt: { xs: 4, sm: 12 }, pb: { xs: 8, sm: 16 }, color: 'white', - bgcolor: '#06090a', + bgcolor: 'hsl(220, 30%, 2%)', }} > <Container @@ -99,9 +99,10 @@ export default function Highlights() { p: 3, height: '100%', border: '1px solid', - borderColor: 'grey.800', + borderColor: 'hsla(220, 25%, 25%, .3)', background: 'transparent', backgroundColor: 'grey.900', + boxShadow: 'none', }} > <Box sx={{ opacity: '50%' }}>{item.icon}</Box> diff --git a/docs/data/material/getting-started/templates/landing-page/components/Highlights.tsx b/docs/data/material/getting-started/templates/landing-page/components/Highlights.tsx index cc8ec2b628aa7e..8adc8f06911b6e 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Highlights.tsx +++ b/docs/data/material/getting-started/templates/landing-page/components/Highlights.tsx @@ -59,7 +59,7 @@ export default function Highlights() { pt: { xs: 4, sm: 12 }, pb: { xs: 8, sm: 16 }, color: 'white', - bgcolor: '#06090a', + bgcolor: 'hsl(220, 30%, 2%)', }} > <Container @@ -99,9 +99,10 @@ export default function Highlights() { p: 3, height: '100%', border: '1px solid', - borderColor: 'grey.800', + borderColor: 'hsla(220, 25%, 25%, .3)', background: 'transparent', backgroundColor: 'grey.900', + boxShadow: 'none', }} > <Box sx={{ opacity: '50%' }}>{item.icon}</Box> diff --git a/docs/data/material/getting-started/templates/landing-page/components/Pricing.js b/docs/data/material/getting-started/templates/landing-page/components/Pricing.js index 8892d3aa411850..54a00b4a03dcd8 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Pricing.js +++ b/docs/data/material/getting-started/templates/landing-page/components/Pricing.js @@ -9,6 +9,7 @@ import Container from '@mui/material/Container'; import Divider from '@mui/material/Divider'; import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; + import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'; import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded'; @@ -94,19 +95,21 @@ export default function Pricing() { md={4} > <Card - sx={{ + sx={(theme) => ({ p: 2, display: 'flex', flexDirection: 'column', gap: 4, - border: tier.title === 'Professional' ? '1px solid' : undefined, - borderColor: - tier.title === 'Professional' ? 'primary.main' : undefined, - background: - tier.title === 'Professional' - ? 'linear-gradient(#033363, #021F3B)' - : undefined, - }} + ...(tier.title === 'Professional' && { + border: 'none', + boxShadow: + theme.palette.mode === 'light' + ? `0 8px 12px hsla(210, 98%, 42%, 0.2)` + : `0 8px 12px hsla(0, 0%, 0%, 0.8)`, + background: + 'radial-gradient(circle at 50% 0%, hsl(210, 98%, 35%), hsl(210, 100%, 16%))', + }), + })} > <CardContent> <Box @@ -115,6 +118,7 @@ export default function Pricing() { display: 'flex', justifyContent: 'space-between', alignItems: 'center', + gap: 2, color: tier.title === 'Professional' ? 'grey.100' : '', }} > @@ -127,14 +131,13 @@ export default function Pricing() { label={tier.subheader} size="small" sx={{ - background: (theme) => - theme.palette.mode === 'light' ? '' : 'none', - backgroundColor: 'primary.contrastText', + borderColor: 'hsla(220, 60%, 99%, 0.3)', + backgroundColor: 'hsla(220, 60%, 99%, 0.1)', '& .MuiChip-label': { - color: 'primary.dark', + color: 'hsl(0, 0%, 100%)', }, '& .MuiChip-icon': { - color: 'primary.dark', + color: 'primary.light', }, }} /> @@ -157,8 +160,8 @@ export default function Pricing() { <Divider sx={{ my: 2, - opacity: 0.2, - borderColor: 'grey.500', + opacity: 0.8, + borderColor: 'divider', }} /> {tier.description.map((line) => ( @@ -181,11 +184,10 @@ export default function Pricing() { }} /> <Typography - component="text" variant="subtitle2" + component={'span'} sx={{ - color: - tier.title === 'Professional' ? 'grey.200' : undefined, + color: tier.title === 'Professional' ? 'grey.50' : undefined, }} > {line} diff --git a/docs/data/material/getting-started/templates/landing-page/components/Pricing.tsx b/docs/data/material/getting-started/templates/landing-page/components/Pricing.tsx index bcb8ca47d33478..52ca695ee1ff1e 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Pricing.tsx +++ b/docs/data/material/getting-started/templates/landing-page/components/Pricing.tsx @@ -9,6 +9,7 @@ import Container from '@mui/material/Container'; import Divider from '@mui/material/Divider'; import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; + import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'; import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded'; @@ -94,19 +95,21 @@ export default function Pricing() { md={4} > <Card - sx={{ + sx={(theme) => ({ p: 2, display: 'flex', flexDirection: 'column', gap: 4, - border: tier.title === 'Professional' ? '1px solid' : undefined, - borderColor: - tier.title === 'Professional' ? 'primary.main' : undefined, - background: - tier.title === 'Professional' - ? 'linear-gradient(#033363, #021F3B)' - : undefined, - }} + ...(tier.title === 'Professional' && { + border: 'none', + boxShadow: + theme.palette.mode === 'light' + ? `0 8px 12px hsla(210, 98%, 42%, 0.2)` + : `0 8px 12px hsla(0, 0%, 0%, 0.8)`, + background: + 'radial-gradient(circle at 50% 0%, hsl(210, 98%, 35%), hsl(210, 100%, 16%))', + }), + })} > <CardContent> <Box @@ -115,6 +118,7 @@ export default function Pricing() { display: 'flex', justifyContent: 'space-between', alignItems: 'center', + gap: 2, color: tier.title === 'Professional' ? 'grey.100' : '', }} > @@ -127,14 +131,13 @@ export default function Pricing() { label={tier.subheader} size="small" sx={{ - background: (theme) => - theme.palette.mode === 'light' ? '' : 'none', - backgroundColor: 'primary.contrastText', + borderColor: 'hsla(220, 60%, 99%, 0.3)', + backgroundColor: 'hsla(220, 60%, 99%, 0.1)', '& .MuiChip-label': { - color: 'primary.dark', + color: 'hsl(0, 0%, 100%)', }, '& .MuiChip-icon': { - color: 'primary.dark', + color: 'primary.light', }, }} /> @@ -157,8 +160,8 @@ export default function Pricing() { <Divider sx={{ my: 2, - opacity: 0.2, - borderColor: 'grey.500', + opacity: 0.8, + borderColor: 'divider', }} /> {tier.description.map((line) => ( @@ -181,11 +184,10 @@ export default function Pricing() { }} /> <Typography - component="text" variant="subtitle2" + component={'span'} sx={{ - color: - tier.title === 'Professional' ? 'grey.200' : undefined, + color: tier.title === 'Professional' ? 'grey.50' : undefined, }} > {line} diff --git a/docs/data/material/getting-started/templates/landing-page/components/SitemarkIcon.js b/docs/data/material/getting-started/templates/landing-page/components/SitemarkIcon.js new file mode 100644 index 00000000000000..eaa718dc5360d2 --- /dev/null +++ b/docs/data/material/getting-started/templates/landing-page/components/SitemarkIcon.js @@ -0,0 +1,53 @@ +import * as React from 'react'; +import SvgIcon from '@mui/material/SvgIcon'; + +export default function SitemarkIcon() { + return ( + <SvgIcon sx={{ height: 21, width: 100, mr: 2 }}> + <svg + width={86} + height={19} + viewBox="0 0 86 19" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + fill="#B4C0D3" + d="m.787 12.567 6.055-2.675 3.485 2.006.704 6.583-4.295-.035.634-4.577-.74-.422-3.625 2.817-2.218-3.697Z" + /> + <path + fill="#00D3AB" + d="m10.714 11.616 5.352 3.908 2.112-3.767-4.295-1.725v-.845l4.295-1.76-2.112-3.732-5.352 3.908v4.013Z" + /> + <path + fill="#4876EF" + d="m10.327 7.286.704-6.583-4.295.07.634 4.577-.74.422-3.66-2.816L.786 6.617l6.055 2.676 3.485-2.007Z" + /> + <path + fill="#4876EE" + d="M32.507 8.804v6.167h2.312v-7.86h-3.366v1.693h1.054ZM32.435 6.006c.212.22.535.33.968.33.434 0 .751-.11.953-.33.213-.23.318-.516.318-.86 0-.354-.105-.641-.318-.86-.202-.23-.52-.345-.953-.345-.433 0-.756.115-.968.344-.202.22-.303.507-.303.86 0 .345.101.632.303.861ZM24.46 14.799c.655.296 1.46.444 2.413.444.896 0 1.667-.139 2.312-.416.645-.277 1.141-.664 1.488-1.162.357-.506.535-1.094.535-1.764 0-.65-.169-1.2-.506-1.649-.328-.459-.785-.818-1.373-1.076-.587-.267-1.266-.435-2.037-.502l-.809-.071c-.481-.039-.828-.168-1.04-.388a1.08 1.08 0 0 1-.318-.774c0-.23.058-.44.173-.631.116-.201.29-.359.52-.474.241-.114.535-.172.882-.172.366 0 .67.067.91.201.053.029.104.059.15.09l.012.009.052.037c.146.111.263.243.35.395.125.21.188.444.188.703h2.311c0-.689-.159-1.286-.476-1.793-.318-.516-.776-.913-1.373-1.19-.588-.287-1.296-.43-2.124-.43-.79 0-1.474.133-2.052.4a3.131 3.131 0 0 0-1.358 1.12c-.318.487-.477 1.066-.477 1.735 0 .927.314 1.673.94 2.237.626.564 1.464.89 2.514.976l.794.071c.645.058 1.113.187 1.401.388a.899.899 0 0 1 .434.788 1.181 1.181 0 0 1-.231.717c-.154.201-.38.36-.68.474-.298.115-.669.172-1.112.172-.49 0-.89-.067-1.199-.2-.308-.144-.539-.33-.694-.56a1.375 1.375 0 0 1-.216-.746h-2.297c0 .679.168 1.281.505 1.807.337.517.834.928 1.489 1.234ZM39.977 15.07c-.8 0-1.445-.095-1.936-.286a2.03 2.03 0 0 1-1.084-.99c-.221-.469-.332-1.1-.332-1.893V8.789h-1.2V7.11h1.2V4.988h2.153V7.11h2.312V8.79h-2.312v3.198c0 .373.096.66.289.86.202.192.486.287.852.287h1.17v1.937h-1.112Z" + /> + <path + fill="#4876EE" + fillRule="evenodd" + d="M43.873 14.899c.52.23 1.117.344 1.791.344.665 0 1.252-.115 1.763-.344.51-.23.934-.55 1.271-.96.337-.412.564-.88.679-1.407h-2.124c-.096.24-.279.44-.549.603-.27.162-.616.244-1.04.244-.262 0-.497-.031-.704-.093a1.572 1.572 0 0 1-.423-.194 1.662 1.662 0 0 1-.636-.803 3.159 3.159 0 0 1-.163-.645h5.784v-.775a4.28 4.28 0 0 0-.463-1.98 3.686 3.686 0 0 0-1.343-1.477c-.578-.382-1.291-.574-2.139-.574-.645 0-1.223.115-1.733.345-.501.22-.92.52-1.257.903a4.178 4.178 0 0 0-.78 1.305c-.174.478-.26.98-.26 1.506v.287c0 .507.086 1.004.26 1.492.183.478.443.913.78 1.305.347.382.775.688 1.286.918Zm-.094-4.674.02-.09a2.507 2.507 0 0 1 .117-.356c.145-.354.356-.622.636-.804.104-.067.217-.123.339-.165.204-.071.433-.107.686-.107.395 0 .723.09.983.272.27.173.472.426.607.76a2.487 2.487 0 0 1 .16.603h-3.57c.006-.038.013-.076.022-.113Z" + clipRule="evenodd" + /> + <path + fill="#4876EE" + d="M50.476 14.97V7.112h1.835v1.98a4.54 4.54 0 0 1 .173-.603c.202-.536.506-.937.91-1.205.405-.277.9-.416 1.488-.416h.101c.598 0 1.094.139 1.489.416.404.268.707.67.91 1.205l.016.04.013.037.028-.077c.212-.536.52-.937.925-1.205.405-.277.901-.416 1.489-.416h.1c.598 0 1.098.139 1.503.416.414.268.727.67.94 1.205.211.535.317 1.205.317 2.008v4.475h-2.312v-4.604c0-.43-.115-.78-.346-1.047-.222-.268-.54-.402-.954-.402-.414 0-.742.139-.982.416-.241.268-.362.626-.362 1.076v4.56h-2.326v-4.603c0-.43-.115-.78-.346-1.047-.222-.268-.535-.402-.94-.402-.423 0-.756.139-.996.416-.241.268-.362.626-.362 1.076v4.56h-2.311Z" + /> + <path + fill="#4876EE" + fillRule="evenodd" + d="M68.888 13.456v1.515h1.834v-4.82c0-.726-.144-1.319-.433-1.778-.289-.468-.712-.817-1.271-1.047-.549-.23-1.228-.344-2.037-.344a27.76 27.76 0 0 0-.896.014c-.318.01-.626.024-.924.043l-.229.016a36.79 36.79 0 0 0-.552.042v1.936a81.998 81.998 0 0 1 1.733-.09 37.806 37.806 0 0 1 1.171-.025c.424 0 .732.1.925.301.193.201.289.502.289.904v.029h-1.43c-.704 0-1.325.09-1.864.272-.54.172-.959.445-1.257.818-.299.363-.448.832-.448 1.405 0 .526.12.98.361 1.363.24.373.573.66.997.86.433.201.934.302 1.502.302.55 0 1.012-.1 1.388-.302.385-.2.683-.487.895-.86a2.443 2.443 0 0 0 .228-.498l.018-.056Zm-.39-1.397v-.63h-1.445c-.405 0-.718.1-.939.3-.212.192-.318.455-.318.79 0 .157.026.3.08.429a.99.99 0 0 0 .238.345c.221.191.534.287.939.287a2.125 2.125 0 0 0 .394-.038c.106-.021.206-.052.3-.092.212-.095.385-.253.52-.473.135-.22.212-.526.23-.918Z" + clipRule="evenodd" + /> + <path + fill="#4876EE" + d="M72.106 14.97V7.11h1.835v2.595c.088-.74.31-1.338.665-1.791.481-.603 1.174-.904 2.08-.904h.303v1.98h-.578c-.635 0-1.127.172-1.473.516-.347.334-.52.822-.52 1.463v4.001h-2.312ZM79.92 11.298h.767l2.499 3.672h2.6l-3.169-4.51 2.606-3.35h-2.427l-2.875 3.737V4.5h-2.312v10.47h2.312v-3.672Z" + /> + </svg> + </SvgIcon> + ); +} diff --git a/docs/data/material/getting-started/templates/landing-page/components/SitemarkIcon.tsx b/docs/data/material/getting-started/templates/landing-page/components/SitemarkIcon.tsx new file mode 100644 index 00000000000000..eaa718dc5360d2 --- /dev/null +++ b/docs/data/material/getting-started/templates/landing-page/components/SitemarkIcon.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; +import SvgIcon from '@mui/material/SvgIcon'; + +export default function SitemarkIcon() { + return ( + <SvgIcon sx={{ height: 21, width: 100, mr: 2 }}> + <svg + width={86} + height={19} + viewBox="0 0 86 19" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + fill="#B4C0D3" + d="m.787 12.567 6.055-2.675 3.485 2.006.704 6.583-4.295-.035.634-4.577-.74-.422-3.625 2.817-2.218-3.697Z" + /> + <path + fill="#00D3AB" + d="m10.714 11.616 5.352 3.908 2.112-3.767-4.295-1.725v-.845l4.295-1.76-2.112-3.732-5.352 3.908v4.013Z" + /> + <path + fill="#4876EF" + d="m10.327 7.286.704-6.583-4.295.07.634 4.577-.74.422-3.66-2.816L.786 6.617l6.055 2.676 3.485-2.007Z" + /> + <path + fill="#4876EE" + d="M32.507 8.804v6.167h2.312v-7.86h-3.366v1.693h1.054ZM32.435 6.006c.212.22.535.33.968.33.434 0 .751-.11.953-.33.213-.23.318-.516.318-.86 0-.354-.105-.641-.318-.86-.202-.23-.52-.345-.953-.345-.433 0-.756.115-.968.344-.202.22-.303.507-.303.86 0 .345.101.632.303.861ZM24.46 14.799c.655.296 1.46.444 2.413.444.896 0 1.667-.139 2.312-.416.645-.277 1.141-.664 1.488-1.162.357-.506.535-1.094.535-1.764 0-.65-.169-1.2-.506-1.649-.328-.459-.785-.818-1.373-1.076-.587-.267-1.266-.435-2.037-.502l-.809-.071c-.481-.039-.828-.168-1.04-.388a1.08 1.08 0 0 1-.318-.774c0-.23.058-.44.173-.631.116-.201.29-.359.52-.474.241-.114.535-.172.882-.172.366 0 .67.067.91.201.053.029.104.059.15.09l.012.009.052.037c.146.111.263.243.35.395.125.21.188.444.188.703h2.311c0-.689-.159-1.286-.476-1.793-.318-.516-.776-.913-1.373-1.19-.588-.287-1.296-.43-2.124-.43-.79 0-1.474.133-2.052.4a3.131 3.131 0 0 0-1.358 1.12c-.318.487-.477 1.066-.477 1.735 0 .927.314 1.673.94 2.237.626.564 1.464.89 2.514.976l.794.071c.645.058 1.113.187 1.401.388a.899.899 0 0 1 .434.788 1.181 1.181 0 0 1-.231.717c-.154.201-.38.36-.68.474-.298.115-.669.172-1.112.172-.49 0-.89-.067-1.199-.2-.308-.144-.539-.33-.694-.56a1.375 1.375 0 0 1-.216-.746h-2.297c0 .679.168 1.281.505 1.807.337.517.834.928 1.489 1.234ZM39.977 15.07c-.8 0-1.445-.095-1.936-.286a2.03 2.03 0 0 1-1.084-.99c-.221-.469-.332-1.1-.332-1.893V8.789h-1.2V7.11h1.2V4.988h2.153V7.11h2.312V8.79h-2.312v3.198c0 .373.096.66.289.86.202.192.486.287.852.287h1.17v1.937h-1.112Z" + /> + <path + fill="#4876EE" + fillRule="evenodd" + d="M43.873 14.899c.52.23 1.117.344 1.791.344.665 0 1.252-.115 1.763-.344.51-.23.934-.55 1.271-.96.337-.412.564-.88.679-1.407h-2.124c-.096.24-.279.44-.549.603-.27.162-.616.244-1.04.244-.262 0-.497-.031-.704-.093a1.572 1.572 0 0 1-.423-.194 1.662 1.662 0 0 1-.636-.803 3.159 3.159 0 0 1-.163-.645h5.784v-.775a4.28 4.28 0 0 0-.463-1.98 3.686 3.686 0 0 0-1.343-1.477c-.578-.382-1.291-.574-2.139-.574-.645 0-1.223.115-1.733.345-.501.22-.92.52-1.257.903a4.178 4.178 0 0 0-.78 1.305c-.174.478-.26.98-.26 1.506v.287c0 .507.086 1.004.26 1.492.183.478.443.913.78 1.305.347.382.775.688 1.286.918Zm-.094-4.674.02-.09a2.507 2.507 0 0 1 .117-.356c.145-.354.356-.622.636-.804.104-.067.217-.123.339-.165.204-.071.433-.107.686-.107.395 0 .723.09.983.272.27.173.472.426.607.76a2.487 2.487 0 0 1 .16.603h-3.57c.006-.038.013-.076.022-.113Z" + clipRule="evenodd" + /> + <path + fill="#4876EE" + d="M50.476 14.97V7.112h1.835v1.98a4.54 4.54 0 0 1 .173-.603c.202-.536.506-.937.91-1.205.405-.277.9-.416 1.488-.416h.101c.598 0 1.094.139 1.489.416.404.268.707.67.91 1.205l.016.04.013.037.028-.077c.212-.536.52-.937.925-1.205.405-.277.901-.416 1.489-.416h.1c.598 0 1.098.139 1.503.416.414.268.727.67.94 1.205.211.535.317 1.205.317 2.008v4.475h-2.312v-4.604c0-.43-.115-.78-.346-1.047-.222-.268-.54-.402-.954-.402-.414 0-.742.139-.982.416-.241.268-.362.626-.362 1.076v4.56h-2.326v-4.603c0-.43-.115-.78-.346-1.047-.222-.268-.535-.402-.94-.402-.423 0-.756.139-.996.416-.241.268-.362.626-.362 1.076v4.56h-2.311Z" + /> + <path + fill="#4876EE" + fillRule="evenodd" + d="M68.888 13.456v1.515h1.834v-4.82c0-.726-.144-1.319-.433-1.778-.289-.468-.712-.817-1.271-1.047-.549-.23-1.228-.344-2.037-.344a27.76 27.76 0 0 0-.896.014c-.318.01-.626.024-.924.043l-.229.016a36.79 36.79 0 0 0-.552.042v1.936a81.998 81.998 0 0 1 1.733-.09 37.806 37.806 0 0 1 1.171-.025c.424 0 .732.1.925.301.193.201.289.502.289.904v.029h-1.43c-.704 0-1.325.09-1.864.272-.54.172-.959.445-1.257.818-.299.363-.448.832-.448 1.405 0 .526.12.98.361 1.363.24.373.573.66.997.86.433.201.934.302 1.502.302.55 0 1.012-.1 1.388-.302.385-.2.683-.487.895-.86a2.443 2.443 0 0 0 .228-.498l.018-.056Zm-.39-1.397v-.63h-1.445c-.405 0-.718.1-.939.3-.212.192-.318.455-.318.79 0 .157.026.3.08.429a.99.99 0 0 0 .238.345c.221.191.534.287.939.287a2.125 2.125 0 0 0 .394-.038c.106-.021.206-.052.3-.092.212-.095.385-.253.52-.473.135-.22.212-.526.23-.918Z" + clipRule="evenodd" + /> + <path + fill="#4876EE" + d="M72.106 14.97V7.11h1.835v2.595c.088-.74.31-1.338.665-1.791.481-.603 1.174-.904 2.08-.904h.303v1.98h-.578c-.635 0-1.127.172-1.473.516-.347.334-.52.822-.52 1.463v4.001h-2.312ZM79.92 11.298h.767l2.499 3.672h2.6l-3.169-4.51 2.606-3.35h-2.427l-2.875 3.737V4.5h-2.312v10.47h2.312v-3.672Z" + /> + </svg> + </SvgIcon> + ); +} diff --git a/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.js b/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.js index 5732175df5bd92..bcb83d384743d2 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.js +++ b/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.js @@ -1,29 +1,25 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; +import IconButton from '@mui/material/IconButton'; import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded'; import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded'; function ToggleColorMode({ mode, toggleColorMode }) { return ( - <Box sx={{ maxWidth: '32px' }}> - <Button - variant="text" - onClick={toggleColorMode} - size="small" - aria-label="button to toggle theme" - sx={{ minWidth: '32px', height: '32px', p: '4px' }} - > - {mode === 'dark' ? ( - <WbSunnyRoundedIcon fontSize="small" /> - ) : ( - <ModeNightRoundedIcon fontSize="small" /> - )} - </Button> - </Box> + <IconButton + onClick={toggleColorMode} + color="primary" + aria-label="Theme toggle button" + size="small" + > + {mode === 'dark' ? ( + <WbSunnyRoundedIcon fontSize="small" /> + ) : ( + <ModeNightRoundedIcon fontSize="small" /> + )} + </IconButton> ); } diff --git a/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.tsx index 6fdd215fa2e8a3..9ccb9982009d24 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.tsx +++ b/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { PaletteMode } from '@mui/material'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; +import IconButton from '@mui/material/IconButton'; import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded'; import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded'; @@ -11,24 +10,22 @@ interface ToggleColorModeProps { toggleColorMode: () => void; } -function ToggleColorMode({ mode, toggleColorMode }: ToggleColorModeProps) { +export default function ToggleColorMode({ + mode, + toggleColorMode, +}: ToggleColorModeProps) { return ( - <Box sx={{ maxWidth: '32px' }}> - <Button - variant="text" - onClick={toggleColorMode} - size="small" - aria-label="button to toggle theme" - sx={{ minWidth: '32px', height: '32px', p: '4px' }} - > - {mode === 'dark' ? ( - <WbSunnyRoundedIcon fontSize="small" /> - ) : ( - <ModeNightRoundedIcon fontSize="small" /> - )} - </Button> - </Box> + <IconButton + onClick={toggleColorMode} + color="primary" + aria-label="Theme toggle button" + size="small" + > + {mode === 'dark' ? ( + <WbSunnyRoundedIcon fontSize="small" /> + ) : ( + <ModeNightRoundedIcon fontSize="small" /> + )} + </IconButton> ); } - -export default ToggleColorMode; diff --git a/docs/data/material/getting-started/templates/landing-page/getLPTheme.js b/docs/data/material/getting-started/templates/landing-page/getLPTheme.js index f4f27dfbc6c137..8ae6d57199e6fc 100644 --- a/docs/data/material/getting-started/templates/landing-page/getLPTheme.js +++ b/docs/data/material/getting-started/templates/landing-page/getLPTheme.js @@ -1,56 +1,70 @@ -import { alpha } from '@mui/material/styles'; -import { red } from '@mui/material/colors'; +import { createTheme, alpha } from '@mui/material/styles'; -export const brand = { - 50: '#F0F7FF', - 100: '#CEE5FD', - 200: '#9CCCFC', - 300: '#55A6F6', - 400: '#0A66C2', - 500: '#0959AA', - 600: '#064079', - 700: '#033363', - 800: '#02294F', - 900: '#021F3B', -}; +const customTheme = createTheme(); -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 brand = { + 50: 'hsl(210, 100%, 97%)', + 100: 'hsl(210, 100%, 90%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', }; export const gray = { - 50: '#FBFCFE', - 100: '#EAF0F5', - 200: '#D6E2EB', - 300: '#BFCCD9', - 400: '#94A6B8', - 500: '#5B6B7C', - 600: '#4C5967', - 700: '#364049', - 800: '#131B20', - 900: '#090E10', + 50: 'hsl(220, 60%, 99%)', + 100: 'hsl(220, 35%, 94%)', + 200: 'hsl(220, 35%, 88%)', + 300: 'hsl(220, 25%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 25%, 35%)', + 700: 'hsl(220, 25%, 25%)', + 800: 'hsl(220, 25%, 10%)', + 900: 'hsl(220, 30%, 5%)', }; export const green = { - 50: '#F6FEF6', - 100: '#E3FBE3', - 200: '#C7F7C7', - 300: '#A1E8A1', - 400: '#51BC51', - 500: '#1F7A1F', - 600: '#136C13', - 700: '#0A470A', - 800: '#042F04', - 900: '#021D02', + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', +}; + +export const red = { + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 20%)', + 800: 'hsl(0, 95%, 16%)', + 900: 'hsl(0, 93%, 12%)', }; const getDesignTokens = (mode) => ({ @@ -62,32 +76,43 @@ const getDesignTokens = (mode) => ({ dark: brand[800], contrastText: brand[50], ...(mode === 'dark' && { - contrastText: brand[100], + contrastText: brand[50], light: brand[300], main: brand[400], dark: brand[800], }), }, - secondary: { - light: secondary[300], - main: secondary[500], - dark: secondary[800], + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], ...(mode === 'dark' && { - light: secondary[400], - main: secondary[500], - dark: secondary[900], + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], }), }, warning: { - main: '#F7B538', - dark: '#F79F00', - ...(mode === 'dark' && { main: '#F7B538', dark: '#F79F00' }), + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), }, error: { - light: red[50], - main: red[500], - dark: red[700], - ...(mode === 'dark' && { light: '#D32F2F', main: '#D32F2F', dark: '#B22A2A' }), + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), }, success: { light: green[300], @@ -100,27 +125,18 @@ const getDesignTokens = (mode) => ({ }), }, 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], + ...gray, }, 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] }), + default: 'hsl(0, 0%, 100%)', + paper: gray[100], + ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), }, text: { primary: gray[800], secondary: gray[600], - ...(mode === 'dark' && { primary: '#fff', secondary: gray[400] }), + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), }, action: { selected: `${alpha(brand[200], 0.2)}`, @@ -132,51 +148,54 @@ const getDesignTokens = (mode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: 60, + fontSize: customTheme.typography.pxToRem(60), fontWeight: 600, - lineHeight: 78 / 70, - letterSpacing: -0.2, + lineHeight: 1.2, + letterSpacing: -0.5, }, h2: { - fontSize: 48, + fontSize: customTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: 42, + fontSize: customTheme.typography.pxToRem(42), lineHeight: 1.2, }, h4: { - fontSize: 36, + fontSize: customTheme.typography.pxToRem(36), fontWeight: 500, lineHeight: 1.5, }, h5: { - fontSize: 20, + fontSize: customTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle1: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: 16, + fontSize: customTheme.typography.pxToRem(16), }, body1: { + fontSize: customTheme.typography.pxToRem(15), fontWeight: 400, - fontSize: 15, }, body2: { + fontSize: customTheme.typography.pxToRem(14), fontWeight: 400, - fontSize: 14, }, caption: { + fontSize: customTheme.typography.pxToRem(12), fontWeight: 400, - fontSize: 12, }, }, + shape: { + borderRadius: 12, + }, }); export default function getLPTheme(mode) { @@ -192,7 +211,7 @@ export default function getLPTheme(mode) { root: ({ theme }) => ({ padding: 8, overflow: 'clip', - backgroundColor: '#fff', + backgroundColor: 'hsl(0, 0%, 100%)', border: '1px solid', borderColor: gray[100], ':before': { @@ -219,6 +238,7 @@ export default function getLPTheme(mode) { border: 'none', borderRadius: 8, '&:hover': { backgroundColor: gray[100] }, + '&:focus-visible': { backgroundColor: 'transparent' }, ...(theme.palette.mode === 'dark' && { '&:hover': { backgroundColor: gray[800] }, }), @@ -230,38 +250,6 @@ export default function getLPTheme(mode) { root: { mb: 20, border: 'none' }, }, }, - 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)}`, - }), - }), - }, - }, - 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] }, - }), - }), - }, - }, MuiButtonBase: { defaultProps: { disableTouchRipple: true, @@ -270,9 +258,9 @@ export default function getLPTheme(mode) { styleOverrides: { root: { boxSizing: 'border-box', - transition: 'all 100ms ease-in', + transition: 'all 100ms ease', '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, + outline: `3px solid ${alpha(brand[400], 0.5)}`, outlineOffset: '2px', }, }, @@ -281,65 +269,126 @@ export default function getLPTheme(mode) { MuiButton: { styleOverrides: { root: ({ theme, ownerState }) => ({ - boxSizing: 'border-box', boxShadow: 'none', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, textTransform: 'none', - '&:active': { - transform: 'scale(0.98)', - }, ...(ownerState.size === 'small' && { - maxHeight: '32px', + height: '2rem', // 32px + padding: '0 0.5rem', }), ...(ownerState.size === 'medium' && { - height: '40px', + height: '2.5rem', // 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.4)}`, - outline: `1px solid ${brand[700]}`, + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, '&:hover': { - background: brand[400], - backgroundImage: 'none', - boxShadow: `0 0 0 1px ${alpha(brand[300], 0.5)}`, + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, }, }), ...(ownerState.variant === 'outlined' && { + color: brand[700], backgroundColor: alpha(brand[300], 0.1), - borderColor: brand[300], - color: brand[500], + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', }, - }), - ...(ownerState.variant === 'text' && { - color: brand[500], - '&:hover': { + '&:active': { backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', }, }), + ...(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: alpha(gray[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + }, + }), ...(theme.palette.mode === 'dark' && { ...(ownerState.variant === 'outlined' && { + color: brand[200], backgroundColor: alpha(brand[600], 0.1), - borderColor: brand[700], - color: brand[300], + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', }, - }), - ...(ownerState.variant === 'text' && { - color: brand[300], - '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', }, }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + color: gray[300], + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[700], 0.3), + }, + }), }), }), }, @@ -347,30 +396,26 @@ export default function getLPTheme(mode) { MuiCard: { styleOverrides: { root: ({ theme, ownerState }) => ({ + transition: 'all 100ms ease', backgroundColor: gray[50], - borderRadius: 10, - border: `1px solid ${alpha(gray[200], 0.8)}`, + borderRadius: theme.shape.borderRadius, + border: `1px solid ${alpha(gray[200], 0.5)}`, boxShadow: 'none', - transition: 'background-color, border, 80ms ease', ...(ownerState.variant === 'outlined' && { - background: `linear-gradient(to bottom, #FFF, ${gray[50]})`, - '&:hover': { - borderColor: brand[300], - boxShadow: `0 0 24px ${brand[100]}`, - }, + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, }), ...(theme.palette.mode === 'dark' && { backgroundColor: alpha(gray[800], 0.6), border: `1px solid ${alpha(gray[700], 0.3)}`, ...(ownerState.variant === 'outlined' && { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( gray[800], 0.5, )})`, - '&:hover': { - borderColor: brand[700], - boxShadow: `0 0 24px ${brand[800]}`, - }, }), }), }), @@ -379,18 +424,17 @@ export default function getLPTheme(mode) { MuiChip: { styleOverrides: { root: ({ theme }) => ({ - alignSelf: 'center', py: 1.5, px: 0.5, - background: `linear-gradient(to bottom right, ${brand[50]}, ${brand[100]})`, border: '1px solid', - borderColor: `${alpha(brand[500], 0.3)}`, - fontWeight: '600', + borderColor: brand[100], + fontWeight: 600, + backgroundColor: brand[50], '&:hover': { backgroundColor: brand[500], }, '&:focus-visible': { - borderColor: brand[800], + borderColor: brand[300], backgroundColor: brand[200], }, '& .MuiChip-label': { @@ -400,14 +444,14 @@ export default function getLPTheme(mode) { color: brand[500], }, ...(theme.palette.mode === 'dark' && { - background: `linear-gradient(to bottom right, ${brand[700]}, ${brand[900]})`, - borderColor: `${alpha(brand[500], 0.5)}`, + borderColor: `${alpha(brand[500], 0.2)}`, + backgroundColor: `${alpha(brand[900], 0.5)}`, '&:hover': { backgroundColor: brand[600], }, '&:focus-visible': { - borderColor: brand[200], - backgroundColor: brand[600], + borderColor: brand[500], + backgroundColor: brand[800], }, '& .MuiChip-label': { color: brand[200], @@ -429,13 +473,54 @@ export default function getLPTheme(mode) { }), }, }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...(ownerState.size === 'small' && { + height: '2rem', + width: '2rem', + }), + ...(ownerState.size === 'medium' && { + height: '2.5rem', + width: '2.5rem', + }), + color: brand[500], + '&: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], + }, + }), + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + }, + }, MuiLink: { defaultProps: { underline: 'none', }, styleOverrides: { root: ({ theme }) => ({ - color: brand[600], + color: brand[700], fontWeight: 500, position: 'relative', textDecoration: 'none', @@ -454,6 +539,11 @@ export default function getLPTheme(mode) { 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], }), @@ -463,26 +553,109 @@ export default function getLPTheme(mode) { MuiMenuItem: { styleOverrides: { root: ({ theme }) => ({ - borderRadius: '99px', - color: gray[500], + paddingRight: 6, + paddingLeft: 6, + color: gray[700], + fontSize: '0.875rem', fontWeight: 500, + borderRadius: theme.shape.borderRadius, ...(theme.palette.mode === 'dark' && { - color: gray[300], + color: gray[200], }), }), }, }, - MuiPaper: { + MuiOutlinedInput: { styleOverrides: { - root: ({ theme }) => ({ - backgroundImage: 'none', - backgroundColor: gray[100], + 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': { + fontSize: '1rem', + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + boxSizing: 'border-box', + flexGrow: 1, + height: '40px', + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) 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' && { - backgroundColor: alpha(gray[900], 0.6), + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, + maxHeight: '6px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + fontSize: '1rem', + '&::placeholder': { + opacity: 1, + color: gray[500], + }, + }, + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px hsl(210, 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], + }, + }), }), }), }, }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiStack: { + defaultProps: { + useFlexGap: true, + }, + }, MuiSwitch: { styleOverrides: { root: ({ theme }) => ({ @@ -505,8 +678,8 @@ export default function getLPTheme(mode) { borderRadius: 50, }, '& .MuiSwitch-thumb': { - boxShadow: '0 0 2px 2px rgba(0, 0, 0, 0.2)', - backgroundColor: '#FFF', + boxShadow: '0 0 2px 2px hsla(220, 0%, 0%, 0.2)', + backgroundColor: 'hsl(0, 0%, 100%)', width: 16, height: 16, margin: 2, @@ -527,8 +700,8 @@ export default function getLPTheme(mode) { }, }, '& .MuiSwitch-thumb': { - boxShadow: '0 0 2px 2px rgba(0, 0, 0, 0.2)', - backgroundColor: '#FFF', + boxShadow: '0 0 2px 2px hsla(220, 0%, 0%, 0.2)', + backgroundColor: 'hsl(0, 0%, 100%)', width: 16, height: 16, margin: 2, @@ -539,72 +712,40 @@ export default function getLPTheme(mode) { height: 24, width: 24, padding: 0, - color: '#fff', + color: 'hsl(0, 0%, 100%)', '&.Mui-checked + .MuiSwitch-track': { opacity: 1, }, }, }, }, - MuiTextField: { + MuiToggleButtonGroup: { styleOverrides: { root: ({ theme }) => ({ - '& label .Mui-focused': { - color: 'white', - }, - '& .MuiInputBase-input': { - boxSizing: 'border-box', - '&::placeholder': { - opacity: 0.7, - }, - }, - '& .MuiOutlinedInput-root': { - boxSizing: 'border-box', - minWidth: 280, - minHeight: 40, - height: '100%', - borderRadius: '10px', - border: '1px solid', - borderColor: gray[200], - transition: 'border-color 120ms ease-in', - '& fieldset': { - border: 'none', - boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)', - background: `${alpha('#FFF', 0.3)}`, - }, - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - borderColor: brand[400], - outline: '4px solid', - outlineColor: brand[200], - }, + borderRadius: theme.shape.borderRadius, + boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, + '& .Mui-selected': { + color: brand[500], }, ...(theme.palette.mode === 'dark' && { - '& .MuiOutlinedInput-root': { - boxSizing: 'border-box', - minWidth: 280, - minHeight: 40, - height: '100%', - borderRadius: '10px', - border: '1px solid', - borderColor: gray[600], - transition: 'border-color 120ms ease-in', - '& fieldset': { - border: 'none', - boxShadow: ' 0px 2px 4px rgba(0, 0, 0, 0.4)', - background: `${alpha(gray[800], 0.4)}`, - }, - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - borderColor: brand[400], - outline: '4px solid', - outlineColor: alpha(brand[500], 0.5), - }, + '& .Mui-selected': { + color: 'hsl(0, 0%, 100%)', }, + boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: theme.shape.borderRadius, + fontWeight: 500, + ...(theme.palette.mode === 'dark' && { + color: gray[400], + '&.Mui-selected': { color: brand[300] }, }), }), }, diff --git a/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx b/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx index 2186784d2735ae..c513c17f63b408 100644 --- a/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx +++ b/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx @@ -1,6 +1,5 @@ import type {} from '@mui/material/themeCssVarsAugmentation'; -import { ThemeOptions, alpha } from '@mui/material/styles'; -import { red } from '@mui/material/colors'; +import { createTheme, ThemeOptions, alpha } from '@mui/material/styles'; import { PaletteMode } from '@mui/material'; declare module '@mui/material/styles/createPalette' { @@ -20,56 +19,71 @@ declare module '@mui/material/styles/createPalette' { 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', -}; +const customTheme = createTheme(); -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 brand = { + 50: 'hsl(210, 100%, 97%)', + 100: 'hsl(210, 100%, 90%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', }; export const gray = { - 50: '#FBFCFE', - 100: '#EAF0F5', - 200: '#D6E2EB', - 300: '#BFCCD9', - 400: '#94A6B8', - 500: '#5B6B7C', - 600: '#4C5967', - 700: '#364049', - 800: '#131B20', - 900: '#090E10', + 50: 'hsl(220, 60%, 99%)', + 100: 'hsl(220, 35%, 94%)', + 200: 'hsl(220, 35%, 88%)', + 300: 'hsl(220, 25%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 25%, 35%)', + 700: 'hsl(220, 25%, 25%)', + 800: 'hsl(220, 25%, 10%)', + 900: 'hsl(220, 30%, 5%)', }; export const green = { - 50: '#F6FEF6', - 100: '#E3FBE3', - 200: '#C7F7C7', - 300: '#A1E8A1', - 400: '#51BC51', - 500: '#1F7A1F', - 600: '#136C13', - 700: '#0A470A', - 800: '#042F04', - 900: '#021D02', + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', +}; + +export const red = { + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 20%)', + 800: 'hsl(0, 95%, 16%)', + 900: 'hsl(0, 93%, 12%)', }; const getDesignTokens = (mode: PaletteMode) => ({ @@ -81,32 +95,43 @@ const getDesignTokens = (mode: PaletteMode) => ({ dark: brand[800], contrastText: brand[50], ...(mode === 'dark' && { - contrastText: brand[100], + contrastText: brand[50], light: brand[300], main: brand[400], dark: brand[800], }), }, - secondary: { - light: secondary[300], - main: secondary[500], - dark: secondary[800], + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], ...(mode === 'dark' && { - light: secondary[400], - main: secondary[500], - dark: secondary[900], + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], }), }, warning: { - main: '#F7B538', - dark: '#F79F00', - ...(mode === 'dark' && { main: '#F7B538', dark: '#F79F00' }), + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), }, error: { - light: red[50], - main: red[500], - dark: red[700], - ...(mode === 'dark' && { light: '#D32F2F', main: '#D32F2F', dark: '#B22A2A' }), + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), }, success: { light: green[300], @@ -119,27 +144,18 @@ const getDesignTokens = (mode: PaletteMode) => ({ }), }, 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], + ...gray, }, 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] }), + default: 'hsl(0, 0%, 100%)', + paper: gray[100], + ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), }, text: { primary: gray[800], secondary: gray[600], - ...(mode === 'dark' && { primary: '#fff', secondary: gray[400] }), + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), }, action: { selected: `${alpha(brand[200], 0.2)}`, @@ -151,51 +167,54 @@ const getDesignTokens = (mode: PaletteMode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: 60, + fontSize: customTheme.typography.pxToRem(60), fontWeight: 600, - lineHeight: 78 / 70, - letterSpacing: -0.2, + lineHeight: 1.2, + letterSpacing: -0.5, }, h2: { - fontSize: 48, + fontSize: customTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: 42, + fontSize: customTheme.typography.pxToRem(42), lineHeight: 1.2, }, h4: { - fontSize: 36, + fontSize: customTheme.typography.pxToRem(36), fontWeight: 500, lineHeight: 1.5, }, h5: { - fontSize: 20, + fontSize: customTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle1: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: 16, + fontSize: customTheme.typography.pxToRem(16), }, body1: { + fontSize: customTheme.typography.pxToRem(15), fontWeight: 400, - fontSize: 15, }, body2: { + fontSize: customTheme.typography.pxToRem(14), fontWeight: 400, - fontSize: 14, }, caption: { + fontSize: customTheme.typography.pxToRem(12), fontWeight: 400, - fontSize: 12, }, }, + shape: { + borderRadius: 12, + }, }); export default function getLPTheme(mode: PaletteMode): ThemeOptions { @@ -211,7 +230,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { root: ({ theme }) => ({ padding: 8, overflow: 'clip', - backgroundColor: '#fff', + backgroundColor: 'hsl(0, 0%, 100%)', border: '1px solid', borderColor: gray[100], ':before': { @@ -238,6 +257,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { border: 'none', borderRadius: 8, '&:hover': { backgroundColor: gray[100] }, + '&:focus-visible': { backgroundColor: 'transparent' }, ...(theme.palette.mode === 'dark' && { '&:hover': { backgroundColor: gray[800] }, }), @@ -249,38 +269,6 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { root: { mb: 20, border: 'none' }, }, }, - 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)}`, - }), - }), - }, - }, - 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] }, - }), - }), - }, - }, MuiButtonBase: { defaultProps: { disableTouchRipple: true, @@ -289,9 +277,9 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { styleOverrides: { root: { boxSizing: 'border-box', - transition: 'all 100ms ease-in', + transition: 'all 100ms ease', '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, + outline: `3px solid ${alpha(brand[400], 0.5)}`, outlineOffset: '2px', }, }, @@ -300,65 +288,126 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { MuiButton: { styleOverrides: { root: ({ theme, ownerState }) => ({ - boxSizing: 'border-box', boxShadow: 'none', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, textTransform: 'none', - '&:active': { - transform: 'scale(0.98)', - }, ...(ownerState.size === 'small' && { - maxHeight: '32px', + height: '2rem', // 32px + padding: '0 0.5rem', }), ...(ownerState.size === 'medium' && { - height: '40px', + height: '2.5rem', // 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.4)}`, - outline: `1px solid ${brand[700]}`, + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, '&:hover': { - background: brand[400], - backgroundImage: 'none', - boxShadow: `0 0 0 1px ${alpha(brand[300], 0.5)}`, + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, }, }), ...(ownerState.variant === 'outlined' && { + color: brand[700], backgroundColor: alpha(brand[300], 0.1), - borderColor: brand[300], - color: brand[500], + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', }, - }), - ...(ownerState.variant === 'text' && { - color: brand[500], - '&:hover': { + '&:active': { backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', }, }), + ...(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: alpha(gray[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), + }, + }), ...(theme.palette.mode === 'dark' && { ...(ownerState.variant === 'outlined' && { + color: brand[200], backgroundColor: alpha(brand[600], 0.1), - borderColor: brand[700], - color: brand[300], + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', }, - }), - ...(ownerState.variant === 'text' && { - color: brand[300], - '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', }, }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + color: gray[300], + backgroundColor: alpha(gray[600], 0.1), + borderColor: alpha(gray[700], 0.5), + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[700], 0.3), + }, + }), }), }), }, @@ -366,30 +415,26 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { MuiCard: { styleOverrides: { root: ({ theme, ownerState }) => ({ + transition: 'all 100ms ease', backgroundColor: gray[50], - borderRadius: 10, - border: `1px solid ${alpha(gray[200], 0.8)}`, + borderRadius: theme.shape.borderRadius, + border: `1px solid ${alpha(gray[200], 0.5)}`, boxShadow: 'none', - transition: 'background-color, border, 80ms ease', ...(ownerState.variant === 'outlined' && { - background: `linear-gradient(to bottom, #FFF, ${gray[50]})`, - '&:hover': { - borderColor: brand[300], - boxShadow: `0 0 24px ${brand[100]}`, - }, + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, }), ...(theme.palette.mode === 'dark' && { backgroundColor: alpha(gray[800], 0.6), border: `1px solid ${alpha(gray[700], 0.3)}`, ...(ownerState.variant === 'outlined' && { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( gray[800], 0.5, )})`, - '&:hover': { - borderColor: brand[700], - boxShadow: `0 0 24px ${brand[800]}`, - }, }), }), }), @@ -398,18 +443,17 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { MuiChip: { styleOverrides: { root: ({ theme }) => ({ - alignSelf: 'center', py: 1.5, px: 0.5, - background: `linear-gradient(to bottom right, ${brand[50]}, ${brand[100]})`, border: '1px solid', - borderColor: `${alpha(brand[500], 0.3)}`, - fontWeight: '600', + borderColor: brand[100], + fontWeight: 600, + backgroundColor: brand[50], '&:hover': { backgroundColor: brand[500], }, '&:focus-visible': { - borderColor: brand[800], + borderColor: brand[300], backgroundColor: brand[200], }, '& .MuiChip-label': { @@ -419,14 +463,14 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { color: brand[500], }, ...(theme.palette.mode === 'dark' && { - background: `linear-gradient(to bottom right, ${brand[700]}, ${brand[900]})`, - borderColor: `${alpha(brand[500], 0.5)}`, + borderColor: `${alpha(brand[500], 0.2)}`, + backgroundColor: `${alpha(brand[900], 0.5)}`, '&:hover': { backgroundColor: brand[600], }, '&:focus-visible': { - borderColor: brand[200], - backgroundColor: brand[600], + borderColor: brand[500], + backgroundColor: brand[800], }, '& .MuiChip-label': { color: brand[200], @@ -448,13 +492,54 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { }), }, }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...(ownerState.size === 'small' && { + height: '2rem', + width: '2rem', + }), + ...(ownerState.size === 'medium' && { + height: '2.5rem', + width: '2.5rem', + }), + color: brand[500], + '&: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], + }, + }), + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + }, + }, MuiLink: { defaultProps: { underline: 'none', }, styleOverrides: { root: ({ theme }) => ({ - color: brand[600], + color: brand[700], fontWeight: 500, position: 'relative', textDecoration: 'none', @@ -473,6 +558,11 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { 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], }), @@ -482,26 +572,109 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { MuiMenuItem: { styleOverrides: { root: ({ theme }) => ({ - borderRadius: '99px', - color: gray[500], + paddingRight: 6, + paddingLeft: 6, + color: gray[700], + fontSize: '0.875rem', fontWeight: 500, + borderRadius: theme.shape.borderRadius, ...(theme.palette.mode === 'dark' && { - color: gray[300], + color: gray[200], }), }), }, }, - MuiPaper: { + MuiOutlinedInput: { styleOverrides: { - root: ({ theme }) => ({ - backgroundImage: 'none', - backgroundColor: gray[100], + 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': { + fontSize: '1rem', + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + boxSizing: 'border-box', + flexGrow: 1, + height: '40px', + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) 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' && { - backgroundColor: alpha(gray[900], 0.6), + 'input:-webkit-autofill': { + WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, + maxHeight: '6px', + borderRadius: '8px', + }, + '& .MuiInputBase-input': { + fontSize: '1rem', + '&::placeholder': { + opacity: 1, + color: gray[500], + }, + }, + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px hsl(210, 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], + }, + }), }), }), }, }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiStack: { + defaultProps: { + useFlexGap: true, + }, + }, MuiSwitch: { styleOverrides: { root: ({ theme }) => ({ @@ -524,8 +697,8 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { borderRadius: 50, }, '& .MuiSwitch-thumb': { - boxShadow: '0 0 2px 2px rgba(0, 0, 0, 0.2)', - backgroundColor: '#FFF', + boxShadow: '0 0 2px 2px hsla(220, 0%, 0%, 0.2)', + backgroundColor: 'hsl(0, 0%, 100%)', width: 16, height: 16, margin: 2, @@ -546,8 +719,8 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { }, }, '& .MuiSwitch-thumb': { - boxShadow: '0 0 2px 2px rgba(0, 0, 0, 0.2)', - backgroundColor: '#FFF', + boxShadow: '0 0 2px 2px hsla(220, 0%, 0%, 0.2)', + backgroundColor: 'hsl(0, 0%, 100%)', width: 16, height: 16, margin: 2, @@ -558,72 +731,40 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions { height: 24, width: 24, padding: 0, - color: '#fff', + color: 'hsl(0, 0%, 100%)', '&.Mui-checked + .MuiSwitch-track': { opacity: 1, }, }, }, }, - MuiTextField: { + MuiToggleButtonGroup: { styleOverrides: { root: ({ theme }) => ({ - '& label .Mui-focused': { - color: 'white', - }, - '& .MuiInputBase-input': { - boxSizing: 'border-box', - '&::placeholder': { - opacity: 0.7, - }, - }, - '& .MuiOutlinedInput-root': { - boxSizing: 'border-box', - minWidth: 280, - minHeight: 40, - height: '100%', - borderRadius: '10px', - border: '1px solid', - borderColor: gray[200], - transition: 'border-color 120ms ease-in', - '& fieldset': { - border: 'none', - boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)', - background: `${alpha('#FFF', 0.3)}`, - }, - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - borderColor: brand[400], - outline: '4px solid', - outlineColor: brand[200], - }, + borderRadius: theme.shape.borderRadius, + boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, + '& .Mui-selected': { + color: brand[500], }, ...(theme.palette.mode === 'dark' && { - '& .MuiOutlinedInput-root': { - boxSizing: 'border-box', - minWidth: 280, - minHeight: 40, - height: '100%', - borderRadius: '10px', - border: '1px solid', - borderColor: gray[600], - transition: 'border-color 120ms ease-in', - '& fieldset': { - border: 'none', - boxShadow: ' 0px 2px 4px rgba(0, 0, 0, 0.4)', - background: `${alpha(gray[800], 0.4)}`, - }, - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - borderColor: brand[400], - outline: '4px solid', - outlineColor: alpha(brand[500], 0.5), - }, + '& .Mui-selected': { + color: 'hsl(0, 0%, 100%)', }, + boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: theme.shape.borderRadius, + fontWeight: 500, + ...(theme.palette.mode === 'dark' && { + color: gray[400], + '&.Mui-selected': { color: brand[300] }, }), }), }, diff --git a/docs/data/material/getting-started/templates/sign-in-side/Content.js b/docs/data/material/getting-started/templates/sign-in-side/Content.js index f656245d4816c1..5035c73d0bf86d 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/Content.js +++ b/docs/data/material/getting-started/templates/sign-in-side/Content.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; @@ -46,13 +47,9 @@ export default function Content() { maxWidth: 450, }} > - <SitemarkIcon - sx={{ - fontSize: 150, - height: 'fit-content', - display: { xs: 'none', md: 'flex' }, - }} - /> + <Box sx={{ display: { xs: 'none', md: 'flex' } }}> + <SitemarkIcon /> + </Box> {items.map((item) => ( <Stack direction="row" gap={2}> {item.icon} diff --git a/docs/data/material/getting-started/templates/sign-in-side/Content.tsx b/docs/data/material/getting-started/templates/sign-in-side/Content.tsx index f656245d4816c1..5035c73d0bf86d 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/Content.tsx +++ b/docs/data/material/getting-started/templates/sign-in-side/Content.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; @@ -46,13 +47,9 @@ export default function Content() { maxWidth: 450, }} > - <SitemarkIcon - sx={{ - fontSize: 150, - height: 'fit-content', - display: { xs: 'none', md: 'flex' }, - }} - /> + <Box sx={{ display: { xs: 'none', md: 'flex' } }}> + <SitemarkIcon /> + </Box> {items.map((item) => ( <Stack direction="row" gap={2}> {item.icon} diff --git a/docs/data/material/getting-started/templates/sign-in-side/CustomIcons.js b/docs/data/material/getting-started/templates/sign-in-side/CustomIcons.js index e4a8d735bb75e6..3cf63c3501ba0c 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/CustomIcons.js +++ b/docs/data/material/getting-started/templates/sign-in-side/CustomIcons.js @@ -1,87 +1,57 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; - import SvgIcon from '@mui/material/SvgIcon'; -function SitemarkIcon({ sx }) { +export function SitemarkIcon() { return ( - <SvgIcon sx={sx}> + <SvgIcon sx={{ height: 21, width: 100, mr: 2 }}> <svg - width="380" - height="81" - viewBox="0 0 380 81" + width={86} + height={19} + viewBox="0 0 86 19" fill="none" xmlns="http://www.w3.org/2000/svg" > <path - d="M0.039093 54.3012L27.0897 42.2617L42.6595 51.2914L45.8049 80.915L26.6179 80.7561L29.4487 60.1623L26.1461 58.2614L9.9471 70.9352L0.039093 54.3012Z" fill="#B4C0D3" + d="m.787 12.567 6.055-2.675 3.485 2.006.704 6.583-4.295-.035.634-4.577-.74-.422-3.625 2.817-2.218-3.697Z" /> <path - d="M44.3904 50.0223L68.296 67.6062L77.7321 50.656L58.5444 42.8937V39.0917L77.7321 31.1709L68.296 14.3789L44.3904 31.963V50.0223Z" fill="#00D3AB" + d="m10.714 11.616 5.352 3.908 2.112-3.767-4.295-1.725v-.845l4.295-1.76-2.112-3.732-5.352 3.908v4.013Z" /> <path - d="M42.6595 30.5377L45.8049 0.914062L26.6179 1.2308L29.4487 21.8249L26.1461 23.7258L9.78985 11.0526L0.039093 27.5277L27.0897 39.5673L42.6595 30.5377Z" fill="#4876EF" + d="m10.327 7.286.704-6.583-4.295.07.634 4.577-.74.422-3.66-2.816L.786 6.617l6.055 2.676 3.485-2.007Z" /> <path - d="M141.744 37.3657V65.1185H152.07V29.75H137.032V37.3657H141.744Z" fill="#4876EE" + d="M32.507 8.804v6.167h2.312v-7.86h-3.366v1.693h1.054ZM32.435 6.006c.212.22.535.33.968.33.434 0 .751-.11.953-.33.213-.23.318-.516.318-.86 0-.354-.105-.641-.318-.86-.202-.23-.52-.345-.953-.345-.433 0-.756.115-.968.344-.202.22-.303.507-.303.86 0 .345.101.632.303.861ZM24.46 14.799c.655.296 1.46.444 2.413.444.896 0 1.667-.139 2.312-.416.645-.277 1.141-.664 1.488-1.162.357-.506.535-1.094.535-1.764 0-.65-.169-1.2-.506-1.649-.328-.459-.785-.818-1.373-1.076-.587-.267-1.266-.435-2.037-.502l-.809-.071c-.481-.039-.828-.168-1.04-.388a1.08 1.08 0 0 1-.318-.774c0-.23.058-.44.173-.631.116-.201.29-.359.52-.474.241-.114.535-.172.882-.172.366 0 .67.067.91.201.053.029.104.059.15.09l.012.009.052.037c.146.111.263.243.35.395.125.21.188.444.188.703h2.311c0-.689-.159-1.286-.476-1.793-.318-.516-.776-.913-1.373-1.19-.588-.287-1.296-.43-2.124-.43-.79 0-1.474.133-2.052.4a3.131 3.131 0 0 0-1.358 1.12c-.318.487-.477 1.066-.477 1.735 0 .927.314 1.673.94 2.237.626.564 1.464.89 2.514.976l.794.071c.645.058 1.113.187 1.401.388a.899.899 0 0 1 .434.788 1.181 1.181 0 0 1-.231.717c-.154.201-.38.36-.68.474-.298.115-.669.172-1.112.172-.49 0-.89-.067-1.199-.2-.308-.144-.539-.33-.694-.56a1.375 1.375 0 0 1-.216-.746h-2.297c0 .679.168 1.281.505 1.807.337.517.834.928 1.489 1.234ZM39.977 15.07c-.8 0-1.445-.095-1.936-.286a2.03 2.03 0 0 1-1.084-.99c-.221-.469-.332-1.1-.332-1.893V8.789h-1.2V7.11h1.2V4.988h2.153V7.11h2.312V8.79h-2.312v3.198c0 .373.096.66.289.86.202.192.486.287.852.287h1.17v1.937h-1.112Z" /> <path - d="M141.421 24.7785C142.368 25.768 143.809 26.2626 145.745 26.2626C147.682 26.2626 149.101 25.768 150.004 24.7785C150.952 23.7455 151.424 22.4545 151.424 20.906C151.424 19.3137 150.952 18.0229 150.004 17.0334C149.101 16.0009 147.682 15.4844 145.745 15.4844C143.809 15.4844 142.368 16.0009 141.421 17.0334C140.518 18.0229 140.066 19.3137 140.066 20.906C140.066 22.4545 140.518 23.7455 141.421 24.7785Z" fill="#4876EE" - /> - <path - d="M105.795 64.3433C108.72 65.677 112.313 66.3444 116.572 66.3444C120.574 66.3444 124.016 65.7196 126.899 64.4723C129.782 63.2249 131.998 61.4819 133.547 59.2441C135.139 56.9637 135.935 54.3177 135.935 51.3055C135.935 48.3798 135.183 45.9056 133.677 43.8831C132.213 41.818 130.17 40.2044 127.544 39.043C124.92 37.8379 121.887 37.0849 118.444 36.784L114.83 36.4613C112.679 36.2888 111.13 35.7083 110.183 34.7184C109.236 33.729 108.763 32.5669 108.763 31.2335C108.763 30.2004 109.022 29.2541 109.537 28.3936C110.054 27.4898 110.828 26.78 111.861 26.2634C112.937 25.7474 114.249 25.4891 115.798 25.4891C117.433 25.4891 118.789 25.79 119.864 26.3928C120.101 26.5201 120.326 26.6562 120.537 26.8008L120.588 26.8366C120.667 26.8912 120.745 26.9478 120.821 27.005C121.474 27.5044 121.994 28.0962 122.381 28.7807C122.94 29.7275 123.221 30.7814 123.221 31.9433H133.547C133.547 28.8452 132.837 26.1558 131.418 23.8755C129.998 21.5522 127.954 19.7666 125.286 18.5184C122.661 17.2276 119.499 16.582 115.798 16.582C112.269 16.582 109.215 17.1849 106.633 18.3895C104.052 19.5514 102.03 21.2295 100.567 23.4235C99.1457 25.618 98.4357 28.2215 98.4357 31.2335C98.4357 35.4069 99.8355 38.7629 102.632 41.302C105.428 43.8405 109.172 45.3034 113.862 45.6905L117.412 46.0132C120.294 46.2715 122.381 46.8525 123.672 47.7556C124.962 48.6163 125.608 49.7996 125.608 51.3055C125.608 51.9978 125.495 52.6468 125.268 53.2532C125.1 53.7032 124.87 54.1298 124.576 54.533C123.887 55.436 122.876 56.1461 121.542 56.6631C120.209 57.1791 118.552 57.4371 116.572 57.4371C114.378 57.4371 112.592 57.1365 111.216 56.533C109.839 55.8881 108.807 55.049 108.117 54.0166C107.472 52.9835 107.15 51.8652 107.15 50.6601H96.8877C96.8877 53.7152 97.6404 56.4254 99.1457 58.7921C100.652 61.1162 102.869 62.9659 105.795 64.3433Z" - fill="#4876EE" - /> - <path - d="M175.111 65.5678C171.539 65.5678 168.656 65.1371 166.462 64.2767C164.267 63.3727 162.654 61.8886 161.621 59.8236C160.632 57.7149 160.137 54.8759 160.137 51.304V37.2985H154.78V29.7472H160.137V20.1953H169.754V29.7472H180.081V37.2985H169.754V51.6916C169.754 53.3697 170.184 54.6605 171.045 55.5635C171.948 56.4238 173.217 56.8545 174.853 56.8545H180.081V65.5678H175.111Z" - fill="#4876EE" - /> - <path fillRule="evenodd" + d="M43.873 14.899c.52.23 1.117.344 1.791.344.665 0 1.252-.115 1.763-.344.51-.23.934-.55 1.271-.96.337-.412.564-.88.679-1.407h-2.124c-.096.24-.279.44-.549.603-.27.162-.616.244-1.04.244-.262 0-.497-.031-.704-.093a1.572 1.572 0 0 1-.423-.194 1.662 1.662 0 0 1-.636-.803 3.159 3.159 0 0 1-.163-.645h5.784v-.775a4.28 4.28 0 0 0-.463-1.98 3.686 3.686 0 0 0-1.343-1.477c-.578-.382-1.291-.574-2.139-.574-.645 0-1.223.115-1.733.345-.501.22-.92.52-1.257.903a4.178 4.178 0 0 0-.78 1.305c-.174.478-.26.98-.26 1.506v.287c0 .507.086 1.004.26 1.492.183.478.443.913.78 1.305.347.382.775.688 1.286.918Zm-.094-4.674.02-.09a2.507 2.507 0 0 1 .117-.356c.145-.354.356-.622.636-.804.104-.067.217-.123.339-.165.204-.071.433-.107.686-.107.395 0 .723.09.983.272.27.173.472.426.607.76a2.487 2.487 0 0 1 .16.603h-3.57c.006-.038.013-.076.022-.113Z" clipRule="evenodd" - d="M192.514 64.7963C194.837 65.8283 197.505 66.3453 200.517 66.3453C203.485 66.3453 206.111 65.8283 208.391 64.7963C210.672 63.7633 212.565 62.3219 214.07 60.4722C215.577 58.6215 216.588 56.5127 217.103 54.1465H207.616C207.186 55.2217 206.369 56.1257 205.164 56.8571C203.959 57.5884 202.409 57.9541 200.517 57.9541C199.344 57.9541 198.296 57.8155 197.373 57.5383C196.67 57.3272 196.04 57.0362 195.483 56.6641C194.192 55.8027 193.245 54.598 192.643 53.0495C192.475 52.6082 192.332 52.1468 192.212 51.6661C192.089 51.1792 191.99 50.6725 191.916 50.145H217.749V46.6597C217.749 43.4325 217.061 40.4638 215.684 37.7532C214.307 34.9989 212.306 32.783 209.682 31.1051C207.1 29.384 203.916 28.5234 200.129 28.5234C197.246 28.5234 194.664 29.04 192.384 30.0725C190.148 31.0619 188.276 32.4173 186.77 34.1384C185.264 35.8595 184.102 37.8176 183.283 40.0122C182.509 42.163 182.122 44.422 182.122 46.7885V48.0794C182.122 50.3601 182.509 52.5974 183.283 54.792C184.102 56.9434 185.264 58.9008 186.77 60.6652C188.319 62.3859 190.232 63.7633 192.514 64.7963ZM192.094 43.763C192.122 43.6263 192.152 43.4918 192.185 43.3593C192.275 42.9945 192.378 42.6448 192.496 42.3106C192.562 42.1204 192.632 41.9349 192.708 41.7546C193.353 40.1623 194.299 38.9577 195.547 38.1403C196.014 37.8348 196.519 37.5864 197.062 37.3951C197.974 37.0744 198.998 36.9139 200.129 36.9139C201.894 36.9139 203.356 37.3228 204.518 38.1403C205.723 38.9146 206.627 40.0547 207.229 41.5608C207.278 41.6823 207.324 41.806 207.369 41.9312C207.44 42.1308 207.506 42.3355 207.568 42.5455C207.659 42.8578 207.739 43.181 207.809 43.5151C207.86 43.7615 207.904 44.0135 207.943 44.2718H191.994C192.024 44.0993 192.057 43.9299 192.094 43.763Z" - fill="#4876EE" /> <path - d="M222.01 65.1179V29.7494H230.208V38.6575C230.319 38.1279 230.445 37.6197 230.587 37.1322C230.709 36.7218 230.839 36.3257 230.982 35.9453C231.886 33.5356 233.241 31.7288 235.048 30.5237C236.855 29.276 239.07 28.6523 241.696 28.6523H242.147C244.815 28.6523 247.031 29.276 248.795 30.5237C250.602 31.7288 251.958 33.5356 252.861 35.9453L252.933 36.1272L252.993 36.2935C253.034 36.176 253.077 36.0601 253.119 35.9453C254.066 33.5356 255.443 31.7288 257.25 30.5237C259.057 29.276 261.274 28.6523 263.899 28.6523H264.351C267.017 28.6523 269.255 29.276 271.062 30.5237C272.912 31.7288 274.311 33.5356 275.257 35.9453C276.204 38.355 276.678 41.367 276.678 44.9813V65.1179H266.351V44.4002C266.351 42.464 265.835 40.8936 264.802 39.689C263.812 38.4839 262.392 37.8816 260.543 37.8816C258.692 37.8816 257.229 38.5058 256.153 39.7534C255.078 40.958 254.539 42.5716 254.539 44.5942V65.1179H244.148V44.4002C244.148 42.464 243.632 40.8936 242.599 39.689C241.61 38.4839 240.211 37.8816 238.405 37.8816C236.511 37.8816 235.027 38.5058 233.951 39.7534C232.875 40.958 232.337 42.5716 232.337 44.5942V65.1179H222.01Z" fill="#4876EE" + d="M50.476 14.97V7.112h1.835v1.98a4.54 4.54 0 0 1 .173-.603c.202-.536.506-.937.91-1.205.405-.277.9-.416 1.488-.416h.101c.598 0 1.094.139 1.489.416.404.268.707.67.91 1.205l.016.04.013.037.028-.077c.212-.536.52-.937.925-1.205.405-.277.901-.416 1.489-.416h.1c.598 0 1.098.139 1.503.416.414.268.727.67.94 1.205.211.535.317 1.205.317 2.008v4.475h-2.312v-4.604c0-.43-.115-.78-.346-1.047-.222-.268-.54-.402-.954-.402-.414 0-.742.139-.982.416-.241.268-.362.626-.362 1.076v4.56h-2.326v-4.603c0-.43-.115-.78-.346-1.047-.222-.268-.535-.402-.94-.402-.423 0-.756.139-.996.416-.241.268-.362.626-.362 1.076v4.56h-2.311Z" /> <path + fill="#4876EE" fillRule="evenodd" + d="M68.888 13.456v1.515h1.834v-4.82c0-.726-.144-1.319-.433-1.778-.289-.468-.712-.817-1.271-1.047-.549-.23-1.228-.344-2.037-.344a27.76 27.76 0 0 0-.896.014c-.318.01-.626.024-.924.043l-.229.016a36.79 36.79 0 0 0-.552.042v1.936a81.998 81.998 0 0 1 1.733-.09 37.806 37.806 0 0 1 1.171-.025c.424 0 .732.1.925.301.193.201.289.502.289.904v.029h-1.43c-.704 0-1.325.09-1.864.272-.54.172-.959.445-1.257.818-.299.363-.448.832-.448 1.405 0 .526.12.98.361 1.363.24.373.573.66.997.86.433.201.934.302 1.502.302.55 0 1.012-.1 1.388-.302.385-.2.683-.487.895-.86a2.443 2.443 0 0 0 .228-.498l.018-.056Zm-.39-1.397v-.63h-1.445c-.405 0-.718.1-.939.3-.212.192-.318.455-.318.79 0 .157.026.3.08.429a.99.99 0 0 0 .238.345c.221.191.534.287.939.287a2.125 2.125 0 0 0 .394-.038c.106-.021.206-.052.3-.092.212-.095.385-.253.52-.473.135-.22.212-.526.23-.918Z" clipRule="evenodd" - d="M304.262 58.3029V65.1174H312.458V43.4316C312.458 40.1614 311.813 37.494 310.522 35.4283C309.231 33.32 307.339 31.7496 304.843 30.717C302.391 29.6845 299.357 29.168 295.743 29.168C294.959 29.168 294.142 29.1763 293.289 29.1933C292.786 29.2038 292.269 29.2168 291.741 29.2324C290.321 29.2755 288.943 29.3399 287.611 29.4262L286.592 29.4948C286.068 29.5312 285.577 29.567 285.114 29.6034C284.766 29.6304 284.437 29.6574 284.126 29.6845V38.3977C285.459 38.3114 286.943 38.2251 288.579 38.1394C289.036 38.1155 289.489 38.0931 289.939 38.0724C290.589 38.0422 291.23 38.0163 291.865 37.9934C292.366 37.9752 292.862 37.9591 293.355 37.9456C294.903 37.9024 296.151 37.8811 297.098 37.8811C298.991 37.8811 300.368 38.3327 301.229 39.2364C302.09 40.1402 302.519 41.4954 302.519 43.3027V43.4316H296.13C292.989 43.4316 290.214 43.8406 287.804 44.6581C285.394 45.4324 283.522 46.6588 282.19 48.3368C280.855 49.9722 280.189 52.0805 280.189 54.6621C280.189 57.0289 280.726 59.0726 281.802 60.7933C282.877 62.4713 284.361 63.7624 286.255 64.6654C288.192 65.5694 290.43 66.0214 292.967 66.0214C295.42 66.0214 297.485 65.5694 299.164 64.6654C300.885 63.7624 302.219 62.4713 303.165 60.7933C303.332 60.5108 303.487 60.2176 303.632 59.9127C303.837 59.482 304.019 59.0278 304.18 58.5534L304.262 58.3029ZM302.519 52.016V49.176H296.065C294.258 49.176 292.86 49.6276 291.871 50.5313C290.924 51.3919 290.45 52.5751 290.45 54.0811C290.45 54.7901 290.568 55.434 290.804 56.015C291.042 56.5971 291.397 57.1142 291.871 57.5662C292.86 58.4276 294.258 58.8572 296.065 58.8572C296.409 58.8572 296.742 58.8402 297.063 58.8061C297.325 58.7794 297.58 58.74 297.826 58.6899C298.3 58.5929 298.746 58.4553 299.164 58.2762C300.111 57.8466 300.885 57.1366 301.486 56.1462C302.09 55.1568 302.434 53.7797 302.519 52.016Z" - fill="#4876EE" - /> - <path - d="M318.639 65.117V29.7485H326.836V41.4228C327.228 38.0902 328.219 35.403 329.805 33.3628C331.956 30.6522 335.053 29.2969 339.099 29.2969H340.454V38.2034H337.872C335.033 38.2034 332.838 38.9777 331.289 40.5269C329.74 42.0328 328.965 44.2274 328.965 47.1099V65.117H318.639Z" - fill="#4876EE" /> <path - d="M353.549 48.5927H356.97L368.135 65.115H379.753L365.595 44.8235L377.236 29.7465H366.393L353.549 46.5639V18H343.223V65.115H353.549V48.5927Z" fill="#4876EE" + d="M72.106 14.97V7.11h1.835v2.595c.088-.74.31-1.338.665-1.791.481-.603 1.174-.904 2.08-.904h.303v1.98h-.578c-.635 0-1.127.172-1.473.516-.347.334-.52.822-.52 1.463v4.001h-2.312ZM79.92 11.298h.767l2.499 3.672h2.6l-3.169-4.51 2.606-3.35h-2.427l-2.875 3.737V4.5h-2.312v10.47h2.312v-3.672Z" /> </svg> </SvgIcon> ); } -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 ( <SvgIcon> diff --git a/docs/data/material/getting-started/templates/sign-in-side/CustomIcons.tsx b/docs/data/material/getting-started/templates/sign-in-side/CustomIcons.tsx index f66661a29dcb57..3cf63c3501ba0c 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/CustomIcons.tsx +++ b/docs/data/material/getting-started/templates/sign-in-side/CustomIcons.tsx @@ -1,72 +1,51 @@ import * as React from 'react'; -import { SxProps, Theme } from '@mui/system'; import SvgIcon from '@mui/material/SvgIcon'; -interface IconProps { - sx?: SxProps<Theme>; -} - -export function SitemarkIcon({ sx }: IconProps) { +export function SitemarkIcon() { return ( - <SvgIcon sx={sx}> + <SvgIcon sx={{ height: 21, width: 100, mr: 2 }}> <svg - width="380" - height="81" - viewBox="0 0 380 81" + width={86} + height={19} + viewBox="0 0 86 19" fill="none" xmlns="http://www.w3.org/2000/svg" > <path - d="M0.039093 54.3012L27.0897 42.2617L42.6595 51.2914L45.8049 80.915L26.6179 80.7561L29.4487 60.1623L26.1461 58.2614L9.9471 70.9352L0.039093 54.3012Z" fill="#B4C0D3" + d="m.787 12.567 6.055-2.675 3.485 2.006.704 6.583-4.295-.035.634-4.577-.74-.422-3.625 2.817-2.218-3.697Z" /> <path - d="M44.3904 50.0223L68.296 67.6062L77.7321 50.656L58.5444 42.8937V39.0917L77.7321 31.1709L68.296 14.3789L44.3904 31.963V50.0223Z" fill="#00D3AB" + d="m10.714 11.616 5.352 3.908 2.112-3.767-4.295-1.725v-.845l4.295-1.76-2.112-3.732-5.352 3.908v4.013Z" /> <path - d="M42.6595 30.5377L45.8049 0.914062L26.6179 1.2308L29.4487 21.8249L26.1461 23.7258L9.78985 11.0526L0.039093 27.5277L27.0897 39.5673L42.6595 30.5377Z" fill="#4876EF" + d="m10.327 7.286.704-6.583-4.295.07.634 4.577-.74.422-3.66-2.816L.786 6.617l6.055 2.676 3.485-2.007Z" /> <path - d="M141.744 37.3657V65.1185H152.07V29.75H137.032V37.3657H141.744Z" - fill="#4876EE" - /> - <path - d="M141.421 24.7785C142.368 25.768 143.809 26.2626 145.745 26.2626C147.682 26.2626 149.101 25.768 150.004 24.7785C150.952 23.7455 151.424 22.4545 151.424 20.906C151.424 19.3137 150.952 18.0229 150.004 17.0334C149.101 16.0009 147.682 15.4844 145.745 15.4844C143.809 15.4844 142.368 16.0009 141.421 17.0334C140.518 18.0229 140.066 19.3137 140.066 20.906C140.066 22.4545 140.518 23.7455 141.421 24.7785Z" - fill="#4876EE" - /> - <path - d="M105.795 64.3433C108.72 65.677 112.313 66.3444 116.572 66.3444C120.574 66.3444 124.016 65.7196 126.899 64.4723C129.782 63.2249 131.998 61.4819 133.547 59.2441C135.139 56.9637 135.935 54.3177 135.935 51.3055C135.935 48.3798 135.183 45.9056 133.677 43.8831C132.213 41.818 130.17 40.2044 127.544 39.043C124.92 37.8379 121.887 37.0849 118.444 36.784L114.83 36.4613C112.679 36.2888 111.13 35.7083 110.183 34.7184C109.236 33.729 108.763 32.5669 108.763 31.2335C108.763 30.2004 109.022 29.2541 109.537 28.3936C110.054 27.4898 110.828 26.78 111.861 26.2634C112.937 25.7474 114.249 25.4891 115.798 25.4891C117.433 25.4891 118.789 25.79 119.864 26.3928C120.101 26.5201 120.326 26.6562 120.537 26.8008L120.588 26.8366C120.667 26.8912 120.745 26.9478 120.821 27.005C121.474 27.5044 121.994 28.0962 122.381 28.7807C122.94 29.7275 123.221 30.7814 123.221 31.9433H133.547C133.547 28.8452 132.837 26.1558 131.418 23.8755C129.998 21.5522 127.954 19.7666 125.286 18.5184C122.661 17.2276 119.499 16.582 115.798 16.582C112.269 16.582 109.215 17.1849 106.633 18.3895C104.052 19.5514 102.03 21.2295 100.567 23.4235C99.1457 25.618 98.4357 28.2215 98.4357 31.2335C98.4357 35.4069 99.8355 38.7629 102.632 41.302C105.428 43.8405 109.172 45.3034 113.862 45.6905L117.412 46.0132C120.294 46.2715 122.381 46.8525 123.672 47.7556C124.962 48.6163 125.608 49.7996 125.608 51.3055C125.608 51.9978 125.495 52.6468 125.268 53.2532C125.1 53.7032 124.87 54.1298 124.576 54.533C123.887 55.436 122.876 56.1461 121.542 56.6631C120.209 57.1791 118.552 57.4371 116.572 57.4371C114.378 57.4371 112.592 57.1365 111.216 56.533C109.839 55.8881 108.807 55.049 108.117 54.0166C107.472 52.9835 107.15 51.8652 107.15 50.6601H96.8877C96.8877 53.7152 97.6404 56.4254 99.1457 58.7921C100.652 61.1162 102.869 62.9659 105.795 64.3433Z" fill="#4876EE" + d="M32.507 8.804v6.167h2.312v-7.86h-3.366v1.693h1.054ZM32.435 6.006c.212.22.535.33.968.33.434 0 .751-.11.953-.33.213-.23.318-.516.318-.86 0-.354-.105-.641-.318-.86-.202-.23-.52-.345-.953-.345-.433 0-.756.115-.968.344-.202.22-.303.507-.303.86 0 .345.101.632.303.861ZM24.46 14.799c.655.296 1.46.444 2.413.444.896 0 1.667-.139 2.312-.416.645-.277 1.141-.664 1.488-1.162.357-.506.535-1.094.535-1.764 0-.65-.169-1.2-.506-1.649-.328-.459-.785-.818-1.373-1.076-.587-.267-1.266-.435-2.037-.502l-.809-.071c-.481-.039-.828-.168-1.04-.388a1.08 1.08 0 0 1-.318-.774c0-.23.058-.44.173-.631.116-.201.29-.359.52-.474.241-.114.535-.172.882-.172.366 0 .67.067.91.201.053.029.104.059.15.09l.012.009.052.037c.146.111.263.243.35.395.125.21.188.444.188.703h2.311c0-.689-.159-1.286-.476-1.793-.318-.516-.776-.913-1.373-1.19-.588-.287-1.296-.43-2.124-.43-.79 0-1.474.133-2.052.4a3.131 3.131 0 0 0-1.358 1.12c-.318.487-.477 1.066-.477 1.735 0 .927.314 1.673.94 2.237.626.564 1.464.89 2.514.976l.794.071c.645.058 1.113.187 1.401.388a.899.899 0 0 1 .434.788 1.181 1.181 0 0 1-.231.717c-.154.201-.38.36-.68.474-.298.115-.669.172-1.112.172-.49 0-.89-.067-1.199-.2-.308-.144-.539-.33-.694-.56a1.375 1.375 0 0 1-.216-.746h-2.297c0 .679.168 1.281.505 1.807.337.517.834.928 1.489 1.234ZM39.977 15.07c-.8 0-1.445-.095-1.936-.286a2.03 2.03 0 0 1-1.084-.99c-.221-.469-.332-1.1-.332-1.893V8.789h-1.2V7.11h1.2V4.988h2.153V7.11h2.312V8.79h-2.312v3.198c0 .373.096.66.289.86.202.192.486.287.852.287h1.17v1.937h-1.112Z" /> <path - d="M175.111 65.5678C171.539 65.5678 168.656 65.1371 166.462 64.2767C164.267 63.3727 162.654 61.8886 161.621 59.8236C160.632 57.7149 160.137 54.8759 160.137 51.304V37.2985H154.78V29.7472H160.137V20.1953H169.754V29.7472H180.081V37.2985H169.754V51.6916C169.754 53.3697 170.184 54.6605 171.045 55.5635C171.948 56.4238 173.217 56.8545 174.853 56.8545H180.081V65.5678H175.111Z" fill="#4876EE" - /> - <path fillRule="evenodd" + d="M43.873 14.899c.52.23 1.117.344 1.791.344.665 0 1.252-.115 1.763-.344.51-.23.934-.55 1.271-.96.337-.412.564-.88.679-1.407h-2.124c-.096.24-.279.44-.549.603-.27.162-.616.244-1.04.244-.262 0-.497-.031-.704-.093a1.572 1.572 0 0 1-.423-.194 1.662 1.662 0 0 1-.636-.803 3.159 3.159 0 0 1-.163-.645h5.784v-.775a4.28 4.28 0 0 0-.463-1.98 3.686 3.686 0 0 0-1.343-1.477c-.578-.382-1.291-.574-2.139-.574-.645 0-1.223.115-1.733.345-.501.22-.92.52-1.257.903a4.178 4.178 0 0 0-.78 1.305c-.174.478-.26.98-.26 1.506v.287c0 .507.086 1.004.26 1.492.183.478.443.913.78 1.305.347.382.775.688 1.286.918Zm-.094-4.674.02-.09a2.507 2.507 0 0 1 .117-.356c.145-.354.356-.622.636-.804.104-.067.217-.123.339-.165.204-.071.433-.107.686-.107.395 0 .723.09.983.272.27.173.472.426.607.76a2.487 2.487 0 0 1 .16.603h-3.57c.006-.038.013-.076.022-.113Z" clipRule="evenodd" - d="M192.514 64.7963C194.837 65.8283 197.505 66.3453 200.517 66.3453C203.485 66.3453 206.111 65.8283 208.391 64.7963C210.672 63.7633 212.565 62.3219 214.07 60.4722C215.577 58.6215 216.588 56.5127 217.103 54.1465H207.616C207.186 55.2217 206.369 56.1257 205.164 56.8571C203.959 57.5884 202.409 57.9541 200.517 57.9541C199.344 57.9541 198.296 57.8155 197.373 57.5383C196.67 57.3272 196.04 57.0362 195.483 56.6641C194.192 55.8027 193.245 54.598 192.643 53.0495C192.475 52.6082 192.332 52.1468 192.212 51.6661C192.089 51.1792 191.99 50.6725 191.916 50.145H217.749V46.6597C217.749 43.4325 217.061 40.4638 215.684 37.7532C214.307 34.9989 212.306 32.783 209.682 31.1051C207.1 29.384 203.916 28.5234 200.129 28.5234C197.246 28.5234 194.664 29.04 192.384 30.0725C190.148 31.0619 188.276 32.4173 186.77 34.1384C185.264 35.8595 184.102 37.8176 183.283 40.0122C182.509 42.163 182.122 44.422 182.122 46.7885V48.0794C182.122 50.3601 182.509 52.5974 183.283 54.792C184.102 56.9434 185.264 58.9008 186.77 60.6652C188.319 62.3859 190.232 63.7633 192.514 64.7963ZM192.094 43.763C192.122 43.6263 192.152 43.4918 192.185 43.3593C192.275 42.9945 192.378 42.6448 192.496 42.3106C192.562 42.1204 192.632 41.9349 192.708 41.7546C193.353 40.1623 194.299 38.9577 195.547 38.1403C196.014 37.8348 196.519 37.5864 197.062 37.3951C197.974 37.0744 198.998 36.9139 200.129 36.9139C201.894 36.9139 203.356 37.3228 204.518 38.1403C205.723 38.9146 206.627 40.0547 207.229 41.5608C207.278 41.6823 207.324 41.806 207.369 41.9312C207.44 42.1308 207.506 42.3355 207.568 42.5455C207.659 42.8578 207.739 43.181 207.809 43.5151C207.86 43.7615 207.904 44.0135 207.943 44.2718H191.994C192.024 44.0993 192.057 43.9299 192.094 43.763Z" - fill="#4876EE" /> <path - d="M222.01 65.1179V29.7494H230.208V38.6575C230.319 38.1279 230.445 37.6197 230.587 37.1322C230.709 36.7218 230.839 36.3257 230.982 35.9453C231.886 33.5356 233.241 31.7288 235.048 30.5237C236.855 29.276 239.07 28.6523 241.696 28.6523H242.147C244.815 28.6523 247.031 29.276 248.795 30.5237C250.602 31.7288 251.958 33.5356 252.861 35.9453L252.933 36.1272L252.993 36.2935C253.034 36.176 253.077 36.0601 253.119 35.9453C254.066 33.5356 255.443 31.7288 257.25 30.5237C259.057 29.276 261.274 28.6523 263.899 28.6523H264.351C267.017 28.6523 269.255 29.276 271.062 30.5237C272.912 31.7288 274.311 33.5356 275.257 35.9453C276.204 38.355 276.678 41.367 276.678 44.9813V65.1179H266.351V44.4002C266.351 42.464 265.835 40.8936 264.802 39.689C263.812 38.4839 262.392 37.8816 260.543 37.8816C258.692 37.8816 257.229 38.5058 256.153 39.7534C255.078 40.958 254.539 42.5716 254.539 44.5942V65.1179H244.148V44.4002C244.148 42.464 243.632 40.8936 242.599 39.689C241.61 38.4839 240.211 37.8816 238.405 37.8816C236.511 37.8816 235.027 38.5058 233.951 39.7534C232.875 40.958 232.337 42.5716 232.337 44.5942V65.1179H222.01Z" fill="#4876EE" + d="M50.476 14.97V7.112h1.835v1.98a4.54 4.54 0 0 1 .173-.603c.202-.536.506-.937.91-1.205.405-.277.9-.416 1.488-.416h.101c.598 0 1.094.139 1.489.416.404.268.707.67.91 1.205l.016.04.013.037.028-.077c.212-.536.52-.937.925-1.205.405-.277.901-.416 1.489-.416h.1c.598 0 1.098.139 1.503.416.414.268.727.67.94 1.205.211.535.317 1.205.317 2.008v4.475h-2.312v-4.604c0-.43-.115-.78-.346-1.047-.222-.268-.54-.402-.954-.402-.414 0-.742.139-.982.416-.241.268-.362.626-.362 1.076v4.56h-2.326v-4.603c0-.43-.115-.78-.346-1.047-.222-.268-.535-.402-.94-.402-.423 0-.756.139-.996.416-.241.268-.362.626-.362 1.076v4.56h-2.311Z" /> <path + fill="#4876EE" fillRule="evenodd" + d="M68.888 13.456v1.515h1.834v-4.82c0-.726-.144-1.319-.433-1.778-.289-.468-.712-.817-1.271-1.047-.549-.23-1.228-.344-2.037-.344a27.76 27.76 0 0 0-.896.014c-.318.01-.626.024-.924.043l-.229.016a36.79 36.79 0 0 0-.552.042v1.936a81.998 81.998 0 0 1 1.733-.09 37.806 37.806 0 0 1 1.171-.025c.424 0 .732.1.925.301.193.201.289.502.289.904v.029h-1.43c-.704 0-1.325.09-1.864.272-.54.172-.959.445-1.257.818-.299.363-.448.832-.448 1.405 0 .526.12.98.361 1.363.24.373.573.66.997.86.433.201.934.302 1.502.302.55 0 1.012-.1 1.388-.302.385-.2.683-.487.895-.86a2.443 2.443 0 0 0 .228-.498l.018-.056Zm-.39-1.397v-.63h-1.445c-.405 0-.718.1-.939.3-.212.192-.318.455-.318.79 0 .157.026.3.08.429a.99.99 0 0 0 .238.345c.221.191.534.287.939.287a2.125 2.125 0 0 0 .394-.038c.106-.021.206-.052.3-.092.212-.095.385-.253.52-.473.135-.22.212-.526.23-.918Z" clipRule="evenodd" - d="M304.262 58.3029V65.1174H312.458V43.4316C312.458 40.1614 311.813 37.494 310.522 35.4283C309.231 33.32 307.339 31.7496 304.843 30.717C302.391 29.6845 299.357 29.168 295.743 29.168C294.959 29.168 294.142 29.1763 293.289 29.1933C292.786 29.2038 292.269 29.2168 291.741 29.2324C290.321 29.2755 288.943 29.3399 287.611 29.4262L286.592 29.4948C286.068 29.5312 285.577 29.567 285.114 29.6034C284.766 29.6304 284.437 29.6574 284.126 29.6845V38.3977C285.459 38.3114 286.943 38.2251 288.579 38.1394C289.036 38.1155 289.489 38.0931 289.939 38.0724C290.589 38.0422 291.23 38.0163 291.865 37.9934C292.366 37.9752 292.862 37.9591 293.355 37.9456C294.903 37.9024 296.151 37.8811 297.098 37.8811C298.991 37.8811 300.368 38.3327 301.229 39.2364C302.09 40.1402 302.519 41.4954 302.519 43.3027V43.4316H296.13C292.989 43.4316 290.214 43.8406 287.804 44.6581C285.394 45.4324 283.522 46.6588 282.19 48.3368C280.855 49.9722 280.189 52.0805 280.189 54.6621C280.189 57.0289 280.726 59.0726 281.802 60.7933C282.877 62.4713 284.361 63.7624 286.255 64.6654C288.192 65.5694 290.43 66.0214 292.967 66.0214C295.42 66.0214 297.485 65.5694 299.164 64.6654C300.885 63.7624 302.219 62.4713 303.165 60.7933C303.332 60.5108 303.487 60.2176 303.632 59.9127C303.837 59.482 304.019 59.0278 304.18 58.5534L304.262 58.3029ZM302.519 52.016V49.176H296.065C294.258 49.176 292.86 49.6276 291.871 50.5313C290.924 51.3919 290.45 52.5751 290.45 54.0811C290.45 54.7901 290.568 55.434 290.804 56.015C291.042 56.5971 291.397 57.1142 291.871 57.5662C292.86 58.4276 294.258 58.8572 296.065 58.8572C296.409 58.8572 296.742 58.8402 297.063 58.8061C297.325 58.7794 297.58 58.74 297.826 58.6899C298.3 58.5929 298.746 58.4553 299.164 58.2762C300.111 57.8466 300.885 57.1366 301.486 56.1462C302.09 55.1568 302.434 53.7797 302.519 52.016Z" - fill="#4876EE" - /> - <path - d="M318.639 65.117V29.7485H326.836V41.4228C327.228 38.0902 328.219 35.403 329.805 33.3628C331.956 30.6522 335.053 29.2969 339.099 29.2969H340.454V38.2034H337.872C335.033 38.2034 332.838 38.9777 331.289 40.5269C329.74 42.0328 328.965 44.2274 328.965 47.1099V65.117H318.639Z" - fill="#4876EE" /> <path - d="M353.549 48.5927H356.97L368.135 65.115H379.753L365.595 44.8235L377.236 29.7465H366.393L353.549 46.5639V18H343.223V65.115H353.549V48.5927Z" fill="#4876EE" + d="M72.106 14.97V7.11h1.835v2.595c.088-.74.31-1.338.665-1.791.481-.603 1.174-.904 2.08-.904h.303v1.98h-.578c-.635 0-1.127.172-1.473.516-.347.334-.52.822-.52 1.463v4.001h-2.312ZM79.92 11.298h.767l2.499 3.672h2.6l-3.169-4.51 2.606-3.35h-2.427l-2.875 3.737V4.5h-2.312v10.47h2.312v-3.672Z" /> </svg> </SvgIcon> 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 index 2fe26179da482b..9c6c23678ee7b9 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js @@ -76,17 +76,13 @@ export default function SignInCard() { 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', + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', })} > - <SitemarkIcon - sx={{ - fontSize: 115, - height: 'fit-content', - display: { xs: 'flex', md: 'none' }, - }} - /> + <Box sx={{ display: { xs: 'flex', md: 'none' } }}> + <SitemarkIcon /> + </Box> <Typography component="h1" variant="h4" 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 index 67d6e041a4c3d6..8697dcc3e042df 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx @@ -76,17 +76,13 @@ export default function SignInCard() { 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', + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', })} > - <SitemarkIcon - sx={{ - fontSize: 115, - height: 'fit-content', - display: { xs: 'flex', md: 'none' }, - }} - /> + <Box sx={{ display: { xs: 'flex', md: 'none' } }}> + <SitemarkIcon /> + </Box> <Typography component="h1" variant="h4" 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 26e2bb449ef3d6..32e22167b9e8dd 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 @@ -33,7 +33,7 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) { exclusive value={showCustomTheme} onChange={toggleCustomTheme} - aria-label="Platform" + aria-label="Toggle design language" sx={{ backgroundColor: 'background.default', '& .Mui-selected': { @@ -81,8 +81,8 @@ export default function SignInSide() { sx={(theme) => ({ 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))', + ? 'radial-gradient(ellipse at 70% 51%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' + : 'radial-gradient(at 70% 51%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', backgroundSize: 'cover', height: { xs: 'auto', md: '100dvh' }, pb: { xs: 12, sm: 0 }, 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 f27e977ad3c71f..faff7403c757bb 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 @@ -41,7 +41,7 @@ function ToggleCustomTheme({ exclusive value={showCustomTheme} onChange={toggleCustomTheme} - aria-label="Platform" + aria-label="Toggle design language" sx={{ backgroundColor: 'background.default', '& .Mui-selected': { @@ -82,8 +82,8 @@ export default function SignInSide() { sx={(theme) => ({ 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))', + ? 'radial-gradient(ellipse at 70% 51%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' + : 'radial-gradient(at 70% 51%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', backgroundSize: 'cover', height: { xs: 'auto', md: '100dvh' }, pb: { xs: 12, sm: 0 }, 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 deleted file mode 100644 index d390782f3be28e..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/SitemarkIcon.js +++ /dev/null @@ -1,85 +0,0 @@ -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 ( - <SvgIcon sx={sx}> - <svg - width="380" - height="81" - viewBox="0 0 380 81" - fill="none" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M0.039093 54.3012L27.0897 42.2617L42.6595 51.2914L45.8049 80.915L26.6179 80.7561L29.4487 60.1623L26.1461 58.2614L9.9471 70.9352L0.039093 54.3012Z" - fill="#B4C0D3" - /> - <path - d="M44.3904 50.0223L68.296 67.6062L77.7321 50.656L58.5444 42.8937V39.0917L77.7321 31.1709L68.296 14.3789L44.3904 31.963V50.0223Z" - fill="#00D3AB" - /> - <path - d="M42.6595 30.5377L45.8049 0.914062L26.6179 1.2308L29.4487 21.8249L26.1461 23.7258L9.78985 11.0526L0.039093 27.5277L27.0897 39.5673L42.6595 30.5377Z" - fill="#4876EF" - /> - <path - d="M141.744 37.3657V65.1185H152.07V29.75H137.032V37.3657H141.744Z" - fill="#4876EE" - /> - <path - d="M141.421 24.7785C142.368 25.768 143.809 26.2626 145.745 26.2626C147.682 26.2626 149.101 25.768 150.004 24.7785C150.952 23.7455 151.424 22.4545 151.424 20.906C151.424 19.3137 150.952 18.0229 150.004 17.0334C149.101 16.0009 147.682 15.4844 145.745 15.4844C143.809 15.4844 142.368 16.0009 141.421 17.0334C140.518 18.0229 140.066 19.3137 140.066 20.906C140.066 22.4545 140.518 23.7455 141.421 24.7785Z" - fill="#4876EE" - /> - <path - d="M105.795 64.3433C108.72 65.677 112.313 66.3444 116.572 66.3444C120.574 66.3444 124.016 65.7196 126.899 64.4723C129.782 63.2249 131.998 61.4819 133.547 59.2441C135.139 56.9637 135.935 54.3177 135.935 51.3055C135.935 48.3798 135.183 45.9056 133.677 43.8831C132.213 41.818 130.17 40.2044 127.544 39.043C124.92 37.8379 121.887 37.0849 118.444 36.784L114.83 36.4613C112.679 36.2888 111.13 35.7083 110.183 34.7184C109.236 33.729 108.763 32.5669 108.763 31.2335C108.763 30.2004 109.022 29.2541 109.537 28.3936C110.054 27.4898 110.828 26.78 111.861 26.2634C112.937 25.7474 114.249 25.4891 115.798 25.4891C117.433 25.4891 118.789 25.79 119.864 26.3928C120.101 26.5201 120.326 26.6562 120.537 26.8008L120.588 26.8366C120.667 26.8912 120.745 26.9478 120.821 27.005C121.474 27.5044 121.994 28.0962 122.381 28.7807C122.94 29.7275 123.221 30.7814 123.221 31.9433H133.547C133.547 28.8452 132.837 26.1558 131.418 23.8755C129.998 21.5522 127.954 19.7666 125.286 18.5184C122.661 17.2276 119.499 16.582 115.798 16.582C112.269 16.582 109.215 17.1849 106.633 18.3895C104.052 19.5514 102.03 21.2295 100.567 23.4235C99.1457 25.618 98.4357 28.2215 98.4357 31.2335C98.4357 35.4069 99.8355 38.7629 102.632 41.302C105.428 43.8405 109.172 45.3034 113.862 45.6905L117.412 46.0132C120.294 46.2715 122.381 46.8525 123.672 47.7556C124.962 48.6163 125.608 49.7996 125.608 51.3055C125.608 51.9978 125.495 52.6468 125.268 53.2532C125.1 53.7032 124.87 54.1298 124.576 54.533C123.887 55.436 122.876 56.1461 121.542 56.6631C120.209 57.1791 118.552 57.4371 116.572 57.4371C114.378 57.4371 112.592 57.1365 111.216 56.533C109.839 55.8881 108.807 55.049 108.117 54.0166C107.472 52.9835 107.15 51.8652 107.15 50.6601H96.8877C96.8877 53.7152 97.6404 56.4254 99.1457 58.7921C100.652 61.1162 102.869 62.9659 105.795 64.3433Z" - fill="#4876EE" - /> - <path - d="M175.111 65.5678C171.539 65.5678 168.656 65.1371 166.462 64.2767C164.267 63.3727 162.654 61.8886 161.621 59.8236C160.632 57.7149 160.137 54.8759 160.137 51.304V37.2985H154.78V29.7472H160.137V20.1953H169.754V29.7472H180.081V37.2985H169.754V51.6916C169.754 53.3697 170.184 54.6605 171.045 55.5635C171.948 56.4238 173.217 56.8545 174.853 56.8545H180.081V65.5678H175.111Z" - fill="#4876EE" - /> - <path - fillRule="evenodd" - clipRule="evenodd" - d="M192.514 64.7963C194.837 65.8283 197.505 66.3453 200.517 66.3453C203.485 66.3453 206.111 65.8283 208.391 64.7963C210.672 63.7633 212.565 62.3219 214.07 60.4722C215.577 58.6215 216.588 56.5127 217.103 54.1465H207.616C207.186 55.2217 206.369 56.1257 205.164 56.8571C203.959 57.5884 202.409 57.9541 200.517 57.9541C199.344 57.9541 198.296 57.8155 197.373 57.5383C196.67 57.3272 196.04 57.0362 195.483 56.6641C194.192 55.8027 193.245 54.598 192.643 53.0495C192.475 52.6082 192.332 52.1468 192.212 51.6661C192.089 51.1792 191.99 50.6725 191.916 50.145H217.749V46.6597C217.749 43.4325 217.061 40.4638 215.684 37.7532C214.307 34.9989 212.306 32.783 209.682 31.1051C207.1 29.384 203.916 28.5234 200.129 28.5234C197.246 28.5234 194.664 29.04 192.384 30.0725C190.148 31.0619 188.276 32.4173 186.77 34.1384C185.264 35.8595 184.102 37.8176 183.283 40.0122C182.509 42.163 182.122 44.422 182.122 46.7885V48.0794C182.122 50.3601 182.509 52.5974 183.283 54.792C184.102 56.9434 185.264 58.9008 186.77 60.6652C188.319 62.3859 190.232 63.7633 192.514 64.7963ZM192.094 43.763C192.122 43.6263 192.152 43.4918 192.185 43.3593C192.275 42.9945 192.378 42.6448 192.496 42.3106C192.562 42.1204 192.632 41.9349 192.708 41.7546C193.353 40.1623 194.299 38.9577 195.547 38.1403C196.014 37.8348 196.519 37.5864 197.062 37.3951C197.974 37.0744 198.998 36.9139 200.129 36.9139C201.894 36.9139 203.356 37.3228 204.518 38.1403C205.723 38.9146 206.627 40.0547 207.229 41.5608C207.278 41.6823 207.324 41.806 207.369 41.9312C207.44 42.1308 207.506 42.3355 207.568 42.5455C207.659 42.8578 207.739 43.181 207.809 43.5151C207.86 43.7615 207.904 44.0135 207.943 44.2718H191.994C192.024 44.0993 192.057 43.9299 192.094 43.763Z" - fill="#4876EE" - /> - <path - d="M222.01 65.1179V29.7494H230.208V38.6575C230.319 38.1279 230.445 37.6197 230.587 37.1322C230.709 36.7218 230.839 36.3257 230.982 35.9453C231.886 33.5356 233.241 31.7288 235.048 30.5237C236.855 29.276 239.07 28.6523 241.696 28.6523H242.147C244.815 28.6523 247.031 29.276 248.795 30.5237C250.602 31.7288 251.958 33.5356 252.861 35.9453L252.933 36.1272L252.993 36.2935C253.034 36.176 253.077 36.0601 253.119 35.9453C254.066 33.5356 255.443 31.7288 257.25 30.5237C259.057 29.276 261.274 28.6523 263.899 28.6523H264.351C267.017 28.6523 269.255 29.276 271.062 30.5237C272.912 31.7288 274.311 33.5356 275.257 35.9453C276.204 38.355 276.678 41.367 276.678 44.9813V65.1179H266.351V44.4002C266.351 42.464 265.835 40.8936 264.802 39.689C263.812 38.4839 262.392 37.8816 260.543 37.8816C258.692 37.8816 257.229 38.5058 256.153 39.7534C255.078 40.958 254.539 42.5716 254.539 44.5942V65.1179H244.148V44.4002C244.148 42.464 243.632 40.8936 242.599 39.689C241.61 38.4839 240.211 37.8816 238.405 37.8816C236.511 37.8816 235.027 38.5058 233.951 39.7534C232.875 40.958 232.337 42.5716 232.337 44.5942V65.1179H222.01Z" - fill="#4876EE" - /> - <path - fillRule="evenodd" - clipRule="evenodd" - d="M304.262 58.3029V65.1174H312.458V43.4316C312.458 40.1614 311.813 37.494 310.522 35.4283C309.231 33.32 307.339 31.7496 304.843 30.717C302.391 29.6845 299.357 29.168 295.743 29.168C294.959 29.168 294.142 29.1763 293.289 29.1933C292.786 29.2038 292.269 29.2168 291.741 29.2324C290.321 29.2755 288.943 29.3399 287.611 29.4262L286.592 29.4948C286.068 29.5312 285.577 29.567 285.114 29.6034C284.766 29.6304 284.437 29.6574 284.126 29.6845V38.3977C285.459 38.3114 286.943 38.2251 288.579 38.1394C289.036 38.1155 289.489 38.0931 289.939 38.0724C290.589 38.0422 291.23 38.0163 291.865 37.9934C292.366 37.9752 292.862 37.9591 293.355 37.9456C294.903 37.9024 296.151 37.8811 297.098 37.8811C298.991 37.8811 300.368 38.3327 301.229 39.2364C302.09 40.1402 302.519 41.4954 302.519 43.3027V43.4316H296.13C292.989 43.4316 290.214 43.8406 287.804 44.6581C285.394 45.4324 283.522 46.6588 282.19 48.3368C280.855 49.9722 280.189 52.0805 280.189 54.6621C280.189 57.0289 280.726 59.0726 281.802 60.7933C282.877 62.4713 284.361 63.7624 286.255 64.6654C288.192 65.5694 290.43 66.0214 292.967 66.0214C295.42 66.0214 297.485 65.5694 299.164 64.6654C300.885 63.7624 302.219 62.4713 303.165 60.7933C303.332 60.5108 303.487 60.2176 303.632 59.9127C303.837 59.482 304.019 59.0278 304.18 58.5534L304.262 58.3029ZM302.519 52.016V49.176H296.065C294.258 49.176 292.86 49.6276 291.871 50.5313C290.924 51.3919 290.45 52.5751 290.45 54.0811C290.45 54.7901 290.568 55.434 290.804 56.015C291.042 56.5971 291.397 57.1142 291.871 57.5662C292.86 58.4276 294.258 58.8572 296.065 58.8572C296.409 58.8572 296.742 58.8402 297.063 58.8061C297.325 58.7794 297.58 58.74 297.826 58.6899C298.3 58.5929 298.746 58.4553 299.164 58.2762C300.111 57.8466 300.885 57.1366 301.486 56.1462C302.09 55.1568 302.434 53.7797 302.519 52.016Z" - fill="#4876EE" - /> - <path - d="M318.639 65.117V29.7485H326.836V41.4228C327.228 38.0902 328.219 35.403 329.805 33.3628C331.956 30.6522 335.053 29.2969 339.099 29.2969H340.454V38.2034H337.872C335.033 38.2034 332.838 38.9777 331.289 40.5269C329.74 42.0328 328.965 44.2274 328.965 47.1099V65.117H318.639Z" - fill="#4876EE" - /> - <path - d="M353.549 48.5927H356.97L368.135 65.115H379.753L365.595 44.8235L377.236 29.7465H366.393L353.549 46.5639V18H343.223V65.115H353.549V48.5927Z" - fill="#4876EE" - /> - </svg> - </SvgIcon> - ); -} - -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 deleted file mode 100644 index aee5bffc07e174..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/SitemarkIcon.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import * as React from 'react'; -import { SxProps, Theme } from '@mui/system'; -import SvgIcon from '@mui/material/SvgIcon'; - -interface SitemarkIconProps { - sx?: SxProps<Theme>; -} - -/* this logo is from LogoToUse.com */ - -export default function SitemarkIcon({ sx }: SitemarkIconProps) { - return ( - <SvgIcon sx={sx}> - <svg - width="380" - height="81" - viewBox="0 0 380 81" - fill="none" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M0.039093 54.3012L27.0897 42.2617L42.6595 51.2914L45.8049 80.915L26.6179 80.7561L29.4487 60.1623L26.1461 58.2614L9.9471 70.9352L0.039093 54.3012Z" - fill="#B4C0D3" - /> - <path - d="M44.3904 50.0223L68.296 67.6062L77.7321 50.656L58.5444 42.8937V39.0917L77.7321 31.1709L68.296 14.3789L44.3904 31.963V50.0223Z" - fill="#00D3AB" - /> - <path - d="M42.6595 30.5377L45.8049 0.914062L26.6179 1.2308L29.4487 21.8249L26.1461 23.7258L9.78985 11.0526L0.039093 27.5277L27.0897 39.5673L42.6595 30.5377Z" - fill="#4876EF" - /> - <path - d="M141.744 37.3657V65.1185H152.07V29.75H137.032V37.3657H141.744Z" - fill="#4876EE" - /> - <path - d="M141.421 24.7785C142.368 25.768 143.809 26.2626 145.745 26.2626C147.682 26.2626 149.101 25.768 150.004 24.7785C150.952 23.7455 151.424 22.4545 151.424 20.906C151.424 19.3137 150.952 18.0229 150.004 17.0334C149.101 16.0009 147.682 15.4844 145.745 15.4844C143.809 15.4844 142.368 16.0009 141.421 17.0334C140.518 18.0229 140.066 19.3137 140.066 20.906C140.066 22.4545 140.518 23.7455 141.421 24.7785Z" - fill="#4876EE" - /> - <path - d="M105.795 64.3433C108.72 65.677 112.313 66.3444 116.572 66.3444C120.574 66.3444 124.016 65.7196 126.899 64.4723C129.782 63.2249 131.998 61.4819 133.547 59.2441C135.139 56.9637 135.935 54.3177 135.935 51.3055C135.935 48.3798 135.183 45.9056 133.677 43.8831C132.213 41.818 130.17 40.2044 127.544 39.043C124.92 37.8379 121.887 37.0849 118.444 36.784L114.83 36.4613C112.679 36.2888 111.13 35.7083 110.183 34.7184C109.236 33.729 108.763 32.5669 108.763 31.2335C108.763 30.2004 109.022 29.2541 109.537 28.3936C110.054 27.4898 110.828 26.78 111.861 26.2634C112.937 25.7474 114.249 25.4891 115.798 25.4891C117.433 25.4891 118.789 25.79 119.864 26.3928C120.101 26.5201 120.326 26.6562 120.537 26.8008L120.588 26.8366C120.667 26.8912 120.745 26.9478 120.821 27.005C121.474 27.5044 121.994 28.0962 122.381 28.7807C122.94 29.7275 123.221 30.7814 123.221 31.9433H133.547C133.547 28.8452 132.837 26.1558 131.418 23.8755C129.998 21.5522 127.954 19.7666 125.286 18.5184C122.661 17.2276 119.499 16.582 115.798 16.582C112.269 16.582 109.215 17.1849 106.633 18.3895C104.052 19.5514 102.03 21.2295 100.567 23.4235C99.1457 25.618 98.4357 28.2215 98.4357 31.2335C98.4357 35.4069 99.8355 38.7629 102.632 41.302C105.428 43.8405 109.172 45.3034 113.862 45.6905L117.412 46.0132C120.294 46.2715 122.381 46.8525 123.672 47.7556C124.962 48.6163 125.608 49.7996 125.608 51.3055C125.608 51.9978 125.495 52.6468 125.268 53.2532C125.1 53.7032 124.87 54.1298 124.576 54.533C123.887 55.436 122.876 56.1461 121.542 56.6631C120.209 57.1791 118.552 57.4371 116.572 57.4371C114.378 57.4371 112.592 57.1365 111.216 56.533C109.839 55.8881 108.807 55.049 108.117 54.0166C107.472 52.9835 107.15 51.8652 107.15 50.6601H96.8877C96.8877 53.7152 97.6404 56.4254 99.1457 58.7921C100.652 61.1162 102.869 62.9659 105.795 64.3433Z" - fill="#4876EE" - /> - <path - d="M175.111 65.5678C171.539 65.5678 168.656 65.1371 166.462 64.2767C164.267 63.3727 162.654 61.8886 161.621 59.8236C160.632 57.7149 160.137 54.8759 160.137 51.304V37.2985H154.78V29.7472H160.137V20.1953H169.754V29.7472H180.081V37.2985H169.754V51.6916C169.754 53.3697 170.184 54.6605 171.045 55.5635C171.948 56.4238 173.217 56.8545 174.853 56.8545H180.081V65.5678H175.111Z" - fill="#4876EE" - /> - <path - fillRule="evenodd" - clipRule="evenodd" - d="M192.514 64.7963C194.837 65.8283 197.505 66.3453 200.517 66.3453C203.485 66.3453 206.111 65.8283 208.391 64.7963C210.672 63.7633 212.565 62.3219 214.07 60.4722C215.577 58.6215 216.588 56.5127 217.103 54.1465H207.616C207.186 55.2217 206.369 56.1257 205.164 56.8571C203.959 57.5884 202.409 57.9541 200.517 57.9541C199.344 57.9541 198.296 57.8155 197.373 57.5383C196.67 57.3272 196.04 57.0362 195.483 56.6641C194.192 55.8027 193.245 54.598 192.643 53.0495C192.475 52.6082 192.332 52.1468 192.212 51.6661C192.089 51.1792 191.99 50.6725 191.916 50.145H217.749V46.6597C217.749 43.4325 217.061 40.4638 215.684 37.7532C214.307 34.9989 212.306 32.783 209.682 31.1051C207.1 29.384 203.916 28.5234 200.129 28.5234C197.246 28.5234 194.664 29.04 192.384 30.0725C190.148 31.0619 188.276 32.4173 186.77 34.1384C185.264 35.8595 184.102 37.8176 183.283 40.0122C182.509 42.163 182.122 44.422 182.122 46.7885V48.0794C182.122 50.3601 182.509 52.5974 183.283 54.792C184.102 56.9434 185.264 58.9008 186.77 60.6652C188.319 62.3859 190.232 63.7633 192.514 64.7963ZM192.094 43.763C192.122 43.6263 192.152 43.4918 192.185 43.3593C192.275 42.9945 192.378 42.6448 192.496 42.3106C192.562 42.1204 192.632 41.9349 192.708 41.7546C193.353 40.1623 194.299 38.9577 195.547 38.1403C196.014 37.8348 196.519 37.5864 197.062 37.3951C197.974 37.0744 198.998 36.9139 200.129 36.9139C201.894 36.9139 203.356 37.3228 204.518 38.1403C205.723 38.9146 206.627 40.0547 207.229 41.5608C207.278 41.6823 207.324 41.806 207.369 41.9312C207.44 42.1308 207.506 42.3355 207.568 42.5455C207.659 42.8578 207.739 43.181 207.809 43.5151C207.86 43.7615 207.904 44.0135 207.943 44.2718H191.994C192.024 44.0993 192.057 43.9299 192.094 43.763Z" - fill="#4876EE" - /> - <path - d="M222.01 65.1179V29.7494H230.208V38.6575C230.319 38.1279 230.445 37.6197 230.587 37.1322C230.709 36.7218 230.839 36.3257 230.982 35.9453C231.886 33.5356 233.241 31.7288 235.048 30.5237C236.855 29.276 239.07 28.6523 241.696 28.6523H242.147C244.815 28.6523 247.031 29.276 248.795 30.5237C250.602 31.7288 251.958 33.5356 252.861 35.9453L252.933 36.1272L252.993 36.2935C253.034 36.176 253.077 36.0601 253.119 35.9453C254.066 33.5356 255.443 31.7288 257.25 30.5237C259.057 29.276 261.274 28.6523 263.899 28.6523H264.351C267.017 28.6523 269.255 29.276 271.062 30.5237C272.912 31.7288 274.311 33.5356 275.257 35.9453C276.204 38.355 276.678 41.367 276.678 44.9813V65.1179H266.351V44.4002C266.351 42.464 265.835 40.8936 264.802 39.689C263.812 38.4839 262.392 37.8816 260.543 37.8816C258.692 37.8816 257.229 38.5058 256.153 39.7534C255.078 40.958 254.539 42.5716 254.539 44.5942V65.1179H244.148V44.4002C244.148 42.464 243.632 40.8936 242.599 39.689C241.61 38.4839 240.211 37.8816 238.405 37.8816C236.511 37.8816 235.027 38.5058 233.951 39.7534C232.875 40.958 232.337 42.5716 232.337 44.5942V65.1179H222.01Z" - fill="#4876EE" - /> - <path - fillRule="evenodd" - clipRule="evenodd" - d="M304.262 58.3029V65.1174H312.458V43.4316C312.458 40.1614 311.813 37.494 310.522 35.4283C309.231 33.32 307.339 31.7496 304.843 30.717C302.391 29.6845 299.357 29.168 295.743 29.168C294.959 29.168 294.142 29.1763 293.289 29.1933C292.786 29.2038 292.269 29.2168 291.741 29.2324C290.321 29.2755 288.943 29.3399 287.611 29.4262L286.592 29.4948C286.068 29.5312 285.577 29.567 285.114 29.6034C284.766 29.6304 284.437 29.6574 284.126 29.6845V38.3977C285.459 38.3114 286.943 38.2251 288.579 38.1394C289.036 38.1155 289.489 38.0931 289.939 38.0724C290.589 38.0422 291.23 38.0163 291.865 37.9934C292.366 37.9752 292.862 37.9591 293.355 37.9456C294.903 37.9024 296.151 37.8811 297.098 37.8811C298.991 37.8811 300.368 38.3327 301.229 39.2364C302.09 40.1402 302.519 41.4954 302.519 43.3027V43.4316H296.13C292.989 43.4316 290.214 43.8406 287.804 44.6581C285.394 45.4324 283.522 46.6588 282.19 48.3368C280.855 49.9722 280.189 52.0805 280.189 54.6621C280.189 57.0289 280.726 59.0726 281.802 60.7933C282.877 62.4713 284.361 63.7624 286.255 64.6654C288.192 65.5694 290.43 66.0214 292.967 66.0214C295.42 66.0214 297.485 65.5694 299.164 64.6654C300.885 63.7624 302.219 62.4713 303.165 60.7933C303.332 60.5108 303.487 60.2176 303.632 59.9127C303.837 59.482 304.019 59.0278 304.18 58.5534L304.262 58.3029ZM302.519 52.016V49.176H296.065C294.258 49.176 292.86 49.6276 291.871 50.5313C290.924 51.3919 290.45 52.5751 290.45 54.0811C290.45 54.7901 290.568 55.434 290.804 56.015C291.042 56.5971 291.397 57.1142 291.871 57.5662C292.86 58.4276 294.258 58.8572 296.065 58.8572C296.409 58.8572 296.742 58.8402 297.063 58.8061C297.325 58.7794 297.58 58.74 297.826 58.6899C298.3 58.5929 298.746 58.4553 299.164 58.2762C300.111 57.8466 300.885 57.1366 301.486 56.1462C302.09 55.1568 302.434 53.7797 302.519 52.016Z" - fill="#4876EE" - /> - <path - d="M318.639 65.117V29.7485H326.836V41.4228C327.228 38.0902 328.219 35.403 329.805 33.3628C331.956 30.6522 335.053 29.2969 339.099 29.2969H340.454V38.2034H337.872C335.033 38.2034 332.838 38.9777 331.289 40.5269C329.74 42.0328 328.965 44.2274 328.965 47.1099V65.117H318.639Z" - fill="#4876EE" - /> - <path - d="M353.549 48.5927H356.97L368.135 65.115H379.753L365.595 44.8235L377.236 29.7465H366.393L353.549 46.5639V18H343.223V65.115H353.549V48.5927Z" - fill="#4876EE" - /> - </svg> - </SvgIcon> - ); -} 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 index 3783eb9d80714d..1fd99c941fe0ab 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx +++ b/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx @@ -11,7 +11,10 @@ interface ToggleColorModeProps { toggleColorMode: () => void; } -function ToggleColorMode({ mode, toggleColorMode }: ToggleColorModeProps) { +export default function ToggleColorMode({ + mode, + toggleColorMode, +}: ToggleColorModeProps) { return ( <IconButton onClick={toggleColorMode} @@ -26,5 +29,3 @@ function ToggleColorMode({ mode, toggleColorMode }: ToggleColorModeProps) { </IconButton> ); } - -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 index b464dd285ddd78..e39de16cbf5e55 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js +++ b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js @@ -1,73 +1,75 @@ import * as React from 'react'; -import { alpha } from '@mui/material/styles'; +import { createTheme, 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', -}; +const customTheme = createTheme(); -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 brand = { + 50: 'hsl(210, 100%, 97%)', + 100: 'hsl(210, 100%, 90%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', }; export const gray = { - 50: '#FBFCFE', - 100: '#EAF0F5', - 200: '#D6E2EB', - 300: '#BFCCD9', - 400: '#94A6B8', - 500: '#5B6B7C', - 600: '#4C5967', - 700: '#364049', - 800: '#131B20', - 900: '#090E10', + 50: 'hsl(220, 60%, 99%)', + 100: 'hsl(220, 35%, 94%)', + 200: 'hsl(220, 35%, 88%)', + 300: 'hsl(220, 25%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 25%, 35%)', + 700: 'hsl(220, 25%, 25%)', + 800: 'hsl(220, 25%, 10%)', + 900: 'hsl(220, 30%, 5%)', }; export const green = { - 50: '#F6FEF6', - 100: '#E3FBE3', - 200: '#C7F7C7', - 300: '#A1E8A1', - 400: '#51BC51', - 500: '#1F7A1F', - 600: '#136C13', - 700: '#0A470A', - 800: '#042F04', - 900: '#021D02', + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', }; export const red = { - 50: '#FFF0F0', - 100: '#FDCECE', - 200: '#FC9C9C', - 300: '#F65555', - 400: '#C20A0A', - 500: '#910808', - 600: '#790606', - 700: '#630303', - 800: '#4F0202', - 900: '#3B0202', + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 20%)', + 800: 'hsl(0, 95%, 16%)', + 900: 'hsl(0, 93%, 12%)', }; const getDesignTokens = (mode) => ({ @@ -85,26 +87,25 @@ const getDesignTokens = (mode) => ({ dark: brand[800], }), }, - secondary: { - light: secondary[300], - main: secondary[500], - dark: secondary[800], + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], ...(mode === 'dark' && { - light: secondary[400], - main: secondary[500], - dark: secondary[900], + light: orange[400], + main: orange[500], + dark: orange[700], }), }, - 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' }), + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), }, success: { light: green[300], @@ -117,27 +118,18 @@ const getDesignTokens = (mode) => ({ }), }, 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], + ...gray, }, 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] }), + default: 'hsl(0, 0%, 100%)', + paper: gray[100], + ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), }, text: { primary: gray[800], secondary: gray[600], - ...(mode === 'dark' && { primary: '#fff', secondary: gray[400] }), + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), }, action: { selected: `${alpha(brand[200], 0.2)}`, @@ -149,51 +141,54 @@ const getDesignTokens = (mode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: 60, + fontSize: customTheme.typography.pxToRem(60), fontWeight: 600, - lineHeight: 78 / 70, - letterSpacing: -0.2, + lineHeight: 1.2, + letterSpacing: -0.5, }, h2: { - fontSize: 48, + fontSize: customTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: 42, + fontSize: customTheme.typography.pxToRem(42), lineHeight: 1.2, }, h4: { - fontSize: 36, + fontSize: customTheme.typography.pxToRem(36), fontWeight: 500, lineHeight: 1.5, }, h5: { - fontSize: 20, + fontSize: customTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle1: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: 16, + fontSize: customTheme.typography.pxToRem(16), }, body1: { + fontSize: customTheme.typography.pxToRem(15), fontWeight: 400, - fontSize: 15, }, body2: { + fontSize: customTheme.typography.pxToRem(14), fontWeight: 400, - fontSize: 14, }, caption: { + fontSize: customTheme.typography.pxToRem(12), fontWeight: 400, - fontSize: 12, }, }, + shape: { + borderRadius: 12, + }, }); export default function getSignInSideTheme(mode) { @@ -208,9 +203,9 @@ export default function getSignInSideTheme(mode) { styleOverrides: { root: { boxSizing: 'border-box', - transition: 'all 100ms ease-in', + transition: 'all 100ms ease', '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, + outline: `3px solid ${alpha(brand[400], 0.5)}`, outlineOffset: '2px', }, }, @@ -220,34 +215,45 @@ export default function getSignInSideTheme(mode) { styleOverrides: { root: ({ theme, ownerState }) => ({ boxShadow: 'none', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, textTransform: 'none', ...(ownerState.size === 'small' && { - maxHeight: '32px', + height: '2rem', // 32px + padding: '0 0.5rem', }), ...(ownerState.size === 'medium' && { - height: '40px', + height: '2.5rem', // 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)}`, + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, border: `1px solid ${brand[500]}`, '&:hover': { - background: brand[400], - backgroundImage: 'none', - boxShadow: `0 0 0 1px ${alpha(brand[300], 0.5)}`, + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, }, }), ...(ownerState.variant === 'outlined' && { + color: brand[700], backgroundColor: alpha(brand[300], 0.1), - borderColor: brand[300], - color: brand[500], + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', + }, + '&:active': { backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', }, }), ...(ownerState.variant === 'outlined' && @@ -257,84 +263,174 @@ export default function getSignInSideTheme(mode) { color: gray[700], '&:hover': { backgroundColor: alpha(gray[300], 0.3), - borderColor: gray[200], + borderColor: alpha(gray[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), }, }), - ...(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' && { + color: brand[200], backgroundColor: alpha(brand[600], 0.1), - borderColor: brand[700], - color: brand[300], + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', }, }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), ...(ownerState.variant === 'outlined' && ownerState.color === 'secondary' && { + color: gray[300], backgroundColor: alpha(gray[600], 0.1), borderColor: alpha(gray[700], 0.5), - color: gray[300], + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[200], '&:hover': { - backgroundColor: alpha(gray[600], 0.3), - borderColor: gray[700], + backgroundColor: alpha(brand[700], 0.3), }, }), - ...(ownerState.variant === 'text' && { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], - }, - }), }), }), }, }, - MuiIconButton: { + MuiCard: { styleOverrides: { root: ({ theme, ownerState }) => ({ - ...(ownerState.size === 'small' && { - height: '32px', - width: '32px', + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${alpha(gray[200], 0.5)}`, + boxShadow: 'none', + ...(ownerState.variant === 'outlined' && { + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, }), - ...(ownerState.size === 'medium' && { - height: '40px', - width: '40px', + ...(theme.palette.mode === 'dark' && { + backgroundColor: alpha(gray[800], 0.6), + border: `1px solid ${alpha(gray[700], 0.3)}`, + ...(ownerState.variant === 'outlined' && { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), }), - color: brand[600], + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + <CheckBoxOutlineBlankRoundedIcon + sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} + /> + ), + checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />, + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + backgroundColor: alpha(gray[100], 0.4), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + transition: 'border-color, background-color, 120ms ease-in', '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + 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], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, }, ...(theme.palette.mode === 'dark' && { - color: brand[200], + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', }, }), }), }, }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, MuiDivider: { styleOverrides: { root: ({ theme }) => ({ @@ -345,25 +441,80 @@ export default function getSignInSideTheme(mode) { }), }, }, - MuiPaper: { + MuiFormLabel: { styleOverrides: { root: ({ theme }) => ({ - backgroundImage: 'none', - backgroundColor: gray[100], + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...(ownerState.size === 'small' && { + height: '2rem', + width: '2rem', + }), + ...(ownerState.size === 'medium' && { + height: '2.5rem', + width: '2.5rem', + }), + color: brand[500], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, ...(theme.palette.mode === 'dark' && { - backgroundColor: gray[800], + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, }), }), }, }, - MuiDialog: { + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, styleOverrides: { root: ({ theme }) => ({ - '& .MuiDialog-paper': { - borderRadius: '10px', - border: '1px solid', - borderColor: theme.palette.divider, + color: brand[700], + 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], + }), }), }, }, @@ -382,6 +533,7 @@ export default function getSignInSideTheme(mode) { borderRadius: '8px', }, '& .MuiInputBase-input': { + fontSize: '1rem', '&::placeholder': { opacity: 0.7, color: gray[500], @@ -390,10 +542,10 @@ export default function getSignInSideTheme(mode) { boxSizing: 'border-box', flexGrow: 1, height: '40px', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, border: '1px solid', borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', transition: 'border-color 120ms ease-in', backgroundColor: alpha(gray[100], 0.4), '&:hover': { @@ -418,13 +570,14 @@ export default function getSignInSideTheme(mode) { borderRadius: '8px', }, '& .MuiInputBase-input': { + fontSize: '1rem', '&::placeholder': { opacity: 1, color: gray[500], }, }, borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', backgroundColor: alpha(gray[900], 0.8), transition: 'border-color 120ms ease-in', '&:hover': { @@ -446,154 +599,29 @@ export default function getSignInSideTheme(mode) { }), }, }, - 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, - )})`, - }), - }), - }), + MuiPaper: { + defaultProps: { + elevation: 0, }, }, - MuiLink: { + MuiStack: { 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], - }), - }), + useFlexGap: true, }, }, MuiToggleButtonGroup: { styleOverrides: { root: ({ theme }) => ({ - borderRadius: '10px', - boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + borderRadius: theme.shape.borderRadius, + boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, '& .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: <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'rgba(0,0,0,0)' }} />, - checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />, - }, - 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', + color: 'hsl(0, 0%, 100%)', }, + boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, }), }), }, @@ -603,21 +631,15 @@ export default function getSignInSideTheme(mode) { root: ({ theme }) => ({ padding: '12px 16px', textTransform: 'none', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, 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 index 6b4da0a9489ccb..20e9329142a520 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx +++ b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import type {} from '@mui/material/themeCssVarsAugmentation'; -import { ThemeOptions, alpha } from '@mui/material/styles'; +import { createTheme, ThemeOptions, alpha } from '@mui/material/styles'; import { PaletteMode } from '@mui/material'; import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; @@ -23,69 +23,71 @@ declare module '@mui/material/styles/createPalette' { 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', -}; +const customTheme = createTheme(); -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 brand = { + 50: 'hsl(210, 100%, 97%)', + 100: 'hsl(210, 100%, 90%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', }; export const gray = { - 50: '#FBFCFE', - 100: '#EAF0F5', - 200: '#D6E2EB', - 300: '#BFCCD9', - 400: '#94A6B8', - 500: '#5B6B7C', - 600: '#4C5967', - 700: '#364049', - 800: '#131B20', - 900: '#090E10', + 50: 'hsl(220, 60%, 99%)', + 100: 'hsl(220, 35%, 94%)', + 200: 'hsl(220, 35%, 88%)', + 300: 'hsl(220, 25%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 25%, 35%)', + 700: 'hsl(220, 25%, 25%)', + 800: 'hsl(220, 25%, 10%)', + 900: 'hsl(220, 30%, 5%)', }; export const green = { - 50: '#F6FEF6', - 100: '#E3FBE3', - 200: '#C7F7C7', - 300: '#A1E8A1', - 400: '#51BC51', - 500: '#1F7A1F', - 600: '#136C13', - 700: '#0A470A', - 800: '#042F04', - 900: '#021D02', + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', }; export const red = { - 50: '#FFF0F0', - 100: '#FDCECE', - 200: '#FC9C9C', - 300: '#F65555', - 400: '#C20A0A', - 500: '#910808', - 600: '#790606', - 700: '#630303', - 800: '#4F0202', - 900: '#3B0202', + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 20%)', + 800: 'hsl(0, 95%, 16%)', + 900: 'hsl(0, 93%, 12%)', }; const getDesignTokens = (mode: PaletteMode) => ({ @@ -103,26 +105,25 @@ const getDesignTokens = (mode: PaletteMode) => ({ dark: brand[800], }), }, - secondary: { - light: secondary[300], - main: secondary[500], - dark: secondary[800], + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], ...(mode === 'dark' && { - light: secondary[400], - main: secondary[500], - dark: secondary[900], + light: orange[400], + main: orange[500], + dark: orange[700], }), }, - 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' }), + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), }, success: { light: green[300], @@ -135,27 +136,18 @@ const getDesignTokens = (mode: PaletteMode) => ({ }), }, 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], + ...gray, }, 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] }), + default: 'hsl(0, 0%, 100%)', + paper: gray[100], + ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), }, text: { primary: gray[800], secondary: gray[600], - ...(mode === 'dark' && { primary: '#fff', secondary: gray[400] }), + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), }, action: { selected: `${alpha(brand[200], 0.2)}`, @@ -167,51 +159,54 @@ const getDesignTokens = (mode: PaletteMode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: 60, + fontSize: customTheme.typography.pxToRem(60), fontWeight: 600, - lineHeight: 78 / 70, - letterSpacing: -0.2, + lineHeight: 1.2, + letterSpacing: -0.5, }, h2: { - fontSize: 48, + fontSize: customTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: 42, + fontSize: customTheme.typography.pxToRem(42), lineHeight: 1.2, }, h4: { - fontSize: 36, + fontSize: customTheme.typography.pxToRem(36), fontWeight: 500, lineHeight: 1.5, }, h5: { - fontSize: 20, + fontSize: customTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle1: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: 16, + fontSize: customTheme.typography.pxToRem(16), }, body1: { + fontSize: customTheme.typography.pxToRem(15), fontWeight: 400, - fontSize: 15, }, body2: { + fontSize: customTheme.typography.pxToRem(14), fontWeight: 400, - fontSize: 14, }, caption: { + fontSize: customTheme.typography.pxToRem(12), fontWeight: 400, - fontSize: 12, }, }, + shape: { + borderRadius: 12, + }, }); export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { @@ -226,9 +221,9 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { styleOverrides: { root: { boxSizing: 'border-box', - transition: 'all 100ms ease-in', + transition: 'all 100ms ease', '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, + outline: `3px solid ${alpha(brand[400], 0.5)}`, outlineOffset: '2px', }, }, @@ -238,34 +233,45 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { styleOverrides: { root: ({ theme, ownerState }) => ({ boxShadow: 'none', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, textTransform: 'none', ...(ownerState.size === 'small' && { - maxHeight: '32px', + height: '2rem', // 32px + padding: '0 0.5rem', }), ...(ownerState.size === 'medium' && { - height: '40px', + height: '2.5rem', // 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)}`, + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, border: `1px solid ${brand[500]}`, '&:hover': { - background: brand[400], - backgroundImage: 'none', - boxShadow: `0 0 0 1px ${alpha(brand[300], 0.5)}`, + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, }, }), ...(ownerState.variant === 'outlined' && { + color: brand[700], backgroundColor: alpha(brand[300], 0.1), - borderColor: brand[300], - color: brand[500], + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', + }, + '&:active': { backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', }, }), ...(ownerState.variant === 'outlined' && @@ -275,84 +281,174 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { color: gray[700], '&:hover': { backgroundColor: alpha(gray[300], 0.3), - borderColor: gray[200], + borderColor: alpha(gray[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), }, }), - ...(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' && { + color: brand[200], backgroundColor: alpha(brand[600], 0.1), - borderColor: brand[700], - color: brand[300], + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', }, }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), ...(ownerState.variant === 'outlined' && ownerState.color === 'secondary' && { + color: gray[300], backgroundColor: alpha(gray[600], 0.1), borderColor: alpha(gray[700], 0.5), - color: gray[300], + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[200], '&:hover': { - backgroundColor: alpha(gray[600], 0.3), - borderColor: gray[700], + backgroundColor: alpha(brand[700], 0.3), }, }), - ...(ownerState.variant === 'text' && { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], - }, - }), }), }), }, }, - MuiIconButton: { + MuiCard: { styleOverrides: { root: ({ theme, ownerState }) => ({ - ...(ownerState.size === 'small' && { - height: '32px', - width: '32px', + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${alpha(gray[200], 0.5)}`, + boxShadow: 'none', + ...(ownerState.variant === 'outlined' && { + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, }), - ...(ownerState.size === 'medium' && { - height: '40px', - width: '40px', + ...(theme.palette.mode === 'dark' && { + backgroundColor: alpha(gray[800], 0.6), + border: `1px solid ${alpha(gray[700], 0.3)}`, + ...(ownerState.variant === 'outlined' && { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), }), - color: brand[600], + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + <CheckBoxOutlineBlankRoundedIcon + sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} + /> + ), + checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />, + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + backgroundColor: alpha(gray[100], 0.4), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + transition: 'border-color, background-color, 120ms ease-in', '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + 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], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, }, ...(theme.palette.mode === 'dark' && { - color: brand[200], + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', }, }), }), }, }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, MuiDivider: { styleOverrides: { root: ({ theme }) => ({ @@ -363,25 +459,80 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { }), }, }, - MuiPaper: { + MuiFormLabel: { styleOverrides: { root: ({ theme }) => ({ - backgroundImage: 'none', - backgroundColor: gray[100], + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...(ownerState.size === 'small' && { + height: '2rem', + width: '2rem', + }), + ...(ownerState.size === 'medium' && { + height: '2.5rem', + width: '2.5rem', + }), + color: brand[500], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, ...(theme.palette.mode === 'dark' && { - backgroundColor: gray[800], + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, }), }), }, }, - MuiDialog: { + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, styleOverrides: { root: ({ theme }) => ({ - '& .MuiDialog-paper': { - borderRadius: '10px', - border: '1px solid', - borderColor: theme.palette.divider, + color: brand[700], + 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], + }), }), }, }, @@ -393,7 +544,6 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { input: { paddingLeft: 10, }, - root: ({ theme, ownerState }) => ({ 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, @@ -401,6 +551,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { borderRadius: '8px', }, '& .MuiInputBase-input': { + fontSize: '1rem', '&::placeholder': { opacity: 0.7, color: gray[500], @@ -409,10 +560,10 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { boxSizing: 'border-box', flexGrow: 1, height: '40px', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, border: '1px solid', borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', transition: 'border-color 120ms ease-in', backgroundColor: alpha(gray[100], 0.4), '&:hover': { @@ -437,13 +588,14 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { borderRadius: '8px', }, '& .MuiInputBase-input': { + fontSize: '1rem', '&::placeholder': { opacity: 1, color: gray[500], }, }, borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', backgroundColor: alpha(gray[900], 0.8), transition: 'border-color 120ms ease-in', '&:hover': { @@ -465,154 +617,29 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { }), }, }, - 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, - )})`, - }), - }), - }), + MuiPaper: { + defaultProps: { + elevation: 0, }, }, - MuiLink: { + MuiStack: { 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], - }), - }), + useFlexGap: true, }, }, MuiToggleButtonGroup: { styleOverrides: { root: ({ theme }) => ({ - borderRadius: '10px', - boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + borderRadius: theme.shape.borderRadius, + boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, '& .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: <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'rgba(0,0,0,0)' }} />, - checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />, - }, - 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', + color: 'hsl(0, 0%, 100%)', }, + boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, }), }), }, @@ -622,21 +649,15 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { root: ({ theme }) => ({ padding: '12px 16px', textTransform: 'none', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, 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 index e4a8d735bb75e6..1c24a778fb4427 100644 --- a/docs/data/material/getting-started/templates/sign-in/CustomIcons.js +++ b/docs/data/material/getting-started/templates/sign-in/CustomIcons.js @@ -1,87 +1,57 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; - import SvgIcon from '@mui/material/SvgIcon'; -function SitemarkIcon({ sx }) { +export function SitemarkIcon() { return ( - <SvgIcon sx={sx}> + <SvgIcon sx={{ height: 21, width: 100 }}> <svg - width="380" - height="81" - viewBox="0 0 380 81" + width={86} + height={19} + viewBox="0 0 86 19" fill="none" xmlns="http://www.w3.org/2000/svg" > <path - d="M0.039093 54.3012L27.0897 42.2617L42.6595 51.2914L45.8049 80.915L26.6179 80.7561L29.4487 60.1623L26.1461 58.2614L9.9471 70.9352L0.039093 54.3012Z" fill="#B4C0D3" + d="m.787 12.567 6.055-2.675 3.485 2.006.704 6.583-4.295-.035.634-4.577-.74-.422-3.625 2.817-2.218-3.697Z" /> <path - d="M44.3904 50.0223L68.296 67.6062L77.7321 50.656L58.5444 42.8937V39.0917L77.7321 31.1709L68.296 14.3789L44.3904 31.963V50.0223Z" fill="#00D3AB" + d="m10.714 11.616 5.352 3.908 2.112-3.767-4.295-1.725v-.845l4.295-1.76-2.112-3.732-5.352 3.908v4.013Z" /> <path - d="M42.6595 30.5377L45.8049 0.914062L26.6179 1.2308L29.4487 21.8249L26.1461 23.7258L9.78985 11.0526L0.039093 27.5277L27.0897 39.5673L42.6595 30.5377Z" fill="#4876EF" + d="m10.327 7.286.704-6.583-4.295.07.634 4.577-.74.422-3.66-2.816L.786 6.617l6.055 2.676 3.485-2.007Z" /> <path - d="M141.744 37.3657V65.1185H152.07V29.75H137.032V37.3657H141.744Z" fill="#4876EE" + d="M32.507 8.804v6.167h2.312v-7.86h-3.366v1.693h1.054ZM32.435 6.006c.212.22.535.33.968.33.434 0 .751-.11.953-.33.213-.23.318-.516.318-.86 0-.354-.105-.641-.318-.86-.202-.23-.52-.345-.953-.345-.433 0-.756.115-.968.344-.202.22-.303.507-.303.86 0 .345.101.632.303.861ZM24.46 14.799c.655.296 1.46.444 2.413.444.896 0 1.667-.139 2.312-.416.645-.277 1.141-.664 1.488-1.162.357-.506.535-1.094.535-1.764 0-.65-.169-1.2-.506-1.649-.328-.459-.785-.818-1.373-1.076-.587-.267-1.266-.435-2.037-.502l-.809-.071c-.481-.039-.828-.168-1.04-.388a1.08 1.08 0 0 1-.318-.774c0-.23.058-.44.173-.631.116-.201.29-.359.52-.474.241-.114.535-.172.882-.172.366 0 .67.067.91.201.053.029.104.059.15.09l.012.009.052.037c.146.111.263.243.35.395.125.21.188.444.188.703h2.311c0-.689-.159-1.286-.476-1.793-.318-.516-.776-.913-1.373-1.19-.588-.287-1.296-.43-2.124-.43-.79 0-1.474.133-2.052.4a3.131 3.131 0 0 0-1.358 1.12c-.318.487-.477 1.066-.477 1.735 0 .927.314 1.673.94 2.237.626.564 1.464.89 2.514.976l.794.071c.645.058 1.113.187 1.401.388a.899.899 0 0 1 .434.788 1.181 1.181 0 0 1-.231.717c-.154.201-.38.36-.68.474-.298.115-.669.172-1.112.172-.49 0-.89-.067-1.199-.2-.308-.144-.539-.33-.694-.56a1.375 1.375 0 0 1-.216-.746h-2.297c0 .679.168 1.281.505 1.807.337.517.834.928 1.489 1.234ZM39.977 15.07c-.8 0-1.445-.095-1.936-.286a2.03 2.03 0 0 1-1.084-.99c-.221-.469-.332-1.1-.332-1.893V8.789h-1.2V7.11h1.2V4.988h2.153V7.11h2.312V8.79h-2.312v3.198c0 .373.096.66.289.86.202.192.486.287.852.287h1.17v1.937h-1.112Z" /> <path - d="M141.421 24.7785C142.368 25.768 143.809 26.2626 145.745 26.2626C147.682 26.2626 149.101 25.768 150.004 24.7785C150.952 23.7455 151.424 22.4545 151.424 20.906C151.424 19.3137 150.952 18.0229 150.004 17.0334C149.101 16.0009 147.682 15.4844 145.745 15.4844C143.809 15.4844 142.368 16.0009 141.421 17.0334C140.518 18.0229 140.066 19.3137 140.066 20.906C140.066 22.4545 140.518 23.7455 141.421 24.7785Z" fill="#4876EE" - /> - <path - d="M105.795 64.3433C108.72 65.677 112.313 66.3444 116.572 66.3444C120.574 66.3444 124.016 65.7196 126.899 64.4723C129.782 63.2249 131.998 61.4819 133.547 59.2441C135.139 56.9637 135.935 54.3177 135.935 51.3055C135.935 48.3798 135.183 45.9056 133.677 43.8831C132.213 41.818 130.17 40.2044 127.544 39.043C124.92 37.8379 121.887 37.0849 118.444 36.784L114.83 36.4613C112.679 36.2888 111.13 35.7083 110.183 34.7184C109.236 33.729 108.763 32.5669 108.763 31.2335C108.763 30.2004 109.022 29.2541 109.537 28.3936C110.054 27.4898 110.828 26.78 111.861 26.2634C112.937 25.7474 114.249 25.4891 115.798 25.4891C117.433 25.4891 118.789 25.79 119.864 26.3928C120.101 26.5201 120.326 26.6562 120.537 26.8008L120.588 26.8366C120.667 26.8912 120.745 26.9478 120.821 27.005C121.474 27.5044 121.994 28.0962 122.381 28.7807C122.94 29.7275 123.221 30.7814 123.221 31.9433H133.547C133.547 28.8452 132.837 26.1558 131.418 23.8755C129.998 21.5522 127.954 19.7666 125.286 18.5184C122.661 17.2276 119.499 16.582 115.798 16.582C112.269 16.582 109.215 17.1849 106.633 18.3895C104.052 19.5514 102.03 21.2295 100.567 23.4235C99.1457 25.618 98.4357 28.2215 98.4357 31.2335C98.4357 35.4069 99.8355 38.7629 102.632 41.302C105.428 43.8405 109.172 45.3034 113.862 45.6905L117.412 46.0132C120.294 46.2715 122.381 46.8525 123.672 47.7556C124.962 48.6163 125.608 49.7996 125.608 51.3055C125.608 51.9978 125.495 52.6468 125.268 53.2532C125.1 53.7032 124.87 54.1298 124.576 54.533C123.887 55.436 122.876 56.1461 121.542 56.6631C120.209 57.1791 118.552 57.4371 116.572 57.4371C114.378 57.4371 112.592 57.1365 111.216 56.533C109.839 55.8881 108.807 55.049 108.117 54.0166C107.472 52.9835 107.15 51.8652 107.15 50.6601H96.8877C96.8877 53.7152 97.6404 56.4254 99.1457 58.7921C100.652 61.1162 102.869 62.9659 105.795 64.3433Z" - fill="#4876EE" - /> - <path - d="M175.111 65.5678C171.539 65.5678 168.656 65.1371 166.462 64.2767C164.267 63.3727 162.654 61.8886 161.621 59.8236C160.632 57.7149 160.137 54.8759 160.137 51.304V37.2985H154.78V29.7472H160.137V20.1953H169.754V29.7472H180.081V37.2985H169.754V51.6916C169.754 53.3697 170.184 54.6605 171.045 55.5635C171.948 56.4238 173.217 56.8545 174.853 56.8545H180.081V65.5678H175.111Z" - fill="#4876EE" - /> - <path fillRule="evenodd" + d="M43.873 14.899c.52.23 1.117.344 1.791.344.665 0 1.252-.115 1.763-.344.51-.23.934-.55 1.271-.96.337-.412.564-.88.679-1.407h-2.124c-.096.24-.279.44-.549.603-.27.162-.616.244-1.04.244-.262 0-.497-.031-.704-.093a1.572 1.572 0 0 1-.423-.194 1.662 1.662 0 0 1-.636-.803 3.159 3.159 0 0 1-.163-.645h5.784v-.775a4.28 4.28 0 0 0-.463-1.98 3.686 3.686 0 0 0-1.343-1.477c-.578-.382-1.291-.574-2.139-.574-.645 0-1.223.115-1.733.345-.501.22-.92.52-1.257.903a4.178 4.178 0 0 0-.78 1.305c-.174.478-.26.98-.26 1.506v.287c0 .507.086 1.004.26 1.492.183.478.443.913.78 1.305.347.382.775.688 1.286.918Zm-.094-4.674.02-.09a2.507 2.507 0 0 1 .117-.356c.145-.354.356-.622.636-.804.104-.067.217-.123.339-.165.204-.071.433-.107.686-.107.395 0 .723.09.983.272.27.173.472.426.607.76a2.487 2.487 0 0 1 .16.603h-3.57c.006-.038.013-.076.022-.113Z" clipRule="evenodd" - d="M192.514 64.7963C194.837 65.8283 197.505 66.3453 200.517 66.3453C203.485 66.3453 206.111 65.8283 208.391 64.7963C210.672 63.7633 212.565 62.3219 214.07 60.4722C215.577 58.6215 216.588 56.5127 217.103 54.1465H207.616C207.186 55.2217 206.369 56.1257 205.164 56.8571C203.959 57.5884 202.409 57.9541 200.517 57.9541C199.344 57.9541 198.296 57.8155 197.373 57.5383C196.67 57.3272 196.04 57.0362 195.483 56.6641C194.192 55.8027 193.245 54.598 192.643 53.0495C192.475 52.6082 192.332 52.1468 192.212 51.6661C192.089 51.1792 191.99 50.6725 191.916 50.145H217.749V46.6597C217.749 43.4325 217.061 40.4638 215.684 37.7532C214.307 34.9989 212.306 32.783 209.682 31.1051C207.1 29.384 203.916 28.5234 200.129 28.5234C197.246 28.5234 194.664 29.04 192.384 30.0725C190.148 31.0619 188.276 32.4173 186.77 34.1384C185.264 35.8595 184.102 37.8176 183.283 40.0122C182.509 42.163 182.122 44.422 182.122 46.7885V48.0794C182.122 50.3601 182.509 52.5974 183.283 54.792C184.102 56.9434 185.264 58.9008 186.77 60.6652C188.319 62.3859 190.232 63.7633 192.514 64.7963ZM192.094 43.763C192.122 43.6263 192.152 43.4918 192.185 43.3593C192.275 42.9945 192.378 42.6448 192.496 42.3106C192.562 42.1204 192.632 41.9349 192.708 41.7546C193.353 40.1623 194.299 38.9577 195.547 38.1403C196.014 37.8348 196.519 37.5864 197.062 37.3951C197.974 37.0744 198.998 36.9139 200.129 36.9139C201.894 36.9139 203.356 37.3228 204.518 38.1403C205.723 38.9146 206.627 40.0547 207.229 41.5608C207.278 41.6823 207.324 41.806 207.369 41.9312C207.44 42.1308 207.506 42.3355 207.568 42.5455C207.659 42.8578 207.739 43.181 207.809 43.5151C207.86 43.7615 207.904 44.0135 207.943 44.2718H191.994C192.024 44.0993 192.057 43.9299 192.094 43.763Z" - fill="#4876EE" /> <path - d="M222.01 65.1179V29.7494H230.208V38.6575C230.319 38.1279 230.445 37.6197 230.587 37.1322C230.709 36.7218 230.839 36.3257 230.982 35.9453C231.886 33.5356 233.241 31.7288 235.048 30.5237C236.855 29.276 239.07 28.6523 241.696 28.6523H242.147C244.815 28.6523 247.031 29.276 248.795 30.5237C250.602 31.7288 251.958 33.5356 252.861 35.9453L252.933 36.1272L252.993 36.2935C253.034 36.176 253.077 36.0601 253.119 35.9453C254.066 33.5356 255.443 31.7288 257.25 30.5237C259.057 29.276 261.274 28.6523 263.899 28.6523H264.351C267.017 28.6523 269.255 29.276 271.062 30.5237C272.912 31.7288 274.311 33.5356 275.257 35.9453C276.204 38.355 276.678 41.367 276.678 44.9813V65.1179H266.351V44.4002C266.351 42.464 265.835 40.8936 264.802 39.689C263.812 38.4839 262.392 37.8816 260.543 37.8816C258.692 37.8816 257.229 38.5058 256.153 39.7534C255.078 40.958 254.539 42.5716 254.539 44.5942V65.1179H244.148V44.4002C244.148 42.464 243.632 40.8936 242.599 39.689C241.61 38.4839 240.211 37.8816 238.405 37.8816C236.511 37.8816 235.027 38.5058 233.951 39.7534C232.875 40.958 232.337 42.5716 232.337 44.5942V65.1179H222.01Z" fill="#4876EE" + d="M50.476 14.97V7.112h1.835v1.98a4.54 4.54 0 0 1 .173-.603c.202-.536.506-.937.91-1.205.405-.277.9-.416 1.488-.416h.101c.598 0 1.094.139 1.489.416.404.268.707.67.91 1.205l.016.04.013.037.028-.077c.212-.536.52-.937.925-1.205.405-.277.901-.416 1.489-.416h.1c.598 0 1.098.139 1.503.416.414.268.727.67.94 1.205.211.535.317 1.205.317 2.008v4.475h-2.312v-4.604c0-.43-.115-.78-.346-1.047-.222-.268-.54-.402-.954-.402-.414 0-.742.139-.982.416-.241.268-.362.626-.362 1.076v4.56h-2.326v-4.603c0-.43-.115-.78-.346-1.047-.222-.268-.535-.402-.94-.402-.423 0-.756.139-.996.416-.241.268-.362.626-.362 1.076v4.56h-2.311Z" /> <path + fill="#4876EE" fillRule="evenodd" + d="M68.888 13.456v1.515h1.834v-4.82c0-.726-.144-1.319-.433-1.778-.289-.468-.712-.817-1.271-1.047-.549-.23-1.228-.344-2.037-.344a27.76 27.76 0 0 0-.896.014c-.318.01-.626.024-.924.043l-.229.016a36.79 36.79 0 0 0-.552.042v1.936a81.998 81.998 0 0 1 1.733-.09 37.806 37.806 0 0 1 1.171-.025c.424 0 .732.1.925.301.193.201.289.502.289.904v.029h-1.43c-.704 0-1.325.09-1.864.272-.54.172-.959.445-1.257.818-.299.363-.448.832-.448 1.405 0 .526.12.98.361 1.363.24.373.573.66.997.86.433.201.934.302 1.502.302.55 0 1.012-.1 1.388-.302.385-.2.683-.487.895-.86a2.443 2.443 0 0 0 .228-.498l.018-.056Zm-.39-1.397v-.63h-1.445c-.405 0-.718.1-.939.3-.212.192-.318.455-.318.79 0 .157.026.3.08.429a.99.99 0 0 0 .238.345c.221.191.534.287.939.287a2.125 2.125 0 0 0 .394-.038c.106-.021.206-.052.3-.092.212-.095.385-.253.52-.473.135-.22.212-.526.23-.918Z" clipRule="evenodd" - d="M304.262 58.3029V65.1174H312.458V43.4316C312.458 40.1614 311.813 37.494 310.522 35.4283C309.231 33.32 307.339 31.7496 304.843 30.717C302.391 29.6845 299.357 29.168 295.743 29.168C294.959 29.168 294.142 29.1763 293.289 29.1933C292.786 29.2038 292.269 29.2168 291.741 29.2324C290.321 29.2755 288.943 29.3399 287.611 29.4262L286.592 29.4948C286.068 29.5312 285.577 29.567 285.114 29.6034C284.766 29.6304 284.437 29.6574 284.126 29.6845V38.3977C285.459 38.3114 286.943 38.2251 288.579 38.1394C289.036 38.1155 289.489 38.0931 289.939 38.0724C290.589 38.0422 291.23 38.0163 291.865 37.9934C292.366 37.9752 292.862 37.9591 293.355 37.9456C294.903 37.9024 296.151 37.8811 297.098 37.8811C298.991 37.8811 300.368 38.3327 301.229 39.2364C302.09 40.1402 302.519 41.4954 302.519 43.3027V43.4316H296.13C292.989 43.4316 290.214 43.8406 287.804 44.6581C285.394 45.4324 283.522 46.6588 282.19 48.3368C280.855 49.9722 280.189 52.0805 280.189 54.6621C280.189 57.0289 280.726 59.0726 281.802 60.7933C282.877 62.4713 284.361 63.7624 286.255 64.6654C288.192 65.5694 290.43 66.0214 292.967 66.0214C295.42 66.0214 297.485 65.5694 299.164 64.6654C300.885 63.7624 302.219 62.4713 303.165 60.7933C303.332 60.5108 303.487 60.2176 303.632 59.9127C303.837 59.482 304.019 59.0278 304.18 58.5534L304.262 58.3029ZM302.519 52.016V49.176H296.065C294.258 49.176 292.86 49.6276 291.871 50.5313C290.924 51.3919 290.45 52.5751 290.45 54.0811C290.45 54.7901 290.568 55.434 290.804 56.015C291.042 56.5971 291.397 57.1142 291.871 57.5662C292.86 58.4276 294.258 58.8572 296.065 58.8572C296.409 58.8572 296.742 58.8402 297.063 58.8061C297.325 58.7794 297.58 58.74 297.826 58.6899C298.3 58.5929 298.746 58.4553 299.164 58.2762C300.111 57.8466 300.885 57.1366 301.486 56.1462C302.09 55.1568 302.434 53.7797 302.519 52.016Z" - fill="#4876EE" - /> - <path - d="M318.639 65.117V29.7485H326.836V41.4228C327.228 38.0902 328.219 35.403 329.805 33.3628C331.956 30.6522 335.053 29.2969 339.099 29.2969H340.454V38.2034H337.872C335.033 38.2034 332.838 38.9777 331.289 40.5269C329.74 42.0328 328.965 44.2274 328.965 47.1099V65.117H318.639Z" - fill="#4876EE" /> <path - d="M353.549 48.5927H356.97L368.135 65.115H379.753L365.595 44.8235L377.236 29.7465H366.393L353.549 46.5639V18H343.223V65.115H353.549V48.5927Z" fill="#4876EE" + d="M72.106 14.97V7.11h1.835v2.595c.088-.74.31-1.338.665-1.791.481-.603 1.174-.904 2.08-.904h.303v1.98h-.578c-.635 0-1.127.172-1.473.516-.347.334-.52.822-.52 1.463v4.001h-2.312ZM79.92 11.298h.767l2.499 3.672h2.6l-3.169-4.51 2.606-3.35h-2.427l-2.875 3.737V4.5h-2.312v10.47h2.312v-3.672Z" /> </svg> </SvgIcon> ); } -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 ( <SvgIcon> diff --git a/docs/data/material/getting-started/templates/sign-in/CustomIcons.tsx b/docs/data/material/getting-started/templates/sign-in/CustomIcons.tsx index f66661a29dcb57..1c24a778fb4427 100644 --- a/docs/data/material/getting-started/templates/sign-in/CustomIcons.tsx +++ b/docs/data/material/getting-started/templates/sign-in/CustomIcons.tsx @@ -1,72 +1,51 @@ import * as React from 'react'; -import { SxProps, Theme } from '@mui/system'; import SvgIcon from '@mui/material/SvgIcon'; -interface IconProps { - sx?: SxProps<Theme>; -} - -export function SitemarkIcon({ sx }: IconProps) { +export function SitemarkIcon() { return ( - <SvgIcon sx={sx}> + <SvgIcon sx={{ height: 21, width: 100 }}> <svg - width="380" - height="81" - viewBox="0 0 380 81" + width={86} + height={19} + viewBox="0 0 86 19" fill="none" xmlns="http://www.w3.org/2000/svg" > <path - d="M0.039093 54.3012L27.0897 42.2617L42.6595 51.2914L45.8049 80.915L26.6179 80.7561L29.4487 60.1623L26.1461 58.2614L9.9471 70.9352L0.039093 54.3012Z" fill="#B4C0D3" + d="m.787 12.567 6.055-2.675 3.485 2.006.704 6.583-4.295-.035.634-4.577-.74-.422-3.625 2.817-2.218-3.697Z" /> <path - d="M44.3904 50.0223L68.296 67.6062L77.7321 50.656L58.5444 42.8937V39.0917L77.7321 31.1709L68.296 14.3789L44.3904 31.963V50.0223Z" fill="#00D3AB" + d="m10.714 11.616 5.352 3.908 2.112-3.767-4.295-1.725v-.845l4.295-1.76-2.112-3.732-5.352 3.908v4.013Z" /> <path - d="M42.6595 30.5377L45.8049 0.914062L26.6179 1.2308L29.4487 21.8249L26.1461 23.7258L9.78985 11.0526L0.039093 27.5277L27.0897 39.5673L42.6595 30.5377Z" fill="#4876EF" + d="m10.327 7.286.704-6.583-4.295.07.634 4.577-.74.422-3.66-2.816L.786 6.617l6.055 2.676 3.485-2.007Z" /> <path - d="M141.744 37.3657V65.1185H152.07V29.75H137.032V37.3657H141.744Z" - fill="#4876EE" - /> - <path - d="M141.421 24.7785C142.368 25.768 143.809 26.2626 145.745 26.2626C147.682 26.2626 149.101 25.768 150.004 24.7785C150.952 23.7455 151.424 22.4545 151.424 20.906C151.424 19.3137 150.952 18.0229 150.004 17.0334C149.101 16.0009 147.682 15.4844 145.745 15.4844C143.809 15.4844 142.368 16.0009 141.421 17.0334C140.518 18.0229 140.066 19.3137 140.066 20.906C140.066 22.4545 140.518 23.7455 141.421 24.7785Z" - fill="#4876EE" - /> - <path - d="M105.795 64.3433C108.72 65.677 112.313 66.3444 116.572 66.3444C120.574 66.3444 124.016 65.7196 126.899 64.4723C129.782 63.2249 131.998 61.4819 133.547 59.2441C135.139 56.9637 135.935 54.3177 135.935 51.3055C135.935 48.3798 135.183 45.9056 133.677 43.8831C132.213 41.818 130.17 40.2044 127.544 39.043C124.92 37.8379 121.887 37.0849 118.444 36.784L114.83 36.4613C112.679 36.2888 111.13 35.7083 110.183 34.7184C109.236 33.729 108.763 32.5669 108.763 31.2335C108.763 30.2004 109.022 29.2541 109.537 28.3936C110.054 27.4898 110.828 26.78 111.861 26.2634C112.937 25.7474 114.249 25.4891 115.798 25.4891C117.433 25.4891 118.789 25.79 119.864 26.3928C120.101 26.5201 120.326 26.6562 120.537 26.8008L120.588 26.8366C120.667 26.8912 120.745 26.9478 120.821 27.005C121.474 27.5044 121.994 28.0962 122.381 28.7807C122.94 29.7275 123.221 30.7814 123.221 31.9433H133.547C133.547 28.8452 132.837 26.1558 131.418 23.8755C129.998 21.5522 127.954 19.7666 125.286 18.5184C122.661 17.2276 119.499 16.582 115.798 16.582C112.269 16.582 109.215 17.1849 106.633 18.3895C104.052 19.5514 102.03 21.2295 100.567 23.4235C99.1457 25.618 98.4357 28.2215 98.4357 31.2335C98.4357 35.4069 99.8355 38.7629 102.632 41.302C105.428 43.8405 109.172 45.3034 113.862 45.6905L117.412 46.0132C120.294 46.2715 122.381 46.8525 123.672 47.7556C124.962 48.6163 125.608 49.7996 125.608 51.3055C125.608 51.9978 125.495 52.6468 125.268 53.2532C125.1 53.7032 124.87 54.1298 124.576 54.533C123.887 55.436 122.876 56.1461 121.542 56.6631C120.209 57.1791 118.552 57.4371 116.572 57.4371C114.378 57.4371 112.592 57.1365 111.216 56.533C109.839 55.8881 108.807 55.049 108.117 54.0166C107.472 52.9835 107.15 51.8652 107.15 50.6601H96.8877C96.8877 53.7152 97.6404 56.4254 99.1457 58.7921C100.652 61.1162 102.869 62.9659 105.795 64.3433Z" fill="#4876EE" + d="M32.507 8.804v6.167h2.312v-7.86h-3.366v1.693h1.054ZM32.435 6.006c.212.22.535.33.968.33.434 0 .751-.11.953-.33.213-.23.318-.516.318-.86 0-.354-.105-.641-.318-.86-.202-.23-.52-.345-.953-.345-.433 0-.756.115-.968.344-.202.22-.303.507-.303.86 0 .345.101.632.303.861ZM24.46 14.799c.655.296 1.46.444 2.413.444.896 0 1.667-.139 2.312-.416.645-.277 1.141-.664 1.488-1.162.357-.506.535-1.094.535-1.764 0-.65-.169-1.2-.506-1.649-.328-.459-.785-.818-1.373-1.076-.587-.267-1.266-.435-2.037-.502l-.809-.071c-.481-.039-.828-.168-1.04-.388a1.08 1.08 0 0 1-.318-.774c0-.23.058-.44.173-.631.116-.201.29-.359.52-.474.241-.114.535-.172.882-.172.366 0 .67.067.91.201.053.029.104.059.15.09l.012.009.052.037c.146.111.263.243.35.395.125.21.188.444.188.703h2.311c0-.689-.159-1.286-.476-1.793-.318-.516-.776-.913-1.373-1.19-.588-.287-1.296-.43-2.124-.43-.79 0-1.474.133-2.052.4a3.131 3.131 0 0 0-1.358 1.12c-.318.487-.477 1.066-.477 1.735 0 .927.314 1.673.94 2.237.626.564 1.464.89 2.514.976l.794.071c.645.058 1.113.187 1.401.388a.899.899 0 0 1 .434.788 1.181 1.181 0 0 1-.231.717c-.154.201-.38.36-.68.474-.298.115-.669.172-1.112.172-.49 0-.89-.067-1.199-.2-.308-.144-.539-.33-.694-.56a1.375 1.375 0 0 1-.216-.746h-2.297c0 .679.168 1.281.505 1.807.337.517.834.928 1.489 1.234ZM39.977 15.07c-.8 0-1.445-.095-1.936-.286a2.03 2.03 0 0 1-1.084-.99c-.221-.469-.332-1.1-.332-1.893V8.789h-1.2V7.11h1.2V4.988h2.153V7.11h2.312V8.79h-2.312v3.198c0 .373.096.66.289.86.202.192.486.287.852.287h1.17v1.937h-1.112Z" /> <path - d="M175.111 65.5678C171.539 65.5678 168.656 65.1371 166.462 64.2767C164.267 63.3727 162.654 61.8886 161.621 59.8236C160.632 57.7149 160.137 54.8759 160.137 51.304V37.2985H154.78V29.7472H160.137V20.1953H169.754V29.7472H180.081V37.2985H169.754V51.6916C169.754 53.3697 170.184 54.6605 171.045 55.5635C171.948 56.4238 173.217 56.8545 174.853 56.8545H180.081V65.5678H175.111Z" fill="#4876EE" - /> - <path fillRule="evenodd" + d="M43.873 14.899c.52.23 1.117.344 1.791.344.665 0 1.252-.115 1.763-.344.51-.23.934-.55 1.271-.96.337-.412.564-.88.679-1.407h-2.124c-.096.24-.279.44-.549.603-.27.162-.616.244-1.04.244-.262 0-.497-.031-.704-.093a1.572 1.572 0 0 1-.423-.194 1.662 1.662 0 0 1-.636-.803 3.159 3.159 0 0 1-.163-.645h5.784v-.775a4.28 4.28 0 0 0-.463-1.98 3.686 3.686 0 0 0-1.343-1.477c-.578-.382-1.291-.574-2.139-.574-.645 0-1.223.115-1.733.345-.501.22-.92.52-1.257.903a4.178 4.178 0 0 0-.78 1.305c-.174.478-.26.98-.26 1.506v.287c0 .507.086 1.004.26 1.492.183.478.443.913.78 1.305.347.382.775.688 1.286.918Zm-.094-4.674.02-.09a2.507 2.507 0 0 1 .117-.356c.145-.354.356-.622.636-.804.104-.067.217-.123.339-.165.204-.071.433-.107.686-.107.395 0 .723.09.983.272.27.173.472.426.607.76a2.487 2.487 0 0 1 .16.603h-3.57c.006-.038.013-.076.022-.113Z" clipRule="evenodd" - d="M192.514 64.7963C194.837 65.8283 197.505 66.3453 200.517 66.3453C203.485 66.3453 206.111 65.8283 208.391 64.7963C210.672 63.7633 212.565 62.3219 214.07 60.4722C215.577 58.6215 216.588 56.5127 217.103 54.1465H207.616C207.186 55.2217 206.369 56.1257 205.164 56.8571C203.959 57.5884 202.409 57.9541 200.517 57.9541C199.344 57.9541 198.296 57.8155 197.373 57.5383C196.67 57.3272 196.04 57.0362 195.483 56.6641C194.192 55.8027 193.245 54.598 192.643 53.0495C192.475 52.6082 192.332 52.1468 192.212 51.6661C192.089 51.1792 191.99 50.6725 191.916 50.145H217.749V46.6597C217.749 43.4325 217.061 40.4638 215.684 37.7532C214.307 34.9989 212.306 32.783 209.682 31.1051C207.1 29.384 203.916 28.5234 200.129 28.5234C197.246 28.5234 194.664 29.04 192.384 30.0725C190.148 31.0619 188.276 32.4173 186.77 34.1384C185.264 35.8595 184.102 37.8176 183.283 40.0122C182.509 42.163 182.122 44.422 182.122 46.7885V48.0794C182.122 50.3601 182.509 52.5974 183.283 54.792C184.102 56.9434 185.264 58.9008 186.77 60.6652C188.319 62.3859 190.232 63.7633 192.514 64.7963ZM192.094 43.763C192.122 43.6263 192.152 43.4918 192.185 43.3593C192.275 42.9945 192.378 42.6448 192.496 42.3106C192.562 42.1204 192.632 41.9349 192.708 41.7546C193.353 40.1623 194.299 38.9577 195.547 38.1403C196.014 37.8348 196.519 37.5864 197.062 37.3951C197.974 37.0744 198.998 36.9139 200.129 36.9139C201.894 36.9139 203.356 37.3228 204.518 38.1403C205.723 38.9146 206.627 40.0547 207.229 41.5608C207.278 41.6823 207.324 41.806 207.369 41.9312C207.44 42.1308 207.506 42.3355 207.568 42.5455C207.659 42.8578 207.739 43.181 207.809 43.5151C207.86 43.7615 207.904 44.0135 207.943 44.2718H191.994C192.024 44.0993 192.057 43.9299 192.094 43.763Z" - fill="#4876EE" /> <path - d="M222.01 65.1179V29.7494H230.208V38.6575C230.319 38.1279 230.445 37.6197 230.587 37.1322C230.709 36.7218 230.839 36.3257 230.982 35.9453C231.886 33.5356 233.241 31.7288 235.048 30.5237C236.855 29.276 239.07 28.6523 241.696 28.6523H242.147C244.815 28.6523 247.031 29.276 248.795 30.5237C250.602 31.7288 251.958 33.5356 252.861 35.9453L252.933 36.1272L252.993 36.2935C253.034 36.176 253.077 36.0601 253.119 35.9453C254.066 33.5356 255.443 31.7288 257.25 30.5237C259.057 29.276 261.274 28.6523 263.899 28.6523H264.351C267.017 28.6523 269.255 29.276 271.062 30.5237C272.912 31.7288 274.311 33.5356 275.257 35.9453C276.204 38.355 276.678 41.367 276.678 44.9813V65.1179H266.351V44.4002C266.351 42.464 265.835 40.8936 264.802 39.689C263.812 38.4839 262.392 37.8816 260.543 37.8816C258.692 37.8816 257.229 38.5058 256.153 39.7534C255.078 40.958 254.539 42.5716 254.539 44.5942V65.1179H244.148V44.4002C244.148 42.464 243.632 40.8936 242.599 39.689C241.61 38.4839 240.211 37.8816 238.405 37.8816C236.511 37.8816 235.027 38.5058 233.951 39.7534C232.875 40.958 232.337 42.5716 232.337 44.5942V65.1179H222.01Z" fill="#4876EE" + d="M50.476 14.97V7.112h1.835v1.98a4.54 4.54 0 0 1 .173-.603c.202-.536.506-.937.91-1.205.405-.277.9-.416 1.488-.416h.101c.598 0 1.094.139 1.489.416.404.268.707.67.91 1.205l.016.04.013.037.028-.077c.212-.536.52-.937.925-1.205.405-.277.901-.416 1.489-.416h.1c.598 0 1.098.139 1.503.416.414.268.727.67.94 1.205.211.535.317 1.205.317 2.008v4.475h-2.312v-4.604c0-.43-.115-.78-.346-1.047-.222-.268-.54-.402-.954-.402-.414 0-.742.139-.982.416-.241.268-.362.626-.362 1.076v4.56h-2.326v-4.603c0-.43-.115-.78-.346-1.047-.222-.268-.535-.402-.94-.402-.423 0-.756.139-.996.416-.241.268-.362.626-.362 1.076v4.56h-2.311Z" /> <path + fill="#4876EE" fillRule="evenodd" + d="M68.888 13.456v1.515h1.834v-4.82c0-.726-.144-1.319-.433-1.778-.289-.468-.712-.817-1.271-1.047-.549-.23-1.228-.344-2.037-.344a27.76 27.76 0 0 0-.896.014c-.318.01-.626.024-.924.043l-.229.016a36.79 36.79 0 0 0-.552.042v1.936a81.998 81.998 0 0 1 1.733-.09 37.806 37.806 0 0 1 1.171-.025c.424 0 .732.1.925.301.193.201.289.502.289.904v.029h-1.43c-.704 0-1.325.09-1.864.272-.54.172-.959.445-1.257.818-.299.363-.448.832-.448 1.405 0 .526.12.98.361 1.363.24.373.573.66.997.86.433.201.934.302 1.502.302.55 0 1.012-.1 1.388-.302.385-.2.683-.487.895-.86a2.443 2.443 0 0 0 .228-.498l.018-.056Zm-.39-1.397v-.63h-1.445c-.405 0-.718.1-.939.3-.212.192-.318.455-.318.79 0 .157.026.3.08.429a.99.99 0 0 0 .238.345c.221.191.534.287.939.287a2.125 2.125 0 0 0 .394-.038c.106-.021.206-.052.3-.092.212-.095.385-.253.52-.473.135-.22.212-.526.23-.918Z" clipRule="evenodd" - d="M304.262 58.3029V65.1174H312.458V43.4316C312.458 40.1614 311.813 37.494 310.522 35.4283C309.231 33.32 307.339 31.7496 304.843 30.717C302.391 29.6845 299.357 29.168 295.743 29.168C294.959 29.168 294.142 29.1763 293.289 29.1933C292.786 29.2038 292.269 29.2168 291.741 29.2324C290.321 29.2755 288.943 29.3399 287.611 29.4262L286.592 29.4948C286.068 29.5312 285.577 29.567 285.114 29.6034C284.766 29.6304 284.437 29.6574 284.126 29.6845V38.3977C285.459 38.3114 286.943 38.2251 288.579 38.1394C289.036 38.1155 289.489 38.0931 289.939 38.0724C290.589 38.0422 291.23 38.0163 291.865 37.9934C292.366 37.9752 292.862 37.9591 293.355 37.9456C294.903 37.9024 296.151 37.8811 297.098 37.8811C298.991 37.8811 300.368 38.3327 301.229 39.2364C302.09 40.1402 302.519 41.4954 302.519 43.3027V43.4316H296.13C292.989 43.4316 290.214 43.8406 287.804 44.6581C285.394 45.4324 283.522 46.6588 282.19 48.3368C280.855 49.9722 280.189 52.0805 280.189 54.6621C280.189 57.0289 280.726 59.0726 281.802 60.7933C282.877 62.4713 284.361 63.7624 286.255 64.6654C288.192 65.5694 290.43 66.0214 292.967 66.0214C295.42 66.0214 297.485 65.5694 299.164 64.6654C300.885 63.7624 302.219 62.4713 303.165 60.7933C303.332 60.5108 303.487 60.2176 303.632 59.9127C303.837 59.482 304.019 59.0278 304.18 58.5534L304.262 58.3029ZM302.519 52.016V49.176H296.065C294.258 49.176 292.86 49.6276 291.871 50.5313C290.924 51.3919 290.45 52.5751 290.45 54.0811C290.45 54.7901 290.568 55.434 290.804 56.015C291.042 56.5971 291.397 57.1142 291.871 57.5662C292.86 58.4276 294.258 58.8572 296.065 58.8572C296.409 58.8572 296.742 58.8402 297.063 58.8061C297.325 58.7794 297.58 58.74 297.826 58.6899C298.3 58.5929 298.746 58.4553 299.164 58.2762C300.111 57.8466 300.885 57.1366 301.486 56.1462C302.09 55.1568 302.434 53.7797 302.519 52.016Z" - fill="#4876EE" - /> - <path - d="M318.639 65.117V29.7485H326.836V41.4228C327.228 38.0902 328.219 35.403 329.805 33.3628C331.956 30.6522 335.053 29.2969 339.099 29.2969H340.454V38.2034H337.872C335.033 38.2034 332.838 38.9777 331.289 40.5269C329.74 42.0328 328.965 44.2274 328.965 47.1099V65.117H318.639Z" - fill="#4876EE" /> <path - d="M353.549 48.5927H356.97L368.135 65.115H379.753L365.595 44.8235L377.236 29.7465H366.393L353.549 46.5639V18H343.223V65.115H353.549V48.5927Z" fill="#4876EE" + d="M72.106 14.97V7.11h1.835v2.595c.088-.74.31-1.338.665-1.791.481-.603 1.174-.904 2.08-.904h.303v1.98h-.578c-.635 0-1.127.172-1.473.516-.347.334-.52.822-.52 1.463v4.001h-2.312ZM79.92 11.298h.767l2.499 3.672h2.6l-3.169-4.51 2.606-3.35h-2.427l-2.875 3.737V4.5h-2.312v10.47h2.312v-3.672Z" /> </svg> </SvgIcon> 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 d87dc97aca99c9..8398bfef899d8f 100644 --- a/docs/data/material/getting-started/templates/sign-in/SignIn.js +++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js @@ -15,7 +15,7 @@ import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import Typography from '@mui/material/Typography'; 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'; @@ -43,7 +43,7 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) { exclusive value={showCustomTheme} onChange={toggleCustomTheme} - aria-label="Platform" + aria-label="Toggle design language" sx={{ backgroundColor: 'background.default', '& .Mui-selected': { @@ -140,8 +140,8 @@ export default function SignIn() { sx={(theme) => ({ backgroundImage: theme.palette.mode === 'light' - ? `linear-gradient(180deg, ${alpha('#CEE5FD', 0.2)}, #FFF)` - : `linear-gradient(${alpha('#02294F', 0.2)}, ${alpha('#021F3B', 0.0)})`, + ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' + : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', backgroundRepeat: 'no-repeat', height: { xs: 'auto', sm: '100dvh' }, pb: { xs: 12, sm: 0 }, @@ -180,11 +180,11 @@ export default function SignIn() { 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', + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', })} > - <SitemarkIcon sx={{ width: 100 }} /> + <SitemarkIcon /> <Typography component="h1" variant="h4" 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 0e7839d79d8388..e97165bc53369b 100644 --- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx +++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx @@ -14,7 +14,7 @@ import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; -import { alpha, PaletteMode } from '@mui/material'; +import { PaletteMode } from '@mui/material'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; @@ -50,7 +50,7 @@ function ToggleCustomTheme({ exclusive value={showCustomTheme} onChange={toggleCustomTheme} - aria-label="Platform" + aria-label="Toggle design language" sx={{ backgroundColor: 'background.default', '& .Mui-selected': { @@ -140,8 +140,8 @@ export default function SignIn() { sx={(theme) => ({ backgroundImage: theme.palette.mode === 'light' - ? `linear-gradient(180deg, ${alpha('#CEE5FD', 0.2)}, #FFF)` - : `linear-gradient(${alpha('#02294F', 0.2)}, ${alpha('#021F3B', 0.0)})`, + ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' + : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', backgroundRepeat: 'no-repeat', height: { xs: 'auto', sm: '100dvh' }, pb: { xs: 12, sm: 0 }, @@ -180,11 +180,11 @@ export default function SignIn() { 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', + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', })} > - <SitemarkIcon sx={{ width: 100 }} /> + <SitemarkIcon /> <Typography component="h1" variant="h4" diff --git a/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx index 3783eb9d80714d..1fd99c941fe0ab 100644 --- a/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx +++ b/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx @@ -11,7 +11,10 @@ interface ToggleColorModeProps { toggleColorMode: () => void; } -function ToggleColorMode({ mode, toggleColorMode }: ToggleColorModeProps) { +export default function ToggleColorMode({ + mode, + toggleColorMode, +}: ToggleColorModeProps) { return ( <IconButton onClick={toggleColorMode} @@ -26,5 +29,3 @@ function ToggleColorMode({ mode, toggleColorMode }: ToggleColorModeProps) { </IconButton> ); } - -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 index 1e788763faec22..224b3d9596dd45 100644 --- a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js +++ b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js @@ -1,73 +1,75 @@ import * as React from 'react'; -import { alpha } from '@mui/material/styles'; +import { createTheme, 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', -}; +const customTheme = createTheme(); -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 brand = { + 50: 'hsl(210, 100%, 97%)', + 100: 'hsl(210, 100%, 90%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', }; export const gray = { - 50: '#FBFCFE', - 100: '#EAF0F5', - 200: '#D6E2EB', - 300: '#BFCCD9', - 400: '#94A6B8', - 500: '#5B6B7C', - 600: '#4C5967', - 700: '#364049', - 800: '#131B20', - 900: '#090E10', + 50: 'hsl(220, 60%, 99%)', + 100: 'hsl(220, 35%, 94%)', + 200: 'hsl(220, 35%, 88%)', + 300: 'hsl(220, 25%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 25%, 35%)', + 700: 'hsl(220, 25%, 25%)', + 800: 'hsl(220, 25%, 10%)', + 900: 'hsl(220, 30%, 5%)', }; export const green = { - 50: '#F6FEF6', - 100: '#E3FBE3', - 200: '#C7F7C7', - 300: '#A1E8A1', - 400: '#51BC51', - 500: '#1F7A1F', - 600: '#136C13', - 700: '#0A470A', - 800: '#042F04', - 900: '#021D02', + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', }; export const red = { - 50: '#FFF0F0', - 100: '#FDCECE', - 200: '#FC9C9C', - 300: '#F65555', - 400: '#C20A0A', - 500: '#910808', - 600: '#790606', - 700: '#630303', - 800: '#4F0202', - 900: '#3B0202', + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 20%)', + 800: 'hsl(0, 95%, 16%)', + 900: 'hsl(0, 93%, 12%)', }; const getDesignTokens = (mode) => ({ @@ -85,26 +87,25 @@ const getDesignTokens = (mode) => ({ dark: brand[800], }), }, - secondary: { - light: secondary[300], - main: secondary[500], - dark: secondary[800], + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], ...(mode === 'dark' && { - light: secondary[400], - main: secondary[500], - dark: secondary[900], + light: orange[400], + main: orange[500], + dark: orange[700], }), }, - 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' }), + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), }, success: { light: green[300], @@ -117,27 +118,18 @@ const getDesignTokens = (mode) => ({ }), }, 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], + ...gray, }, 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] }), + default: 'hsl(0, 0%, 100%)', + paper: gray[100], + ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), }, text: { primary: gray[800], secondary: gray[600], - ...(mode === 'dark' && { primary: '#fff', secondary: gray[400] }), + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), }, action: { selected: `${alpha(brand[200], 0.2)}`, @@ -149,51 +141,54 @@ const getDesignTokens = (mode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: 60, + fontSize: customTheme.typography.pxToRem(60), fontWeight: 600, - lineHeight: 78 / 70, - letterSpacing: -0.2, + lineHeight: 1.2, + letterSpacing: -0.5, }, h2: { - fontSize: 48, + fontSize: customTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: 42, + fontSize: customTheme.typography.pxToRem(42), lineHeight: 1.2, }, h4: { - fontSize: 36, + fontSize: customTheme.typography.pxToRem(36), fontWeight: 500, lineHeight: 1.5, }, h5: { - fontSize: 20, + fontSize: customTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle1: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: 16, + fontSize: customTheme.typography.pxToRem(16), }, body1: { + fontSize: customTheme.typography.pxToRem(15), fontWeight: 400, - fontSize: 15, }, body2: { + fontSize: customTheme.typography.pxToRem(14), fontWeight: 400, - fontSize: 14, }, caption: { + fontSize: customTheme.typography.pxToRem(12), fontWeight: 400, - fontSize: 12, }, }, + shape: { + borderRadius: 12, + }, }); export default function getSignInTheme(mode) { @@ -208,9 +203,9 @@ export default function getSignInTheme(mode) { styleOverrides: { root: { boxSizing: 'border-box', - transition: 'all 100ms ease-in', + transition: 'all 100ms ease', '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, + outline: `3px solid ${alpha(brand[400], 0.5)}`, outlineOffset: '2px', }, }, @@ -220,34 +215,45 @@ export default function getSignInTheme(mode) { styleOverrides: { root: ({ theme, ownerState }) => ({ boxShadow: 'none', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, textTransform: 'none', ...(ownerState.size === 'small' && { - maxHeight: '32px', + height: '2rem', // 32px + padding: '0 0.5rem', }), ...(ownerState.size === 'medium' && { - height: '40px', + height: '2.5rem', // 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)}`, + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, border: `1px solid ${brand[500]}`, '&:hover': { - background: brand[400], - backgroundImage: 'none', - boxShadow: `0 0 0 1px ${alpha(brand[300], 0.5)}`, + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, }, }), ...(ownerState.variant === 'outlined' && { + color: brand[700], backgroundColor: alpha(brand[300], 0.1), - borderColor: brand[300], - color: brand[500], + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', + }, + '&:active': { backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', }, }), ...(ownerState.variant === 'outlined' && @@ -257,84 +263,173 @@ export default function getSignInTheme(mode) { color: gray[700], '&:hover': { backgroundColor: alpha(gray[300], 0.3), - borderColor: gray[200], + borderColor: alpha(gray[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), }, }), - ...(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' && { + color: brand[200], backgroundColor: alpha(brand[600], 0.1), - borderColor: brand[700], - color: brand[300], + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', }, }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), ...(ownerState.variant === 'outlined' && ownerState.color === 'secondary' && { + color: gray[300], backgroundColor: alpha(gray[600], 0.1), borderColor: alpha(gray[700], 0.5), - color: gray[300], + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[200], '&:hover': { - backgroundColor: alpha(gray[600], 0.3), - borderColor: gray[700], + backgroundColor: alpha(brand[700], 0.3), }, }), - ...(ownerState.variant === 'text' && { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], - }, - }), }), }), }, }, - MuiIconButton: { + MuiCard: { styleOverrides: { root: ({ theme, ownerState }) => ({ - ...(ownerState.size === 'small' && { - height: '32px', - width: '32px', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${alpha(gray[200], 0.1)}`, + boxShadow: 'none', + ...(ownerState.variant === 'outlined' && { + border: `1px solid ${alpha(gray[200], 0.5)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, }), - ...(ownerState.size === 'medium' && { - height: '40px', - width: '40px', + ...(theme.palette.mode === 'dark' && { + backgroundColor: alpha(gray[800], 0.6), + border: `1px solid ${alpha(gray[700], 0.2)}`, + ...(ownerState.variant === 'outlined' && { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), }), - color: brand[600], + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + <CheckBoxOutlineBlankRoundedIcon + sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} + /> + ), + checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />, + }, + 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 hsla(210, 0%, 0%, 0.04) inset', + backgroundColor: alpha(gray[100], 0.4), + transition: 'border-color, background-color, 120ms ease-in', '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + 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], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, }, ...(theme.palette.mode === 'dark' && { - color: brand[200], + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', }, }), }), }, }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, MuiDivider: { styleOverrides: { root: ({ theme }) => ({ @@ -345,50 +440,79 @@ export default function getSignInTheme(mode) { }), }, }, - MuiPaper: { + MuiFormLabel: { styleOverrides: { root: ({ theme }) => ({ - backgroundImage: 'none', - backgroundColor: gray[100], - ...(theme.palette.mode === 'dark' && { - backgroundColor: gray[800], - }), + typography: theme.typography.caption, + marginBottom: 8, }), }, }, - MuiDialog: { + MuiIconButton: { styleOverrides: { - root: ({ theme }) => ({ - '& .MuiDialog-paper': { - borderRadius: '10px', - border: '1px solid', - borderColor: theme.palette.divider, + root: ({ theme, ownerState }) => ({ + ...(ownerState.size === 'small' && { + height: '2rem', + width: '2rem', + }), + ...(ownerState.size === 'medium' && { + height: '2.5rem', + width: '2.5rem', + }), + color: brand[500], + '&: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], + }, + }), }), }, }, - MuiCard: { + MuiInputBase: { 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]})`, - }), + root: { + border: 'none', + }, + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: brand[700], + 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' && { - 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, - )})`, - }), + color: brand[200], }), }), }, @@ -408,6 +532,7 @@ export default function getSignInTheme(mode) { borderRadius: '8px', }, '& .MuiInputBase-input': { + fontSize: '1rem', '&::placeholder': { opacity: 0.7, color: gray[500], @@ -416,10 +541,10 @@ export default function getSignInTheme(mode) { boxSizing: 'border-box', flexGrow: 1, height: '40px', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, border: '1px solid', borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', transition: 'border-color 120ms ease-in', backgroundColor: alpha(gray[100], 0.4), '&:hover': { @@ -444,13 +569,14 @@ export default function getSignInTheme(mode) { borderRadius: '8px', }, '& .MuiInputBase-input': { + fontSize: '1rem', '&::placeholder': { opacity: 1, color: gray[500], }, }, borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', backgroundColor: alpha(gray[900], 0.8), transition: 'border-color 120ms ease-in', '&:hover': { @@ -472,128 +598,29 @@ export default function getSignInTheme(mode) { }), }, }, - MuiFormLabel: { - styleOverrides: { - root: ({ theme }) => ({ - typography: theme.typography.caption, - marginBottom: 8, - }), - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - border: 'none', - }, + MuiPaper: { + defaultProps: { + elevation: 0, }, }, - MuiLink: { + MuiStack: { 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], - }), - }), + useFlexGap: true, }, }, MuiToggleButtonGroup: { styleOverrides: { root: ({ theme }) => ({ - borderRadius: '10px', - boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + borderRadius: theme.shape.borderRadius, + boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, '& .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: <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'rgba(0,0,0,0)' }} />, - checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />, - }, - 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', + color: 'hsl(0, 0%, 100%)', }, + boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, }), }), }, @@ -603,21 +630,15 @@ export default function getSignInTheme(mode) { root: ({ theme }) => ({ padding: '12px 16px', textTransform: 'none', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, 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 index a5375811d8533a..4c655afff4d56c 100644 --- a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx +++ b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import type {} from '@mui/material/themeCssVarsAugmentation'; -import { ThemeOptions, alpha } from '@mui/material/styles'; +import { createTheme, ThemeOptions, alpha } from '@mui/material/styles'; import { PaletteMode } from '@mui/material'; import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; @@ -23,69 +23,71 @@ declare module '@mui/material/styles/createPalette' { 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', -}; +const customTheme = createTheme(); -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 brand = { + 50: 'hsl(210, 100%, 97%)', + 100: 'hsl(210, 100%, 90%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', }; export const gray = { - 50: '#FBFCFE', - 100: '#EAF0F5', - 200: '#D6E2EB', - 300: '#BFCCD9', - 400: '#94A6B8', - 500: '#5B6B7C', - 600: '#4C5967', - 700: '#364049', - 800: '#131B20', - 900: '#090E10', + 50: 'hsl(220, 60%, 99%)', + 100: 'hsl(220, 35%, 94%)', + 200: 'hsl(220, 35%, 88%)', + 300: 'hsl(220, 25%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 25%, 35%)', + 700: 'hsl(220, 25%, 25%)', + 800: 'hsl(220, 25%, 10%)', + 900: 'hsl(220, 30%, 5%)', }; export const green = { - 50: '#F6FEF6', - 100: '#E3FBE3', - 200: '#C7F7C7', - 300: '#A1E8A1', - 400: '#51BC51', - 500: '#1F7A1F', - 600: '#136C13', - 700: '#0A470A', - 800: '#042F04', - 900: '#021D02', + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', }; export const red = { - 50: '#FFF0F0', - 100: '#FDCECE', - 200: '#FC9C9C', - 300: '#F65555', - 400: '#C20A0A', - 500: '#910808', - 600: '#790606', - 700: '#630303', - 800: '#4F0202', - 900: '#3B0202', + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 20%)', + 800: 'hsl(0, 95%, 16%)', + 900: 'hsl(0, 93%, 12%)', }; const getDesignTokens = (mode: PaletteMode) => ({ @@ -103,26 +105,25 @@ const getDesignTokens = (mode: PaletteMode) => ({ dark: brand[800], }), }, - secondary: { - light: secondary[300], - main: secondary[500], - dark: secondary[800], + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], ...(mode === 'dark' && { - light: secondary[400], - main: secondary[500], - dark: secondary[900], + light: orange[400], + main: orange[500], + dark: orange[700], }), }, - 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' }), + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), }, success: { light: green[300], @@ -135,27 +136,18 @@ const getDesignTokens = (mode: PaletteMode) => ({ }), }, 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], + ...gray, }, 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] }), + default: 'hsl(0, 0%, 100%)', + paper: gray[100], + ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), }, text: { primary: gray[800], secondary: gray[600], - ...(mode === 'dark' && { primary: '#fff', secondary: gray[400] }), + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), }, action: { selected: `${alpha(brand[200], 0.2)}`, @@ -167,51 +159,54 @@ const getDesignTokens = (mode: PaletteMode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: 60, + fontSize: customTheme.typography.pxToRem(60), fontWeight: 600, - lineHeight: 78 / 70, - letterSpacing: -0.2, + lineHeight: 1.2, + letterSpacing: -0.5, }, h2: { - fontSize: 48, + fontSize: customTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: 42, + fontSize: customTheme.typography.pxToRem(42), lineHeight: 1.2, }, h4: { - fontSize: 36, + fontSize: customTheme.typography.pxToRem(36), fontWeight: 500, lineHeight: 1.5, }, h5: { - fontSize: 20, + fontSize: customTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle1: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: 16, + fontSize: customTheme.typography.pxToRem(16), }, body1: { + fontSize: customTheme.typography.pxToRem(15), fontWeight: 400, - fontSize: 15, }, body2: { + fontSize: customTheme.typography.pxToRem(14), fontWeight: 400, - fontSize: 14, }, caption: { + fontSize: customTheme.typography.pxToRem(12), fontWeight: 400, - fontSize: 12, }, }, + shape: { + borderRadius: 12, + }, }); export default function getSignInTheme(mode: PaletteMode): ThemeOptions { @@ -226,9 +221,9 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { styleOverrides: { root: { boxSizing: 'border-box', - transition: 'all 100ms ease-in', + transition: 'all 100ms ease', '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, + outline: `3px solid ${alpha(brand[400], 0.5)}`, outlineOffset: '2px', }, }, @@ -238,34 +233,45 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { styleOverrides: { root: ({ theme, ownerState }) => ({ boxShadow: 'none', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, textTransform: 'none', ...(ownerState.size === 'small' && { - maxHeight: '32px', + height: '2rem', // 32px + padding: '0 0.5rem', }), ...(ownerState.size === 'medium' && { - height: '40px', + height: '2.5rem', // 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)}`, + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, border: `1px solid ${brand[500]}`, '&:hover': { - background: brand[400], - backgroundImage: 'none', - boxShadow: `0 0 0 1px ${alpha(brand[300], 0.5)}`, + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, }, }), ...(ownerState.variant === 'outlined' && { + color: brand[700], backgroundColor: alpha(brand[300], 0.1), - borderColor: brand[300], - color: brand[500], + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', + }, + '&:active': { backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', }, }), ...(ownerState.variant === 'outlined' && @@ -275,84 +281,173 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { color: gray[700], '&:hover': { backgroundColor: alpha(gray[300], 0.3), - borderColor: gray[200], + borderColor: alpha(gray[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), }, }), - ...(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' && { + color: brand[200], backgroundColor: alpha(brand[600], 0.1), - borderColor: brand[700], - color: brand[300], + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', }, }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), ...(ownerState.variant === 'outlined' && ownerState.color === 'secondary' && { + color: gray[300], backgroundColor: alpha(gray[600], 0.1), borderColor: alpha(gray[700], 0.5), - color: gray[300], + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[200], '&:hover': { - backgroundColor: alpha(gray[600], 0.3), - borderColor: gray[700], + backgroundColor: alpha(brand[700], 0.3), }, }), - ...(ownerState.variant === 'text' && { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], - }, - }), }), }), }, }, - MuiIconButton: { + MuiCard: { styleOverrides: { root: ({ theme, ownerState }) => ({ - ...(ownerState.size === 'small' && { - height: '32px', - width: '32px', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${alpha(gray[200], 0.1)}`, + boxShadow: 'none', + ...(ownerState.variant === 'outlined' && { + border: `1px solid ${alpha(gray[200], 0.5)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, }), - ...(ownerState.size === 'medium' && { - height: '40px', - width: '40px', + ...(theme.palette.mode === 'dark' && { + backgroundColor: alpha(gray[800], 0.6), + border: `1px solid ${alpha(gray[700], 0.2)}`, + ...(ownerState.variant === 'outlined' && { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), }), - color: brand[600], + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + <CheckBoxOutlineBlankRoundedIcon + sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} + /> + ), + checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />, + }, + 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 hsla(210, 0%, 0%, 0.04) inset', + backgroundColor: alpha(gray[100], 0.4), + transition: 'border-color, background-color, 120ms ease-in', '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + 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], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, }, ...(theme.palette.mode === 'dark' && { - color: brand[200], + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', }, }), }), }, }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, MuiDivider: { styleOverrides: { root: ({ theme }) => ({ @@ -363,50 +458,79 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { }), }, }, - MuiPaper: { + MuiFormLabel: { styleOverrides: { root: ({ theme }) => ({ - backgroundImage: 'none', - backgroundColor: gray[100], - ...(theme.palette.mode === 'dark' && { - backgroundColor: gray[800], - }), + typography: theme.typography.caption, + marginBottom: 8, }), }, }, - MuiDialog: { + MuiIconButton: { styleOverrides: { - root: ({ theme }) => ({ - '& .MuiDialog-paper': { - borderRadius: '10px', - border: '1px solid', - borderColor: theme.palette.divider, + root: ({ theme, ownerState }) => ({ + ...(ownerState.size === 'small' && { + height: '2rem', + width: '2rem', + }), + ...(ownerState.size === 'medium' && { + height: '2.5rem', + width: '2.5rem', + }), + color: brand[500], + '&: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], + }, + }), }), }, }, - MuiCard: { + MuiInputBase: { 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]})`, - }), + root: { + border: 'none', + }, + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: brand[700], + 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' && { - 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, - )})`, - }), + color: brand[200], }), }), }, @@ -419,7 +543,6 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { input: { paddingLeft: 10, }, - root: ({ theme, ownerState }) => ({ 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, @@ -427,6 +550,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { borderRadius: '8px', }, '& .MuiInputBase-input': { + fontSize: '1rem', '&::placeholder': { opacity: 0.7, color: gray[500], @@ -435,10 +559,10 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { boxSizing: 'border-box', flexGrow: 1, height: '40px', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, border: '1px solid', borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', transition: 'border-color 120ms ease-in', backgroundColor: alpha(gray[100], 0.4), '&:hover': { @@ -463,13 +587,14 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { borderRadius: '8px', }, '& .MuiInputBase-input': { + fontSize: '1rem', '&::placeholder': { opacity: 1, color: gray[500], }, }, borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', backgroundColor: alpha(gray[900], 0.8), transition: 'border-color 120ms ease-in', '&:hover': { @@ -491,128 +616,29 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { }), }, }, - MuiFormLabel: { - styleOverrides: { - root: ({ theme }) => ({ - typography: theme.typography.caption, - marginBottom: 8, - }), - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - border: 'none', - }, + MuiPaper: { + defaultProps: { + elevation: 0, }, }, - MuiLink: { + MuiStack: { 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], - }), - }), + useFlexGap: true, }, }, MuiToggleButtonGroup: { styleOverrides: { root: ({ theme }) => ({ - borderRadius: '10px', - boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + borderRadius: theme.shape.borderRadius, + boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, '& .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: <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'rgba(0,0,0,0)' }} />, - checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />, - }, - 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', + color: 'hsl(0, 0%, 100%)', }, + boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, }), }), }, @@ -622,21 +648,15 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions { root: ({ theme }) => ({ padding: '12px 16px', textTransform: 'none', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, 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 index e4a8d735bb75e6..1c24a778fb4427 100644 --- a/docs/data/material/getting-started/templates/sign-up/CustomIcons.js +++ b/docs/data/material/getting-started/templates/sign-up/CustomIcons.js @@ -1,87 +1,57 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; - import SvgIcon from '@mui/material/SvgIcon'; -function SitemarkIcon({ sx }) { +export function SitemarkIcon() { return ( - <SvgIcon sx={sx}> + <SvgIcon sx={{ height: 21, width: 100 }}> <svg - width="380" - height="81" - viewBox="0 0 380 81" + width={86} + height={19} + viewBox="0 0 86 19" fill="none" xmlns="http://www.w3.org/2000/svg" > <path - d="M0.039093 54.3012L27.0897 42.2617L42.6595 51.2914L45.8049 80.915L26.6179 80.7561L29.4487 60.1623L26.1461 58.2614L9.9471 70.9352L0.039093 54.3012Z" fill="#B4C0D3" + d="m.787 12.567 6.055-2.675 3.485 2.006.704 6.583-4.295-.035.634-4.577-.74-.422-3.625 2.817-2.218-3.697Z" /> <path - d="M44.3904 50.0223L68.296 67.6062L77.7321 50.656L58.5444 42.8937V39.0917L77.7321 31.1709L68.296 14.3789L44.3904 31.963V50.0223Z" fill="#00D3AB" + d="m10.714 11.616 5.352 3.908 2.112-3.767-4.295-1.725v-.845l4.295-1.76-2.112-3.732-5.352 3.908v4.013Z" /> <path - d="M42.6595 30.5377L45.8049 0.914062L26.6179 1.2308L29.4487 21.8249L26.1461 23.7258L9.78985 11.0526L0.039093 27.5277L27.0897 39.5673L42.6595 30.5377Z" fill="#4876EF" + d="m10.327 7.286.704-6.583-4.295.07.634 4.577-.74.422-3.66-2.816L.786 6.617l6.055 2.676 3.485-2.007Z" /> <path - d="M141.744 37.3657V65.1185H152.07V29.75H137.032V37.3657H141.744Z" fill="#4876EE" + d="M32.507 8.804v6.167h2.312v-7.86h-3.366v1.693h1.054ZM32.435 6.006c.212.22.535.33.968.33.434 0 .751-.11.953-.33.213-.23.318-.516.318-.86 0-.354-.105-.641-.318-.86-.202-.23-.52-.345-.953-.345-.433 0-.756.115-.968.344-.202.22-.303.507-.303.86 0 .345.101.632.303.861ZM24.46 14.799c.655.296 1.46.444 2.413.444.896 0 1.667-.139 2.312-.416.645-.277 1.141-.664 1.488-1.162.357-.506.535-1.094.535-1.764 0-.65-.169-1.2-.506-1.649-.328-.459-.785-.818-1.373-1.076-.587-.267-1.266-.435-2.037-.502l-.809-.071c-.481-.039-.828-.168-1.04-.388a1.08 1.08 0 0 1-.318-.774c0-.23.058-.44.173-.631.116-.201.29-.359.52-.474.241-.114.535-.172.882-.172.366 0 .67.067.91.201.053.029.104.059.15.09l.012.009.052.037c.146.111.263.243.35.395.125.21.188.444.188.703h2.311c0-.689-.159-1.286-.476-1.793-.318-.516-.776-.913-1.373-1.19-.588-.287-1.296-.43-2.124-.43-.79 0-1.474.133-2.052.4a3.131 3.131 0 0 0-1.358 1.12c-.318.487-.477 1.066-.477 1.735 0 .927.314 1.673.94 2.237.626.564 1.464.89 2.514.976l.794.071c.645.058 1.113.187 1.401.388a.899.899 0 0 1 .434.788 1.181 1.181 0 0 1-.231.717c-.154.201-.38.36-.68.474-.298.115-.669.172-1.112.172-.49 0-.89-.067-1.199-.2-.308-.144-.539-.33-.694-.56a1.375 1.375 0 0 1-.216-.746h-2.297c0 .679.168 1.281.505 1.807.337.517.834.928 1.489 1.234ZM39.977 15.07c-.8 0-1.445-.095-1.936-.286a2.03 2.03 0 0 1-1.084-.99c-.221-.469-.332-1.1-.332-1.893V8.789h-1.2V7.11h1.2V4.988h2.153V7.11h2.312V8.79h-2.312v3.198c0 .373.096.66.289.86.202.192.486.287.852.287h1.17v1.937h-1.112Z" /> <path - d="M141.421 24.7785C142.368 25.768 143.809 26.2626 145.745 26.2626C147.682 26.2626 149.101 25.768 150.004 24.7785C150.952 23.7455 151.424 22.4545 151.424 20.906C151.424 19.3137 150.952 18.0229 150.004 17.0334C149.101 16.0009 147.682 15.4844 145.745 15.4844C143.809 15.4844 142.368 16.0009 141.421 17.0334C140.518 18.0229 140.066 19.3137 140.066 20.906C140.066 22.4545 140.518 23.7455 141.421 24.7785Z" fill="#4876EE" - /> - <path - d="M105.795 64.3433C108.72 65.677 112.313 66.3444 116.572 66.3444C120.574 66.3444 124.016 65.7196 126.899 64.4723C129.782 63.2249 131.998 61.4819 133.547 59.2441C135.139 56.9637 135.935 54.3177 135.935 51.3055C135.935 48.3798 135.183 45.9056 133.677 43.8831C132.213 41.818 130.17 40.2044 127.544 39.043C124.92 37.8379 121.887 37.0849 118.444 36.784L114.83 36.4613C112.679 36.2888 111.13 35.7083 110.183 34.7184C109.236 33.729 108.763 32.5669 108.763 31.2335C108.763 30.2004 109.022 29.2541 109.537 28.3936C110.054 27.4898 110.828 26.78 111.861 26.2634C112.937 25.7474 114.249 25.4891 115.798 25.4891C117.433 25.4891 118.789 25.79 119.864 26.3928C120.101 26.5201 120.326 26.6562 120.537 26.8008L120.588 26.8366C120.667 26.8912 120.745 26.9478 120.821 27.005C121.474 27.5044 121.994 28.0962 122.381 28.7807C122.94 29.7275 123.221 30.7814 123.221 31.9433H133.547C133.547 28.8452 132.837 26.1558 131.418 23.8755C129.998 21.5522 127.954 19.7666 125.286 18.5184C122.661 17.2276 119.499 16.582 115.798 16.582C112.269 16.582 109.215 17.1849 106.633 18.3895C104.052 19.5514 102.03 21.2295 100.567 23.4235C99.1457 25.618 98.4357 28.2215 98.4357 31.2335C98.4357 35.4069 99.8355 38.7629 102.632 41.302C105.428 43.8405 109.172 45.3034 113.862 45.6905L117.412 46.0132C120.294 46.2715 122.381 46.8525 123.672 47.7556C124.962 48.6163 125.608 49.7996 125.608 51.3055C125.608 51.9978 125.495 52.6468 125.268 53.2532C125.1 53.7032 124.87 54.1298 124.576 54.533C123.887 55.436 122.876 56.1461 121.542 56.6631C120.209 57.1791 118.552 57.4371 116.572 57.4371C114.378 57.4371 112.592 57.1365 111.216 56.533C109.839 55.8881 108.807 55.049 108.117 54.0166C107.472 52.9835 107.15 51.8652 107.15 50.6601H96.8877C96.8877 53.7152 97.6404 56.4254 99.1457 58.7921C100.652 61.1162 102.869 62.9659 105.795 64.3433Z" - fill="#4876EE" - /> - <path - d="M175.111 65.5678C171.539 65.5678 168.656 65.1371 166.462 64.2767C164.267 63.3727 162.654 61.8886 161.621 59.8236C160.632 57.7149 160.137 54.8759 160.137 51.304V37.2985H154.78V29.7472H160.137V20.1953H169.754V29.7472H180.081V37.2985H169.754V51.6916C169.754 53.3697 170.184 54.6605 171.045 55.5635C171.948 56.4238 173.217 56.8545 174.853 56.8545H180.081V65.5678H175.111Z" - fill="#4876EE" - /> - <path fillRule="evenodd" + d="M43.873 14.899c.52.23 1.117.344 1.791.344.665 0 1.252-.115 1.763-.344.51-.23.934-.55 1.271-.96.337-.412.564-.88.679-1.407h-2.124c-.096.24-.279.44-.549.603-.27.162-.616.244-1.04.244-.262 0-.497-.031-.704-.093a1.572 1.572 0 0 1-.423-.194 1.662 1.662 0 0 1-.636-.803 3.159 3.159 0 0 1-.163-.645h5.784v-.775a4.28 4.28 0 0 0-.463-1.98 3.686 3.686 0 0 0-1.343-1.477c-.578-.382-1.291-.574-2.139-.574-.645 0-1.223.115-1.733.345-.501.22-.92.52-1.257.903a4.178 4.178 0 0 0-.78 1.305c-.174.478-.26.98-.26 1.506v.287c0 .507.086 1.004.26 1.492.183.478.443.913.78 1.305.347.382.775.688 1.286.918Zm-.094-4.674.02-.09a2.507 2.507 0 0 1 .117-.356c.145-.354.356-.622.636-.804.104-.067.217-.123.339-.165.204-.071.433-.107.686-.107.395 0 .723.09.983.272.27.173.472.426.607.76a2.487 2.487 0 0 1 .16.603h-3.57c.006-.038.013-.076.022-.113Z" clipRule="evenodd" - d="M192.514 64.7963C194.837 65.8283 197.505 66.3453 200.517 66.3453C203.485 66.3453 206.111 65.8283 208.391 64.7963C210.672 63.7633 212.565 62.3219 214.07 60.4722C215.577 58.6215 216.588 56.5127 217.103 54.1465H207.616C207.186 55.2217 206.369 56.1257 205.164 56.8571C203.959 57.5884 202.409 57.9541 200.517 57.9541C199.344 57.9541 198.296 57.8155 197.373 57.5383C196.67 57.3272 196.04 57.0362 195.483 56.6641C194.192 55.8027 193.245 54.598 192.643 53.0495C192.475 52.6082 192.332 52.1468 192.212 51.6661C192.089 51.1792 191.99 50.6725 191.916 50.145H217.749V46.6597C217.749 43.4325 217.061 40.4638 215.684 37.7532C214.307 34.9989 212.306 32.783 209.682 31.1051C207.1 29.384 203.916 28.5234 200.129 28.5234C197.246 28.5234 194.664 29.04 192.384 30.0725C190.148 31.0619 188.276 32.4173 186.77 34.1384C185.264 35.8595 184.102 37.8176 183.283 40.0122C182.509 42.163 182.122 44.422 182.122 46.7885V48.0794C182.122 50.3601 182.509 52.5974 183.283 54.792C184.102 56.9434 185.264 58.9008 186.77 60.6652C188.319 62.3859 190.232 63.7633 192.514 64.7963ZM192.094 43.763C192.122 43.6263 192.152 43.4918 192.185 43.3593C192.275 42.9945 192.378 42.6448 192.496 42.3106C192.562 42.1204 192.632 41.9349 192.708 41.7546C193.353 40.1623 194.299 38.9577 195.547 38.1403C196.014 37.8348 196.519 37.5864 197.062 37.3951C197.974 37.0744 198.998 36.9139 200.129 36.9139C201.894 36.9139 203.356 37.3228 204.518 38.1403C205.723 38.9146 206.627 40.0547 207.229 41.5608C207.278 41.6823 207.324 41.806 207.369 41.9312C207.44 42.1308 207.506 42.3355 207.568 42.5455C207.659 42.8578 207.739 43.181 207.809 43.5151C207.86 43.7615 207.904 44.0135 207.943 44.2718H191.994C192.024 44.0993 192.057 43.9299 192.094 43.763Z" - fill="#4876EE" /> <path - d="M222.01 65.1179V29.7494H230.208V38.6575C230.319 38.1279 230.445 37.6197 230.587 37.1322C230.709 36.7218 230.839 36.3257 230.982 35.9453C231.886 33.5356 233.241 31.7288 235.048 30.5237C236.855 29.276 239.07 28.6523 241.696 28.6523H242.147C244.815 28.6523 247.031 29.276 248.795 30.5237C250.602 31.7288 251.958 33.5356 252.861 35.9453L252.933 36.1272L252.993 36.2935C253.034 36.176 253.077 36.0601 253.119 35.9453C254.066 33.5356 255.443 31.7288 257.25 30.5237C259.057 29.276 261.274 28.6523 263.899 28.6523H264.351C267.017 28.6523 269.255 29.276 271.062 30.5237C272.912 31.7288 274.311 33.5356 275.257 35.9453C276.204 38.355 276.678 41.367 276.678 44.9813V65.1179H266.351V44.4002C266.351 42.464 265.835 40.8936 264.802 39.689C263.812 38.4839 262.392 37.8816 260.543 37.8816C258.692 37.8816 257.229 38.5058 256.153 39.7534C255.078 40.958 254.539 42.5716 254.539 44.5942V65.1179H244.148V44.4002C244.148 42.464 243.632 40.8936 242.599 39.689C241.61 38.4839 240.211 37.8816 238.405 37.8816C236.511 37.8816 235.027 38.5058 233.951 39.7534C232.875 40.958 232.337 42.5716 232.337 44.5942V65.1179H222.01Z" fill="#4876EE" + d="M50.476 14.97V7.112h1.835v1.98a4.54 4.54 0 0 1 .173-.603c.202-.536.506-.937.91-1.205.405-.277.9-.416 1.488-.416h.101c.598 0 1.094.139 1.489.416.404.268.707.67.91 1.205l.016.04.013.037.028-.077c.212-.536.52-.937.925-1.205.405-.277.901-.416 1.489-.416h.1c.598 0 1.098.139 1.503.416.414.268.727.67.94 1.205.211.535.317 1.205.317 2.008v4.475h-2.312v-4.604c0-.43-.115-.78-.346-1.047-.222-.268-.54-.402-.954-.402-.414 0-.742.139-.982.416-.241.268-.362.626-.362 1.076v4.56h-2.326v-4.603c0-.43-.115-.78-.346-1.047-.222-.268-.535-.402-.94-.402-.423 0-.756.139-.996.416-.241.268-.362.626-.362 1.076v4.56h-2.311Z" /> <path + fill="#4876EE" fillRule="evenodd" + d="M68.888 13.456v1.515h1.834v-4.82c0-.726-.144-1.319-.433-1.778-.289-.468-.712-.817-1.271-1.047-.549-.23-1.228-.344-2.037-.344a27.76 27.76 0 0 0-.896.014c-.318.01-.626.024-.924.043l-.229.016a36.79 36.79 0 0 0-.552.042v1.936a81.998 81.998 0 0 1 1.733-.09 37.806 37.806 0 0 1 1.171-.025c.424 0 .732.1.925.301.193.201.289.502.289.904v.029h-1.43c-.704 0-1.325.09-1.864.272-.54.172-.959.445-1.257.818-.299.363-.448.832-.448 1.405 0 .526.12.98.361 1.363.24.373.573.66.997.86.433.201.934.302 1.502.302.55 0 1.012-.1 1.388-.302.385-.2.683-.487.895-.86a2.443 2.443 0 0 0 .228-.498l.018-.056Zm-.39-1.397v-.63h-1.445c-.405 0-.718.1-.939.3-.212.192-.318.455-.318.79 0 .157.026.3.08.429a.99.99 0 0 0 .238.345c.221.191.534.287.939.287a2.125 2.125 0 0 0 .394-.038c.106-.021.206-.052.3-.092.212-.095.385-.253.52-.473.135-.22.212-.526.23-.918Z" clipRule="evenodd" - d="M304.262 58.3029V65.1174H312.458V43.4316C312.458 40.1614 311.813 37.494 310.522 35.4283C309.231 33.32 307.339 31.7496 304.843 30.717C302.391 29.6845 299.357 29.168 295.743 29.168C294.959 29.168 294.142 29.1763 293.289 29.1933C292.786 29.2038 292.269 29.2168 291.741 29.2324C290.321 29.2755 288.943 29.3399 287.611 29.4262L286.592 29.4948C286.068 29.5312 285.577 29.567 285.114 29.6034C284.766 29.6304 284.437 29.6574 284.126 29.6845V38.3977C285.459 38.3114 286.943 38.2251 288.579 38.1394C289.036 38.1155 289.489 38.0931 289.939 38.0724C290.589 38.0422 291.23 38.0163 291.865 37.9934C292.366 37.9752 292.862 37.9591 293.355 37.9456C294.903 37.9024 296.151 37.8811 297.098 37.8811C298.991 37.8811 300.368 38.3327 301.229 39.2364C302.09 40.1402 302.519 41.4954 302.519 43.3027V43.4316H296.13C292.989 43.4316 290.214 43.8406 287.804 44.6581C285.394 45.4324 283.522 46.6588 282.19 48.3368C280.855 49.9722 280.189 52.0805 280.189 54.6621C280.189 57.0289 280.726 59.0726 281.802 60.7933C282.877 62.4713 284.361 63.7624 286.255 64.6654C288.192 65.5694 290.43 66.0214 292.967 66.0214C295.42 66.0214 297.485 65.5694 299.164 64.6654C300.885 63.7624 302.219 62.4713 303.165 60.7933C303.332 60.5108 303.487 60.2176 303.632 59.9127C303.837 59.482 304.019 59.0278 304.18 58.5534L304.262 58.3029ZM302.519 52.016V49.176H296.065C294.258 49.176 292.86 49.6276 291.871 50.5313C290.924 51.3919 290.45 52.5751 290.45 54.0811C290.45 54.7901 290.568 55.434 290.804 56.015C291.042 56.5971 291.397 57.1142 291.871 57.5662C292.86 58.4276 294.258 58.8572 296.065 58.8572C296.409 58.8572 296.742 58.8402 297.063 58.8061C297.325 58.7794 297.58 58.74 297.826 58.6899C298.3 58.5929 298.746 58.4553 299.164 58.2762C300.111 57.8466 300.885 57.1366 301.486 56.1462C302.09 55.1568 302.434 53.7797 302.519 52.016Z" - fill="#4876EE" - /> - <path - d="M318.639 65.117V29.7485H326.836V41.4228C327.228 38.0902 328.219 35.403 329.805 33.3628C331.956 30.6522 335.053 29.2969 339.099 29.2969H340.454V38.2034H337.872C335.033 38.2034 332.838 38.9777 331.289 40.5269C329.74 42.0328 328.965 44.2274 328.965 47.1099V65.117H318.639Z" - fill="#4876EE" /> <path - d="M353.549 48.5927H356.97L368.135 65.115H379.753L365.595 44.8235L377.236 29.7465H366.393L353.549 46.5639V18H343.223V65.115H353.549V48.5927Z" fill="#4876EE" + d="M72.106 14.97V7.11h1.835v2.595c.088-.74.31-1.338.665-1.791.481-.603 1.174-.904 2.08-.904h.303v1.98h-.578c-.635 0-1.127.172-1.473.516-.347.334-.52.822-.52 1.463v4.001h-2.312ZM79.92 11.298h.767l2.499 3.672h2.6l-3.169-4.51 2.606-3.35h-2.427l-2.875 3.737V4.5h-2.312v10.47h2.312v-3.672Z" /> </svg> </SvgIcon> ); } -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 ( <SvgIcon> diff --git a/docs/data/material/getting-started/templates/sign-up/CustomIcons.tsx b/docs/data/material/getting-started/templates/sign-up/CustomIcons.tsx index f66661a29dcb57..1c24a778fb4427 100644 --- a/docs/data/material/getting-started/templates/sign-up/CustomIcons.tsx +++ b/docs/data/material/getting-started/templates/sign-up/CustomIcons.tsx @@ -1,72 +1,51 @@ import * as React from 'react'; -import { SxProps, Theme } from '@mui/system'; import SvgIcon from '@mui/material/SvgIcon'; -interface IconProps { - sx?: SxProps<Theme>; -} - -export function SitemarkIcon({ sx }: IconProps) { +export function SitemarkIcon() { return ( - <SvgIcon sx={sx}> + <SvgIcon sx={{ height: 21, width: 100 }}> <svg - width="380" - height="81" - viewBox="0 0 380 81" + width={86} + height={19} + viewBox="0 0 86 19" fill="none" xmlns="http://www.w3.org/2000/svg" > <path - d="M0.039093 54.3012L27.0897 42.2617L42.6595 51.2914L45.8049 80.915L26.6179 80.7561L29.4487 60.1623L26.1461 58.2614L9.9471 70.9352L0.039093 54.3012Z" fill="#B4C0D3" + d="m.787 12.567 6.055-2.675 3.485 2.006.704 6.583-4.295-.035.634-4.577-.74-.422-3.625 2.817-2.218-3.697Z" /> <path - d="M44.3904 50.0223L68.296 67.6062L77.7321 50.656L58.5444 42.8937V39.0917L77.7321 31.1709L68.296 14.3789L44.3904 31.963V50.0223Z" fill="#00D3AB" + d="m10.714 11.616 5.352 3.908 2.112-3.767-4.295-1.725v-.845l4.295-1.76-2.112-3.732-5.352 3.908v4.013Z" /> <path - d="M42.6595 30.5377L45.8049 0.914062L26.6179 1.2308L29.4487 21.8249L26.1461 23.7258L9.78985 11.0526L0.039093 27.5277L27.0897 39.5673L42.6595 30.5377Z" fill="#4876EF" + d="m10.327 7.286.704-6.583-4.295.07.634 4.577-.74.422-3.66-2.816L.786 6.617l6.055 2.676 3.485-2.007Z" /> <path - d="M141.744 37.3657V65.1185H152.07V29.75H137.032V37.3657H141.744Z" - fill="#4876EE" - /> - <path - d="M141.421 24.7785C142.368 25.768 143.809 26.2626 145.745 26.2626C147.682 26.2626 149.101 25.768 150.004 24.7785C150.952 23.7455 151.424 22.4545 151.424 20.906C151.424 19.3137 150.952 18.0229 150.004 17.0334C149.101 16.0009 147.682 15.4844 145.745 15.4844C143.809 15.4844 142.368 16.0009 141.421 17.0334C140.518 18.0229 140.066 19.3137 140.066 20.906C140.066 22.4545 140.518 23.7455 141.421 24.7785Z" - fill="#4876EE" - /> - <path - d="M105.795 64.3433C108.72 65.677 112.313 66.3444 116.572 66.3444C120.574 66.3444 124.016 65.7196 126.899 64.4723C129.782 63.2249 131.998 61.4819 133.547 59.2441C135.139 56.9637 135.935 54.3177 135.935 51.3055C135.935 48.3798 135.183 45.9056 133.677 43.8831C132.213 41.818 130.17 40.2044 127.544 39.043C124.92 37.8379 121.887 37.0849 118.444 36.784L114.83 36.4613C112.679 36.2888 111.13 35.7083 110.183 34.7184C109.236 33.729 108.763 32.5669 108.763 31.2335C108.763 30.2004 109.022 29.2541 109.537 28.3936C110.054 27.4898 110.828 26.78 111.861 26.2634C112.937 25.7474 114.249 25.4891 115.798 25.4891C117.433 25.4891 118.789 25.79 119.864 26.3928C120.101 26.5201 120.326 26.6562 120.537 26.8008L120.588 26.8366C120.667 26.8912 120.745 26.9478 120.821 27.005C121.474 27.5044 121.994 28.0962 122.381 28.7807C122.94 29.7275 123.221 30.7814 123.221 31.9433H133.547C133.547 28.8452 132.837 26.1558 131.418 23.8755C129.998 21.5522 127.954 19.7666 125.286 18.5184C122.661 17.2276 119.499 16.582 115.798 16.582C112.269 16.582 109.215 17.1849 106.633 18.3895C104.052 19.5514 102.03 21.2295 100.567 23.4235C99.1457 25.618 98.4357 28.2215 98.4357 31.2335C98.4357 35.4069 99.8355 38.7629 102.632 41.302C105.428 43.8405 109.172 45.3034 113.862 45.6905L117.412 46.0132C120.294 46.2715 122.381 46.8525 123.672 47.7556C124.962 48.6163 125.608 49.7996 125.608 51.3055C125.608 51.9978 125.495 52.6468 125.268 53.2532C125.1 53.7032 124.87 54.1298 124.576 54.533C123.887 55.436 122.876 56.1461 121.542 56.6631C120.209 57.1791 118.552 57.4371 116.572 57.4371C114.378 57.4371 112.592 57.1365 111.216 56.533C109.839 55.8881 108.807 55.049 108.117 54.0166C107.472 52.9835 107.15 51.8652 107.15 50.6601H96.8877C96.8877 53.7152 97.6404 56.4254 99.1457 58.7921C100.652 61.1162 102.869 62.9659 105.795 64.3433Z" fill="#4876EE" + d="M32.507 8.804v6.167h2.312v-7.86h-3.366v1.693h1.054ZM32.435 6.006c.212.22.535.33.968.33.434 0 .751-.11.953-.33.213-.23.318-.516.318-.86 0-.354-.105-.641-.318-.86-.202-.23-.52-.345-.953-.345-.433 0-.756.115-.968.344-.202.22-.303.507-.303.86 0 .345.101.632.303.861ZM24.46 14.799c.655.296 1.46.444 2.413.444.896 0 1.667-.139 2.312-.416.645-.277 1.141-.664 1.488-1.162.357-.506.535-1.094.535-1.764 0-.65-.169-1.2-.506-1.649-.328-.459-.785-.818-1.373-1.076-.587-.267-1.266-.435-2.037-.502l-.809-.071c-.481-.039-.828-.168-1.04-.388a1.08 1.08 0 0 1-.318-.774c0-.23.058-.44.173-.631.116-.201.29-.359.52-.474.241-.114.535-.172.882-.172.366 0 .67.067.91.201.053.029.104.059.15.09l.012.009.052.037c.146.111.263.243.35.395.125.21.188.444.188.703h2.311c0-.689-.159-1.286-.476-1.793-.318-.516-.776-.913-1.373-1.19-.588-.287-1.296-.43-2.124-.43-.79 0-1.474.133-2.052.4a3.131 3.131 0 0 0-1.358 1.12c-.318.487-.477 1.066-.477 1.735 0 .927.314 1.673.94 2.237.626.564 1.464.89 2.514.976l.794.071c.645.058 1.113.187 1.401.388a.899.899 0 0 1 .434.788 1.181 1.181 0 0 1-.231.717c-.154.201-.38.36-.68.474-.298.115-.669.172-1.112.172-.49 0-.89-.067-1.199-.2-.308-.144-.539-.33-.694-.56a1.375 1.375 0 0 1-.216-.746h-2.297c0 .679.168 1.281.505 1.807.337.517.834.928 1.489 1.234ZM39.977 15.07c-.8 0-1.445-.095-1.936-.286a2.03 2.03 0 0 1-1.084-.99c-.221-.469-.332-1.1-.332-1.893V8.789h-1.2V7.11h1.2V4.988h2.153V7.11h2.312V8.79h-2.312v3.198c0 .373.096.66.289.86.202.192.486.287.852.287h1.17v1.937h-1.112Z" /> <path - d="M175.111 65.5678C171.539 65.5678 168.656 65.1371 166.462 64.2767C164.267 63.3727 162.654 61.8886 161.621 59.8236C160.632 57.7149 160.137 54.8759 160.137 51.304V37.2985H154.78V29.7472H160.137V20.1953H169.754V29.7472H180.081V37.2985H169.754V51.6916C169.754 53.3697 170.184 54.6605 171.045 55.5635C171.948 56.4238 173.217 56.8545 174.853 56.8545H180.081V65.5678H175.111Z" fill="#4876EE" - /> - <path fillRule="evenodd" + d="M43.873 14.899c.52.23 1.117.344 1.791.344.665 0 1.252-.115 1.763-.344.51-.23.934-.55 1.271-.96.337-.412.564-.88.679-1.407h-2.124c-.096.24-.279.44-.549.603-.27.162-.616.244-1.04.244-.262 0-.497-.031-.704-.093a1.572 1.572 0 0 1-.423-.194 1.662 1.662 0 0 1-.636-.803 3.159 3.159 0 0 1-.163-.645h5.784v-.775a4.28 4.28 0 0 0-.463-1.98 3.686 3.686 0 0 0-1.343-1.477c-.578-.382-1.291-.574-2.139-.574-.645 0-1.223.115-1.733.345-.501.22-.92.52-1.257.903a4.178 4.178 0 0 0-.78 1.305c-.174.478-.26.98-.26 1.506v.287c0 .507.086 1.004.26 1.492.183.478.443.913.78 1.305.347.382.775.688 1.286.918Zm-.094-4.674.02-.09a2.507 2.507 0 0 1 .117-.356c.145-.354.356-.622.636-.804.104-.067.217-.123.339-.165.204-.071.433-.107.686-.107.395 0 .723.09.983.272.27.173.472.426.607.76a2.487 2.487 0 0 1 .16.603h-3.57c.006-.038.013-.076.022-.113Z" clipRule="evenodd" - d="M192.514 64.7963C194.837 65.8283 197.505 66.3453 200.517 66.3453C203.485 66.3453 206.111 65.8283 208.391 64.7963C210.672 63.7633 212.565 62.3219 214.07 60.4722C215.577 58.6215 216.588 56.5127 217.103 54.1465H207.616C207.186 55.2217 206.369 56.1257 205.164 56.8571C203.959 57.5884 202.409 57.9541 200.517 57.9541C199.344 57.9541 198.296 57.8155 197.373 57.5383C196.67 57.3272 196.04 57.0362 195.483 56.6641C194.192 55.8027 193.245 54.598 192.643 53.0495C192.475 52.6082 192.332 52.1468 192.212 51.6661C192.089 51.1792 191.99 50.6725 191.916 50.145H217.749V46.6597C217.749 43.4325 217.061 40.4638 215.684 37.7532C214.307 34.9989 212.306 32.783 209.682 31.1051C207.1 29.384 203.916 28.5234 200.129 28.5234C197.246 28.5234 194.664 29.04 192.384 30.0725C190.148 31.0619 188.276 32.4173 186.77 34.1384C185.264 35.8595 184.102 37.8176 183.283 40.0122C182.509 42.163 182.122 44.422 182.122 46.7885V48.0794C182.122 50.3601 182.509 52.5974 183.283 54.792C184.102 56.9434 185.264 58.9008 186.77 60.6652C188.319 62.3859 190.232 63.7633 192.514 64.7963ZM192.094 43.763C192.122 43.6263 192.152 43.4918 192.185 43.3593C192.275 42.9945 192.378 42.6448 192.496 42.3106C192.562 42.1204 192.632 41.9349 192.708 41.7546C193.353 40.1623 194.299 38.9577 195.547 38.1403C196.014 37.8348 196.519 37.5864 197.062 37.3951C197.974 37.0744 198.998 36.9139 200.129 36.9139C201.894 36.9139 203.356 37.3228 204.518 38.1403C205.723 38.9146 206.627 40.0547 207.229 41.5608C207.278 41.6823 207.324 41.806 207.369 41.9312C207.44 42.1308 207.506 42.3355 207.568 42.5455C207.659 42.8578 207.739 43.181 207.809 43.5151C207.86 43.7615 207.904 44.0135 207.943 44.2718H191.994C192.024 44.0993 192.057 43.9299 192.094 43.763Z" - fill="#4876EE" /> <path - d="M222.01 65.1179V29.7494H230.208V38.6575C230.319 38.1279 230.445 37.6197 230.587 37.1322C230.709 36.7218 230.839 36.3257 230.982 35.9453C231.886 33.5356 233.241 31.7288 235.048 30.5237C236.855 29.276 239.07 28.6523 241.696 28.6523H242.147C244.815 28.6523 247.031 29.276 248.795 30.5237C250.602 31.7288 251.958 33.5356 252.861 35.9453L252.933 36.1272L252.993 36.2935C253.034 36.176 253.077 36.0601 253.119 35.9453C254.066 33.5356 255.443 31.7288 257.25 30.5237C259.057 29.276 261.274 28.6523 263.899 28.6523H264.351C267.017 28.6523 269.255 29.276 271.062 30.5237C272.912 31.7288 274.311 33.5356 275.257 35.9453C276.204 38.355 276.678 41.367 276.678 44.9813V65.1179H266.351V44.4002C266.351 42.464 265.835 40.8936 264.802 39.689C263.812 38.4839 262.392 37.8816 260.543 37.8816C258.692 37.8816 257.229 38.5058 256.153 39.7534C255.078 40.958 254.539 42.5716 254.539 44.5942V65.1179H244.148V44.4002C244.148 42.464 243.632 40.8936 242.599 39.689C241.61 38.4839 240.211 37.8816 238.405 37.8816C236.511 37.8816 235.027 38.5058 233.951 39.7534C232.875 40.958 232.337 42.5716 232.337 44.5942V65.1179H222.01Z" fill="#4876EE" + d="M50.476 14.97V7.112h1.835v1.98a4.54 4.54 0 0 1 .173-.603c.202-.536.506-.937.91-1.205.405-.277.9-.416 1.488-.416h.101c.598 0 1.094.139 1.489.416.404.268.707.67.91 1.205l.016.04.013.037.028-.077c.212-.536.52-.937.925-1.205.405-.277.901-.416 1.489-.416h.1c.598 0 1.098.139 1.503.416.414.268.727.67.94 1.205.211.535.317 1.205.317 2.008v4.475h-2.312v-4.604c0-.43-.115-.78-.346-1.047-.222-.268-.54-.402-.954-.402-.414 0-.742.139-.982.416-.241.268-.362.626-.362 1.076v4.56h-2.326v-4.603c0-.43-.115-.78-.346-1.047-.222-.268-.535-.402-.94-.402-.423 0-.756.139-.996.416-.241.268-.362.626-.362 1.076v4.56h-2.311Z" /> <path + fill="#4876EE" fillRule="evenodd" + d="M68.888 13.456v1.515h1.834v-4.82c0-.726-.144-1.319-.433-1.778-.289-.468-.712-.817-1.271-1.047-.549-.23-1.228-.344-2.037-.344a27.76 27.76 0 0 0-.896.014c-.318.01-.626.024-.924.043l-.229.016a36.79 36.79 0 0 0-.552.042v1.936a81.998 81.998 0 0 1 1.733-.09 37.806 37.806 0 0 1 1.171-.025c.424 0 .732.1.925.301.193.201.289.502.289.904v.029h-1.43c-.704 0-1.325.09-1.864.272-.54.172-.959.445-1.257.818-.299.363-.448.832-.448 1.405 0 .526.12.98.361 1.363.24.373.573.66.997.86.433.201.934.302 1.502.302.55 0 1.012-.1 1.388-.302.385-.2.683-.487.895-.86a2.443 2.443 0 0 0 .228-.498l.018-.056Zm-.39-1.397v-.63h-1.445c-.405 0-.718.1-.939.3-.212.192-.318.455-.318.79 0 .157.026.3.08.429a.99.99 0 0 0 .238.345c.221.191.534.287.939.287a2.125 2.125 0 0 0 .394-.038c.106-.021.206-.052.3-.092.212-.095.385-.253.52-.473.135-.22.212-.526.23-.918Z" clipRule="evenodd" - d="M304.262 58.3029V65.1174H312.458V43.4316C312.458 40.1614 311.813 37.494 310.522 35.4283C309.231 33.32 307.339 31.7496 304.843 30.717C302.391 29.6845 299.357 29.168 295.743 29.168C294.959 29.168 294.142 29.1763 293.289 29.1933C292.786 29.2038 292.269 29.2168 291.741 29.2324C290.321 29.2755 288.943 29.3399 287.611 29.4262L286.592 29.4948C286.068 29.5312 285.577 29.567 285.114 29.6034C284.766 29.6304 284.437 29.6574 284.126 29.6845V38.3977C285.459 38.3114 286.943 38.2251 288.579 38.1394C289.036 38.1155 289.489 38.0931 289.939 38.0724C290.589 38.0422 291.23 38.0163 291.865 37.9934C292.366 37.9752 292.862 37.9591 293.355 37.9456C294.903 37.9024 296.151 37.8811 297.098 37.8811C298.991 37.8811 300.368 38.3327 301.229 39.2364C302.09 40.1402 302.519 41.4954 302.519 43.3027V43.4316H296.13C292.989 43.4316 290.214 43.8406 287.804 44.6581C285.394 45.4324 283.522 46.6588 282.19 48.3368C280.855 49.9722 280.189 52.0805 280.189 54.6621C280.189 57.0289 280.726 59.0726 281.802 60.7933C282.877 62.4713 284.361 63.7624 286.255 64.6654C288.192 65.5694 290.43 66.0214 292.967 66.0214C295.42 66.0214 297.485 65.5694 299.164 64.6654C300.885 63.7624 302.219 62.4713 303.165 60.7933C303.332 60.5108 303.487 60.2176 303.632 59.9127C303.837 59.482 304.019 59.0278 304.18 58.5534L304.262 58.3029ZM302.519 52.016V49.176H296.065C294.258 49.176 292.86 49.6276 291.871 50.5313C290.924 51.3919 290.45 52.5751 290.45 54.0811C290.45 54.7901 290.568 55.434 290.804 56.015C291.042 56.5971 291.397 57.1142 291.871 57.5662C292.86 58.4276 294.258 58.8572 296.065 58.8572C296.409 58.8572 296.742 58.8402 297.063 58.8061C297.325 58.7794 297.58 58.74 297.826 58.6899C298.3 58.5929 298.746 58.4553 299.164 58.2762C300.111 57.8466 300.885 57.1366 301.486 56.1462C302.09 55.1568 302.434 53.7797 302.519 52.016Z" - fill="#4876EE" - /> - <path - d="M318.639 65.117V29.7485H326.836V41.4228C327.228 38.0902 328.219 35.403 329.805 33.3628C331.956 30.6522 335.053 29.2969 339.099 29.2969H340.454V38.2034H337.872C335.033 38.2034 332.838 38.9777 331.289 40.5269C329.74 42.0328 328.965 44.2274 328.965 47.1099V65.117H318.639Z" - fill="#4876EE" /> <path - d="M353.549 48.5927H356.97L368.135 65.115H379.753L365.595 44.8235L377.236 29.7465H366.393L353.549 46.5639V18H343.223V65.115H353.549V48.5927Z" fill="#4876EE" + d="M72.106 14.97V7.11h1.835v2.595c.088-.74.31-1.338.665-1.791.481-.603 1.174-.904 2.08-.904h.303v1.98h-.578c-.635 0-1.127.172-1.473.516-.347.334-.52.822-.52 1.463v4.001h-2.312ZM79.92 11.298h.767l2.499 3.672h2.6l-3.169-4.51 2.606-3.35h-2.427l-2.875 3.737V4.5h-2.312v10.47h2.312v-3.672Z" /> </svg> </SvgIcon> 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 5b8d9c0c02ce82..ecf2c3aa9fbf5c 100644 --- a/docs/data/material/getting-started/templates/sign-up/SignUp.js +++ b/docs/data/material/getting-started/templates/sign-up/SignUp.js @@ -15,7 +15,7 @@ import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; -import { alpha } from '@mui/material'; + import { createTheme, ThemeProvider } from '@mui/material/styles'; import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; @@ -42,7 +42,7 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) { exclusive value={showCustomTheme} onChange={toggleCustomTheme} - aria-placeholder="Platform" + aria-label="Toggle design language" sx={{ backgroundColor: 'background.default', '& .Mui-selected': { @@ -78,14 +78,11 @@ export default function SignUp() { 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; @@ -116,15 +113,6 @@ export default function SignUp() { setNameErrorMessage(''); } - if (!lastName.value || lastName.value.length < 1) { - setLastNameError(true); - setLastNameErrorMessage('Name is required.'); - isValid = false; - } else { - setLastNameError(false); - setLastNameErrorMessage(''); - } - return isValid; }; @@ -151,18 +139,17 @@ export default function SignUp() { <ThemeProvider theme={showCustomTheme ? SignUpTheme : defaultTheme}> <CssBaseline /> <Stack + component="main" direction="column" justifyContent="space-between" sx={(theme) => ({ + backgroundRepeat: 'no-repeat', 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' }, + ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' + : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', pb: { xs: 12, sm: 0 }, })} - component="main" > <Stack direction="row" @@ -196,11 +183,11 @@ export default function SignUp() { 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', + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', })} > - <SitemarkIcon sx={{ width: 100 }} /> + <SitemarkIcon /> <Typography component="h1" variant="h4" @@ -214,33 +201,19 @@ export default function SignUp() { sx={{ display: 'flex', flexDirection: 'column', gap: 2 }} > <FormControl> - <FormLabel htmlFor="name">Name</FormLabel> + <FormLabel htmlFor="name">Full name</FormLabel> <TextField autoComplete="name" name="name" required fullWidth id="name" - placeholder="John" + placeholder="Jon Snow" error={nameError} helperText={nameErrorMessage} color={nameError ? 'error' : 'primary'} /> </FormControl> - <FormControl> - <FormLabel htmlFor="lastName">Last name</FormLabel> - <TextField - required - fullWidth - id="lastName" - placeholder="Snow" - name="lastName" - autoComplete="last-name" - error={lastNameError} - helperText={lastNameErrorMessage} - color={lastNameError ? 'error' : 'primary'} - /> - </FormControl> <FormControl> <FormLabel htmlFor="email">Email</FormLabel> <TextField 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 d1974095423d59..697581720ed604 100644 --- a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx +++ b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx @@ -14,7 +14,7 @@ import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; -import { alpha, PaletteMode } from '@mui/material'; +import { PaletteMode } from '@mui/material'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; @@ -49,7 +49,7 @@ function ToggleCustomTheme({ exclusive value={showCustomTheme} onChange={toggleCustomTheme} - aria-placeholder="Platform" + aria-label="Toggle design language" sx={{ backgroundColor: 'background.default', '& .Mui-selected': { @@ -78,14 +78,11 @@ export default function SignUp() { 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; @@ -116,15 +113,6 @@ export default function SignUp() { setNameErrorMessage(''); } - if (!lastName.value || lastName.value.length < 1) { - setLastNameError(true); - setLastNameErrorMessage('Name is required.'); - isValid = false; - } else { - setLastNameError(false); - setLastNameErrorMessage(''); - } - return isValid; }; @@ -151,18 +139,17 @@ export default function SignUp() { <ThemeProvider theme={showCustomTheme ? SignUpTheme : defaultTheme}> <CssBaseline /> <Stack + component="main" direction="column" justifyContent="space-between" sx={(theme) => ({ + backgroundRepeat: 'no-repeat', 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' }, + ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' + : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', pb: { xs: 12, sm: 0 }, })} - component="main" > <Stack direction="row" @@ -196,11 +183,11 @@ export default function SignUp() { 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', + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', })} > - <SitemarkIcon sx={{ width: 100 }} /> + <SitemarkIcon /> <Typography component="h1" variant="h4" @@ -214,33 +201,19 @@ export default function SignUp() { sx={{ display: 'flex', flexDirection: 'column', gap: 2 }} > <FormControl> - <FormLabel htmlFor="name">Name</FormLabel> + <FormLabel htmlFor="name">Full name</FormLabel> <TextField autoComplete="name" name="name" required fullWidth id="name" - placeholder="John" + placeholder="Jon Snow" error={nameError} helperText={nameErrorMessage} color={nameError ? 'error' : 'primary'} /> </FormControl> - <FormControl> - <FormLabel htmlFor="lastName">Last name</FormLabel> - <TextField - required - fullWidth - id="lastName" - placeholder="Snow" - name="lastName" - autoComplete="last-name" - error={lastNameError} - helperText={lastNameErrorMessage} - color={lastNameError ? 'error' : 'primary'} - /> - </FormControl> <FormControl> <FormLabel htmlFor="email">Email</FormLabel> <TextField diff --git a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx index 3783eb9d80714d..1fd99c941fe0ab 100644 --- a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx +++ b/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx @@ -11,7 +11,10 @@ interface ToggleColorModeProps { toggleColorMode: () => void; } -function ToggleColorMode({ mode, toggleColorMode }: ToggleColorModeProps) { +export default function ToggleColorMode({ + mode, + toggleColorMode, +}: ToggleColorModeProps) { return ( <IconButton onClick={toggleColorMode} @@ -26,5 +29,3 @@ function ToggleColorMode({ mode, toggleColorMode }: ToggleColorModeProps) { </IconButton> ); } - -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 index 39d6b9d1db1d7e..e066b0a2d08458 100644 --- a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js +++ b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js @@ -1,73 +1,75 @@ import * as React from 'react'; -import { alpha } from '@mui/material/styles'; +import { createTheme, 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', -}; +const customTheme = createTheme(); -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 brand = { + 50: 'hsl(210, 100%, 97%)', + 100: 'hsl(210, 100%, 90%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', }; export const gray = { - 50: '#FBFCFE', - 100: '#EAF0F5', - 200: '#D6E2EB', - 300: '#BFCCD9', - 400: '#94A6B8', - 500: '#5B6B7C', - 600: '#4C5967', - 700: '#364049', - 800: '#131B20', - 900: '#090E10', + 50: 'hsl(220, 60%, 99%)', + 100: 'hsl(220, 35%, 94%)', + 200: 'hsl(220, 35%, 88%)', + 300: 'hsl(220, 25%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 25%, 35%)', + 700: 'hsl(220, 25%, 25%)', + 800: 'hsl(220, 25%, 10%)', + 900: 'hsl(220, 30%, 5%)', }; export const green = { - 50: '#F6FEF6', - 100: '#E3FBE3', - 200: '#C7F7C7', - 300: '#A1E8A1', - 400: '#51BC51', - 500: '#1F7A1F', - 600: '#136C13', - 700: '#0A470A', - 800: '#042F04', - 900: '#021D02', + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', }; export const red = { - 50: '#FFF0F0', - 100: '#FDCECE', - 200: '#FC9C9C', - 300: '#F65555', - 400: '#C20A0A', - 500: '#910808', - 600: '#790606', - 700: '#630303', - 800: '#4F0202', - 900: '#3B0202', + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 20%)', + 800: 'hsl(0, 95%, 16%)', + 900: 'hsl(0, 93%, 12%)', }; const getDesignTokens = (mode) => ({ @@ -85,26 +87,25 @@ const getDesignTokens = (mode) => ({ dark: brand[800], }), }, - secondary: { - light: secondary[300], - main: secondary[500], - dark: secondary[800], + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], ...(mode === 'dark' && { - light: secondary[400], - main: secondary[500], - dark: secondary[900], + light: orange[400], + main: orange[500], + dark: orange[700], }), }, - 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' }), + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), }, success: { light: green[300], @@ -117,27 +118,18 @@ const getDesignTokens = (mode) => ({ }), }, 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], + ...gray, }, 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] }), + default: 'hsl(0, 0%, 100%)', + paper: gray[100], + ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), }, text: { primary: gray[800], secondary: gray[600], - ...(mode === 'dark' && { primary: '#fff', secondary: gray[400] }), + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), }, action: { selected: `${alpha(brand[200], 0.2)}`, @@ -149,51 +141,54 @@ const getDesignTokens = (mode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: 60, + fontSize: customTheme.typography.pxToRem(60), fontWeight: 600, - lineHeight: 78 / 70, - letterSpacing: -0.2, + lineHeight: 1.2, + letterSpacing: -0.5, }, h2: { - fontSize: 48, + fontSize: customTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: 42, + fontSize: customTheme.typography.pxToRem(42), lineHeight: 1.2, }, h4: { - fontSize: 36, + fontSize: customTheme.typography.pxToRem(36), fontWeight: 500, lineHeight: 1.5, }, h5: { - fontSize: 20, + fontSize: customTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle1: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: 16, + fontSize: customTheme.typography.pxToRem(16), }, body1: { + fontSize: customTheme.typography.pxToRem(15), fontWeight: 400, - fontSize: 15, }, body2: { + fontSize: customTheme.typography.pxToRem(14), fontWeight: 400, - fontSize: 14, }, caption: { + fontSize: customTheme.typography.pxToRem(12), fontWeight: 400, - fontSize: 12, }, }, + shape: { + borderRadius: 12, + }, }); export default function getSignUpTheme(mode) { @@ -208,9 +203,9 @@ export default function getSignUpTheme(mode) { styleOverrides: { root: { boxSizing: 'border-box', - transition: 'all 100ms ease-in', + transition: 'all 100ms ease', '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, + outline: `3px solid ${alpha(brand[400], 0.5)}`, outlineOffset: '2px', }, }, @@ -220,34 +215,45 @@ export default function getSignUpTheme(mode) { styleOverrides: { root: ({ theme, ownerState }) => ({ boxShadow: 'none', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, textTransform: 'none', ...(ownerState.size === 'small' && { - maxHeight: '32px', + height: '2rem', // 32px + padding: '0 0.5rem', }), ...(ownerState.size === 'medium' && { - height: '40px', + height: '2.5rem', // 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)}`, + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, border: `1px solid ${brand[500]}`, '&:hover': { - background: brand[400], - backgroundImage: 'none', - boxShadow: `0 0 0 1px ${alpha(brand[300], 0.5)}`, + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, }, }), ...(ownerState.variant === 'outlined' && { + color: brand[700], backgroundColor: alpha(brand[300], 0.1), - borderColor: brand[300], - color: brand[500], + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', + }, + '&:active': { backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', }, }), ...(ownerState.variant === 'outlined' && @@ -257,84 +263,174 @@ export default function getSignUpTheme(mode) { color: gray[700], '&:hover': { backgroundColor: alpha(gray[300], 0.3), - borderColor: gray[200], + borderColor: alpha(gray[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), }, }), - ...(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' && { + color: brand[200], backgroundColor: alpha(brand[600], 0.1), - borderColor: brand[700], - color: brand[300], + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', }, }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), ...(ownerState.variant === 'outlined' && ownerState.color === 'secondary' && { + color: gray[300], backgroundColor: alpha(gray[600], 0.1), borderColor: alpha(gray[700], 0.5), - color: gray[300], + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[200], '&:hover': { - backgroundColor: alpha(gray[600], 0.3), - borderColor: gray[700], + backgroundColor: alpha(brand[700], 0.3), }, }), - ...(ownerState.variant === 'text' && { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], - }, - }), }), }), }, }, - MuiIconButton: { + MuiCard: { styleOverrides: { root: ({ theme, ownerState }) => ({ - ...(ownerState.size === 'small' && { - height: '32px', - width: '32px', + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${alpha(gray[200], 0.5)}`, + boxShadow: 'none', + ...(ownerState.variant === 'outlined' && { + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, }), - ...(ownerState.size === 'medium' && { - height: '40px', - width: '40px', + ...(theme.palette.mode === 'dark' && { + backgroundColor: alpha(gray[800], 0.6), + border: `1px solid ${alpha(gray[700], 0.3)}`, + ...(ownerState.variant === 'outlined' && { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), }), - color: brand[600], + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + <CheckBoxOutlineBlankRoundedIcon + sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} + /> + ), + checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />, + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + backgroundColor: alpha(gray[100], 0.4), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + transition: 'border-color, background-color, 120ms ease-in', '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + borderColor: gray[400], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, }, ...(theme.palette.mode === 'dark' && { - color: brand[200], + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', }, }), }), }, }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, MuiDivider: { styleOverrides: { root: ({ theme }) => ({ @@ -345,25 +441,80 @@ export default function getSignUpTheme(mode) { }), }, }, - MuiPaper: { + MuiFormLabel: { styleOverrides: { root: ({ theme }) => ({ - backgroundImage: 'none', - backgroundColor: gray[100], + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...(ownerState.size === 'small' && { + height: '2rem', + width: '2rem', + }), + ...(ownerState.size === 'medium' && { + height: '2.5rem', + width: '2.5rem', + }), + color: brand[500], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, ...(theme.palette.mode === 'dark' && { - backgroundColor: gray[800], + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, }), }), }, }, - MuiDialog: { + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, styleOverrides: { root: ({ theme }) => ({ - '& .MuiDialog-paper': { - borderRadius: '10px', - border: '1px solid', - borderColor: theme.palette.divider, + color: brand[700], + 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], + }), }), }, }, @@ -382,6 +533,7 @@ export default function getSignUpTheme(mode) { borderRadius: '8px', }, '& .MuiInputBase-input': { + fontSize: '1rem', '&::placeholder': { opacity: 0.7, color: gray[500], @@ -390,10 +542,10 @@ export default function getSignUpTheme(mode) { boxSizing: 'border-box', flexGrow: 1, height: '40px', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, border: '1px solid', borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', transition: 'border-color 120ms ease-in', backgroundColor: alpha(gray[100], 0.4), '&:hover': { @@ -418,13 +570,14 @@ export default function getSignUpTheme(mode) { borderRadius: '8px', }, '& .MuiInputBase-input': { + fontSize: '1rem', '&::placeholder': { opacity: 1, color: gray[500], }, }, borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', backgroundColor: alpha(gray[900], 0.8), transition: 'border-color 120ms ease-in', '&:hover': { @@ -446,154 +599,29 @@ export default function getSignUpTheme(mode) { }), }, }, - 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, - )})`, - }), - }), - }), + MuiPaper: { + defaultProps: { + elevation: 0, }, }, - MuiLink: { + MuiStack: { 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], - }), - }), + useFlexGap: true, }, }, MuiToggleButtonGroup: { styleOverrides: { root: ({ theme }) => ({ - borderRadius: '10px', - boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + borderRadius: theme.shape.borderRadius, + boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, '& .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: <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'rgba(0,0,0,0)' }} />, - checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />, - }, - 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', + color: 'hsl(0, 0%, 100%)', }, + boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, }), }), }, @@ -603,21 +631,15 @@ export default function getSignUpTheme(mode) { root: ({ theme }) => ({ padding: '12px 16px', textTransform: 'none', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, 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 index 51f2fa45444de8..19490022c87ad3 100644 --- a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx +++ b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import type {} from '@mui/material/themeCssVarsAugmentation'; -import { alpha, ThemeOptions } from '@mui/material/styles'; +import { createTheme, ThemeOptions, alpha } from '@mui/material/styles'; import { PaletteMode } from '@mui/material'; import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; @@ -23,69 +23,71 @@ declare module '@mui/material/styles/createPalette' { 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', -}; +const customTheme = createTheme(); -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 brand = { + 50: 'hsl(210, 100%, 97%)', + 100: 'hsl(210, 100%, 90%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', }; export const gray = { - 50: '#FBFCFE', - 100: '#EAF0F5', - 200: '#D6E2EB', - 300: '#BFCCD9', - 400: '#94A6B8', - 500: '#5B6B7C', - 600: '#4C5967', - 700: '#364049', - 800: '#131B20', - 900: '#090E10', + 50: 'hsl(220, 60%, 99%)', + 100: 'hsl(220, 35%, 94%)', + 200: 'hsl(220, 35%, 88%)', + 300: 'hsl(220, 25%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 25%, 35%)', + 700: 'hsl(220, 25%, 25%)', + 800: 'hsl(220, 25%, 10%)', + 900: 'hsl(220, 30%, 5%)', }; export const green = { - 50: '#F6FEF6', - 100: '#E3FBE3', - 200: '#C7F7C7', - 300: '#A1E8A1', - 400: '#51BC51', - 500: '#1F7A1F', - 600: '#136C13', - 700: '#0A470A', - 800: '#042F04', - 900: '#021D02', + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', }; export const red = { - 50: '#FFF0F0', - 100: '#FDCECE', - 200: '#FC9C9C', - 300: '#F65555', - 400: '#C20A0A', - 500: '#910808', - 600: '#790606', - 700: '#630303', - 800: '#4F0202', - 900: '#3B0202', + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 20%)', + 800: 'hsl(0, 95%, 16%)', + 900: 'hsl(0, 93%, 12%)', }; const getDesignTokens = (mode: PaletteMode) => ({ @@ -103,26 +105,25 @@ const getDesignTokens = (mode: PaletteMode) => ({ dark: brand[800], }), }, - secondary: { - light: secondary[300], - main: secondary[500], - dark: secondary[800], + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], ...(mode === 'dark' && { - light: secondary[400], - main: secondary[500], - dark: secondary[900], + light: orange[400], + main: orange[500], + dark: orange[700], }), }, - 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' }), + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), }, success: { light: green[300], @@ -135,27 +136,18 @@ const getDesignTokens = (mode: PaletteMode) => ({ }), }, 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], + ...gray, }, 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] }), + default: 'hsl(0, 0%, 100%)', + paper: gray[100], + ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), }, text: { primary: gray[800], secondary: gray[600], - ...(mode === 'dark' && { primary: '#fff', secondary: gray[400] }), + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), }, action: { selected: `${alpha(brand[200], 0.2)}`, @@ -167,51 +159,54 @@ const getDesignTokens = (mode: PaletteMode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: 60, + fontSize: customTheme.typography.pxToRem(60), fontWeight: 600, - lineHeight: 78 / 70, - letterSpacing: -0.2, + lineHeight: 1.2, + letterSpacing: -0.5, }, h2: { - fontSize: 48, + fontSize: customTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: 42, + fontSize: customTheme.typography.pxToRem(42), lineHeight: 1.2, }, h4: { - fontSize: 36, + fontSize: customTheme.typography.pxToRem(36), fontWeight: 500, lineHeight: 1.5, }, h5: { - fontSize: 20, + fontSize: customTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle1: { - fontSize: 18, + fontSize: customTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: 16, + fontSize: customTheme.typography.pxToRem(16), }, body1: { + fontSize: customTheme.typography.pxToRem(15), fontWeight: 400, - fontSize: 15, }, body2: { + fontSize: customTheme.typography.pxToRem(14), fontWeight: 400, - fontSize: 14, }, caption: { + fontSize: customTheme.typography.pxToRem(12), fontWeight: 400, - fontSize: 12, }, }, + shape: { + borderRadius: 12, + }, }); export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { @@ -226,9 +221,9 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { styleOverrides: { root: { boxSizing: 'border-box', - transition: 'all 100ms ease-in', + transition: 'all 100ms ease', '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, + outline: `3px solid ${alpha(brand[400], 0.5)}`, outlineOffset: '2px', }, }, @@ -238,34 +233,45 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { styleOverrides: { root: ({ theme, ownerState }) => ({ boxShadow: 'none', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, textTransform: 'none', ...(ownerState.size === 'small' && { - maxHeight: '32px', + height: '2rem', // 32px + padding: '0 0.5rem', }), ...(ownerState.size === 'medium' && { - height: '40px', + height: '2.5rem', // 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)}`, + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, border: `1px solid ${brand[500]}`, '&:hover': { - background: brand[400], - backgroundImage: 'none', - boxShadow: `0 0 0 1px ${alpha(brand[300], 0.5)}`, + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, }, }), ...(ownerState.variant === 'outlined' && { + color: brand[700], backgroundColor: alpha(brand[300], 0.1), - borderColor: brand[300], - color: brand[500], + borderColor: alpha(brand[200], 0.8), + boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, '&:hover': { + backgroundColor: alpha(brand[300], 0.2), + borderColor: alpha(brand[300], 0.5), + boxShadow: 'none', + }, + '&:active': { backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, + backgroundImage: 'none', }, }), ...(ownerState.variant === 'outlined' && @@ -275,84 +281,174 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { color: gray[700], '&:hover': { backgroundColor: alpha(gray[300], 0.3), - borderColor: gray[200], + borderColor: alpha(gray[300], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[300], 0.4), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[700], + '&:hover': { + backgroundColor: alpha(gray[300], 0.3), }, }), - ...(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' && { + color: brand[200], backgroundColor: alpha(brand[600], 0.1), - borderColor: brand[700], - color: brand[300], + borderColor: alpha(brand[600], 0.6), + boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + backgroundColor: alpha(brand[700], 0.2), + borderColor: alpha(brand[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(brand[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, + backgroundImage: 'none', }, }), + ...(ownerState.variant === 'text' && + ownerState.color === 'info' && { + color: gray[200], + '&:hover': { + backgroundColor: alpha(gray[700], 0.3), + }, + }), ...(ownerState.variant === 'outlined' && ownerState.color === 'secondary' && { + color: gray[300], backgroundColor: alpha(gray[600], 0.1), borderColor: alpha(gray[700], 0.5), - color: gray[300], + boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, + '&:hover': { + backgroundColor: alpha(gray[700], 0.2), + borderColor: alpha(gray[700], 0.5), + boxShadow: 'none', + }, + '&:active': { + backgroundColor: alpha(gray[800], 0.2), + boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, + backgroundImage: 'none', + }, + }), + ...(ownerState.variant === 'text' && + ownerState.color === 'primary' && { + color: brand[200], '&:hover': { - backgroundColor: alpha(gray[600], 0.3), - borderColor: gray[700], + backgroundColor: alpha(brand[700], 0.3), }, }), - ...(ownerState.variant === 'text' && { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], - }, - }), }), }), }, }, - MuiIconButton: { + MuiCard: { styleOverrides: { root: ({ theme, ownerState }) => ({ - ...(ownerState.size === 'small' && { - height: '32px', - width: '32px', + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${alpha(gray[200], 0.5)}`, + boxShadow: 'none', + ...(ownerState.variant === 'outlined' && { + border: `1px solid ${gray[200]}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, }), - ...(ownerState.size === 'medium' && { - height: '40px', - width: '40px', + ...(theme.palette.mode === 'dark' && { + backgroundColor: alpha(gray[800], 0.6), + border: `1px solid ${alpha(gray[700], 0.3)}`, + ...(ownerState.variant === 'outlined' && { + border: `1px solid ${alpha(gray[700], 0.4)}`, + boxShadow: 'none', + background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( + gray[800], + 0.5, + )})`, + }), }), - color: brand[600], + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + <CheckBoxOutlineBlankRoundedIcon + sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} + /> + ), + checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />, + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + backgroundColor: alpha(gray[100], 0.4), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + transition: 'border-color, background-color, 120ms ease-in', '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], + borderColor: gray[400], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, }, ...(theme.palette.mode === 'dark' && { - color: brand[200], + borderColor: alpha(gray[700], 0.5), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', }, }), }), }, }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, MuiDivider: { styleOverrides: { root: ({ theme }) => ({ @@ -363,25 +459,80 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { }), }, }, - MuiPaper: { + MuiFormLabel: { styleOverrides: { root: ({ theme }) => ({ - backgroundImage: 'none', - backgroundColor: gray[100], + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...(ownerState.size === 'small' && { + height: '2rem', + width: '2rem', + }), + ...(ownerState.size === 'medium' && { + height: '2.5rem', + width: '2.5rem', + }), + color: brand[500], + '&:hover': { + backgroundColor: alpha(brand[300], 0.3), + borderColor: brand[200], + }, ...(theme.palette.mode === 'dark' && { - backgroundColor: gray[800], + color: brand[200], + '&:hover': { + backgroundColor: alpha(brand[600], 0.3), + borderColor: brand[700], + }, }), }), }, }, - MuiDialog: { + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, styleOverrides: { root: ({ theme }) => ({ - '& .MuiDialog-paper': { - borderRadius: '10px', - border: '1px solid', - borderColor: theme.palette.divider, + color: brand[700], + 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], + }), }), }, }, @@ -393,7 +544,6 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { input: { paddingLeft: 10, }, - root: ({ theme, ownerState }) => ({ 'input:-webkit-autofill': { WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, @@ -401,6 +551,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { borderRadius: '8px', }, '& .MuiInputBase-input': { + fontSize: '1rem', '&::placeholder': { opacity: 0.7, color: gray[500], @@ -409,10 +560,10 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { boxSizing: 'border-box', flexGrow: 1, height: '40px', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, border: '1px solid', borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px rgba(0, 0, 0, 0.04) inset', + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', transition: 'border-color 120ms ease-in', backgroundColor: alpha(gray[100], 0.4), '&:hover': { @@ -437,13 +588,14 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { borderRadius: '8px', }, '& .MuiInputBase-input': { + fontSize: '1rem', '&::placeholder': { opacity: 1, color: gray[500], }, }, borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px rgb(0, 0, 0) inset', + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', backgroundColor: alpha(gray[900], 0.8), transition: 'border-color 120ms ease-in', '&:hover': { @@ -465,154 +617,29 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { }), }, }, - 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, - )})`, - }), - }), - }), + MuiPaper: { + defaultProps: { + elevation: 0, }, }, - MuiLink: { + MuiStack: { 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], - }), - }), + useFlexGap: true, }, }, MuiToggleButtonGroup: { styleOverrides: { root: ({ theme }) => ({ - borderRadius: '10px', - boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + borderRadius: theme.shape.borderRadius, + boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, '& .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: <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'rgba(0,0,0,0)' }} />, - checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />, - }, - 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', + color: 'hsl(0, 0%, 100%)', }, + boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, }), }), }, @@ -622,21 +649,15 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { root: ({ theme }) => ({ padding: '12px 16px', textTransform: 'none', - borderRadius: '10px', + borderRadius: theme.shape.borderRadius, 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/guides/minimizing-bundle-size/minimizing-bundle-size.md b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md index cb2301cd5b3387..c38c47545c3c00 100644 --- a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md +++ b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md @@ -214,10 +214,7 @@ It will perform the following diffs: The packages published on npm are **transpiled** with [Babel](https://github.com/babel/babel), optimized for performance with the [supported platforms](/material-ui/getting-started/supported-platforms/). -Custom bundles are also available: - -- [Modern bundle](#modern-bundle) -- [Legacy bundle](#legacy-bundle) +A [modern bundle](#modern-bundle) is also available. ### How to use custom bundles? @@ -264,9 +261,3 @@ A great way to use these bundles is to configure bundler aliases, for example wi The modern bundle can be found under the [`/modern` folder](https://unpkg.com/@mui/material/modern/). It targets the latest released versions of evergreen browsers (Chrome, Firefox, Safari, Edge). This can be used to make separate bundles targeting different browsers. - -### Legacy bundle - -If you need to support IE 11 you cannot use the default or modern bundle without transpilation. -However, you can use the legacy bundle found under the [`/legacy` folder](https://unpkg.com/@mui/material/legacy/). -You don't need any additional polyfills. diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index 880c30fe523c97..5829d5d971a20c 100644 --- a/docs/data/material/integrations/nextjs/nextjs.md +++ b/docs/data/material/integrations/nextjs/nextjs.md @@ -369,10 +369,9 @@ To learn more about theming, check out the [Theming guide](/material-ui/customiz If you want to use [CSS theme variables](/material-ui/experimental-api/css-theme-variables/overview/), use the `extendTheme` and `CssVarsProvider` instead: -````diff title="pages/_app.tsx" +```diff title="pages/_app.tsx" -import { ThemeProvider, createTheme } from '@mui/material/styles'; +import { CssVarsProvider, extendTheme } from '@mui/material/styles'; ``` Learn more about [the advantages of CSS theme variables](/material-ui/experimental-api/css-theme-variables/overview/#advantages). -```` 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 0d3b149465b83c..122b9fe800b153 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 @@ -169,9 +169,9 @@ Here's how to migrate: ``` ```diff - import { alertClasses } from '@mui/material/PaginationItem'; + import { alertClasses } from '@mui/material/Alert'; - MuiPaginationItem: { + MuiAlert: { styleOverrides: { root: { - [`&.${alertClasses.standardSuccess}`]: { @@ -954,6 +954,46 @@ The Slider's `componentsProps` was deprecated in favor of `slotProps`: /> ``` +## ToggleButtonGroup + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#toggle-button-group-classes) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@latest deprecations/toggle-button-group-classes <path> +``` + +### Composed CSS classes + +The CSS classes composing the `orientation` prop value and `grouped` CSS class have been removed. + +Here's how to migrate: + +```diff +-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedHorizontal ++.MuiToggleButtonGroup-root.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped +-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedVertical ++.MuiToggleButtonGroup-root.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped +``` + +```diff + + import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; + + MuiButtonGroup: { + styleOverrides: { + root: { +- [`& .${toggleButtonGroupClasses.groupedHorizontal}`]: { ++ [`&.${toggleButtonGroupClasses.horizontal} > .${toggleButtonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${toggleButtonGroupClasses.groupedVertical}`]: { ++ [`&.${toggleButtonGroupClasses.vertical} > .${toggleButtonGroupClasses.grouped}`]: { + color: 'red', + }, + }, + }, +``` + ## 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: @@ -972,3 +1012,65 @@ The StepLabel's `componentsProps` was deprecated in favor of `slotProps`: + slotProps={{ label: labelProps }} /> ``` + +### StepIconComponent + +The StepLabel's `StepIconComponent` was deprecated in favor of `slots.stepIcon`: + +```diff + <StepLabel +- StepIconComponent={StepIconComponent} ++ slots={{ stepIcon: StepIconComponent }} + /> +``` + +### StepIconProps + +The StepLabel's `StepIconProps` was deprecated in favor of `slotProps.stepIcon`: + +```diff + <StepLabel +- StepIconProps={StepIconProps} ++ slotProps={{ stepIcon: StepIconProps }} + /> +``` + +## StepConnector + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-connector-classes) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@next deprecations/step-connector-classes <path> +``` + +### Composed CSS classes + +The CSS classes that composed the `line` CSS class and `orientation` prop values were removed. + +Here's how to migrate: + +```diff +- .MuiStepConnector-lineHorizontal ++.MuiStepConnector-horizontal > .MuiStepConnector-line +- .MuiStepConnector-lineVertical ++.MuiStepConnector-vertical > .MuiStepConnector-line +``` + +```diff + import { stepConnectorClasses } from '@mui/material/StepConnector'; + + MuiStepConnector: { + styleOverrides: { + root: { +- [`& .${stepConnectorClasses.lineHorizontal}`]: { ++ [`&.${stepConnectorClasses.horizontal} > .${stepConnectorClasses.line}`]: { + color: 'red', + }, +- [`& .${stepConnectorClasses.lineVertical}`]: { ++ [`&.${stepConnectorClasses.vertical} > .${stepConnectorClasses.line}`]: { + color: 'red', + }, + }, + }, + }, +``` diff --git a/docs/data/material/migration/migration-v4/migration-v4.md b/docs/data/material/migration/migration-v4/migration-v4.md index 6feaca110bff0c..b50114c2570c31 100644 --- a/docs/data/material/migration/migration-v4/migration-v4.md +++ b/docs/data/material/migration/migration-v4/migration-v4.md @@ -67,7 +67,7 @@ The default bundle supports the following minimum versions: - and more (see [.browserslistrc (`stable` entry)](https://github.com/mui/material-ui/blob/v5.0.0/.browserslistrc#L11)) Material UI no longer supports IE 11. -If you need to support IE 11, check out our [legacy bundle](/material-ui/guides/minimizing-bundle-size/#legacy-bundle). +If you need to support IE 11, check out the [legacy bundle](https://v5.mui.com/material-ui/guides/minimizing-bundle-size/#legacy-bundle). ## Update React & TypeScript version 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/pages.ts b/docs/data/material/pages.ts index ee15159b9f27f6..42e4311a4f3b4d 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -327,6 +327,21 @@ const pages: MuiPage[] = [ { pathname: '/material-ui/discover-more/changelog' }, ], }, + { + pathname: '/material-ui/design-resources', + title: 'Design resources', + children: [ + { + pathname: '/material-ui/design-resources/material-ui-for-figma', + title: 'Material UI for Figma', + }, + { + pathname: '/material-ui/design-resources/connect', + title: 'Connect plugin', + beta: true, + }, + ], + }, { pathname: 'https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=sidenav', title: 'Template store', diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts index 7ade883964584f..7f4dd30bfbbe43 100644 --- a/docs/lib/sourcing.ts +++ b/docs/lib/sourcing.ts @@ -44,6 +44,7 @@ const ALLOWED_TAGS = [ 'MUI X', 'MUI System', 'Toolpad', + 'Connect', ]; export const getAllBlogPosts = () => { diff --git a/docs/mui-vale.zip b/docs/mui-vale.zip index 86fdbcc3f12bf0..e54c1641f071fc 100644 Binary files a/docs/mui-vale.zip and b/docs/mui-vale.zip differ diff --git a/docs/mui-vale/styles/MUI/CorrectReferenceAllCases.yml b/docs/mui-vale/styles/MUI/CorrectReferenceAllCases.yml index f8c94a1279bf21..0f9ecb4aab39cb 100644 --- a/docs/mui-vale/styles/MUI/CorrectReferenceAllCases.yml +++ b/docs/mui-vale/styles/MUI/CorrectReferenceAllCases.yml @@ -25,7 +25,8 @@ swap: Treemap Chart: Treemap sub-component: subcomponent sub-components: subcomponents - use-case: 'use case' - usecase: 'use case' - client side: 'client-side' - server side: 'server-side' + use-case: use case + usecase: use case + client side: client-side + server side: server-side + Material 3: Material Design 3 diff --git a/docs/next.config.mjs b/docs/next.config.mjs index 825504dbeb620f..f439a7f5a26a72 100644 --- a/docs/next.config.mjs +++ b/docs/next.config.mjs @@ -256,7 +256,7 @@ export default withDocsInfra({ return map; }, - // Used to signal we run yarn build + // Used to signal we run pnpm build ...(process.env.NODE_ENV === 'production' ? { output: 'export', diff --git a/docs/package.json b/docs/package.json index f4a8062b2b5549..315a51a02a861e 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,17 +19,17 @@ "link-check": "node ./scripts/reportBrokenLinks.js" }, "dependencies": { - "@babel/core": "^7.23.9", - "@babel/plugin-transform-object-assign": "^7.23.3", - "@babel/runtime": "^7.23.9", - "@babel/runtime-corejs2": "^7.23.9", + "@babel/core": "^7.24.4", + "@babel/plugin-transform-object-assign": "^7.24.1", + "@babel/runtime": "^7.24.4", + "@babel/runtime-corejs2": "^7.24.4", "@docsearch/react": "^3.6.0", "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.4", "@emotion/server": "^11.11.0", - "@emotion/styled": "^11.11.0", - "@fortawesome/fontawesome-svg-core": "^6.5.1", - "@fortawesome/free-solid-svg-icons": "^6.5.1", + "@emotion/styled": "^11.11.5", + "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-solid-svg-icons": "^6.5.2", "@fortawesome/react-fontawesome": "^0.2.0", "@mui/base": "workspace:*", "@mui/docs": "workspace:^", @@ -45,12 +45,12 @@ "@mui/types": "workspace:^", "@mui/utils": "workspace:^", "@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-data-grid": "7.2.0", + "@mui/x-data-grid-generator": "7.2.0", + "@mui/x-data-grid-premium": "7.2.0", + "@mui/x-data-grid-pro": "7.2.0", + "@mui/x-date-pickers": "6.19.9", + "@mui/x-date-pickers-pro": "6.19.9", "@mui/x-license-pro": "6.10.2", "@mui/x-tree-view": "6.17.0", "@popperjs/core": "^2.11.8", @@ -80,8 +80,8 @@ "jss-rtl": "^0.3.0", "lodash": "^4.17.21", "lz-string": "^1.5.0", - "markdown-to-jsx": "^7.4.5", - "material-ui-popup-state": "^5.0.10", + "markdown-to-jsx": "^7.4.7", + "material-ui-popup-state": "^5.1.0", "next": "^13.5.1", "notistack": "3.0.1", "nprogress": "^0.2.0", @@ -92,37 +92,37 @@ "react-dom": "^18.2.0", "react-draggable": "^4.4.6", "react-final-form": "^6.5.9", - "react-imask": "^7.5.0", - "react-intersection-observer": "^9.8.1", + "react-imask": "^7.6.0", + "react-intersection-observer": "^9.8.2", "react-is": "^18.2.0", - "react-number-format": "^5.3.3", - "react-router-dom": "^6.21.3", + "react-number-format": "^5.3.4", + "react-router-dom": "^6.22.3", "react-runner": "^1.0.3", "react-simple-code-editor": "^0.13.1", "react-spring": "^9.7.3", "react-swipeable-views": "^0.14.0", "react-swipeable-views-utils": "^0.14.0", "react-transition-group": "^4.4.5", - "react-virtuoso": "^4.7.2", + "react-virtuoso": "^4.7.8", "react-window": "^1.8.10", "rimraf": "^5.0.5", "styled-components": "^6.1.8", "stylis": "4.2.0", "stylis-plugin-rtl": "^2.1.1", "use-count-up": "^3.0.1", - "webpack-bundle-analyzer": "^4.10.1" + "webpack-bundle-analyzer": "^4.10.2" }, "devDependencies": { - "@babel/plugin-transform-react-constant-elements": "^7.23.3", - "@babel/preset-typescript": "^7.23.3", + "@babel/plugin-transform-react-constant-elements": "^7.24.1", + "@babel/preset-typescript": "^7.24.1", "@mui/internal-docs-utils": "workspace:^", "@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/node": "^18.19.31", "@types/prop-types": "^15.7.12", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", @@ -135,9 +135,9 @@ "cross-fetch": "^4.0.0", "gm": "^1.25.0", "marked": "^5.1.2", - "playwright": "^1.42.1", + "playwright": "^1.43.1", "prettier": "^3.2.5", - "tailwindcss": "^3.4.1", + "tailwindcss": "^3.4.3", "yargs": "^17.7.2" } } diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 7931cb56f13147..70dc207b752e66 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -347,7 +347,7 @@ MyApp.propTypes = { MyApp.getInitialProps = async ({ ctx, Component }) => { let pageProps = {}; - const req = require.context('docs/translations', false, /translations.*\.json$/); + const req = require.context('docs/translations', false, /\.\/translations.*\.json$/); const translations = mapTranslations(req); if (Component.getInitialProps) { diff --git a/docs/pages/base-ui.tsx b/docs/pages/base-ui.tsx index fd4b84b8965375..91f8644f6512c9 100644 --- a/docs/pages/base-ui.tsx +++ b/docs/pages/base-ui.tsx @@ -16,7 +16,7 @@ export default function BaseUI() { return ( <BrandingCssVarsProvider> <Head - title="Base UI: Unstyled React components and low-level hooks." + title="Base UI: Unstyled React components and low-level hooks" 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.`} card="/static/social-previews/baseui-preview.jpg" > diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 544fcd02b06a42..fc98fa100f8f9a 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { InferGetStaticPropsType } from 'next'; import { useRouter } from 'next/router'; -import { alpha } from '@mui/material/styles'; import Avatar from '@mui/material/Avatar'; import AvatarGroup from '@mui/material/AvatarGroup'; import Box from '@mui/material/Box'; @@ -64,19 +63,12 @@ function PostPreview(props: BlogPost) { /> ))} </Box> - <Typography - component="h2" - fontWeight="bold" - variant="subtitle1" - sx={{ - mb: 0.5, - }} - > + <Typography component="h2" fontWeight="bold" variant="subtitle1" gutterBottom> <Link aria-describedby={`describe-${props.slug}`} href={`/blog/${props.slug}/`} + color="text.primary" sx={{ - color: 'text.primary', '&:hover': { textDecoration: 'underline', }, @@ -153,7 +145,7 @@ function PostPreview(props: BlogPost) { </Typography> )} {props.date && ( - <Typography variant="caption" fontWeight="regular" color="text.secondary"> + <Typography variant="caption" fontWeight="regular" color="text.tertiary"> {new Date(props.date).toDateString()} </Typography> )} @@ -164,6 +156,7 @@ function PostPreview(props: BlogPost) { href={`/blog/${props.slug}`} id={`describe-${props.slug}`} endIcon={<KeyboardArrowRightRoundedIcon />} + size="small" sx={{ mt: { xs: 0.5, md: 0 }, p: { xs: 0, sm: '6px 8px' } }} > Read more @@ -173,7 +166,7 @@ function PostPreview(props: BlogPost) { ); } -const PAGE_SIZE = 5; +const PAGE_SIZE = 7; export default function Blog(props: InferGetStaticPropsType<typeof getStaticProps>) { const router = useRouter(); @@ -236,6 +229,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp { shallow: true }, ); }; + return ( <BrandingCssVarsProvider> <Head @@ -257,13 +251,15 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp </Typography> } /> + </Section> + <Divider /> + <Container sx={{ mt: { xs: 2, sm: -6 } }}> <Box component="ul" sx={{ display: 'grid', m: 0, p: 0, - pt: 8, gap: 2, gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', }} @@ -273,25 +269,18 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp key={post.slug} component="li" variant="outlined" - sx={[ - { - p: 2, - display: 'flex', - flexDirection: 'column', - position: 'relative', - borderColor: 'grey.200', - boxShadow: '0px 4px 12px rgba(170, 180, 190, 0.2)', - '&:focus-within': { - '& a': { - outline: 0, - }, - }, - }, - (theme) => - theme.applyDarkStyles({ - boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.4)', - }), - ]} + sx={(theme) => ({ + p: 2, + display: 'flex', + flexDirection: 'column', + backgroundImage: (theme.vars || theme).palette.gradients.radioSubtle, + boxShadow: '0 4px 12px rgba(170, 180, 190, 0.2)', + ...theme.applyDarkStyles({ + background: (theme.vars || theme).palette.primaryDark[900], + backgroundImage: (theme.vars || theme).palette.gradients.radioSubtle, + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4)', + }), + })} > {post.image && ( <Box @@ -310,8 +299,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp </Paper> ))} </Box> - </Section> - <Divider /> + </Container> <Container ref={postListRef} sx={{ @@ -325,7 +313,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp <Typography component="h2" variant="h6" - fontWeight="700" + fontWeight="semiBold" sx={{ mb: { xs: 1, sm: 2 }, mt: 8 }} // margin-top makes the title appear when scroll into view > Posts{' '} @@ -342,94 +330,105 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp </Typography> <Box sx={{ gridRow: 'span 2' }}> <Box - sx={(theme) => ({ + sx={{ position: 'sticky', - top: 100, - alignSelf: 'start', - mb: 2, - mt: { xs: 3, sm: 2, md: 9 }, // margin-top makes the title appear when scroll into view - p: 2, - borderRadius: 1, - border: '1px solid', - borderColor: (theme.vars || theme).palette.divider, - boxShadow: '0px 2px 6px rgba(170, 180, 190, 0.2)', - ...theme.applyDarkStyles({ - background: alpha(theme.palette.primaryDark[700], 0.2), - boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.2)', - }), - })} + top: 90, + mt: { xs: 0, md: 9 }, + mb: { xs: 2, md: 0 }, + display: 'flex', + flexDirection: 'column', + gap: 2, + '& .MuiPaper-root': { + p: 2, + bgcolor: 'transparent', + borderColor: 'divider', + }, + }} > - <Typography color="text.primary" fontWeight="semiBold" sx={{ mb: 2 }}> - Filter by tag - </Typography> - <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}> - {Object.keys(tagInfo).map((tag) => { - const selected = !!selectedTags[tag]; - return ( - <Chip - key={tag} - variant={selected ? 'filled' : 'outlined'} - color={selected ? 'primary' : undefined} - {...(selected - ? { - label: tag, - onDelete: () => { - postListRef.current?.scrollIntoView(); - removeTag(tag); - }, - } - : { - label: tag, - onClick: () => { - postListRef.current?.scrollIntoView(); - router.push( - { - query: { - ...router.query, - tags: tag, + <Paper variant="outlined"> + <Typography + color="text.primary" + fontWeight="semiBold" + variant="subtitle2" + sx={{ mb: 2 }} + > + Filter posts by tag + </Typography> + <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}> + {Object.keys(tagInfo).map((tag) => { + const selected = !!selectedTags[tag]; + return ( + <Chip + key={tag} + variant={selected ? 'filled' : 'outlined'} + color={selected ? 'primary' : undefined} + {...(selected + ? { + label: tag, + onDelete: () => { + postListRef.current?.scrollIntoView(); + removeTag(tag); + }, + } + : { + label: tag, + onClick: () => { + postListRef.current?.scrollIntoView(); + router.push( + { + query: { + ...router.query, + tags: tag, + }, }, - }, - undefined, - { shallow: true }, - ); - }, - })} - size="small" - sx={{ - py: 1.2, - }} - /> - ); - })} - </Box> - <Divider sx={{ my: 2 }} /> - <Typography color="text.primary" fontWeight="semiBold" gutterBottom> - Want to hear more from us? - </Typography> - <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}> - Get up to date with everything MUI-related through our social media: - </Typography> - <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, '* > svg': { mr: 1 } }}> - <Link href="https://github.com/mui" target="_blank" fontSize={14}> - <GitHubIcon fontSize="small" /> - GitHub - </Link> - <Link href="https://twitter.com/MUI_hq" target="_blank" fontSize={14}> - <XIcon fontSize="small" />X - </Link> - <Link href="https://mui.com/r/discord/" target="_blank" fontSize={14}> - <DiscordIcon fontSize="small" /> - Discord - </Link> - <Link href="https://www.linkedin.com/company/mui/" target="_blank" fontSize={14}> - <LinkedInIcon fontSize="small" /> - LinkedIn - </Link> - <Link href="https://www.youtube.com/@MUI_hq" target="_blank" fontSize={14}> - <YouTubeIcon fontSize="small" /> - Youtube - </Link> - </Box> + undefined, + { shallow: true }, + ); + }, + })} + size="small" + sx={{ + py: 1.2, + }} + /> + ); + })} + </Box> + </Paper> + <Paper variant="outlined"> + <Typography + color="text.primary" + fontWeight="semiBold" + variant="subtitle2" + gutterBottom + > + Want to hear more from us? + </Typography> + <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}> + Get up to date with everything MUI-related through our social media: + </Typography> + <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, '* > svg': { mr: 1 } }}> + <Link href="https://github.com/mui" target="_blank" fontSize={14}> + <GitHubIcon fontSize="small" /> + GitHub + </Link> + <Link href="https://twitter.com/MUI_hq" target="_blank" fontSize={14}> + <XIcon fontSize="small" />X + </Link> + <Link href="https://mui.com/r/discord/" target="_blank" fontSize={14}> + <DiscordIcon fontSize="small" /> + Discord + </Link> + <Link href="https://www.linkedin.com/company/mui/" target="_blank" fontSize={14}> + <LinkedInIcon fontSize="small" /> + LinkedIn + </Link> + <Link href="https://www.youtube.com/@MUI_hq" target="_blank" fontSize={14}> + <YouTubeIcon fontSize="small" /> + Youtube + </Link> + </Box> + </Paper> </Box> </Box> <div> diff --git a/docs/pages/blog/2019-developer-survey-results.md b/docs/pages/blog/2019-developer-survey-results.md index 392206d8f8c1d9..98e98cdb6c3bbe 100644 --- a/docs/pages/blog/2019-developer-survey-results.md +++ b/docs/pages/blog/2019-developer-survey-results.md @@ -4,7 +4,7 @@ description: Your feedback helps us to build better products. Here's what we lea date: 2019-03-16T00:00:00.000Z authors: ['oliviertassinari', 'mbrookes'] tags: ['Developer Survey'] -card: true +manualCard: true --- While we are currently working on the upcoming release of Material UI v4, we need to prioritize our diff --git a/docs/pages/blog/2019.md b/docs/pages/blog/2019.md index a528508030a330..200cf9280ef1ca 100644 --- a/docs/pages/blog/2019.md +++ b/docs/pages/blog/2019.md @@ -4,7 +4,7 @@ date: 2020-01-25T00:00:00.000Z description: 2019 was a great year for Material UI. It puts us on an exciting path to solve even greater challenges in the coming years! authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- 2019 was a great year for Material UI. diff --git a/docs/pages/blog/2020-developer-survey-results.md b/docs/pages/blog/2020-developer-survey-results.md index 9c89e737c62c3c..42f611ecce9484 100644 --- a/docs/pages/blog/2020-developer-survey-results.md +++ b/docs/pages/blog/2020-developer-survey-results.md @@ -4,7 +4,7 @@ description: Your feedback helps us to build better products. Here's what we lea date: 2020-06-27T00:00:00.000Z authors: ['mnajdova', 'oliviertassinari', 'mbrookes'] tags: ['Developer Survey'] -card: true +manualCard: true --- Continuing the tradition from last year, we launched a Developer Survey a few months ago, to which we received 1488 responses. This is twice as many as last year (734), so we thank you all for your participation! diff --git a/docs/pages/blog/2020-introducing-sketch.md b/docs/pages/blog/2020-introducing-sketch.md index 731b1ee9549a67..783370d31d57b6 100644 --- a/docs/pages/blog/2020-introducing-sketch.md +++ b/docs/pages/blog/2020-introducing-sketch.md @@ -4,7 +4,7 @@ description: Today, we're excited to announce the introduction of official Sketc date: 2020-03-30T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Material UI', 'Product'] -card: true +manualCard: true --- Today, we're excited to introduce the Sketch symbols 💎 for Material UI. diff --git a/docs/pages/blog/2020-q1-update.md b/docs/pages/blog/2020-q1-update.md index ca6e353e94c685..74974a32703f13 100644 --- a/docs/pages/blog/2020-q1-update.md +++ b/docs/pages/blog/2020-q1-update.md @@ -4,7 +4,7 @@ description: An update on our mission for Q1 2020. date: 2020-04-14T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- Welcome to the new format of our mission update. We are moving from monthly to quarterly updates. diff --git a/docs/pages/blog/2020-q2-update.md b/docs/pages/blog/2020-q2-update.md index 09fc6ee3dc1b4c..6d34a639194694 100644 --- a/docs/pages/blog/2020-q2-update.md +++ b/docs/pages/blog/2020-q2-update.md @@ -4,7 +4,7 @@ description: An update on our mission for Q2 2020. date: 2020-07-17T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- This update covers our progress over the last three months, and what we aim to achieve in the coming months. diff --git a/docs/pages/blog/2020-q3-update.md b/docs/pages/blog/2020-q3-update.md index 54e67b4bcb6b8b..f819f177ff06dc 100644 --- a/docs/pages/blog/2020-q3-update.md +++ b/docs/pages/blog/2020-q3-update.md @@ -4,7 +4,7 @@ description: An update on our mission for Q3 2020. date: 2020-10-14T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- This update covers our progress over the last three months, and what we aim to achieve in the coming months. diff --git a/docs/pages/blog/2020.md b/docs/pages/blog/2020.md index 97e953f791cd04..811f44cac98d53 100644 --- a/docs/pages/blog/2020.md +++ b/docs/pages/blog/2020.md @@ -4,7 +4,7 @@ description: 2020 has been another great year, not only for MUI, but also for th date: 2020-12-31T00:00:00.000Z authors: ['oliviertassinari', 'mbrookes'] tags: ['Company'] -card: true +manualCard: true --- 2020 has been another great year, not only for MUI, but also for the ecosystem. @@ -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/blog/2021-developer-survey-results.md b/docs/pages/blog/2021-developer-survey-results.md index e6b3eba54ff130..93bb07ccb79477 100644 --- a/docs/pages/blog/2021-developer-survey-results.md +++ b/docs/pages/blog/2021-developer-survey-results.md @@ -4,7 +4,7 @@ description: Your feedback helps us to build better products. Here's what we lea date: 2022-03-15T00:00:00.000Z authors: ['danilo-leal', 'samuelsycamore', 'oliviertassinari'] tags: ['Developer Survey'] -card: true +manualCard: true --- Keeping up with tradition, a few months ago we opened the 2021 MUI Developer Survey. diff --git a/docs/pages/blog/2021-q1-update.md b/docs/pages/blog/2021-q1-update.md index 2c7bf644eed777..6c430546ecb0a2 100644 --- a/docs/pages/blog/2021-q1-update.md +++ b/docs/pages/blog/2021-q1-update.md @@ -4,7 +4,7 @@ description: An update on our mission for Q1 2021. date: 2021-04-12T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- This update covers our progress over the last three months, and what we aim to achieve in the months ahead. diff --git a/docs/pages/blog/2021-q2-update.md b/docs/pages/blog/2021-q2-update.md index a7650185843a22..952eb8e27cbafd 100644 --- a/docs/pages/blog/2021-q2-update.md +++ b/docs/pages/blog/2021-q2-update.md @@ -4,7 +4,7 @@ description: An update on our mission for Q2 2021. date: 2021-07-12T00:00:00.000Z authors: ['oliviertassinari', 'mbrookes'] tags: ['Company'] -card: true +manualCard: true --- This update covers our progress over the last three months. @@ -217,7 +217,7 @@ We have the following objectives: - ⚛️ Support [React 18](https://legacy.reactjs.org/blog/2021/06/08/the-plan-for-react-18.html). [Sebastian](https://github.com/eps1lon) is part of the React [Working Group](https://github.com/reactwg/react-18/discussions), focusing on making us ready ahead of time. We want our most demanding users to feel empowered by Material UI, not slowed down by a third-party library. - 🦴 Migrate more components to `@mui/base`. [Michał](https://github.com/michaldudak) has recently added support for the [Switch](https://mui.com/base-ui/react-switch/). - You can follow our progress in the [umbrella issue](https://github.com/mui/material-ui/issues/27170). + You can follow our progress in the [umbrella issue](https://github.com/mui/base-ui/issues/10). - 🌈 Do a proof of concept on supporting a second design system. Some of our users (and potential users) dislike Material Design. We will try to make the second design system one that they love! - 🗓 Execute on all of the items in the [public roadmap](https://github.com/orgs/mui/projects/23/views/12). diff --git a/docs/pages/blog/2021-q3-update.md b/docs/pages/blog/2021-q3-update.md index dbb57c07d4ea15..6bb1b6a477d07c 100644 --- a/docs/pages/blog/2021-q3-update.md +++ b/docs/pages/blog/2021-q3-update.md @@ -4,7 +4,7 @@ description: An update on our mission for Q3 2021. date: 2021-10-26T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- This update covers our progress over the last three months. @@ -195,7 +195,7 @@ We'll do our best, no guarantee! We need to make the most of this feedback to solve regressions, improve the documentation for the new APIs, adjust the tradeoffs we took in the light of more information, and more. [15%](https://npm-stat.com/charts.html?package=%40material-ui%2Fcore&package=%40mui%2Fmaterial&from=2020-10-25&to=2021-10-15) of the community has migrated, so far. - 🦴 Migrate more components to `@mui/base`. [Michał](https://github.com/michaldudak) has recently added support for the [Button](https://mui.com/base-ui/react-button/). - You can follow our progress in the [umbrella issue](https://github.com/mui/material-ui/issues/27170). + You can follow our progress in the [umbrella issue](https://github.com/mui/base-ui/issues/10). - 🎨 We are [exploring](https://github.com/mui/material-ui/discussions/29024) the introduction of CSS variables. Since v5, Material UI is no longer actively supporting IE 11. Dropping this browser requirement unlocks new capabilities of the web platform. - 🌈 Resume work on the second design system. diff --git a/docs/pages/blog/2021.md b/docs/pages/blog/2021.md index 61d81f432e1b7b..48b56ce6e1d06b 100644 --- a/docs/pages/blog/2021.md +++ b/docs/pages/blog/2021.md @@ -4,7 +4,7 @@ description: 2021 has been another great year, not only for MUI but also for the date: 2021-12-31T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- <img src="/static/blog/2021/card.png" alt="" style="width: 100%; margin-bottom: 16px;" /> @@ -123,7 +123,7 @@ To continue improving the customization experience, we will double down on the v These components and hooks contain the main functionalities and accessibility, without being opinionated about how styles are applied or what styles. We still have work to do to have a full set of unstyled components. -You can read more about them in [the docs](/base-ui/getting-started/) and keep track of our progress in [#27170](https://github.com/mui/material-ui/issues/27170). +You can read more about them in [the docs](/base-ui/getting-started/) and keep track of our progress in [#27170](https://github.com/mui/base-ui/issues/10). Our high-level plan is to use the unstyled components and hooks as the basis of the Material Design components and our second design system. diff --git a/docs/pages/blog/2022-tenerife-retreat.md b/docs/pages/blog/2022-tenerife-retreat.md index b111d056ac85e3..1402e4240838c4 100644 --- a/docs/pages/blog/2022-tenerife-retreat.md +++ b/docs/pages/blog/2022-tenerife-retreat.md @@ -4,7 +4,7 @@ description: Our internationally distributed startup gathered on a remote island date: 2022-07-28T00:00:00.000Z authors: ['samuelsycamore'] tags: ['Company'] -card: true +manualCard: true --- One of the toughest challenges to overcome as a fully remote team is fostering a supportive and inclusive company culture. diff --git a/docs/pages/blog/2023-chamonix-retreat.md b/docs/pages/blog/2023-chamonix-retreat.md index 19b8559a739580..d6bccc7e15406f 100644 --- a/docs/pages/blog/2023-chamonix-retreat.md +++ b/docs/pages/blog/2023-chamonix-retreat.md @@ -4,7 +4,7 @@ description: The MUI team spent five days in the French Alps team-building, prob date: 2023-03-16T00:00:00.000Z authors: ['mikailaread'] tags: ['Company'] -card: true +manualCard: true --- ## Why the Chamonix gathering? diff --git a/docs/pages/blog/2023-material-ui-v6-and-beyond.md b/docs/pages/blog/2023-material-ui-v6-and-beyond.md index 24bebf7f41ee2f..aee8654af71152 100644 --- a/docs/pages/blog/2023-material-ui-v6-and-beyond.md +++ b/docs/pages/blog/2023-material-ui-v6-and-beyond.md @@ -3,7 +3,7 @@ title: The road to Material UI v6 and beyond description: We're tightening up the Material UI release schedule and shipping two major versions in 2024. Here's what to expect. date: 2023-12-23T00:00:00.000Z authors: ['mnajdova'] -card: true +manualCard: true tags: ['Material UI', 'Product'] --- diff --git a/docs/pages/blog/2023-mui-values.md b/docs/pages/blog/2023-mui-values.md index 79668d65b69148..27e3dd49b1d642 100644 --- a/docs/pages/blog/2023-mui-values.md +++ b/docs/pages/blog/2023-mui-values.md @@ -4,7 +4,7 @@ description: After significant growth, we united as a team to rediscover the val date: 2023-09-26T00:00:00.000Z authors: ['mikailaread'] tags: ['Company'] -card: true +manualCard: true --- ## Why we chose to revise our core values diff --git a/docs/pages/blog/2023-phuket-retreat.md b/docs/pages/blog/2023-phuket-retreat.md index 2b9b1d338e2446..35bf504c9ba842 100644 --- a/docs/pages/blog/2023-phuket-retreat.md +++ b/docs/pages/blog/2023-phuket-retreat.md @@ -4,7 +4,7 @@ description: The latest team retreat left MUIers feeling more connected and invi date: 2023-12-13T00:00:00.000Z authors: ['mikailaread'] tags: ['Company'] -card: true +manualCard: true --- ## What is MUI's Together Week? diff --git a/docs/pages/blog/2023-toolpad-beta-announcement.md b/docs/pages/blog/2023-toolpad-beta-announcement.md index 318dfe94bfe1e9..ae5e5305477224 100644 --- a/docs/pages/blog/2023-toolpad-beta-announcement.md +++ b/docs/pages/blog/2023-toolpad-beta-announcement.md @@ -3,7 +3,7 @@ title: Introducing Toolpad: MUI's low-code admin builder description: Assemble admin panels and internal tools faster than ever before with Toolpad—now in beta. date: 2023-07-24T00:00:00.000Z authors: ['prakhargupta'] -card: true +manualCard: true tags: ['Product', 'Toolpad'] --- diff --git a/docs/pages/blog/aggregation-functions.md b/docs/pages/blog/aggregation-functions.md index 68ddfb0d169974..58254350d5292a 100644 --- a/docs/pages/blog/aggregation-functions.md +++ b/docs/pages/blog/aggregation-functions.md @@ -4,7 +4,7 @@ description: Aggregation functions and summary rows are now available in the MUI date: 2022-08-01T00:00:00.000Z authors: ['josefreitas', 'flaviendelangle', 'cherniavskii'] tags: ['MUI X', 'Product'] -card: true +manualCard: true --- If you've ever worked with a data-heavy grid, then you understand how important it is for the end user to be able to set different perspectives on the data to gather the information they're looking for. diff --git a/docs/pages/blog/april-2019-update.md b/docs/pages/blog/april-2019-update.md index 4b6a76792a9db7..c4a81e258dba49 100644 --- a/docs/pages/blog/april-2019-update.md +++ b/docs/pages/blog/april-2019-update.md @@ -4,7 +4,7 @@ description: Here are the most significant improvements in April. date: 2019-05-07T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- Here are the most significant improvements in April: diff --git a/docs/pages/blog/august-2019-update.md b/docs/pages/blog/august-2019-update.md index 5bde138036b660..77fa9cbb761278 100644 --- a/docs/pages/blog/august-2019-update.md +++ b/docs/pages/blog/august-2019-update.md @@ -4,7 +4,7 @@ description: Here are the most significant improvements in August. date: 2019-09-07T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- Here are the most significant improvements in August: diff --git a/docs/pages/blog/base-ui-2024-plans.md b/docs/pages/blog/base-ui-2024-plans.md index 12d33c4406a1b6..8298409dbe85f2 100644 --- a/docs/pages/blog/base-ui-2024-plans.md +++ b/docs/pages/blog/base-ui-2024-plans.md @@ -4,7 +4,7 @@ description: The unstyled component library will get a stable release, lots of n date: 2024-02-13T00:00:00.000Z authors: ['danilo-leal', 'michaldudak', 'colmtuite', 'oliviertassinari'] tags: ['Base UI', 'Product'] -card: true +manualCard: true --- The [story of Base UI](/blog/introducing-base-ui/) began several years ago—long before headless React component libraries skyrocketed in popularity—when we started to imagine a world in which Material UI could exist without Material Design. diff --git a/docs/pages/blog/benny-joo-joining.md b/docs/pages/blog/benny-joo-joining.md index 4fac8d9b5f4338..bcecb2de2b043e 100644 --- a/docs/pages/blog/benny-joo-joining.md +++ b/docs/pages/blog/benny-joo-joining.md @@ -4,7 +4,7 @@ description: We are excited to share that Benny Joo has joined MUI. He has start date: 2021-11-16T00:00:00.000Z authors: ['mnajdova'] tags: ['Company'] -card: true +manualCard: true --- We are excited to share that [Benny Joo](https://github.com/hbjORbj) has joined MUI. diff --git a/docs/pages/blog/bringing-consistency-to-material-ui-customization-apis.md b/docs/pages/blog/bringing-consistency-to-material-ui-customization-apis.md index dc43c0bb98c9aa..c3f1b7330f0cee 100644 --- a/docs/pages/blog/bringing-consistency-to-material-ui-customization-apis.md +++ b/docs/pages/blog/bringing-consistency-to-material-ui-customization-apis.md @@ -4,7 +4,7 @@ description: We're standardizing two key areas of the Material UI customization date: 2024-03-18T10:00:00.000Z authors: ['diegoandai'] tags: ['Material UI', 'Product'] -card: true +manualCard: true --- The Material UI team is working on two initiatives to standardize the Material UI API: The first applies to overriding inner elements, and the second applies to component CSS classes. diff --git a/docs/pages/blog/build-layouts-faster-with-grid-v2.md b/docs/pages/blog/build-layouts-faster-with-grid-v2.md index b40ad11e25f25f..b2b6a5834b37ce 100644 --- a/docs/pages/blog/build-layouts-faster-with-grid-v2.md +++ b/docs/pages/blog/build-layouts-faster-with-grid-v2.md @@ -4,7 +4,7 @@ description: The new Grid v2 features simplified logic, support for offsetting a date: 2022-08-20T00:00:00.000Z authors: ['siriwatknp'] tags: ['Material UI', 'Guide'] -card: true +manualCard: true --- You can now use the new `Grid` component, shipped with [Material UI v5.9.0](https://github.com/mui/material-ui/releases/tag/v5.9.0), for updated features and a better developer experience when building layouts. diff --git a/docs/pages/blog/callback-support-in-style-overrides.md b/docs/pages/blog/callback-support-in-style-overrides.md index 77325f31e9dfbc..42019929c4721f 100644 --- a/docs/pages/blog/callback-support-in-style-overrides.md +++ b/docs/pages/blog/callback-support-in-style-overrides.md @@ -4,7 +4,7 @@ description: We're excited to introduce callback support for global theme overri date: 2022-01-31T00:00:00.000Z authors: ['siriwatknp'] tags: ['Material UI', 'Product'] -card: true +manualCard: true --- <span class="x x-first x-last">[</span>Material UI v5.3.0](https://github.com/mui/material-ui/releases/tag/v5.3.0) introduces the ability to write a callback in style overrides (global theming), giving you full control of component customization at the theme level. diff --git a/docs/pages/blog/danail-hadjiatanasov-joining.md b/docs/pages/blog/danail-hadjiatanasov-joining.md index 5f0904549b960e..b39eeb6a65ce42 100644 --- a/docs/pages/blog/danail-hadjiatanasov-joining.md +++ b/docs/pages/blog/danail-hadjiatanasov-joining.md @@ -4,7 +4,7 @@ description: We are excited to share that Danail Hadjiatanasov has joined MUI as date: 2020-10-23T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- We are excited to share that [Danail Hadjiatanasov](https://twitter.com/danail_h) has joined MUI as part of the enterprise team. This was his first full-time week. diff --git a/docs/pages/blog/danilo-leal-joining.md b/docs/pages/blog/danilo-leal-joining.md index e18707c8f16947..55e6c3032a036c 100644 --- a/docs/pages/blog/danilo-leal-joining.md +++ b/docs/pages/blog/danilo-leal-joining.md @@ -4,7 +4,7 @@ description: We are excited to share that Danilo Leal has joined MUI. date: 2021-07-15T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- We are excited to share that [Danilo Leal](https://daniloleal.co/) has joined MUI! diff --git a/docs/pages/blog/date-pickers-stable-v5.md b/docs/pages/blog/date-pickers-stable-v5.md index 306637c250c28c..61b15bc7f59f2f 100644 --- a/docs/pages/blog/date-pickers-stable-v5.md +++ b/docs/pages/blog/date-pickers-stable-v5.md @@ -4,7 +4,7 @@ description: Migrate to the latest version for improved DX, customizability, and date: 2022-09-19T00:00:00.000Z authors: ['alexfauquette', 'josefreitas'] tags: ['MUI X', 'Product'] -card: true +manualCard: true --- About four months ago, we moved the date and time pickers from `@mui/lab` and released the first alpha version of the date pickers package. diff --git a/docs/pages/blog/december-2019-update.md b/docs/pages/blog/december-2019-update.md index 28cb4694f2c35d..e747320df73cf6 100644 --- a/docs/pages/blog/december-2019-update.md +++ b/docs/pages/blog/december-2019-update.md @@ -4,7 +4,7 @@ description: Here are the most significant improvements in December. date: 2020-01-07T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- Here are the most significant improvements in December: diff --git a/docs/pages/blog/discord-announcement.md b/docs/pages/blog/discord-announcement.md index 4a58bb279a84c7..fc0cd949e5a01f 100644 --- a/docs/pages/blog/discord-announcement.md +++ b/docs/pages/blog/discord-announcement.md @@ -4,7 +4,7 @@ description: Come join our community to engage in lively discussions, share your date: 2023-08-02T00:00:00.000Z authors: ['richbustos'] tags: ['Company'] -card: true +manualCard: true --- <a href="https://mui.com/r/discord/"><img src="/static/blog/discord-announcement/discord.png" width="1280" height="640" style="margin-bottom: 16px;" alt="Discord banner with link" /></a> diff --git a/docs/pages/blog/docs-restructure-2022.md b/docs/pages/blog/docs-restructure-2022.md index 6fe7e34853094e..1ea829b42c889f 100644 --- a/docs/pages/blog/docs-restructure-2022.md +++ b/docs/pages/blog/docs-restructure-2022.md @@ -4,7 +4,7 @@ description: Each of MUI's products now has its own dedicated documentation, mak date: 2022-04-06T00:00:00.000Z authors: ['danilo-leal'] tags: ['Product'] -card: true +manualCard: true --- As MUI continues to grow beyond our flagship product, Material UI (we [rebranded the company](/blog/material-ui-is-now-mui/) last year as a first step), it has become clear that the documentation for our products can no longer all live under one roof. diff --git a/docs/pages/blog/first-look-at-joy.md b/docs/pages/blog/first-look-at-joy.md index e8f541cfff3b40..56a77bd1dc57d3 100644 --- a/docs/pages/blog/first-look-at-joy.md +++ b/docs/pages/blog/first-look-at-joy.md @@ -4,7 +4,7 @@ description: A sneak peek at MUI's new starting point for your design system. date: 2022-06-08T00:00:00.000Z authors: ['danilo-leal', 'siriwatknp'] tags: ['Joy UI', 'Product'] -card: true +manualCard: true --- <a href="/joy-ui/getting-started/"><img src="/static/blog/first-look-at-joy/card.png" style="width: 692px; aspect-ratio: 2/1; margin-bottom: 24px;" alt="First look at Joy UI: a new starting point for your design system." /></a> diff --git a/docs/pages/blog/introducing-base-ui.md b/docs/pages/blog/introducing-base-ui.md index 54af0f0943df7a..4846ce5df26df8 100644 --- a/docs/pages/blog/introducing-base-ui.md +++ b/docs/pages/blog/introducing-base-ui.md @@ -4,7 +4,7 @@ description: The Base UI component library gives you complete control over the date: 2022-09-07T00:00:00.000Z authors: ['michaldudak', 'samuelsycamore'] tags: ['Base UI', 'Product'] -card: true +manualCard: true --- <a href="https://mui.com/base-ui/"><img src="/static/blog/introducing-base-ui/hero-image.png" alt="Demo components built with Base UI, a newly introduced library of unstyled components and hooks" width="1200" height="500" /></a> @@ -33,7 +33,7 @@ Also, many of the improvements to Material UI proposed by the community over th While they were created for different use cases, these two libraries share many common features and design patterns, and are intended to be complementary to one another within the MUI ecosystem. Base UI's API will be familiar to you if you've used Material UI before, making it easy to migrate a project—or just a part of it—from one library to the other if needed. -We aim to create [unstyled versions of all Material UI components](https://github.com/mui/material-ui/issues/27170) (that make sense to do so). +We aim to create [unstyled versions of all Material UI components](https://github.com/mui/base-ui/issues/10) (that make sense to do so). ## Components and hooks @@ -86,7 +86,7 @@ function MySwitch(props: UseSwitchParameters) { The initial version of the library contains 17 components. Check out the [Base UI documentation](/base-ui/getting-started/) for details. -You can track our progress in adding new components—and comment to influence our priorities—in [this dedicated GitHub issue](https://github.com/mui/material-ui/issues/27170). +You can track our progress in adding new components—and comment to influence our priorities—in [this dedicated GitHub issue](https://github.com/mui/base-ui/issues/10). The `@mui/base` package is released as an alpha. This means the component APIs are subject to change—especially as we receive feedback from the community about room for improvement. diff --git a/docs/pages/blog/introducing-connect.js b/docs/pages/blog/introducing-connect.js new file mode 100644 index 00000000000000..100b8643fa753f --- /dev/null +++ b/docs/pages/blog/introducing-connect.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './introducing-connect.md?muiMarkdown'; + +export default function Page() { + return <TopLayoutBlog docs={docs} />; +} diff --git a/docs/pages/blog/introducing-connect.md b/docs/pages/blog/introducing-connect.md new file mode 100644 index 00000000000000..7b87e783d34727 --- /dev/null +++ b/docs/pages/blog/introducing-connect.md @@ -0,0 +1,68 @@ +--- +title: 'Introducing Connect: a Figma plugin that exports Material UI code' +description: Connect is a Figma plugin that lets you generate a theme from the Material UI for Figma Design Kit. +date: 2024-04-16T00:00:00.000Z +authors: ['danilo-leal', 'DavidCnoops'] +tags: ['Connect', 'Material UI', 'Product'] +manualCard: true +--- + +Over the last few years we've seen designers increasingly seeking out ways to participate more directly and collaborate more effectively in the development process. +The [Material UI Design Kit for Figma](/store/items/figma-react/) was our first attempt to meet those needs by providing designers with one-to-one mockups of Material UI components for implementing custom design systems. +But it doesn't go far enough on its own to bridge the gap between design and code—the developer still need to write the designer's custom styles from scratch. + +That got us thinking: +What if designers could generate production-ready code directly from their design software to hand off to developers working with a Material UI codebase? + +That's why we created Connect, a Figma plugin for generating styles that can be copied and pasted straight into your Material UI app's theme. +We're happy to share that the beta version is [available now on Figma](https://www.figma.com/community/plugin/1336346114713490235/connect). 🚀 + +<img src="/static/blog/introducing-connect/card.png" alt="Connect is a Figma plugin that lets you generate a theme from the Material UI for Figma Design Kit." width="1280" height="640" /> + +Let's take a look at some of its key features: + +## Theme customization + +Figma's local variables significantly matured the use of design tokens, making it possible to mirror Material UI more closely. +Connect relies on these local variables to generate code corresponding to each element and state. +(As such, it requires [v5.16.0 or later](https://github.com/mui/mui-design-kits/releases/tag/v5.16.0) of the Material UI Design Kit; earlier versions do not support local variables.) + +<video preload="metadata" controls muted loop playsinline width="1584" height="1080"> +  <source src="/static/blog/introducing-connect/theme-customization.mp4" type="video/mp4"> +</video> + +Visit the documentation to learn [how to insert the generated code into your theme file](/material-ui/design-resources/connect/#using-the-generated-theme). + +## Component customization + +You can fully customize a component's appearance across multiple states in the Design Kit and then generate the corresponding theme code. +This is one of the most exciting features because it enables designers to use the visual design tools they're already comfortable with to make changes to the code itself. + +<video preload="metadata" controls muted loop playsinline width="1584" height="1080"> +  <source src="/static/blog/introducing-connect/custom-component.mp4" type="video/mp4"> +</video> + +:::warning +While in beta, not all components are supported yet. +We'll expand component coverage progressively in the coming months. +For now you can experiment with the Button, Switch, and Typography. +::: + +## Quick Storybook preview + +The Connect plugin also bakes in an embedded Storybook preview panel so that you can conveniently play around with your changes and see how they interact with other props and states available in the component API. + +<video preload="metadata" autoplay muted loop playsinline width="1584" height="1080"> +  <source src="/static/blog/introducing-connect/storybook.mp4" type="video/mp4"> +</video> + +## Try Connect now + +Get the beta version of Connect now, available for free in the [Figma Community](https://www.figma.com/community/plugin/1336346114713490235/connect)! + +There's still a lot to do, and we're looking forward to hearing from all of you [who requested this plugin years ago](https://github.com/mui/mui-design-kits/issues/10). + +- Check out further documentation for [the Connect plugin](/material-ui/design-resources/connect/) and [the Material UI Design Kit](/material-ui/design-resources/material-ui-for-figma/). +- If you've got any feedback, we'd love to [hear from you](https://mui-connect.canny.io/feedback). + +Happy designing! 👨‍🎨 diff --git a/docs/pages/blog/introducing-the-row-grouping-feature.md b/docs/pages/blog/introducing-the-row-grouping-feature.md index 817909ca6361e9..f4a7aae089a900 100644 --- a/docs/pages/blog/introducing-the-row-grouping-feature.md +++ b/docs/pages/blog/introducing-the-row-grouping-feature.md @@ -4,7 +4,7 @@ description: The new row grouping feature gives your users more customization op date: 2022-01-20T00:00:00.000Z authors: ['alexfauquette'] tags: ['MUI X', 'Product'] -card: true +manualCard: true --- After an incredible year fully focused on improving our Data Grid component, we are moving forward by launching the first feature of our new Premium plan: [row grouping](/x/react-data-grid/row-grouping/), released in [v5.3.0](https://github.com/mui/mui-x/releases/tag/v5.3.0). diff --git a/docs/pages/blog/july-2019-update.md b/docs/pages/blog/july-2019-update.md index 26f0470b57f311..9ee2ae7e852852 100644 --- a/docs/pages/blog/july-2019-update.md +++ b/docs/pages/blog/july-2019-update.md @@ -4,7 +4,7 @@ description: Here are the most significant improvements in July. date: 2019-08-04T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- Here are the most significant improvements in July: diff --git a/docs/pages/blog/june-2019-update.md b/docs/pages/blog/june-2019-update.md index 92e81c2dbdaabe..5781f76514ce57 100644 --- a/docs/pages/blog/june-2019-update.md +++ b/docs/pages/blog/june-2019-update.md @@ -4,7 +4,7 @@ description: Here are the most significant improvements in June. date: 2019-07-08T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- Here are the most significant improvements in June: diff --git a/docs/pages/blog/lab-date-pickers-to-mui-x.md b/docs/pages/blog/lab-date-pickers-to-mui-x.md index 9d7ddc8dfacb24..e8ab79741f5006 100644 --- a/docs/pages/blog/lab-date-pickers-to-mui-x.md +++ b/docs/pages/blog/lab-date-pickers-to-mui-x.md @@ -4,7 +4,7 @@ description: Migrate to the new package to start building with our powerful Date date: 2022-04-03T00:00:00.000Z authors: ['flaviendelangle'] tags: ['MUI X', 'Product'] -card: true +manualCard: true --- After more than 18 months in the lab, the Date and Time Picker components have found a new home as part of MUI X. diff --git a/docs/pages/blog/lab-tree-view-to-mui-x.md b/docs/pages/blog/lab-tree-view-to-mui-x.md index 7a35a33f599044..cb876949ef5087 100644 --- a/docs/pages/blog/lab-tree-view-to-mui-x.md +++ b/docs/pages/blog/lab-tree-view-to-mui-x.md @@ -4,7 +4,7 @@ description: Migrate to the new package to start building with our powerful Tree date: 2023-08-21T00:00:00.000Z authors: ['flaviendelangle'] tags: ['MUI X', 'Product'] -card: true +manualCard: true --- After more than 4 years in the lab, the [Tree View](https://mui.com/x/react-tree-view/) components have found a new home as part of MUI X. diff --git a/docs/pages/blog/making-customizable-components.md b/docs/pages/blog/making-customizable-components.md index 071e08af31bf0c..fb170deb030d07 100644 --- a/docs/pages/blog/making-customizable-components.md +++ b/docs/pages/blog/making-customizable-components.md @@ -4,7 +4,7 @@ description: Explore the tradeoffs between different customization techniques, a date: 2022-08-22T00:00:00.000Z authors: ['alexfauquette'] tags: ['MUI X', 'Material UI', 'Guide'] -card: true +manualCard: true --- Material UI's components are used by hundreds of thousands of developers worldwide, encompassing the full range of implementation from minor side projects to massive company websites. diff --git a/docs/pages/blog/march-2019-update.md b/docs/pages/blog/march-2019-update.md index 743c1d67f13d0f..1ea42cd92ed75e 100644 --- a/docs/pages/blog/march-2019-update.md +++ b/docs/pages/blog/march-2019-update.md @@ -4,7 +4,7 @@ description: Here are the most significant improvements in March. date: 2019-04-05T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- Here are the most significant improvements in March: diff --git a/docs/pages/blog/marija-najdova-joining.md b/docs/pages/blog/marija-najdova-joining.md index 344a665e26b27e..003b0880ef8b59 100644 --- a/docs/pages/blog/marija-najdova-joining.md +++ b/docs/pages/blog/marija-najdova-joining.md @@ -4,7 +4,7 @@ description: We are excited to share that Marija Najdova has joined MUI. She has date: 2020-09-15T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- We are excited to share that [Marija Najdova](https://twitter.com/marijanajdova) has joined MUI. She has started this week full-time, and is now part of the community team. diff --git a/docs/pages/blog/material-ui-is-now-mui.md b/docs/pages/blog/material-ui-is-now-mui.md index b956024eae46cd..926d85ea2a8fb2 100644 --- a/docs/pages/blog/material-ui-is-now-mui.md +++ b/docs/pages/blog/material-ui-is-now-mui.md @@ -4,7 +4,7 @@ description: Starting today, we are evolving our brand identity. We are clarifyi date: 2021-09-16T00:00:00.000Z authors: ['oliviertassinari', 'danilo-leal', 'mbrookes'] tags: ['Material UI'] -card: true +manualCard: true --- <img src="/static/blog/material-ui-is-now-mui/intro.png" alt="The new Material UI logo" style="width: 796px; margin-top: 16px; margin-bottom: 16px;" /> diff --git a/docs/pages/blog/material-ui-v1-is-out.md b/docs/pages/blog/material-ui-v1-is-out.md index d88daf681f8ec3..29f0325a218ac9 100644 --- a/docs/pages/blog/material-ui-v1-is-out.md +++ b/docs/pages/blog/material-ui-v1-is-out.md @@ -4,7 +4,7 @@ description: It has taken us two years to do it, but Material UI v1 has finally date: 2018-05-18T00:00:00.000Z authors: ['oliviertassinari', 'mbrookes'] tags: ['Material UI', 'Product'] -card: true +manualCard: true --- > React components that implement Google's Material Design. diff --git a/docs/pages/blog/material-ui-v4-is-out.md b/docs/pages/blog/material-ui-v4-is-out.md index dfefd5a27ec56a..1dc63490f2f542 100644 --- a/docs/pages/blog/material-ui-v4-is-out.md +++ b/docs/pages/blog/material-ui-v4-is-out.md @@ -4,7 +4,7 @@ description: Material UI v4 has finally arrived. We are so excited about this r date: 2019-05-23T00:00:00.000Z authors: ['oliviertassinari', 'mbrookes', 'eps1lon'] tags: ['Material UI', 'Product'] -card: true +manualCard: true --- > React components for faster and simpler web development. Build your own design system, or start with Material Design. diff --git a/docs/pages/blog/matheus-wichman-joining.md b/docs/pages/blog/matheus-wichman-joining.md index 17ac52ad24e52b..8d9579d01873f0 100644 --- a/docs/pages/blog/matheus-wichman-joining.md +++ b/docs/pages/blog/matheus-wichman-joining.md @@ -4,7 +4,7 @@ description: We are excited to share that Matheus Wichman has joined MUI. date: 2021-04-05T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- We are excited to share that [Matheus Wichman](https://github.com/m4theushw) has joined MUI. diff --git a/docs/pages/blog/may-2019-update.md b/docs/pages/blog/may-2019-update.md index f8cf8fa3e259a1..9707d0f28b783d 100644 --- a/docs/pages/blog/may-2019-update.md +++ b/docs/pages/blog/may-2019-update.md @@ -4,7 +4,7 @@ description: Here are the most significant improvements in May. date: 2019-06-08T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- Here are the most significant improvements in May: diff --git a/docs/pages/blog/michal-dudak-joining.md b/docs/pages/blog/michal-dudak-joining.md index fe4c351bd27a09..4186fbcfc08548 100644 --- a/docs/pages/blog/michal-dudak-joining.md +++ b/docs/pages/blog/michal-dudak-joining.md @@ -4,7 +4,7 @@ description: We are excited to share that Michał Dudak has joined MUI. date: 2021-06-14T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- We are excited to share that [Michał Dudak](https://twitter.com/michaldudak) has joined MUI! diff --git a/docs/pages/blog/mui-core-v5-migration-update.md b/docs/pages/blog/mui-core-v5-migration-update.md index 04a9be054133ad..f050089780ec73 100644 --- a/docs/pages/blog/mui-core-v5-migration-update.md +++ b/docs/pages/blog/mui-core-v5-migration-update.md @@ -3,7 +3,7 @@ title: Why you should migrate to Material UI v5 today description: We have completely revamped our Migration guide to reduce friction when upgrading to v5. Get started now! date: 2022-06-20T00:00:00.000Z authors: ['samuelsycamore'] -card: true +manualCard: true tags: ['Material UI'] --- diff --git a/docs/pages/blog/mui-core-v5.md b/docs/pages/blog/mui-core-v5.md index 3692acffd9c502..688cf79b04aadd 100644 --- a/docs/pages/blog/mui-core-v5.md +++ b/docs/pages/blog/mui-core-v5.md @@ -12,7 +12,7 @@ authors: 'danilo-leal', 'mbrookes', ] -card: true +manualCard: true tags: ['Product', 'Material UI'] --- @@ -377,7 +377,7 @@ const CustomButton = React.forwardRef(function CustomButton( <p class="blog-description"><a href="https://codesandbox.io/p/sandbox/7lc1r?file=/demo.tsx">CodeSandbox</a></p> We discuss the effort in [#6218](https://github.com/mui/material-ui/issues/6218). -You can use [#27170](https://github.com/mui/material-ui/issues/27170) to follow our progress. +You can use [#27170](https://github.com/mui/base-ui/issues/10) to follow our progress. ## Improved DX @@ -725,7 +725,7 @@ To continue improving the customization experience, we are doubling down on the These components and hooks contain the main functionalities and accessibility, without being opinionated about how styles are applied nor what styles. We still have work to do to have a full set of unstyled components. -You can read more about them in [the docs](/base-ui/getting-started/) and keep track of our progress in [#27170](https://github.com/mui/material-ui/issues/27170). +You can read more about them in [the docs](/base-ui/getting-started/) and keep track of our progress in [#27170](https://github.com/mui/base-ui/issues/10). Our high-level plan is to use the unstyled components and hooks as the basis of the Material components and second design system. We are aiming to complete this work with the next major release (v6). diff --git a/docs/pages/blog/mui-next-js-app-router.md b/docs/pages/blog/mui-next-js-app-router.md index 344fc0faa7b52c..2c00e3dc372be3 100644 --- a/docs/pages/blog/mui-next-js-app-router.md +++ b/docs/pages/blog/mui-next-js-app-router.md @@ -3,7 +3,7 @@ title: MUI Core libraries support the Next.js App Router description: Material UI, Base UI, and Joy UI are now compatible with the App Router as Client Components. Get started using the latest Next.js features with MUI! date: 2023-07-18T00:00:00.000Z authors: ['samuelsycamore'] -card: true +manualCard: true tags: ['Product'] --- diff --git a/docs/pages/blog/mui-product-comparison.md b/docs/pages/blog/mui-product-comparison.md index 5268b3104d6e57..dfb8c4b542f939 100644 --- a/docs/pages/blog/mui-product-comparison.md +++ b/docs/pages/blog/mui-product-comparison.md @@ -3,7 +3,7 @@ title: An introduction to the MUI ecosystem description: MUI is more than just Material UI. Consider Joy UI, Base UI, MUI X, and Toolpad for your next project. date: 2022-11-01T00:00:00.000Z authors: ['samuelsycamore'] -card: true +manualCard: true tags: ['Product'] --- diff --git a/docs/pages/blog/mui-x-end-v6-features.md b/docs/pages/blog/mui-x-end-v6-features.md index 19dd6b95f107bc..e350c4af838be7 100644 --- a/docs/pages/blog/mui-x-end-v6-features.md +++ b/docs/pages/blog/mui-x-end-v6-features.md @@ -3,7 +3,7 @@ title: MUI X v6.18.0 and the latest features before the next major description: New components, polished features, better performance and more. date: 2023-11-13T00:00:00.000Z authors: ['josefreitas'] -card: true +manualCard: true tags: ['MUI X', 'Product'] --- diff --git a/docs/pages/blog/mui-x-mid-v6-features.md b/docs/pages/blog/mui-x-mid-v6-features.md index 64c7da76591a52..8348b66c7e2baa 100644 --- a/docs/pages/blog/mui-x-mid-v6-features.md +++ b/docs/pages/blog/mui-x-mid-v6-features.md @@ -3,7 +3,7 @@ title: MUI X v6.11.0. A roundup of all new features description: Support for time zones, Charts in alpha, Data Grid filtering, and more. date: 2023-08-14T00:00:00.000Z authors: ['richbustos', 'josefreitas'] -card: true +manualCard: true tags: ['MUI X', 'Product'] --- diff --git a/docs/pages/blog/mui-x-v5.md b/docs/pages/blog/mui-x-v5.md index 3e68847e5763e1..8ca2616041f276 100644 --- a/docs/pages/blog/mui-x-v5.md +++ b/docs/pages/blog/mui-x-v5.md @@ -4,7 +4,7 @@ description: We are excited to introduce MUI X v5.0.0! date: 2021-11-22T00:00:00.000Z authors: ['oliviertassinari', 'm4theushw', 'flaviendelangle', 'DanailH', 'alexfauquette'] -card: true +manualCard: true tags: ['MUI X', 'Product'] --- diff --git a/docs/pages/blog/mui-x-v6-alpha-zero.md b/docs/pages/blog/mui-x-v6-alpha-zero.md index eefcf84e50348f..de7976f967cfe6 100644 --- a/docs/pages/blog/mui-x-v6-alpha-zero.md +++ b/docs/pages/blog/mui-x-v6-alpha-zero.md @@ -4,7 +4,7 @@ description: Let us know what you want to see in MUI X v6 as we begin the alpha date: 2022-09-30T00:00:00.000Z authors: ['josefreitas'] tags: ['MUI X', 'Product'] -card: true +manualCard: true --- We're kicking off the development of [MUI X v6](https://github.com/mui/mui-x/releases/tag/v6.0.0-alpha.0). diff --git a/docs/pages/blog/mui-x-v6.md b/docs/pages/blog/mui-x-v6.md index 4b666d5c82b42a..06e97177a0f0c7 100644 --- a/docs/pages/blog/mui-x-v6.md +++ b/docs/pages/blog/mui-x-v6.md @@ -3,7 +3,7 @@ title: Introducing MUI X v6 description: Introducing the new major version of the advanced components. date: 2023-03-06T00:00:00.000Z authors: ['josefreitas'] -card: true +manualCard: true tags: ['MUI X', 'Product'] --- diff --git a/docs/pages/blog/mui-x-v7-beta.md b/docs/pages/blog/mui-x-v7-beta.md index 258a29b7fc57e7..f32df9cab0212e 100644 --- a/docs/pages/blog/mui-x-v7-beta.md +++ b/docs/pages/blog/mui-x-v7-beta.md @@ -4,7 +4,7 @@ description: Check out what's new and what's next for v7 stable. date: 2024-01-29T00:00:00.000Z authors: ['josefreitas'] tags: ['MUI X', 'Product'] -card: true +manualCard: true --- <div style="max-width: 692px; width: 100%; height: 100%; overflow: hidden;"> diff --git a/docs/pages/blog/mui-x-v7.md b/docs/pages/blog/mui-x-v7.md index e95aadeedbe9bd..cce65bad6eefb9 100644 --- a/docs/pages/blog/mui-x-v7.md +++ b/docs/pages/blog/mui-x-v7.md @@ -4,7 +4,7 @@ description: Check out all the newest additions to the next major of the advance date: 2024-03-22T08:00:00.000Z authors: ['josefreitas'] tags: ['MUI X', 'Product'] -card: true +manualCard: true --- <div style="max-width: 692px; width: 100%; height: 230px; overflow: hidden; margin-bottom: 16px;"> @@ -56,11 +56,11 @@ The Data Grid now offers a more responsive experience with smoother scrolling an On its first announcement, some of these improvements were showcased, but during the beta phase, the scrolling performance was further polished for an even better user experience. -<figure style="padding:0; margin:0"> +<figure> <video preload="metadata" autoplay muted loop playsinline width="690" height="417" controls>   <source src="/static/blog/mui-x-v7/sticky-headers-and-vertical-scrolling.mp4" type="video/mp4"> </video> - <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A before and after showcase, first with horizontal and then with vertical scrolling.</figcaption> + <figcaption>A before and after showcase, first with horizontal and then with vertical scrolling.</figcaption> </figure> :::warning @@ -81,9 +81,9 @@ As part of an overarching project aimed at enhancing usability in managing colum The goal is to further enhance this panel by incorporating additional column management functions, such as column reordering and pinning. Additionally, the internal component has been extracted to ease the introduction of the upcoming pivoting UI. -<figure style="padding:0; margin:0; margin-bottom:20px"> +<figure> <img width="310" alt="The new column management panel design" src="/static/blog/mui-x-v7/column-management-panel.png"> - <figcaption style="color: #888; font-size: 0.9em; text-align: center;">The new column managemeent panel design</figcaption> + <figcaption>The new column management panel design</figcaption> </figure> ### Date Object support in filter model @@ -98,9 +98,9 @@ Introducing a separate entry point for locales has significantly reduced the bun As a reference, with the `@mui/x-data-grid` npm package, this change led to a reduction of approximately 19% – shrinking the bundle size from [114.2kB](https://bundlephobia.com/package/@mui/x-data-grid@6.19.2) to [92.9kB](https://bundlephobia.com/package/@mui/x-data-grid@7.0.0). -<figure style="padding:0; margin:0"> +<figure> <img width="600" alt="A chart showcasing the bundle size change" src="/static/blog/mui-x-v7/new-bundle-size.png" > - <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A chart showcasing the Data Grid's bundle size change.</figcaption> + <figcaption>A chart showcasing the Data Grid's bundle size change.</figcaption> </figure> ### New stable features @@ -233,9 +233,9 @@ The newest gauge charts are designed to offer a visually compelling way to displ These charts are particularly useful for showing progress toward a goal or displaying a value within a predefined range. With customizable options for pointers, sizes, and colors, they allow for a personalized visual representation that makes it easy for users to interpret data at a glance. -<figure style="padding:0; margin:0; margin-bottom:20px"> +<figure> <img alt="Gauge charts" src="/static/blog/mui-x-v7/gauge-charts.png" width="1200" height="800" loading="lazy" /> - <figcaption style="color: #888; font-size: 0.9em; text-align: center;">Three different styles of Gauge charts.</figcaption> + <figcaption>Three different styles of Gauge charts.</figcaption> </figure> Check out the [new charts](/x/react-charts/gauge/) documentation page for detailed information. @@ -246,9 +246,9 @@ The charts now have click event handlers, so users can interact with chart eleme This feature makes charts more interactive and transforms the way users can explore the data, improving the overall user experience with details and other information accessed on demand. -<figure style="padding:0; margin:0; margin-bottom:20px"> +<figure> <img alt="Gauge charts" src="/static/blog/mui-x-v7/click-handler.png" width="450" height="416" loading="lazy" /> - <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A pie chart with an item click handler.</figcaption> + <figcaption>A pie chart with an item click handler.</figcaption> </figure> You can find more information about specific event handlers for each type of chart by visiting their respective overview page: @@ -261,9 +261,9 @@ You can find more information about specific event handlers for each type of cha The Axis component now features a built-in Grid, offering users a structured layout for easier data analysis and visualization. -<figure style="padding:0; margin:0; margin-bottom:20px"> +<figure> <img alt="A Chart axis showcasing an horizontal grid" src="/static/blog/mui-x-v7/axis-grid.png" width="1550" height="654" loading="lazy" /> - <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A Chart axis with an horizontal grid.</figcaption> + <figcaption>A Chart axis with an horizontal grid.</figcaption> </figure> For details on its usage and configuration, please refer to the [Grid section](/x/react-charts/axis/#grid) in the documentation. @@ -272,9 +272,9 @@ For details on its usage and configuration, please refer to the [Grid section](/ The `ChartsReferenceLine` component enhances data visualization, providing users with a clear reference to better understand and analyze key data points. -<figure style="padding:0; margin:0; margin-bottom:20px"> +<figure> <img alt="A chart with a reference line" src="/static/blog/mui-x-v7/charts-reference-line.png" width="1200" height="840" loading="lazy" /> - <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A line chart using a reference line.</figcaption> + <figcaption>A line chart using a reference line.</figcaption> </figure> You can find more details on its [documentation](/x/react-charts/axis/#reference-line). @@ -315,11 +315,11 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'; The latest addition to the Date and Time Pickers suite is the `<DateTimeRangePicker />`, a most anticipated component designed to enrich the user experience with the advanced date and time selection. This intuitive picker simplifies the process of selecting date and time ranges, making it ideal for applications that require detailed scheduling or period selection. -<figure style="padding:0; margin:0; margin-bottom:20px"> +<figure> <video preload="metadata" autoplay muted loop playsinline width="600" height="510">   <source src="/static/blog/mui-x-v7/date-time-range-picker.mp4" type="video/mp4"> </video> - <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A video showcasing a date and time range selection.</figcaption> + <figcaption>A video showcasing a date and time range selection.</figcaption> </figure> Learn how to use and customize the [new component](/x/react-date-pickers/date-time-range-picker/) now! diff --git a/docs/pages/blog/november-2019-update.md b/docs/pages/blog/november-2019-update.md index fc9f1bf498ab4d..afb3cbff843fc9 100644 --- a/docs/pages/blog/november-2019-update.md +++ b/docs/pages/blog/november-2019-update.md @@ -4,7 +4,7 @@ description: Here are the most significant improvements in November. date: 2019-12-12T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- Here are the most significant improvements in November: diff --git a/docs/pages/blog/october-2019-update.md b/docs/pages/blog/october-2019-update.md index 7644683613f25d..d5b3c21f260dda 100644 --- a/docs/pages/blog/october-2019-update.md +++ b/docs/pages/blog/october-2019-update.md @@ -4,7 +4,7 @@ description: Here are the most significant improvements in October. date: 2019-11-08T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- Here are the most significant improvements in October: diff --git a/docs/pages/blog/premium-plan-release.md b/docs/pages/blog/premium-plan-release.md index 4d5166c36c263f..d7ab992827f551 100644 --- a/docs/pages/blog/premium-plan-release.md +++ b/docs/pages/blog/premium-plan-release.md @@ -4,7 +4,7 @@ description: Introducing the MUI X Premium plan, and a new licensing model. date: 2022-05-12T00:00:00.000Z authors: ['josefreitas', 'alexfauquette'] tags: ['MUI X', 'Product'] -card: true +manualCard: true --- We're happy to announce that the Premium plan is [finally out](https://mui.com/pricing/)! diff --git a/docs/pages/blog/remote-award-win-2024.md b/docs/pages/blog/remote-award-win-2024.md index d41c7702449788..0162f0e8a93f06 100644 --- a/docs/pages/blog/remote-award-win-2024.md +++ b/docs/pages/blog/remote-award-win-2024.md @@ -4,10 +4,10 @@ description: We're delighted to be honored with this global recognition for our date: 2024-03-20T12:00:00.000Z authors: ['mikailaread'] tags: ['Company'] -card: true +manualCard: true --- -MUI has been named a **winner** in the first-ever [Remote Excellence Awards](https://remote.com/remote-excellence-awards/), in the Small & Mighty category! 🎉 +MUI has been named a **winner** in the first-ever [Remote Excellence Awards](https://remote.com/remote-excellence-awards), in the Small & Mighty category! 🎉 <img alt="MUI's official winners badge provided by Remote." src="/static/blog/remote-award-win-2024/award-image.png" width="2400" height="1100" /> diff --git a/docs/pages/blog/september-2019-update.md b/docs/pages/blog/september-2019-update.md index 851cda97d166b7..55c9c442b742f5 100644 --- a/docs/pages/blog/september-2019-update.md +++ b/docs/pages/blog/september-2019-update.md @@ -4,7 +4,7 @@ description: Here are the most significant improvements in September. date: 2019-10-12T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- Here are the most significant improvements in September: diff --git a/docs/pages/blog/siriwat-kunaporn-joining.md b/docs/pages/blog/siriwat-kunaporn-joining.md index c858b89ccf4e33..2150a1835d1760 100644 --- a/docs/pages/blog/siriwat-kunaporn-joining.md +++ b/docs/pages/blog/siriwat-kunaporn-joining.md @@ -4,7 +4,7 @@ description: We are excited to share that Siriwat Kunaporn has joined MUI. date: 2021-05-17T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- We are excited to share that [Siriwat Kunaporn](https://twitter.com/siriwatknp) (Jun) has joined MUI. diff --git a/docs/pages/blog/spotlight-damien-tassone.md b/docs/pages/blog/spotlight-damien-tassone.md index 6952fe623e1c35..8dc08dd0c823e6 100644 --- a/docs/pages/blog/spotlight-damien-tassone.md +++ b/docs/pages/blog/spotlight-damien-tassone.md @@ -4,7 +4,7 @@ description: Damien Tassone has joined MUI. He's the first full-time member to f date: 2020-09-15T00:00:00.000Z authors: ['oliviertassinari'] tags: ['Company'] -card: true +manualCard: true --- A few months ago, right in the middle of the COVID-19 outbreak, [Damien Tassone](https://twitter.com/madKakoO) joined MUI. He's the first full-time member to focus on enterprise components. Back then, we only made a quick mention of it. It's never too late to introduce him properly. diff --git a/docs/pages/blog/toolpad-use-cases.md b/docs/pages/blog/toolpad-use-cases.md index 30879950a648e4..30cc0ffd7ddd26 100644 --- a/docs/pages/blog/toolpad-use-cases.md +++ b/docs/pages/blog/toolpad-use-cases.md @@ -3,7 +3,7 @@ title: How does MUI use Toolpad? description: Explore how we use Toolpad for production use cases at MUI. date: 2024-03-04T00:00:00.000Z authors: ['prakhargupta'] -card: true +manualCard: true tags: ['Product', 'Toolpad'] --- diff --git a/docs/pages/blog/v6-beta-pickers.md b/docs/pages/blog/v6-beta-pickers.md index 8ceeca29aa63cf..22f03ed385fd00 100644 --- a/docs/pages/blog/v6-beta-pickers.md +++ b/docs/pages/blog/v6-beta-pickers.md @@ -4,7 +4,7 @@ description: Check out the new features coming in v6 beta. date: 2023-01-22T00:00:00.000Z authors: ['josefreitas'] tags: ['MUI X', 'Product'] -card: true +manualCard: true --- There's a lot of exciting news in [MUI X v6.0.0-beta.0](https://github.com/mui/mui-x/releases/v6.0.0-beta.0), but there's hardly anything comparable to the revamp we're delivering for the Date and Time Pickers. diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx index c1abb1f4579da4..8e2d58f4b98d27 100644 --- a/docs/pages/careers.tsx +++ b/docs/pages/careers.tsx @@ -467,7 +467,13 @@ export default function Careers() { href={routeUrl} noLinkStyle variant="outlined" - sx={{ p: 2, width: '100%', flexGrow: 1 }} + sx={{ + p: 2, + width: '100%', + flexGrow: 1, + display: 'flex', + flexDirection: 'column', + }} > <Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}> {title} @@ -475,7 +481,12 @@ export default function Careers() { <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}> {description} </Typography> - <Typography variant="body2" fontWeight="bold" color="primary"> + <Typography + variant="body2" + fontWeight="bold" + color="primary" + sx={{ mt: 'auto' }} + > Learn more{' '} <KeyboardArrowRightRounded fontSize="small" diff --git a/docs/pages/careers/ROLE_TEMPLATE.md b/docs/pages/careers/ROLE_TEMPLATE.md index a9bc515fb543c2..ee20301dc1beb8 100644 --- a/docs/pages/careers/ROLE_TEMPLATE.md +++ b/docs/pages/careers/ROLE_TEMPLATE.md @@ -6,7 +6,7 @@ - **Location**: Remote (preference for UTC-6 to UTC+5). - **Type of work**: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501#494af1f358794028beb4b7697b5d3102)). -- **Level**: [IC4 or above](https://mui-org.notion.site/Levelling-at-MUI-5c30f9bfe65149d697f346447cef9db1). +- **Level**: [IC4 or above](https://mui-org.notion.site/Leveling-at-MUI-5c30f9bfe65149d697f346447cef9db1). - We're a **remote** company, operating mostly asynchronously. ## The company diff --git a/docs/pages/careers/accessibility-engineer.md b/docs/pages/careers/accessibility-engineer.md index eca4cbc77f9174..fcd0684cef74cc 100644 --- a/docs/pages/careers/accessibility-engineer.md +++ b/docs/pages/careers/accessibility-engineer.md @@ -6,7 +6,7 @@ - **Location**: Remote (preference for UTC-6 to UTC+5). - **Type of work**: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501#494af1f358794028beb4b7697b5d3102)). -- **Level**: [IC4 or above](https://mui-org.notion.site/Levelling-at-MUI-5c30f9bfe65149d697f346447cef9db1). +- **Level**: [IC4 or above](https://mui-org.notion.site/Leveling-at-MUI-5c30f9bfe65149d697f346447cef9db1). - We're a **remote** company, we prefer asynchronous communication over meetings. ## The company diff --git a/docs/pages/careers/design-engineer-x-grid.md b/docs/pages/careers/design-engineer-x-grid.md index 8d40cbd79f15c2..44efa63982231f 100644 --- a/docs/pages/careers/design-engineer-x-grid.md +++ b/docs/pages/careers/design-engineer-x-grid.md @@ -6,7 +6,7 @@ - **Location**: Remote (strong preference for UTC-6 to UTC+5). - **Type of work**: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501#494af1f358794028beb4b7697b5d3102)). -- **Level**: [IC4 or above](https://mui-org.notion.site/Levelling-at-MUI-5c30f9bfe65149d697f346447cef9db1). +- **Level**: [IC4 or above](https://mui-org.notion.site/Leveling-at-MUI-5c30f9bfe65149d697f346447cef9db1). - We're a **remote** company, we prefer asynchronous communication over meetings. ## The company diff --git a/docs/pages/careers/design-engineer.md b/docs/pages/careers/design-engineer.md index 5523f7696b87db..99aed96e612876 100644 --- a/docs/pages/careers/design-engineer.md +++ b/docs/pages/careers/design-engineer.md @@ -6,7 +6,7 @@ - **Location**: Remote (preference for UTC-6 to UTC+5). - **Type of work**: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501#494af1f358794028beb4b7697b5d3102)). -- **Level**: [IC4 or above](https://mui-org.notion.site/Levelling-at-MUI-5c30f9bfe65149d697f346447cef9db1). +- **Level**: [IC4 or above](https://mui-org.notion.site/Leveling-at-MUI-5c30f9bfe65149d697f346447cef9db1). - We're a **remote** company, we prefer asynchronous communication over meetings. ## The company diff --git a/docs/pages/careers/developer-advocate.md b/docs/pages/careers/developer-advocate.md index 917e84fa830b79..1d0ec893d28fc3 100644 --- a/docs/pages/careers/developer-advocate.md +++ b/docs/pages/careers/developer-advocate.md @@ -6,7 +6,7 @@ - **Location**: Remote (strong preference for UTC-5 to UTC+2 in North America or Europe). - **Type of work**: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501#494af1f358794028beb4b7697b5d3102)). -- **Level**: [IC4 or above](https://mui-org.notion.site/Levelling-at-MUI-5c30f9bfe65149d697f346447cef9db1). +- **Level**: [IC4 or above](https://mui-org.notion.site/Leveling-at-MUI-5c30f9bfe65149d697f346447cef9db1). - We're a **remote** company, we prefer asynchronous communication over meetings. ## The company diff --git a/docs/pages/careers/developer-experience-engineer.md b/docs/pages/careers/developer-experience-engineer.md index 74294e3ffb173c..9c732c383c4fd2 100644 --- a/docs/pages/careers/developer-experience-engineer.md +++ b/docs/pages/careers/developer-experience-engineer.md @@ -6,7 +6,7 @@ - **Location**: Remote (preference for UTC-6 to UTC+2). - **Type of work**: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501#494af1f358794028beb4b7697b5d3102)). -- **Level**: [IC4 or above](https://mui-org.notion.site/Levelling-at-MUI-5c30f9bfe65149d697f346447cef9db1). +- **Level**: [IC4 or above](https://mui-org.notion.site/Leveling-at-MUI-5c30f9bfe65149d697f346447cef9db1). - We're a **remote** company, we prefer asynchronous communication over meetings. ## The company diff --git a/docs/pages/careers/engineering-manager.md b/docs/pages/careers/engineering-manager.md index 3882bc0300ca6d..6f7a8b01be583d 100644 --- a/docs/pages/careers/engineering-manager.md +++ b/docs/pages/careers/engineering-manager.md @@ -6,7 +6,7 @@ - **Location**: Remote (preference for UTC-6 to UTC+5). - **Type of work**: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501#494af1f358794028beb4b7697b5d3102)). -- **Level**: [IC4 or above](https://mui-org.notion.site/Levelling-at-MUI-5c30f9bfe65149d697f346447cef9db1). +- **Level**: [IC4 or above](https://mui-org.notion.site/Leveling-at-MUI-5c30f9bfe65149d697f346447cef9db1). - We're a **remote** company, we prefer asynchronous communication over meetings. ## The company diff --git a/docs/pages/careers/full-stack-engineer.md b/docs/pages/careers/full-stack-engineer.md index 99184d1e26896a..629af89a81b554 100644 --- a/docs/pages/careers/full-stack-engineer.md +++ b/docs/pages/careers/full-stack-engineer.md @@ -6,7 +6,7 @@ - **Location**: Remote (preference for UTC-6 to UTC+5). - **Type of work**: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501#494af1f358794028beb4b7697b5d3102)). -- **Level**: [IC4 or above](https://mui-org.notion.site/Levelling-at-MUI-5c30f9bfe65149d697f346447cef9db1). +- **Level**: [IC4 or above](https://mui-org.notion.site/Leveling-at-MUI-5c30f9bfe65149d697f346447cef9db1). - We're a **remote** company, we prefer asynchronous communication over meetings. ## About the company diff --git a/docs/pages/careers/product-engineer.md b/docs/pages/careers/product-engineer.md index 9a217e087d9ee6..e49a6db87604b7 100644 --- a/docs/pages/careers/product-engineer.md +++ b/docs/pages/careers/product-engineer.md @@ -6,7 +6,7 @@ - **Location**: Remote (preference for UTC-6 to UTC+5). - **Type of work**: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501#494af1f358794028beb4b7697b5d3102)). -- **Level**: [IC4 or above](https://mui-org.notion.site/Levelling-at-MUI-5c30f9bfe65149d697f346447cef9db1). +- **Level**: [IC4 or above](https://mui-org.notion.site/Leveling-at-MUI-5c30f9bfe65149d697f346447cef9db1). - We're a **remote** company, we prefer asynchronous communication over meetings. ## The company diff --git a/docs/pages/careers/react-community-engineer.md b/docs/pages/careers/react-community-engineer.md index e3f9f322e23b1a..dfb9f250e4a3f4 100644 --- a/docs/pages/careers/react-community-engineer.md +++ b/docs/pages/careers/react-community-engineer.md @@ -6,7 +6,7 @@ - **Location**: Remote (preference for UTC-6 to UTC+5). - **Type of work**: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501#494af1f358794028beb4b7697b5d3102)). -- **Level**: [IC4 or above](https://mui-org.notion.site/Levelling-at-MUI-5c30f9bfe65149d697f346447cef9db1). +- **Level**: [IC4 or above](https://mui-org.notion.site/Leveling-at-MUI-5c30f9bfe65149d697f346447cef9db1). - We're a **remote** company, we prefer asynchronous communication over meetings. ## The company diff --git a/docs/pages/careers/react-engineer-core.md b/docs/pages/careers/react-engineer-core.md index 9f39b5b45d29d0..da852b2189e0a1 100644 --- a/docs/pages/careers/react-engineer-core.md +++ b/docs/pages/careers/react-engineer-core.md @@ -6,7 +6,7 @@ - **Location**: Remote (preference for UTC-6 to UTC+5). - **Type of work**: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501#494af1f358794028beb4b7697b5d3102)). -- **Level**: [IC4 or above](https://mui-org.notion.site/Levelling-at-MUI-5c30f9bfe65149d697f346447cef9db1). +- **Level**: [IC4 or above](https://mui-org.notion.site/Leveling-at-MUI-5c30f9bfe65149d697f346447cef9db1). - We're a **remote** company, we prefer asynchronous communication over meetings. ## The company diff --git a/docs/pages/careers/react-engineer-x-charts.md b/docs/pages/careers/react-engineer-x-charts.md index 49632707feefee..e7589f0a826b36 100644 --- a/docs/pages/careers/react-engineer-x-charts.md +++ b/docs/pages/careers/react-engineer-x-charts.md @@ -6,7 +6,7 @@ - **Location**: Remote (strong preference for UTC-6 to UTC+5). - **Type of work**: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501#494af1f358794028beb4b7697b5d3102)). -- **Level**: [IC4 or above](https://mui-org.notion.site/Levelling-at-MUI-5c30f9bfe65149d697f346447cef9db1). +- **Level**: [IC4 or above](https://mui-org.notion.site/Leveling-at-MUI-5c30f9bfe65149d697f346447cef9db1). - We're a **remote** company, we prefer asynchronous communication over meetings. ## The company diff --git a/docs/pages/careers/react-engineer-x-grid.md b/docs/pages/careers/react-engineer-x-grid.md index af2477a07e4c63..cc8c3ec12ca04b 100644 --- a/docs/pages/careers/react-engineer-x-grid.md +++ b/docs/pages/careers/react-engineer-x-grid.md @@ -6,7 +6,7 @@ - **Location**: Remote (preference for UTC-6 to UTC+5). - **Type of work**: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501#494af1f358794028beb4b7697b5d3102)). -- **Level**: [IC4 or above](https://mui-org.notion.site/Levelling-at-MUI-5c30f9bfe65149d697f346447cef9db1). +- **Level**: [IC4 or above](https://mui-org.notion.site/Leveling-at-MUI-5c30f9bfe65149d697f346447cef9db1). - We're a **remote** company, we prefer asynchronous communication over meetings. ## The company diff --git a/docs/pages/careers/react-engineer-x.md b/docs/pages/careers/react-engineer-x.md index 4a9364c7edf710..08f68be0f38e2f 100644 --- a/docs/pages/careers/react-engineer-x.md +++ b/docs/pages/careers/react-engineer-x.md @@ -6,7 +6,7 @@ - **Location**: Remote (preference for UTC-6 to UTC+5). - **Type of work**: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501#494af1f358794028beb4b7697b5d3102)). -- **Level**: [IC4 or above](https://mui-org.notion.site/Levelling-at-MUI-5c30f9bfe65149d697f346447cef9db1). +- **Level**: [IC4 or above](https://mui-org.notion.site/Leveling-at-MUI-5c30f9bfe65149d697f346447cef9db1). - We're a **remote** company, we prefer asynchronous communication over meetings. ## The company diff --git a/docs/pages/careers/staff-ui-engineer-base-ui.md b/docs/pages/careers/staff-ui-engineer-base-ui.md index 506539dbc38067..88e66fd76750e4 100644 --- a/docs/pages/careers/staff-ui-engineer-base-ui.md +++ b/docs/pages/careers/staff-ui-engineer-base-ui.md @@ -6,7 +6,7 @@ - **Location**: Remote (preference for UTC-6 to UTC+5). - **Type of work**: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501#494af1f358794028beb4b7697b5d3102)). -- **Level**: [IC5 or above](https://mui-org.notion.site/Levelling-at-MUI-5c30f9bfe65149d697f346447cef9db1). +- **Level**: [IC5 or above](https://mui-org.notion.site/Leveling-at-MUI-5c30f9bfe65149d697f346447cef9db1). ## The company diff --git a/docs/pages/experiments/blog/blog-custom-card.js b/docs/pages/experiments/blog/blog-custom-card.js new file mode 100644 index 00000000000000..57dfbb8a95e4d0 --- /dev/null +++ b/docs/pages/experiments/blog/blog-custom-card.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './blog-custom-card.md?muiMarkdown'; + +export default function Page() { + return <TopLayoutBlog docs={docs} />; +} diff --git a/docs/pages/experiments/blog/blog-custom-card.md b/docs/pages/experiments/blog/blog-custom-card.md new file mode 100644 index 00000000000000..1c26c97454e62d --- /dev/null +++ b/docs/pages/experiments/blog/blog-custom-card.md @@ -0,0 +1,30 @@ +--- +title: Blog post title +description: Our internationally distributed startup gathered on a remote island to get to know each other better. Here's what happened! +date: 2022-07-28T00:00:00.000Z +authors: ['alexfauquette'] +tags: ['Company'] +manualCard: false +cardTitle: blog with\n*custom* card +--- + +## Description + +### Image + +<img alt="Satellite image of Tenerife" src="/static/blog/2022-tenerife-retreat/tenerife.jpeg" width="2560" height="1920" /> + +<p class="blog-description">An image description <a href="https://en.wikipedia.org/wiki/Tenerife">with a link</a>.</p> + +More text below. + +### Code + +```jsx +// add margin: 8px 0px; +<Slider sx={{ my: 1 }} /> +``` + +<p class="blog-description"><a href="https://codesandbox.io/p/sandbox/nostalgic-williams-zmo5r?file=/src/App.js">CodeSandbox</a></p> + +More text below. diff --git a/docs/pages/experiments/blog/blog.md b/docs/pages/experiments/blog/blog.md index 0579a43e8f4eff..42c229e45f99c0 100644 --- a/docs/pages/experiments/blog/blog.md +++ b/docs/pages/experiments/blog/blog.md @@ -4,14 +4,14 @@ description: Our internationally distributed startup gathered on a remote island date: 2022-07-28T00:00:00.000Z authors: ['samuelsycamore'] tags: ['Company'] -card: false +manualCard: false --- ## Description ### Image -<img alt="Satellite image of Tenerife" src="/static/blog/2022-tenerife-retreat/tenerife.jpeg" width="2560" height="1920" loading="lazy" /> +<img alt="Satellite image of Tenerife" src="/static/blog/2022-tenerife-retreat/tenerife.jpeg" width="2560" height="1920" /> <p class="blog-description">An image description <a href="https://en.wikipedia.org/wiki/Tenerife">with a link</a>.</p> diff --git a/docs/pages/experiments/docs/demos.md b/docs/pages/experiments/docs/demos.md index 9334e1a03b1097..5a630ed5a063fb 100644 --- a/docs/pages/experiments/docs/demos.md +++ b/docs/pages/experiments/docs/demos.md @@ -1,12 +1,19 @@ # Demos -<p class="description">Demos</p> +<p class="description">The different variants of demo containers we have in the docs.</p> ## Standard demo +"Standard" refers to when no background is explicitly defined. +So, it renders the "outlined" background variant. + {{"demo": "DemoInDocs.js"}} -## "bg": "inline" demo +## "bg": "outlined" + +{{"demo": "DemoInDocs.js", "bg": "outlined"}} + +## "bg": "inline" {{"demo": "DemoInDocs.js", "bg": "inline"}} @@ -14,6 +21,10 @@ {{"demo": "DemoInDocs.js", "bg": true}} +## "bg": gradient + +{{"demo": "DemoInDocs.js", "bg": "gradient"}} + ## "hideToolbar": true {{"demo": "DemoInDocs.js", "hideToolbar": true}} diff --git a/docs/pages/experiments/docs/og-card.js b/docs/pages/experiments/docs/og-card.js new file mode 100644 index 00000000000000..3c3ab187e0adcf --- /dev/null +++ b/docs/pages/experiments/docs/og-card.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from './og-card.md?muiMarkdown'; + +export default function Page() { + return <MarkdownDocs {...pageProps} />; +} diff --git a/docs/pages/experiments/docs/og-card.md b/docs/pages/experiments/docs/og-card.md new file mode 100644 index 00000000000000..4a169ff15df2f4 --- /dev/null +++ b/docs/pages/experiments/docs/og-card.md @@ -0,0 +1,33 @@ +--- +title: OG card generation +cardDescription: A quick overview of available options. +--- + +# OG card + +<p class="description">How the docs platform generate Open Graph card images</p> + +## The edge function + +The URL `mui.com/edge-functions/og-image` can be queried with 4 search parameters: + +- `product`: the text element displayed next to the MUI logo +- `title`: the title which can contains `\*` to delimit the highlighted (in blue) text sections +- `description`: a paragraph added under the main title +- `authors`: the GitHub username of the authors. It should be divided by a coma. + +## Usage with Markdown + +By default, the card is generated using the page title and description. +You can override this behavior by providing different/specific `cardTitle` and `cardDescription` in the Markdown header, like so: + +```markup +-- +cardTitle: A *different* title than the page title +cardDecription: The word "different" on the title is highlighted +-- +``` + +## Card design preview + +Visit [this StackBlitz demo](https://stackblitz.com/edit/vitejs-vite-ukeejd?file=src%2FApp.tsx) to see how the card looks like without having to run a random page on an OG preview site. diff --git a/docs/pages/material-ui/api/step-connector.json b/docs/pages/material-ui/api/step-connector.json index c0d62fb18711f6..ddfa3bb8b11fef 100644 --- a/docs/pages/material-ui/api/step-connector.json +++ b/docs/pages/material-ui/api/step-connector.json @@ -54,14 +54,16 @@ { "key": "lineHorizontal", "className": "MuiStepConnector-lineHorizontal", - "description": "Styles applied to the root element if `orientation=\"horizontal\"`.", - "isGlobal": false + "description": "Styles applied to the line element if `orientation=\"horizontal\"`.", + "isGlobal": false, + "isDeprecated": true }, { "key": "lineVertical", "className": "MuiStepConnector-lineVertical", - "description": "Styles applied to the root element if `orientation=\"vertical\"`.", - "isGlobal": false + "description": "Styles applied to the line element if `orientation=\"vertical\"`.", + "isGlobal": false, + "isDeprecated": true }, { "key": "root", diff --git a/docs/pages/material-ui/api/step-label.json b/docs/pages/material-ui/api/step-label.json index cc855fad1f48fa..07a2c71835e352 100644 --- a/docs/pages/material-ui/api/step-label.json +++ b/docs/pages/material-ui/api/step-label.json @@ -12,15 +12,26 @@ "icon": { "type": { "name": "node" } }, "optional": { "type": { "name": "node" } }, "slotProps": { - "type": { "name": "shape", "description": "{ label?: func<br>| object }" }, + "type": { + "name": "shape", + "description": "{ label?: func<br>| object, stepIcon?: func<br>| object }" + }, "default": "{}" }, "slots": { - "type": { "name": "shape", "description": "{ label?: elementType }" }, + "type": { "name": "shape", "description": "{ label?: elementType, stepIcon?: elementType }" }, "default": "{}" }, - "StepIconComponent": { "type": { "name": "elementType" } }, - "StepIconProps": { "type": { "name": "object" } }, + "StepIconComponent": { + "type": { "name": "elementType" }, + "deprecated": true, + "deprecationInfo": "Use <code>slots.stepIcon</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>." + }, + "StepIconProps": { + "type": { "name": "object" }, + "deprecated": true, + "deprecationInfo": "Use <code>slotProps.stepIcon</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>." + }, "sx": { "type": { "name": "union", @@ -40,6 +51,11 @@ "description": "The component that renders the label.", "default": "span", "class": "MuiStepLabel-label" + }, + { + "name": "stepIcon", + "description": "The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).", + "class": null } ], "classes": [ diff --git a/docs/pages/material-ui/api/tab-panel.json b/docs/pages/material-ui/api/tab-panel.json index 01ec545ad24756..7c80cfabce2bc7 100644 --- a/docs/pages/material-ui/api/tab-panel.json +++ b/docs/pages/material-ui/api/tab-panel.json @@ -3,6 +3,7 @@ "value": { "type": { "name": "string" }, "required": true }, "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, + "keepMounted": { "type": { "name": "bool" }, "default": "false" }, "sx": { "type": { "name": "union", @@ -14,6 +15,12 @@ "name": "TabPanel", "imports": ["import TabPanel from '@mui/lab/TabPanel';", "import { TabPanel } from '@mui/lab';"], "classes": [ + { + "key": "hidden", + "className": "MuiTabPanel-hidden", + "description": "State class applied to the root `div` element if `hidden={true}`.", + "isGlobal": false + }, { "key": "root", "className": "MuiTabPanel-root", diff --git a/docs/pages/material-ui/api/toggle-button-group.json b/docs/pages/material-ui/api/toggle-button-group.json index e3d1c10eefb45c..0ce12e51e361b8 100644 --- a/docs/pages/material-ui/api/toggle-button-group.json +++ b/docs/pages/material-ui/api/toggle-button-group.json @@ -73,12 +73,20 @@ "key": "groupedHorizontal", "className": "MuiToggleButtonGroup-groupedHorizontal", "description": "Styles applied to the children if `orientation=\"horizontal\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "groupedVertical", "className": "MuiToggleButtonGroup-groupedVertical", "description": "Styles applied to the children if `orientation=\"vertical\"`.", + "isGlobal": false, + "isDeprecated": true + }, + { + "key": "horizontal", + "className": "MuiToggleButtonGroup-horizontal", + "description": "Styles applied to the root element if `orientation=\"horizontal\"`.", "isGlobal": false }, { diff --git a/docs/pages/material-ui/design-resources/connect.js b/docs/pages/material-ui/design-resources/connect.js new file mode 100644 index 00000000000000..ab121664c18d87 --- /dev/null +++ b/docs/pages/material-ui/design-resources/connect.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/design-resources/connect/connect.md?muiMarkdown'; + +export default function Page() { + return <MarkdownDocs {...pageProps} />; +} diff --git a/docs/pages/material-ui/design-resources/material-ui-for-figma.js b/docs/pages/material-ui/design-resources/material-ui-for-figma.js new file mode 100644 index 00000000000000..a38c5cd4d88ddb --- /dev/null +++ b/docs/pages/material-ui/design-resources/material-ui-for-figma.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/design-resources/material-ui-for-figma/material-ui-for-figma.md?muiMarkdown'; + +export default function Page() { + return <MarkdownDocs {...pageProps} />; +} diff --git a/docs/pages/material-ui/getting-started/design-resources.js b/docs/pages/material-ui/getting-started/design-resources.js index 4df5b129ae956d..8e1e24b65a2436 100644 --- a/docs/pages/material-ui/getting-started/design-resources.js +++ b/docs/pages/material-ui/getting-started/design-resources.js @@ -3,5 +3,5 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; import * as pageProps from 'docs/data/material/getting-started/design-resources/design-resources.md?muiMarkdown'; export default function Page() { - return <MarkdownDocs {...pageProps} disableAd disableToc />; + return <MarkdownDocs {...pageProps} disableAd />; } diff --git a/docs/public/static/blog/introducing-connect/card.png b/docs/public/static/blog/introducing-connect/card.png new file mode 100644 index 00000000000000..fd55e108ab5082 Binary files /dev/null and b/docs/public/static/blog/introducing-connect/card.png differ diff --git a/docs/public/static/blog/introducing-connect/custom-component.mp4 b/docs/public/static/blog/introducing-connect/custom-component.mp4 new file mode 100644 index 00000000000000..f8721ce26a815d Binary files /dev/null and b/docs/public/static/blog/introducing-connect/custom-component.mp4 differ diff --git a/docs/public/static/blog/introducing-connect/storybook.mp4 b/docs/public/static/blog/introducing-connect/storybook.mp4 new file mode 100644 index 00000000000000..c6ddd2e2e5b9f6 Binary files /dev/null and b/docs/public/static/blog/introducing-connect/storybook.mp4 differ diff --git a/docs/public/static/blog/introducing-connect/theme-customization.mp4 b/docs/public/static/blog/introducing-connect/theme-customization.mp4 new file mode 100644 index 00000000000000..b77be7df826b8a Binary files /dev/null and b/docs/public/static/blog/introducing-connect/theme-customization.mp4 differ diff --git "a/docs/public/static/branding/about/aar\303\263n-garc\303\255a.png" "b/docs/public/static/branding/about/aar\303\263n-garc\303\255a.png" new file mode 100644 index 00000000000000..a6604f5684ae27 Binary files /dev/null and "b/docs/public/static/branding/about/aar\303\263n-garc\303\255a.png" differ diff --git a/docs/public/static/branding/about/jose-quintas.png b/docs/public/static/branding/about/jose-quintas.png new file mode 100644 index 00000000000000..8206d6645cd096 Binary files /dev/null and b/docs/public/static/branding/about/jose-quintas.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-access.png b/docs/public/static/material-ui/design-resources/connect-access.png new file mode 100644 index 00000000000000..c8f6ec4d6bef27 Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-access.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-code-editor.png b/docs/public/static/material-ui/design-resources/connect-code-editor.png new file mode 100644 index 00000000000000..7e45f3071adf9a Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-code-editor.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-component-variant.png b/docs/public/static/material-ui/design-resources/connect-component-variant.png new file mode 100644 index 00000000000000..dbf37d0afc2697 Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-component-variant.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-generate.png b/docs/public/static/material-ui/design-resources/connect-generate.png new file mode 100644 index 00000000000000..3740a185267a04 Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-generate.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-regenerate.png b/docs/public/static/material-ui/design-resources/connect-regenerate.png new file mode 100644 index 00000000000000..bd8a6ecfe6f676 Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-regenerate.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-storybook.png b/docs/public/static/material-ui/design-resources/connect-storybook.png new file mode 100644 index 00000000000000..c6c0751d407f49 Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-storybook.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-switch-component-customized-storybook.png b/docs/public/static/material-ui/design-resources/connect-switch-component-customized-storybook.png new file mode 100644 index 00000000000000..dc944a48b56f94 Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-switch-component-customized-storybook.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-switch-component-customized.png b/docs/public/static/material-ui/design-resources/connect-switch-component-customized.png new file mode 100644 index 00000000000000..565769a85fe770 Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-switch-component-customized.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-switch.png b/docs/public/static/material-ui/design-resources/connect-switch.png new file mode 100644 index 00000000000000..17c8d4af23f16f Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-switch.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-variables.png b/docs/public/static/material-ui/design-resources/connect-variables.png new file mode 100644 index 00000000000000..ba5d96c4db307f Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-variables.png differ diff --git a/docs/public/static/material-ui/design-resources/connect.png b/docs/public/static/material-ui/design-resources/connect.png new file mode 100644 index 00000000000000..1ea20e794f9000 Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect.png differ diff --git a/docs/src/MuiPage.ts b/docs/src/MuiPage.ts index 934782c099a824..36296ce8f71096 100644 --- a/docs/src/MuiPage.ts +++ b/docs/src/MuiPage.ts @@ -53,6 +53,10 @@ export interface MuiPage { * Indicates if the component/hook is not stable yet. */ unstable?: boolean; + /** + * Indicates the item is in beta release. + */ + beta?: boolean; } export interface OrderedMuiPage extends MuiPage { diff --git a/docs/src/components/banner/TableOfContentsBanner.tsx b/docs/src/components/banner/TableOfContentsBanner.tsx index 66f492e4b3ca8b..79d27a93df033e 100644 --- a/docs/src/components/banner/TableOfContentsBanner.tsx +++ b/docs/src/components/banner/TableOfContentsBanner.tsx @@ -34,10 +34,9 @@ export default function TableOfContentsBanner() { (theme) => theme.applyDarkStyles({ backgroundColor: alpha(theme.palette.primary[900], 0.2), - borderColor: (theme.vars || theme).palette.divider, '&:hover, &:focus-visible': { backgroundColor: alpha(theme.palette.primary[900], 0.4), - borderColor: (theme.vars || theme).palette.primaryDark[500], + borderColor: (theme.vars || theme).palette.primary[900], }, }), ]} diff --git a/docs/src/components/markdown/MarkdownElement.tsx b/docs/src/components/markdown/MarkdownElement.tsx index 37eda97a4d1289..0fa3ed548afea2 100644 --- a/docs/src/components/markdown/MarkdownElement.tsx +++ b/docs/src/components/markdown/MarkdownElement.tsx @@ -10,7 +10,7 @@ const Root = styled('div')(({ theme }) => ({ ...theme.typography.caption, color: (theme.vars || theme).palette.text.primary, '& pre': { - backgroundColor: '#0F1924', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint. + backgroundColor: 'hsl(210, 35%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint. color: '#f8f8f2', // fallback color until Prism's theme is loaded overflow: 'auto', margin: 0, diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js index 9750bfeed8b6ab..0e612dc7970101 100644 --- a/docs/src/modules/components/Ad.js +++ b/docs/src/modules/components/Ad.js @@ -5,6 +5,7 @@ import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; import AdCarbon from 'docs/src/modules/components/AdCarbon'; import AdInHouse from 'docs/src/modules/components/AdInHouse'; +import { GA_ADS_DISPLAY_RATIO } from 'docs/src/modules/constants'; import { AdContext, adShape } from 'docs/src/modules/components/AdManager'; import { useTranslate } from '@mui/docs/i18n'; @@ -197,7 +198,7 @@ export default function Ad() { React.useEffect(() => { // Avoid an exceed on the Google Analytics quotas. - if (Math.random() < 0.9 || !eventLabel) { + if (Math.random() > GA_ADS_DISPLAY_RATIO || !eventLabel) { return undefined; } diff --git a/docs/src/modules/components/AdCarbon.js b/docs/src/modules/components/AdCarbon.js index 64963da1702729..bd62cf8bfe3871 100644 --- a/docs/src/modules/components/AdCarbon.js +++ b/docs/src/modules/components/AdCarbon.js @@ -126,6 +126,7 @@ export function AdCarbonInline(props) { name: ad.company, description: `<strong>${ad.company}</strong> - ${ad.description}`, poweredby: 'Carbon', + label: 'carbon-demo-inline', }} /> </React.Fragment> diff --git a/docs/src/modules/components/AdDisplay.js b/docs/src/modules/components/AdDisplay.js index 1de9a19857246f..e31003bd3225de 100644 --- a/docs/src/modules/components/AdDisplay.js +++ b/docs/src/modules/components/AdDisplay.js @@ -2,6 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; import { adShape } from 'docs/src/modules/components/AdManager'; +import { GA_ADS_DISPLAY_RATIO } from 'docs/src/modules/constants'; import { adStylesObject } from 'docs/src/modules/components/ad.styles'; const Root = styled('span', { shouldForwardProp: (prop) => prop !== 'shape' })(({ @@ -23,6 +24,18 @@ const Root = styled('span', { shouldForwardProp: (prop) => prop !== 'shape' })(( export default function AdDisplay(props) { const { ad, className, shape = 'auto' } = props; + React.useEffect(() => { + // Avoid an exceed on the Google Analytics quotas. + if (Math.random() > GA_ADS_DISPLAY_RATIO || !ad.label) { + return; + } + + window.gtag('event', 'ad', { + eventAction: 'display', + eventLabel: ad.label, + }); + }, [ad.label]); + /* eslint-disable material-ui/no-hardcoded-labels, react/no-danger */ return ( <Root shape={shape === 'inline' ? 'inline' : adShape} className={className}> diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js index abf1775d1768fd..f51d320ae6294c 100644 --- a/docs/src/modules/components/ApiPage.js +++ b/docs/src/modules/components/ApiPage.js @@ -53,11 +53,13 @@ function Heading(props) { return ( <Level id={hash}> - {getTranslatedHeader(t, hash)} - <a aria-labelledby={hash} className="anchor-link" href={`#${hash}`} tabIndex={-1}> - <svg> - <use xlinkHref="#anchor-link-icon" /> - </svg> + <a aria-labelledby={hash} className="title-link-to-anchor" href={`#${hash}`} tabIndex={-1}> + {getTranslatedHeader(t, hash)} + <div className="anchor-icon"> + <svg> + <use xlinkHref="#anchor-link-icon" /> + </svg> + </div> </a> </Level> ); diff --git a/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx b/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx index bc09404849b40c..63588a4ff1f28a 100644 --- a/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx +++ b/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx @@ -93,16 +93,18 @@ export default function ClassesSection(props: ClassesSectionProps) { <React.Fragment> <Box sx={{ display: 'flex', alignItems: 'baseline', mb: 1 }}> <Level id={titleHash} style={{ flexGrow: 1 }}> - {t(title)} <a aria-labelledby={titleHash} - className="anchor-link" + className="title-link-to-anchor" href={`#${titleHash}`} tabIndex={-1} > - <svg> - <use xlinkHref="#anchor-link-icon" /> - </svg> + {t(title)} + <div className="anchor-icon"> + <svg> + <use xlinkHref="#anchor-link-icon" /> + </svg> + </div> </a> </Level> <ToggleDisplayOption diff --git a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js index fd52e51baa758c..aab0a34a84f154 100644 --- a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js +++ b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js @@ -122,16 +122,18 @@ export default function PropertiesSection(props) { <React.Fragment> <Box sx={{ display: 'flex', alignItems: 'baseline', mb: 1 }}> <Level id={titleHash} style={{ flexGrow: 1 }}> - {t(title)} <a aria-labelledby={titleHash} - className="anchor-link" + className="title-link-to-anchor" href={`#${titleHash}`} tabIndex={-1} > - <svg> - <use xlinkHref="#anchor-link-icon" /> - </svg> + {t(title)} + <div className="anchor-icon"> + <svg> + <use xlinkHref="#anchor-link-icon" /> + </svg> + </div> </a> </Level> <ToggleDisplayOption diff --git a/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx b/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx index dcbb7bd63807af..238965cf66c195 100644 --- a/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx +++ b/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx @@ -55,16 +55,18 @@ export default function SlotsSection(props: SlotsSectionProps) { <React.Fragment> <Box sx={{ display: 'flex', alignItems: 'baseline', mb: 1 }}> <Level id={titleHash} style={{ flexGrow: 1 }}> - {t(title)} <a aria-labelledby={titleHash} - className="anchor-link" + className="title-link-to-anchor" href={`#${titleHash}`} tabIndex={-1} > - <svg> - <use xlinkHref="#anchor-link-icon" /> - </svg> + <div className="anchor-icon"> + {t(title)} + <svg> + <use xlinkHref="#anchor-link-icon" /> + </svg> + </div> </a> </Level> <ToggleDisplayOption diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js index 9f43d152a13b07..08d1eb2c232786 100644 --- a/docs/src/modules/components/AppFrame.js +++ b/docs/src/modules/components/AppFrame.js @@ -115,13 +115,12 @@ const StyledAppBar = styled(AppBar, { boxShadow: 'none', backdropFilter: 'blur(8px)', borderStyle: 'solid', - borderColor: (theme.vars || theme).palette.grey[100], + borderColor: (theme.vars || theme).palette.divider, borderWidth: 0, borderBottomWidth: 'thin', backgroundColor: 'rgba(255,255,255,0.8)', color: (theme.vars || theme).palette.grey[800], ...theme.applyDarkStyles({ - borderColor: alpha(theme.palette.primary[100], 0.08), backgroundColor: alpha(theme.palette.primaryDark[900], 0.8), color: (theme.vars || theme).palette.grey[500], }), @@ -166,6 +165,9 @@ export default function AppFrame(props) { const [mobileOpen, setMobileOpen] = React.useState(false); const [settingsOpen, setSettingsOpen] = React.useState(false); + const closeDrawer = React.useCallback(() => setMobileOpen(false), []); + const openDrawer = React.useCallback(() => setMobileOpen(true), []); + const { activePage } = React.useContext(PageContext); const disablePermanent = activePage?.disableDrawer === true || disableDrawer === true; @@ -205,7 +207,7 @@ export default function AppFrame(props) { </Box> </NextLink> <GrowingDiv /> - <Stack direction="row" spacing="10px"> + <Stack direction="row" spacing={1} useFlexGap> <BannerComponent /> <DeferredAppSearch /> <Tooltip title={t('appFrame.github')} enterDelay={300}> @@ -230,8 +232,8 @@ export default function AppFrame(props) { </StyledAppBar> <StyledAppNavDrawer disablePermanent={disablePermanent} - onClose={() => setMobileOpen(false)} - onOpen={() => setMobileOpen(true)} + onClose={closeDrawer} + onOpen={openDrawer} mobileOpen={mobileOpen} /> {children} diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js index 3070ad0f1d3a56..c343c6b3338147 100644 --- a/docs/src/modules/components/AppLayoutDocs.js +++ b/docs/src/modules/components/AppLayoutDocs.js @@ -101,6 +101,7 @@ export default function AppLayoutDocs(props) { const router = useRouter(); const { BannerComponent, + cardOptions, children, description, disableAd = false, @@ -137,6 +138,7 @@ export default function AppLayoutDocs(props) { const Layout = disableLayout ? React.Fragment : AppFrame; const layoutProps = disableLayout ? {} : { BannerComponent }; + const card = `/edge-functions/og-image?product=${productName}&title=${cardOptions?.title ?? title}&description=${cardOptions?.description ?? description}`; return ( <Layout {...layoutProps}> <GlobalStyles @@ -151,7 +153,7 @@ export default function AppLayoutDocs(props) { title={`${title} - ${productName}`} description={description} largeCard={false} - card="https://mui.com/static/logo.png" + card={card} /> <Main disableToc={disableToc}> {/* @@ -172,6 +174,10 @@ export default function AppLayoutDocs(props) { AppLayoutDocs.propTypes = { BannerComponent: PropTypes.elementType, + cardOptions: PropTypes.shape({ + description: PropTypes.string, + title: PropTypes.string, + }), children: PropTypes.node.isRequired, description: PropTypes.string.isRequired, disableAd: PropTypes.bool.isRequired, diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index f56d19f285935b..0d0077b891a699 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -261,6 +261,7 @@ function reduceChildRoutes(context) { newFeature={page.newFeature} planned={page.planned} unstable={page.unstable} + beta={page.beta} plan={page.plan} icon={page.icon} subheader={subheader} @@ -294,6 +295,7 @@ function reduceChildRoutes(context) { newFeature={page.newFeature} planned={page.planned} unstable={page.unstable} + beta={page.beta} plan={page.plan} icon={page.icon} subheader={Boolean(page.subheader)} diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js index e626a11fe7d7e0..e3ea4afdf9d3e4 100644 --- a/docs/src/modules/components/AppNavDrawerItem.js +++ b/docs/src/modules/components/AppNavDrawerItem.js @@ -144,7 +144,7 @@ const Item = styled( theme.applyDarkStyles({ ...color, '&::before': { - background: alpha(theme.palette.primaryDark[700], 0.6), + background: alpha(theme.palette.primaryDark[500], 0.3), }, '&.app-drawer-active': { color: (theme.vars || theme).palette.primary[300], @@ -242,6 +242,7 @@ DeadLink.propTypes = { export default function AppNavDrawerItem(props) { const { + beta, children, depth, href, @@ -319,6 +320,7 @@ export default function AppNavDrawerItem(props) { {newFeature && <Chip label="New" sx={sxChip('success')} />} {planned && <Chip label="Planned" sx={sxChip('grey')} />} {unstable && <Chip label="Preview" sx={sxChip('primary')} />} + {beta && <Chip label="Beta" sx={sxChip('primary')} />} </Item> {expandable ? ( <Collapse in={open} timeout="auto" unmountOnExit> @@ -332,6 +334,7 @@ export default function AppNavDrawerItem(props) { } AppNavDrawerItem.propTypes = { + beta: PropTypes.bool, children: PropTypes.node, depth: PropTypes.number.isRequired, expandable: PropTypes.bool, diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js index 0cf3f3da46828e..c74297650aa327 100644 --- a/docs/src/modules/components/AppSearch.js +++ b/docs/src/modules/components/AppSearch.js @@ -54,10 +54,7 @@ const SearchButton = styled('button')(({ theme }) => [ cursor: 'pointer', transitionProperty: 'all', transitionDuration: '150ms', - boxShadow: `inset 0 -1px 0 ${(theme.vars || theme).palette.grey[100]}, 0 1px 0.5px ${alpha( - theme.palette.grey[100], - 0.6, - )}`, + boxShadow: `hsl(200, 0%, 100%) 0 2px 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': { background: (theme.vars || theme).palette.grey[100], borderColor: (theme.vars || theme).palette.grey[300], @@ -70,9 +67,7 @@ const SearchButton = styled('button')(({ theme }) => [ theme.applyDarkStyles({ backgroundColor: alpha(theme.palette.primaryDark[700], 0.4), borderColor: (theme.vars || theme).palette.primaryDark[700], - 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.1)} 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': { background: (theme.vars || theme).palette.primaryDark[700], borderColor: (theme.vars || theme).palette.primaryDark[600], diff --git a/docs/src/modules/components/ComponentsApiContent.js b/docs/src/modules/components/ComponentsApiContent.js index c089b6302b6783..eab0596c3c8c06 100644 --- a/docs/src/modules/components/ComponentsApiContent.js +++ b/docs/src/modules/components/ComponentsApiContent.js @@ -33,11 +33,13 @@ function Heading(props) { return ( <Level id={hash}> - {getTranslatedHeader(t, hash, text)} - <a aria-labelledby={hash} className="anchor-link" href={`#${hash}`} tabIndex={-1}> - <svg> - <use xlinkHref="#anchor-link-icon" /> - </svg> + <a aria-labelledby={hash} className="title-link-to-anchor" href={`#${hash}`} tabIndex={-1}> + {getTranslatedHeader(t, hash, text)} + <div className="anchor-icon"> + <svg> + <use xlinkHref="#anchor-link-icon" /> + </svg> + </div> </a> </Level> ); diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index 4bebe7324c9390..ed82ae5d5aa386 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -210,6 +210,11 @@ const DemoRootMaterial = styled('div', { ...(bg === 'inline' && { padding: theme.spacing(0), }), + ...(bg === 'gradient' && { + padding: theme.spacing(12, 8), + borderLeftWidth: 1, + borderRightWidth: 1, + }), }, /* Isolate the demo with an outline. */ ...(bg === 'outlined' && { @@ -231,28 +236,25 @@ const DemoRootMaterial = styled('div', { /* Prepare the background to display an inner elevation. */ ...(bg === true && { padding: theme.spacing(3), - backgroundColor: alpha(theme.palette.grey[50], 0.6), + backgroundColor: alpha((theme.vars || theme).palette.grey[50], 0.5), border: `1px solid ${(theme.vars || theme).palette.divider}`, ...theme.applyDarkStyles({ - backgroundColor: alpha(theme.palette.primaryDark[700], 0.15), + backgroundColor: alpha((theme.vars || theme).palette.primaryDark[700], 0.4), }), }), /* Mostly meant for introduction demos. */ ...(bg === 'gradient' && { overflow: 'auto', - padding: theme.spacing(20, 8), - border: `1px solid`, - borderColor: (theme.vars || theme).palette.divider, + padding: theme.spacing(4, 2), + border: `1px solid ${(theme.vars || theme).palette.divider}`, + borderLeftWidth: 0, + borderRightWidth: 0, backgroundClip: 'padding-box', - backgroundColor: alpha(theme.palette.primary[50], 0.5), - backgroundImage: `radial-gradient(140% 108% at 50% 8%, transparent 40%, ${ - theme.palette.primary[50] - } 70%, ${alpha(theme.palette.primary[100], 0.2)} 100%)`, + backgroundColor: alpha(theme.palette.primary[50], 0.2), + backgroundImage: `radial-gradient(120% 140% at 50% 10%, transparent 40%, ${alpha((theme.vars || theme).palette.primary[100], 0.2)} 70%)`, ...theme.applyDarkStyles({ - borderColor: (theme.vars || theme).palette.divider, - backgroundColor: '#00111A', - backgroundImage: - 'radial-gradient(140% 120% at 50% 8%, transparent 40%, #051729 70%, #041425 100%)', + backgroundColor: (theme.vars || theme).palette.primaryDark[900], + backgroundImage: `radial-gradient(120% 140% at 50% 10%, transparent 30%, ${alpha((theme.vars || theme).palette.primary[900], 0.3)} 80%)`, }), }), })); @@ -331,6 +333,9 @@ const DemoCodeViewer = styled(HighlightedCode)(() => ({ maxWidth: 'initial', borderRadius: 0, }, + '& .MuiCode-copy': { + display: 'none', + }, })); const AnchorLink = styled('div')({ diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx index e32390019b3f63..b73c500fae1727 100644 --- a/docs/src/modules/components/DemoEditor.tsx +++ b/docs/src/modules/components/DemoEditor.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import SimpleCodeEditor from 'react-simple-code-editor'; import Box from '@mui/material/Box'; import { NoSsr } from '@mui/base/NoSsr'; -import { styled, useTheme } from '@mui/material/styles'; +import { styled, alpha, useTheme } from '@mui/material/styles'; import prism from '@mui/internal-markdown/prism'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; import CodeCopyButton from 'docs/src/modules/components/CodeCopyButton'; @@ -16,14 +16,14 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [ maxHeight: 'min(68vh, 1000px)', overflow: 'auto', marginTop: -1, - backgroundColor: '#0F1924', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint. + backgroundColor: 'hsl(210, 35%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint. border: `1px solid ${(theme.vars || theme).palette.divider}`, colorScheme: 'dark', '&:hover': { - boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primary.light}`, + boxShadow: `0 0 0 3px ${alpha((theme.vars || theme).palette.primary[500], 0.5)}`, }, '&:focus-within': { - boxShadow: `0 0 0 2px ${(theme.vars || theme).palette.primary.main}`, + boxShadow: `0 0 0 2px ${alpha((theme.vars || theme).palette.primary[500], 0.5)}`, }, [theme.breakpoints.up('sm')]: { borderRadius: '0 0 12px 12px', @@ -35,16 +35,13 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [ maxWidth: 'initial', maxHeight: 'initial', }, + '& .MuiCode-copy': { + display: 'none', + }, }, theme.applyDarkStyles({ '& .scrollContainer': { borderColor: (theme.vars || theme).palette.divider, - '&:hover': { - boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primaryDark[300]}`, - }, - '&:focus-within': { - boxShadow: `0 0 0 2px ${(theme.vars || theme).palette.primaryDark[400]}`, - }, }, }), ]) as any; diff --git a/docs/src/modules/components/DemoToolbarRoot.ts b/docs/src/modules/components/DemoToolbarRoot.ts index 984115f71f2f7d..071aea7f1df146 100644 --- a/docs/src/modules/components/DemoToolbarRoot.ts +++ b/docs/src/modules/components/DemoToolbarRoot.ts @@ -11,11 +11,12 @@ const DemoToolbarRoot = styled('div', { { display: 'none', [theme.breakpoints.up('sm')]: { + top: 0, display: 'block', - border: `1px solid ${(theme.vars || theme).palette.divider}`, marginTop: demoOptions.bg === 'inline' ? theme.spacing(1) : -1, - top: 0, padding: theme.spacing(0.5, 1), + border: `1px solid ${(theme.vars || theme).palette.divider}`, + borderTopWidth: demoOptions.bg === 'inline' ? 1 : 0, backgroundColor: alpha(theme.palette.grey[50], 0.2), borderRadius: openDemoSource ? 0 : '0 0 12px 12px', transition: theme.transitions.create('border-radius'), diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js index cdd753cb98009b..4461e562ee4742 100644 --- a/docs/src/modules/components/DiamondSponsors.js +++ b/docs/src/modules/components/DiamondSponsors.js @@ -17,7 +17,7 @@ const NativeLink = styled('a')(({ theme }) => ({ border: '1px solid', borderColor: (theme.vars || theme).palette.divider, transition: theme.transitions.create(['color', 'border-color']), - 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`, + boxShadow: `${alpha(theme.palette.grey[100], 0.3)} 0 -2px 0 inset`, '&:hover': { backgroundColor: (theme.vars || theme).palette.grey[50], }, @@ -29,10 +29,10 @@ const NativeLink = styled('a')(({ theme }) => ({ display: 'inline-block', }, ...theme.applyDarkStyles({ - 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`, + boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset`, '&:hover': { backgroundColor: (theme.vars || theme).palette.primaryDark[800], - borderColor: (theme.vars || theme).palette.primaryDark[600], + borderColor: (theme.vars || theme).palette.primary[900], }, }), })); diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js index d8b16b3067ee3b..409d996925ed54 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 <div />; + } + const CROWDIN_ROOT_URL = 'https://crowdin.com/project/material-ui-docs/'; const crowdInLocale = LOCALES[userLanguage] || userLanguage; const crowdInPath = sourceLocation.substring(0, sourceLocation.lastIndexOf('/')); @@ -19,6 +25,7 @@ export default function EditPage(props) { component="a" size="small" variant="outlined" + color="secondary" startIcon={<GitHubIcon sx={{ mr: 0.5 }} />} href={ userLanguage === 'en' diff --git a/docs/src/modules/components/Head.tsx b/docs/src/modules/components/Head.tsx index 7366a2ce2fd8ff..884ecea4b08879 100644 --- a/docs/src/modules/components/Head.tsx +++ b/docs/src/modules/components/Head.tsx @@ -6,7 +6,9 @@ import { useUserLanguage, useTranslate } from '@mui/docs/i18n'; import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; // #major-version-switch -const HOST = 'https://mui.com'; +const HOST = process.env.PULL_REQUEST_ID + ? `https://deploy-preview-${process.env.PULL_REQUEST_ID}--${process.env.NETLIFY_SITE_NAME}.netlify.app` + : 'https://mui.com'; interface HeadProps { card?: string; diff --git a/docs/src/modules/components/HooksApiContent.js b/docs/src/modules/components/HooksApiContent.js index ded5a05f01e5fa..acb36479c6dd62 100644 --- a/docs/src/modules/components/HooksApiContent.js +++ b/docs/src/modules/components/HooksApiContent.js @@ -27,11 +27,13 @@ function Heading(props) { return ( <Level id={hash}> - {getTranslatedHeader(t, hash, text)} - <a aria-labelledby={hash} className="anchor-link" href={`#${hash}`} tabIndex={-1}> - <svg> - <use xlinkHref="#anchor-link-icon" /> - </svg> + <a aria-labelledby={hash} className="title-link-to-anchor" href={`#${hash}`} tabIndex={-1}> + {getTranslatedHeader(t, hash, text)} + <div className="anchor-icon"> + <svg> + <use xlinkHref="#anchor-link-icon" /> + </svg> + </div> </a> </Level> ); diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js index 9d12aef4dad2c5..5d1dc61a55b3c8 100644 --- a/docs/src/modules/components/MarkdownDocs.js +++ b/docs/src/modules/components/MarkdownDocs.js @@ -54,6 +54,10 @@ export default function MarkdownDocs(props) { return ( <AppLayoutDocs + cardOptions={{ + description: localizedDoc.headers.cardDescription, + title: localizedDoc.headers.cardTitle, + }} description={localizedDoc.description} disableAd={disableAd} disableToc={disableToc} diff --git a/docs/src/modules/components/MarkdownDocsV2.js b/docs/src/modules/components/MarkdownDocsV2.js index 96d6f972945cc9..8833babea4b493 100644 --- a/docs/src/modules/components/MarkdownDocsV2.js +++ b/docs/src/modules/components/MarkdownDocsV2.js @@ -243,6 +243,10 @@ export default function MarkdownDocsV2(props) { return ( <AppLayoutDocs + cardOptions={{ + description: localizedDoc.headers.cardDescription, + title: localizedDoc.headers.cardTitle, + }} description={localizedDoc.description} disableAd={disableAd} disableToc={disableToc} diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 1b2b6a0816f49c..371da06d34a5cd 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -24,8 +24,8 @@ const Root = styled('div')( lineHeight: 1.5, // Developers like when the code is dense. margin: theme.spacing(2, 'auto'), padding: theme.spacing(2), - backgroundColor: '#0F1924', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint. - color: '#f8f8f2', + backgroundColor: 'hsl(210, 35%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint. + color: 'hsl(60, 30%, 96%)', colorScheme: 'dark', borderRadius: `var(--muidocs-shape-borderRadius, ${ theme.shape?.borderRadius ?? lightTheme.shape.borderRadius @@ -134,26 +134,33 @@ const Root = styled('div')( // Remove scroll on small screens. wordBreak: 'break-all', }, - '& .anchor-link': { + '& .title-link-to-anchor': { + color: 'inherit', + textDecoration: 'none', + position: 'relative', + display: 'flex', + alignItems: 'center', + }, + '& .anchor-icon': { // To prevent the link to get the focus. display: 'inline-flex', alignItems: 'center', visibility: 'hidden', }, - '& a:not(.anchor-link):hover': { + '& a:not(.title-link-to-anchor):hover': { color: 'currentColor', border: 'none', boxShadow: '0 1px 0 0 currentColor', textDecoration: 'none', }, - '& .anchor-link, & .comment-link': { + '& .anchor-icon, & .comment-link': { padding: 0, cursor: 'pointer', alignItems: 'center', justifyContent: 'center', flexShrink: 0, textAlign: 'center', - marginLeft: 4, + marginLeft: 8, height: 26, width: 26, backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.grey[50]})`, @@ -174,7 +181,7 @@ const Root = styled('div')( verticalAlign: 'middle', }, }, - '&:hover .anchor-link': { + '&:hover .anchor-icon': { visibility: 'visible', }, '& .comment-link': { @@ -344,7 +351,7 @@ const Root = styled('div')( }, }, '&.MuiCallout-info': { - color: `var(--muidocs-palette-primary-900, ${lightTheme.palette.primary[900]})`, + color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`, borderColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`, '& strong': { @@ -375,7 +382,7 @@ const Root = styled('div')( '&.MuiCallout-warning': { color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, backgroundColor: alpha(lightTheme.palette.warning[50], 0.5), - borderColor: `var(--muidocs-palette-warning-200, ${lightTheme.palette.warning[200]})`, + borderColor: alpha(lightTheme.palette.warning[700], 0.15), '& strong': { color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, }, @@ -415,7 +422,7 @@ const Root = styled('div')( // Remove link arrow for ads display: 'none', }, - '& a, & a code': { + '& a:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': { // Style taken from the Link component color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`, fontWeight: theme.typography.fontWeightMedium, @@ -425,7 +432,7 @@ const Root = styled('div')( textDecorationColor: 'inherit', }, }, - '& a code': { + '& a:not(.title-link-to-anchor) code': { color: darken(lightTheme.palette.primary.main, 0.2), }, '& img, & video': { @@ -540,7 +547,7 @@ const Root = styled('div')( fontWeight: 500, borderRadius: 6, border: 'none', - backgroundColor: '#0F1924', // using the code block one-off background color (defined in line 23) + backgroundColor: 'hsl(210, 35%, 9%)', // using the code block one-off background color (defined in line 23) color: '#FFF', transition: theme.transitions.create(['background', 'borderColor', 'display'], { duration: theme.transitions.duration.shortest, @@ -670,7 +677,7 @@ const Root = styled('div')( color: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`, }, '& h1, & h2, & h3, & h4': { - '&:hover .anchor-link, & .comment-link': { + '&:hover .anchor-icon, & .comment-link': { color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primaryDark[300]})`, borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`, backgroundColor: alpha(darkTheme.palette.primaryDark[700], 0.5), @@ -721,8 +728,8 @@ const Root = styled('div')( }, '&.MuiCallout-error': { color: `var(--muidocs-palette-error-50, ${darkTheme.palette.error[50]})`, - backgroundColor: alpha(darkTheme.palette.error[700], 0.2), - borderColor: alpha(darkTheme.palette.error[600], 0.3), + backgroundColor: alpha(darkTheme.palette.error[700], 0.15), + borderColor: alpha(darkTheme.palette.error[400], 0.1), '& strong': { color: `var(--muidocs-palette-error-300, ${darkTheme.palette.error[300]})`, }, @@ -734,9 +741,9 @@ const Root = styled('div')( }, }, '&.MuiCallout-info': { - color: `var(--muidocs-palette-primary-50, ${darkTheme.palette.primary[50]})`, - backgroundColor: alpha(darkTheme.palette.grey[700], 0.2), - borderColor: `var(--muidocs-palette-grey-800, ${darkTheme.palette.grey[800]})`, + color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`, + backgroundColor: alpha(darkTheme.palette.grey[700], 0.15), + borderColor: alpha(darkTheme.palette.grey[800], 0.5), '& strong': { color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`, }, @@ -746,8 +753,8 @@ const Root = styled('div')( }, '&.MuiCallout-success': { color: `var(--muidocs-palette-success-50, ${darkTheme.palette.success[50]})`, - backgroundColor: alpha(darkTheme.palette.success[700], 0.15), - borderColor: alpha(lightTheme.palette.success[600], 0.3), + backgroundColor: alpha(darkTheme.palette.success[700], 0.12), + borderColor: alpha(lightTheme.palette.success[400], 0.1), '& strong': { color: `var(--muidocs-palette-success-200, ${darkTheme.palette.success[200]})`, }, @@ -760,8 +767,8 @@ const Root = styled('div')( }, '&.MuiCallout-warning': { color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`, - backgroundColor: alpha(darkTheme.palette.warning[700], 0.15), - borderColor: alpha(darkTheme.palette.warning[600], 0.3), + backgroundColor: alpha(darkTheme.palette.warning[700], 0.12), + borderColor: alpha(darkTheme.palette.warning[400], 0.1), '& strong': { color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`, }, @@ -773,10 +780,10 @@ const Root = styled('div')( }, }, }, - '& a, & a code': { + '& a:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': { color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primary[300]})`, }, - '& a code': { + '& a:not(.title-link-to-anchor) code': { color: `var(--muidocs-palette-primary-light, ${darkTheme.palette.primary.light})`, }, '& kbd.key': { diff --git a/docs/src/modules/components/MaterialUIDesignResources.js b/docs/src/modules/components/MaterialUIDesignResources.js index 51f5affd1be9c0..bd84a5b28c052a 100644 --- a/docs/src/modules/components/MaterialUIDesignResources.js +++ b/docs/src/modules/components/MaterialUIDesignResources.js @@ -49,7 +49,7 @@ export default function MaterialUIDesignResources() { <Grid container spacing={2}> {content.map(({ svg, title, link }) => ( <Grid key={title} xs={12} sm={4}> - <InfoCard classNameTitle="algolia-lvl3" link={link} title={title} svg={svg} /> + <InfoCard classNameTitle="algolia-lvl3" link={link} title={title} svg={svg} dense /> </Grid> ))} </Grid> diff --git a/docs/src/modules/components/MaterialUIExampleCollection.js b/docs/src/modules/components/MaterialUIExampleCollection.js index d53eddf8147e59..2c213f6d8074be 100644 --- a/docs/src/modules/components/MaterialUIExampleCollection.js +++ b/docs/src/modules/components/MaterialUIExampleCollection.js @@ -11,53 +11,53 @@ import CloudRoundedIcon from '@mui/icons-material/CloudRounded'; const examples = [ { name: 'Next.js App Router', - label: 'View JS example', - tsLabel: 'View TS example', + label: 'View JavaScript', + tsLabel: 'View TypeScript', 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/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', + label: 'View JavaScript', + tsLabel: 'View TypeScript', link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs-pages-router', tsLink: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs-pages-router-ts', src: '/static/images/examples/next.svg', }, + { + name: 'Vite.js', + label: 'View JavaScript', + tsLabel: 'View TypeScript', + 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: 'Remix', - label: 'View TS example', + label: 'View TypeScript', 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/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', + label: 'View JavaScript', + tsLabel: 'View TypeScript', 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: 'Tailwind CSS + Create React App', + label: 'View TypeScript', + link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-tailwind-ts', + src: '/static/images/examples/tailwindcss.svg', + }, { name: 'styled-components', - label: 'View JS example', - tsLabel: 'View TS example', + label: 'View JavaScript', + tsLabel: 'View TypeScript', link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-styled-components', tsLink: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-styled-components-ts', @@ -65,31 +65,31 @@ const examples = [ }, { name: 'Preact', - label: 'View JS example', + label: 'View JavaScript', 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', + label: 'View JavaScript', link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-via-cdn', src: <CloudRoundedIcon />, }, { name: 'Express.js (server-rendered)', - label: 'View JS example', + label: 'View JavaScript', 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', + label: 'View JavaScript', link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-gatsby', src: '/static/images/examples/gatsby.svg', }, { name: 'React-admin', - label: 'View TS example', + label: 'View TypeScript', link: 'https://github.com/marmelab/material-ui-react-admin', src: '/static/images/examples/reactadmin.svg', }, @@ -107,12 +107,7 @@ export default function MaterialUIExampleCollection() { display: 'flex', alignItems: 'center', gap: 2, - background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, - ...theme.applyDarkStyles({ - bgcolor: 'primaryDark.900', - background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, - borderColor: 'primaryDark.700', - }), + background: `${(theme.vars || theme).palette.gradients.radioSubtle}`, })} > <Avatar @@ -159,11 +154,11 @@ export default function MaterialUIExampleCollection() { variant="caption" sx={{ display: { xs: 'none', sm: 'block' }, - opacity: 0.2, - mr: 0.75, + opacity: 0.1, + mr: 1, }} > - • + / </Typography> <Link href={example.tsLink} diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx index 6db97b5221fb91..60ddb10417cd1f 100644 --- a/docs/src/modules/components/ThemeViewer.tsx +++ b/docs/src/modules/components/ThemeViewer.tsx @@ -205,7 +205,7 @@ export default function ThemeViewer({ sx={{ color: '#FFF', p: 1.5, - bgcolor: '#0F1924', // one-off code container color + bgcolor: 'hsl(210, 35%, 9%)', // one-off code container color borderRadius: 3, border: `1px solid ${blueDark[700]}`, }} diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index be14672647dbc1..2613792305ae93 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -116,6 +116,11 @@ export const authors = { avatar: 'https://avatars.githubusercontent.com/u/16889233', github: 'DiegoAndai', }, + DavidCnoops: { + name: 'David Cnoops', + avatar: 'https://avatars.githubusercontent.com/u/28001064', + github: 'DavidCnoops', + }, }; const classes = { @@ -180,6 +185,19 @@ const Root = styled('div')( margin: 'auto', marginBottom: 16, }, + '& figure': { + margin: 0, + padding: 0, + marginBottom: 16, + '& img, & video': { + marginBottom: 8, + }, + }, + '& figcaption': { + color: (theme.vars || theme).palette.text.tertiary, + fontSize: theme.typography.pxToRem(14), + textAlign: 'center', + }, '& strong': { color: (theme.vars || theme).palette.grey[900], }, @@ -270,16 +288,21 @@ export default function TopLayoutBlog(props) { const slug = router.pathname.replace(/(.*)\/(.*)/, '$2'); const { canonicalAsServer } = pathnameToLanguage(router.asPath); const card = - headers.card === 'true' - ? `https://mui.com/static/blog/${slug}/card.png` - : 'https://mui.com/static/logo.png'; + headers.manualCard === 'true' + ? `/static/blog/${slug}/card.png` + : `/edge-functions/og-image/?title=${headers.cardTitle || finalTitle}&authors=${headers.authors + .map((author) => { + const { github, name } = authors[author]; + return `${name} @${github}`; + }) + .join(',')}&product=Blog`; if (process.env.NODE_ENV !== 'production') { - if (headers.card === undefined) { + if (headers.manualCard === undefined) { throw new Error( [ - `MUI: the "card" markdown header for the blog post "${slug}" is missing.`, - `Set card: true or card: false header in docs/pages/blog/${slug}.md.`, + `MUI: the "manualCard" markdown header for the blog post "${slug}" is missing.`, + `Set manualCard: true or manualCard: false header in docs/pages/blog/${slug}.md.`, ].join('\n'), ); } @@ -291,7 +314,7 @@ export default function TopLayoutBlog(props) { <Head title={`${finalTitle} - MUI`} description={description} - largeCard={headers.card === 'true'} + largeCard disableAlternateLocale card={card} type="article" diff --git a/docs/src/modules/constants.js b/docs/src/modules/constants.js index 7e5a49edcd5a32..527946179861bd 100644 --- a/docs/src/modules/constants.js +++ b/docs/src/modules/constants.js @@ -17,8 +17,12 @@ const LANGUAGES_LABEL = [ }, ]; +// The ratio of ads display sending event to Google Analytics +const GA_ADS_DISPLAY_RATIO = 0.1; + module.exports = { CODE_VARIANTS, LANGUAGES_LABEL, CODE_STYLING, + GA_ADS_DISPLAY_RATIO, }; diff --git a/docs/translations/api-docs-joy/table/table.json b/docs/translations/api-docs-joy/table/table.json index bfd2e6eb18453d..60c828485730e3 100644 --- a/docs/translations/api-docs-joy/table/table.json +++ b/docs/translations/api-docs-joy/table/table.json @@ -19,10 +19,10 @@ "slotProps": { "description": "The props used for each slot inside." }, "slots": { "description": "The components used for each slot inside." }, "stickyFooter": { - "description": "If <code>true</code>, the footer always appear at the bottom of the overflow table.<br>⚠️ It doesn't work with IE11." + "description": "If <code>true</code>, the footer always appear at the bottom of the overflow table." }, "stickyHeader": { - "description": "If <code>true</code>, the header always appear at the top of the overflow table.<br>⚠️ It doesn't work with IE11." + "description": "If <code>true</code>, the header always appear at the top of the overflow table." }, "stripe": { "description": "The odd or even row of the table body will have subtle background color." diff --git a/docs/translations/api-docs/step-connector/step-connector.json b/docs/translations/api-docs/step-connector/step-connector.json index 87eacce62772ef..650f2fd5e5c8dd 100644 --- a/docs/translations/api-docs/step-connector/step-connector.json +++ b/docs/translations/api-docs/step-connector/step-connector.json @@ -35,13 +35,15 @@ "line": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the line element" }, "lineHorizontal": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "<code>orientation=\"horizontal\"</code>" + "nodeName": "the line element", + "conditions": "<code>orientation=\"horizontal\"</code>", + "deprecationInfo": "Combine the <a href=\"/material-ui/api/step-connector/#step-connector-classes-horizontal\">.MuiStepConnector-horizontal</a> and <a href=\"/material-ui/api/step-connector/#step-connector-classes-line\">.MuiStepConnector-line</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>" }, "lineVertical": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "<code>orientation=\"vertical\"</code>" + "nodeName": "the line element", + "conditions": "<code>orientation=\"vertical\"</code>", + "deprecationInfo": "Combine the <a href=\"/material-ui/api/step-connector/#step-connector-classes-vertical\">.MuiStepConnector-vertical</a> and <a href=\"/material-ui/api/step-connector/#step-connector-classes-line\">.MuiStepConnector-line</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>" }, "root": { "description": "Styles applied to the root element." }, "vertical": { diff --git a/docs/translations/api-docs/step-label/step-label.json b/docs/translations/api-docs/step-label/step-label.json index 7a68d574ce6f9d..7c281a6e0eec06 100644 --- a/docs/translations/api-docs/step-label/step-label.json +++ b/docs/translations/api-docs/step-label/step-label.json @@ -67,5 +67,8 @@ "conditions": "<code>orientation=\"vertical\"</code>" } }, - "slotDescriptions": { "label": "The component that renders the label." } + "slotDescriptions": { + "label": "The component that renders the label.", + "stepIcon": "The component to render in place of the <a href=\"/material-ui/api/step-icon/\"><code>StepIcon</code></a>." + } } diff --git a/docs/translations/api-docs/tab-panel/tab-panel.json b/docs/translations/api-docs/tab-panel/tab-panel.json index 97fdf34bb33934..9f39bbeca855b1 100644 --- a/docs/translations/api-docs/tab-panel/tab-panel.json +++ b/docs/translations/api-docs/tab-panel/tab-panel.json @@ -3,6 +3,7 @@ "propDescriptions": { "children": { "description": "The content of the component." }, "classes": { "description": "Override or extend the styles applied to the component." }, + "keepMounted": { "description": "Always keep the children in the DOM." }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, @@ -10,5 +11,12 @@ "description": "The <code>value</code> of the corresponding <code>Tab</code>. Must use the index of the <code>Tab</code> when no <code>value</code> was passed to <code>Tab</code>." } }, - "classDescriptions": { "root": { "description": "Styles applied to the root element." } } + "classDescriptions": { + "hidden": { + "description": "State class applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root <code>div</code> element", + "conditions": "<code>hidden={true}</code>" + }, + "root": { "description": "Styles applied to the root element." } + } } diff --git a/docs/translations/api-docs/table/table.json b/docs/translations/api-docs/table/table.json index a121d095ef3c81..c84bbf8d0f86e7 100644 --- a/docs/translations/api-docs/table/table.json +++ b/docs/translations/api-docs/table/table.json @@ -10,9 +10,7 @@ }, "padding": { "description": "Allows TableCells to inherit padding of the Table." }, "size": { "description": "Allows TableCells to inherit size of the Table." }, - "stickyHeader": { - "description": "Set the header sticky.<br>⚠️ It doesn't work with IE11." - }, + "stickyHeader": { "description": "Set the header sticky." }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." } diff --git a/docs/translations/api-docs/toggle-button-group/toggle-button-group.json b/docs/translations/api-docs/toggle-button-group/toggle-button-group.json index 21eccbcd92b660..a507c96bf9f224 100644 --- a/docs/translations/api-docs/toggle-button-group/toggle-button-group.json +++ b/docs/translations/api-docs/toggle-button-group/toggle-button-group.json @@ -50,12 +50,19 @@ "groupedHorizontal": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "<code>orientation=\"horizontal\"</code>" + "conditions": "<code>orientation=\"horizontal\"</code>", + "deprecationInfo": "Combine the <a href=\"/material-ui/api/toggle-button-group/#toggle-button-group-classes-horizontal\">.MuiToggleButtonGroup-horizontal</a> and <a href=\"/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped\">.MuiToggleButtonGroup-grouped</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>" }, "groupedVertical": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the children", - "conditions": "<code>orientation=\"vertical\"</code>" + "conditions": "<code>orientation=\"vertical\"</code>", + "deprecationInfo": "Combine the <a href=\"/material-ui/api/toggle-button-group/#toggle-button-group-classes-vertical\">.MuiToggleButtonGroup-vertical</a> and <a href=\"/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped\">.MuiToggleButtonGroup-grouped</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>" + }, + "horizontal": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "<code>orientation=\"horizontal\"</code>" }, "lastButton": { "description": "Styles applied to {{nodeName}}.", diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 98890158834ba8..bafac961c28e71 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -281,6 +281,9 @@ "/material-ui/discover-more/backers": "Sponsors and Backers", "/material-ui/discover-more/vision": "Vision", "/material-ui/discover-more/changelog": "Changelog", + "/material-ui/design-resources": "Design resources", + "/material-ui/design-resources/material-ui-for-figma": "Material UI for Figma", + "/material-ui/design-resources/connect": "Connect plugin", "https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=sidenav": "Template store", "/joy-ui/getting-started-group": "Getting started", "/joy-ui/getting-started": "Overview", 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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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-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/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/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): + +<!-- #default-branch-switch --> + +```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: + +<!-- #default-branch-switch --> + +[![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, + <React.StrictMode> + <RemixBrowser /> + </React.StrictMode>, + ); +}); 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( + <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />, + { + 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( + <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />, + { + 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 ( + <html lang="en"> + <head> + <meta charSet="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <link rel="icon" type="image/svg+xml" href="/vite.svg" /> + <Meta /> + <Links /> + </head> + <body + className={css` + padding: 0; + margin: 0; + `} + > + {children} + <ScrollRestoration /> + <Scripts /> + </body> + </html> + ); +} + +export default function App() { + return <Outlet />; +} 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 ( + <main + className={css({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + height: '100lvh', + color: 'hsl(var(--palette-foreground))', + backgroundColor: 'hsl(var(--palette-background))', + fontFamily: + "system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", + })} + > + <h1 + className={`my-custom-class ${css(({ theme }) => ({ + 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 + <span + className={css(({ theme }) => ({ + position: 'absolute', + inset: '0', + background: 'white', + mixBlendMode: 'color-burn', + overflow: 'hidden', + pointerEvents: 'none', + ...theme.applyStyles('dark', { + mixBlendMode: 'darken', + filter: 'brightness(2)', + }), + }))} + > + <Bubble + className={css` + ${generateBubbleVars()} + `} + /> + <Bubble + className={css` + ${generateBubbleVars()} + `} + /> + <Bubble + className={css` + ${generateBubbleVars()} + `} + /> + <Bubble + className={css` + ${generateBubbleVars()} + `} + /> + <Bubble + className={css` + ${generateBubbleVars()} + `} + /> + <Bubble + className={css` + ${generateBubbleVars()} + `} + /> + <Bubble + className={css` + ${generateBubbleVars()} + `} + /> + <Bubble + className={css` + ${generateBubbleVars()} + `} + /> + <Bubble + className={css` + ${generateBubbleVars()} + `} + /> + <Bubble + className={css` + ${generateBubbleVars()} + `} + /> + </span> + </h1> + <div + className={css({ + fontFamily: 'system-ui, sans-serif', + letterSpacing: '2px', + opacity: 0.6, + lineHeight: 2, + textAlign: 'center', + textWrap: 'balance', + })} + > + CSS-in-JS library with static extraction + </div> + <div + className={css({ + display: 'flex', + flexWrap: 'wrap', + gap: '1rem', + marginTop: '2rem', + })} + > + <Link + href="https://github.com/mui/material-ui/blob/master/packages/pigment-css-react/README.md" + target="_blank" + rel="noopener noreferrer" + > + Documentation + </Link> + <Link + outlined + href="https://github.com/orgs/mui/projects/27/views/1" + target="_blank" + rel="noopener noreferrer" + > + Roadmap + </Link> + </div> + </main> + ); +} 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/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/netlify/edge-functions/og-image.tsx b/netlify/edge-functions/og-image.tsx new file mode 100644 index 00000000000000..43c6eab58a42e7 --- /dev/null +++ b/netlify/edge-functions/og-image.tsx @@ -0,0 +1,268 @@ +import React from 'https://esm.sh/react@18.2.0'; +// eslint-disable-next-line import/extensions +import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'; + +const MAX_AUTHORS = 5; +export default async function handler(req: Request) { + const params = new URL(req.url).searchParams; + const title = params.get('title'); + const authors = params.get('authors'); + const product = params.get('product'); + const description = params.get('description'); + + const parsedAuthors = + authors && + authors + .split(',') + .map((author) => { + const [name, github] = author.split('@'); + return { name: name.trim(), github: github.trim() }; + }) + .filter(({ name, github }) => name && github); + + const withAuthors = parsedAuthors && parsedAuthors.length > 0; + let starCount = 0; + + return new ImageResponse( + ( + <div + style={{ + width: '100%', + height: '100%', + background: 'linear-gradient(180deg, #FFFFFF 0%, #F0F7FF 75.52%)', + overflow: 'hidden', + position: 'relative', + display: 'flex', + }} + > + <div + style={{ + marginTop: 100, + marginLeft: 100, + marginRight: 100, + marginBottom: 100, + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + }} + > + <div + style={{ + height: 40, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }} + > + <svg width="45" height="40" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path + d="M15.618 8.779 1.566.551a.625.625 0 0 0-.941.54v20.972c0 .659.346 1.27.91 1.608l4.393 2.636c.417.25.947-.05.947-.536V11.683a.25.25 0 0 1 .375-.217l8.376 4.826a1.25 1.25 0 0 0 1.248 0l8.376-4.829a.25.25 0 0 1 .375.217v7.62c0 .435-.226.838-.596 1.066l-7.856 4.82a.625.625 0 0 0-.298.533v7.046c0 .223.119.429.312.54l10.925 6.326c.394.228.88.224 1.27-.01l14.386-8.632a1.25 1.25 0 0 0 .607-1.072V16.104a.625.625 0 0 0-.947-.536l-4.696 2.818a1.25 1.25 0 0 0-.607 1.072v7.063c0 .22-.115.423-.303.536l-8.484 5.09a1.25 1.25 0 0 1-1.202.046L22.5 29.375l8.768-5.26a1.25 1.25 0 0 0 .607-1.073V1.09a.625.625 0 0 0-.94-.54L16.881 8.78a1.25 1.25 0 0 1-1.264 0Z" + fill="#0073E6" + /> + <path + d="M44.375 1.104v6.938c0 .44-.23.846-.607 1.072l-4.696 2.818a.625.625 0 0 1-.947-.536V4.458c0-.44.23-.846.607-1.072L43.428.568c.417-.25.947.05.947.536Z" + fill="#0073E6" + /> + </svg> + <div + style={{ + height: 40, + width: 2, + backgroundColor: '#DAE2ED', + margin: '0 24px', + }} + /> + <p + style={{ + fontFamily: 'General Sans', + fontSize: '24px', + fontWeight: 600, + lineHeight: '40px', + color: '#007FFF', + }} + > + {product} + </p> + </div> + <div + style={{ + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + textAlign: 'left', + }} + > + {title && + title.split('\\n').map((line) => ( + <p + style={{ + margin: 0, + flexWrap: 'wrap', + fontFamily: 'General Sans', + fontStyle: 'normal', + fontWeight: 600, + fontSize: '48px', + lineHeight: '57px', + color: '#0B0D0E', + }} + > + {line.split('*').flatMap((text, index) => { + if (index > 0) { + starCount += 1; + } + + const isBlue = starCount % 2 === 1; + return text.split(' ').map((word) => ( + <span + style={{ + color: isBlue ? '#007FFF' : '#0B0D0E', + marginRight: word.length > 0 ? 15 : 0, + }} + > + {word} + </span> + )); + })} + </p> + ))} + {description && ( + <p + style={{ + fontFamily: 'IBM Plex Sans', + fontSize: '28px', + fontWeight: 600, + color: '#303740', + lineHeight: '50px', + marginTop: 12, + marginBottom: 0, + marginLeft: 0, + marginRight: 0, + width: '100%', + }} + > + {description} + </p> + )} + </div> + <div + style={{ + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + maxHeight: 180, // Limit to 2 lines of authors + overflow: 'hidden', + paddingTop: -20, + }} + > + {withAuthors && + parsedAuthors.slice(0, MAX_AUTHORS).map(({ name, github }) => { + return ( + <div + style={{ + maxWidth: 1080, + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + marginBottom: 20, + marginRight: 40, + }} + > + <div + style={{ + display: 'flex', + width: 70, + height: 70, + borderRadius: '50%', + background: + 'linear-gradient(135deg, #007FFF 0%, #FFFFFF 50%, #007FFF 100%)', + }} + > + <img + src={`https://github.com/${github}.png`} + width={64} + height={64} + style={{ borderRadius: '50%', margin: 4 }} + alt="" + /> + </div> + <div + style={{ + marginLeft: 20, + display: 'flex', + flexDirection: 'column', + }} + > + <span + style={{ + fontFamily: 'IBM Plex Sans', + fontSize: '26px', + fontWeight: '600', + lineHeight: '40px', + textAlign: 'left', + color: '#101418', + }} + > + {name} + </span> + <span + style={{ + fontFamily: 'IBM Plex Sans', + fontSize: '20px', + fontWeight: '500', + lineHeight: '30px', + textAlign: 'left', + color: '#007FFF', + }} + > + @{github} + </span> + </div> + </div> + ); + })} + </div> + </div> + </div> + ), + { + width: 1280, + height: 640, + // debug: true, + fonts: [ + { + name: 'IBM Plex Sans', + data: await fetch('https://fonts.cdnfonts.com/s/15449/IBMPlexSans-SemiBold.woff').then( + (a) => a.arrayBuffer(), + ), + weight: 600, + style: 'normal', + }, + { + name: 'General Sans', + data: await fetch('https://fonts.cdnfonts.com/s/85793/GeneralSans-Semibold.woff').then( + (a) => a.arrayBuffer(), + ), + weight: 600, + style: 'normal', + }, + { + name: 'General Sans', + data: await fetch('https://fonts.cdnfonts.com/s/85793/GeneralSans-Bold.woff').then((a) => + a.arrayBuffer(), + ), + weight: 700, + style: 'normal', + }, + ], + // Manage the caching + headers: { + // Cache control is already done by the package (https://github.com/ascorbic/og-edge/blob/d533ef878801d7f808eb004f254e782ec6ba1e3c/mod.ts#L233-L240) + 'Netlify-Vary': 'query', + }, + }, + ); +} +export const config = { + cache: 'manual', + path: '/edge-functions/og-image', +}; diff --git a/package.json b/package.json index 0a4be5b7b77218..64b729f294cc42 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mui/monorepo", - "version": "6.0.0-alpha.0", + "version": "6.0.0-alpha.2", "private": true, "scripts": { "preinstall": "npx only-allow pnpm", @@ -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", @@ -91,19 +91,19 @@ }, "devDependencies": { "@argos-ci/core": "^1.5.5", - "@babel/cli": "^7.23.9", - "@babel/core": "^7.23.9", + "@babel/cli": "^7.24.1", + "@babel/core": "^7.24.4", "@babel/node": "^7.23.9", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-object-rest-spread": "^7.20.7", "@babel/plugin-proposal-private-methods": "^7.18.6", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "@babel/plugin-transform-object-assign": "^7.23.3", - "@babel/plugin-transform-react-constant-elements": "^7.23.3", - "@babel/plugin-transform-runtime": "^7.23.9", - "@babel/preset-env": "^7.23.9", - "@babel/preset-react": "^7.23.3", - "@babel/preset-typescript": "^7.23.3", + "@babel/plugin-transform-object-assign": "^7.24.1", + "@babel/plugin-transform-react-constant-elements": "^7.24.1", + "@babel/plugin-transform-runtime": "^7.24.3", + "@babel/preset-env": "^7.24.4", + "@babel/preset-react": "^7.24.1", + "@babel/preset-typescript": "^7.24.1", "@babel/register": "^7.23.7", "@mnajdova/enzyme-adapter-react-18": "^0.2.0", "@mui/internal-docs-utils": "workspace:^", @@ -114,20 +114,20 @@ "@mui/joy": "workspace:*", "@mui/material": "workspace:^", "@mui/utils": "workspace:^", + "@next/eslint-plugin-next": "^14.2.1", + "@octokit/rest": "^20.1.0", "@pigment-css/react": "workspace:^", - "@next/eslint-plugin-next": "^14.1.4", - "@octokit/rest": "^20.0.2", - "@playwright/test": "1.42.1", + "@playwright/test": "1.43.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.31", "@types/prettier": "^2.7.3", "@types/react": "^18.2.55", "@types/yargs": "^17.0.32", - "@typescript-eslint/eslint-plugin": "^6.19.1", - "@typescript-eslint/parser": "^6.19.1", + "@typescript-eslint/eslint-plugin": "^6.21.0", + "@typescript-eslint/parser": "^6.21.0", "babel-loader": "^9.1.3", "babel-plugin-istanbul": "^6.1.1", "babel-plugin-macros": "^3.1.0", @@ -153,7 +153,7 @@ "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-material-ui": "workspace:^", - "eslint-plugin-mocha": "^10.4.1", + "eslint-plugin-mocha": "^10.4.2", "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "fast-glob": "^3.3.2", @@ -169,8 +169,8 @@ "karma-webpack": "^5.0.0", "lerna": "^8.1.2", "lodash": "^4.17.21", - "markdownlint-cli2": "^0.12.1", - "mocha": "^10.3.0", + "markdownlint-cli2": "^0.13.0", + "mocha": "^10.4.0", "nx": "^17.3.2", "nyc": "^15.1.0", "piscina": "^4.4.0", @@ -186,33 +186,33 @@ "stylelint-processor-styled-components": "^1.10.0", "terser-webpack-plugin": "^5.3.10", "tsup": "^8.0.2", - "tsx": "^4.7.1", - "typescript": "^5.4.3", + "tsx": "^4.7.2", + "typescript": "^5.4.5", "webpack": "^5.90.3", - "webpack-bundle-analyzer": "^4.10.1", + "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "^5.1.4", "yargs": "^17.7.2" }, - "packageManager": "pnpm@8.15.5", + "packageManager": "pnpm@8.15.7", "resolutions": { - "@babel/core": "^7.23.9", - "@babel/code-frame": "^7.23.5", + "@babel/core": "^7.24.4", + "@babel/code-frame": "^7.24.2", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-object-rest-spread": "^7.20.7", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", "@babel/plugin-proposal-numeric-separator": "^7.18.6", "@babel/plugin-proposal-optional-chaining": "^7.21.0", "@babel/plugin-transform-destructuring": "npm:@minh.nguyen/plugin-transform-destructuring@^7.5.2", - "@babel/plugin-transform-runtime": "^7.23.9", - "@babel/preset-env": "^7.23.9", - "@babel/preset-react": "^7.23.3", - "@babel/preset-typescript": "^7.23.3", - "@babel/runtime": "^7.23.9", - "@babel/types": "^7.23.9", - "@definitelytyped/header-parser": "^0.2.8", + "@babel/plugin-transform-runtime": "^7.24.3", + "@babel/preset-env": "^7.24.4", + "@babel/preset-react": "^7.24.1", + "@babel/preset-typescript": "^7.24.1", + "@babel/runtime": "^7.24.4", + "@babel/types": "^7.24.0", + "@definitelytyped/header-parser": "^0.2.9", "@definitelytyped/typescript-versions": "^0.1.1", - "@definitelytyped/utils": "^0.1.5", - "@types/node": "^18.19.25", + "@definitelytyped/utils": "^0.1.6", + "@types/node": "^18.19.31", "@types/react": "18.2.55", "@types/react-dom": "18.2.19", "cross-fetch": "^4.0.0" @@ -227,5 +227,10 @@ ], "sourceMap": false, "instrument": false + }, + "pnpm": { + "patchedDependencies": { + "@wyw-in-js/transform@0.5.0": "patches/@wyw-in-js__transform@0.5.0.patch" + } } } diff --git a/packages-internal/docs-utils/package.json b/packages-internal/docs-utils/package.json index c0ac779a5cf3f5..ad899d5b59ee0d 100644 --- a/packages-internal/docs-utils/package.json +++ b/packages-internal/docs-utils/package.json @@ -1,6 +1,6 @@ { "name": "@mui/internal-docs-utils", - "version": "1.0.4", + "version": "1.0.5", "author": "MUI Team", "description": "Utilities for MUI docs. This is an internal package not meant for general use.", "main": "./build/index.js", @@ -22,7 +22,7 @@ }, "dependencies": { "rimraf": "^5.0.5", - "typescript": "^5.4.3" + "typescript": "^5.4.5" }, "publishConfig": { "access": "public" diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json index 216db827dddbab..76070d91afba5d 100644 --- a/packages-internal/scripts/package.json +++ b/packages-internal/scripts/package.json @@ -1,6 +1,6 @@ { "name": "@mui/internal-scripts", - "version": "1.0.4", + "version": "1.0.5", "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", @@ -25,24 +25,24 @@ "typescript": "tsc --build tsconfig.typecheck.json" }, "dependencies": { - "@babel/core": "^7.23.9", + "@babel/core": "^7.24.4", "@babel/plugin-syntax-class-properties": "^7.12.13", - "@babel/plugin-syntax-jsx": "^7.23.3", - "@babel/plugin-syntax-typescript": "^7.23.3", - "@babel/types": "^7.23.9", + "@babel/plugin-syntax-jsx": "^7.24.1", + "@babel/plugin-syntax-typescript": "^7.24.1", + "@babel/types": "^7.24.0", "@mui/internal-docs-utils": "workspace:^", "doctrine": "^3.0.0", "lodash": "^4.17.21", - "typescript": "^5.4.3", + "typescript": "^5.4.5", "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.31", "@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 37f272ad29bed4..1897564ff22376 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.31", "@types/sinon": "^10.0.20", "chai": "^4.4.1", "sinon": "^15.2.0", - "typescript": "^5.4.3" + "typescript": "^5.4.5" } } diff --git a/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts index f02e5e6d9de344..2f48f39bc9d73f 100644 --- a/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts +++ b/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts @@ -482,7 +482,7 @@ const extractInfoFromType = async ( * @param filename The filename where its defined (to infer the package) * @returns an array of import command */ -const getHookImports = (name: string, filename: string) => { +const defaultGetHookImports = (name: string, filename: string) => { const githubPath = toGitHubPath(filename); const rootImportPath = githubPath.replace( /\/packages\/mui(?:-(.+?))?\/src\/.*/, @@ -552,6 +552,8 @@ export default async function generateHookApi( if (annotatedDescriptionMatch !== null) { reactApi.description = reactApi.description.slice(0, annotatedDescriptionMatch.index).trim(); } + + const { getHookImports = defaultGetHookImports } = projectSettings; reactApi.filename = filename; reactApi.name = name; reactApi.imports = getHookImports(name, filename); diff --git a/packages/api-docs-builder/ProjectSettings.ts b/packages/api-docs-builder/ProjectSettings.ts index 2ba937f0a4e9b2..3ae895666b561e 100644 --- a/packages/api-docs-builder/ProjectSettings.ts +++ b/packages/api-docs-builder/ProjectSettings.ts @@ -74,9 +74,13 @@ export interface ProjectSettings { */ importTranslationPagesDirectory?: string; /** - * Returns an array of import commands used for the API page header. + * Returns an array of import commands used for the component API page header. */ getComponentImports?: (name: string, filename: string) => string[]; + /** + * Returns an array of import commands used for the hook API page header. + */ + getHookImports?: (name: string, filename: string) => string[]; /** * Settings to configure props definition tests. */ diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json index 88c9992758c845..1a4bd930e38a08 100644 --- a/packages/api-docs-builder/package.json +++ b/packages/api-docs-builder/package.json @@ -8,9 +8,9 @@ "typescript": "tsc -p tsconfig.json" }, "dependencies": { - "@babel/core": "^7.23.9", - "@babel/preset-typescript": "^7.23.3", - "@babel/traverse": "^7.23.9", + "@babel/core": "^7.24.4", + "@babel/preset-typescript": "^7.24.1", + "@babel/traverse": "^7.24.1", "@mui/internal-docs-utils": "workspace:^", "@mui/internal-markdown": "workspace:^", "ast-types": "^0.14.2", @@ -22,17 +22,17 @@ "react-docgen": "^5.4.3", "recast": "^0.23.6", "remark": "^13.0.0", - "typescript": "^5.4.3", + "typescript": "^5.4.5", "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.31", "@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 5901037dd8812a..94aea96c2d3ef3 100644 --- a/packages/eslint-plugin-material-ui/package.json +++ b/packages/eslint-plugin-material-ui/package.json @@ -8,8 +8,8 @@ "emoji-regex": "^10.3.0" }, "devDependencies": { - "@types/eslint": "^8.56.6", - "@typescript-eslint/parser": "^6.19.1", + "@types/eslint": "^8.56.9", + "@typescript-eslint/parser": "^6.21.0", "eslint": "^8.57.0" }, "peerDependencies": { diff --git a/packages/feedback/package.json b/packages/feedback/package.json index 3b4bb3be53e22c..c71ed699bab6bb 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.1599.0" } } diff --git a/packages/markdown/loader.js b/packages/markdown/loader.js index ed418dc2bfc0b8..2c70b31176dabc 100644 --- a/packages/markdown/loader.js +++ b/packages/markdown/loader.js @@ -126,6 +126,7 @@ module.exports = async function demoLoader() { const components = {}; const demoModuleIDs = new Set(); const componentModuleIDs = new Set(); + const nonEditableDemos = new Set(); const demoNames = Array.from( new Set( docs.en.rendered @@ -133,6 +134,9 @@ module.exports = async function demoLoader() { return typeof markdownOrComponentConfig !== 'string' && markdownOrComponentConfig.demo; }) .map((demoConfig) => { + if (demoConfig.hideToolbar) { + nonEditableDemos.add(demoConfig.demo); + } return demoConfig.demo; }), ), @@ -164,9 +168,12 @@ module.exports = async function demoLoader() { raw: await fs.readFile(moduleFilepath, { encoding: 'utf8' }), }; demoModuleIDs.add(moduleID); - extractImports(demos[demoName].raw).forEach((importModuleID) => - importedModuleIDs.add(importModuleID), - ); + // Skip non-editable demos + if (!nonEditableDemos.has(demoName)) { + extractImports(demos[demoName].raw).forEach((importModuleID) => + importedModuleIDs.add(importModuleID), + ); + } if (multipleDemoVersionsUsed) { // Add Tailwind demo data diff --git a/packages/markdown/package.json b/packages/markdown/package.json index 5a7b0373e8311c..9d6cef39b4b224 100644 --- a/packages/markdown/package.json +++ b/packages/markdown/package.json @@ -1,6 +1,6 @@ { "name": "@mui/internal-markdown", - "version": "1.0.1", + "version": "1.0.2", "author": "MUI Team", "description": "MUI markdown parser. This is an internal package not meant for general use.", "main": "./index.js", @@ -20,13 +20,13 @@ "release:publish:dry-run": "pnpm publish --tag latest --registry=\"http://localhost:4873/\"" }, "dependencies": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.24.4", "lodash": "^4.17.21", "marked": "^5.1.2", "prismjs": "^1.29.0" }, "devDependencies": { - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "chai": "^4.4.1" }, "publishConfig": { diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js index a9848f583dce47..00a20879f5f958 100644 --- a/packages/markdown/parseMarkdown.js +++ b/packages/markdown/parseMarkdown.js @@ -364,11 +364,7 @@ function createRender(context) { } return [ - `<h${level} id="${hash}">`, - headingHtml, - `<a aria-labelledby="${hash}" class="anchor-link" href="#${hash}" tabindex="-1">`, - '<svg><use xlink:href="#anchor-link-icon" /></svg>', - '</a>', + `<h${level} id="${hash}"><a href="#${hash}" class="title-link-to-anchor">${headingHtml}<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a>`, `<button title="Post a comment" class="comment-link" data-feedback-hash="${hash}">`, '<svg><use xlink:href="#comment-link-icon" /></svg>', `</button>`, diff --git a/packages/markdown/parseMarkdown.test.js b/packages/markdown/parseMarkdown.test.js index 20cf39596a17ab..63ce3631d831ee 100644 --- a/packages/markdown/parseMarkdown.test.js +++ b/packages/markdown/parseMarkdown.test.js @@ -295,9 +295,9 @@ authors: ).to.equal( [ `<h1>Accordion</h1>`, - `<h2 id="basic-features">Basic features 🧪<a aria-labelledby="basic-features" class="anchor-link" href="#basic-features" tabindex="-1"><svg><use xlink:href="#anchor-link-icon" /></svg></a><button title="Post a comment" class="comment-link" data-feedback-hash="basic-features"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>`, - `<h2 id="using-slots-and-slotprops">Using <code>slots</code> and <code>slotProps</code><a aria-labelledby="using-slots-and-slotprops" class="anchor-link" href="#using-slots-and-slotprops" tabindex="-1"><svg><use xlink:href="#anchor-link-icon" /></svg></a><button title="Post a comment" class="comment-link" data-feedback-hash="using-slots-and-slotprops"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>`, - `<h3 id="specific-example">Specific example<a aria-labelledby="specific-example" class="anchor-link" href="#specific-example" tabindex="-1"><svg><use xlink:href="#anchor-link-icon" /></svg></a><button title="Post a comment" class="comment-link" data-feedback-hash="specific-example"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3>`, + `<h2 id="basic-features"><a href="#basic-features" class="title-link-to-anchor">Basic features 🧪<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="basic-features"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>`, + `<h2 id="using-slots-and-slotprops"><a href="#using-slots-and-slotprops" class="title-link-to-anchor">Using <code>slots</code> and <code>slotProps</code><div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="using-slots-and-slotprops"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>`, + `<h3 id="specific-example"><a href="#specific-example" class="title-link-to-anchor">Specific example<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="specific-example"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3>`, ].join(''), ); diff --git a/packages/mui-babel-macros/package.json b/packages/mui-babel-macros/package.json index cb422a56c3ec48..2cc41924b72c25 100644 --- a/packages/mui-babel-macros/package.json +++ b/packages/mui-babel-macros/package.json @@ -1,6 +1,6 @@ { "name": "@mui/internal-babel-macros", - "version": "1.0.1", + "version": "1.0.2", "author": "MUI Team", "description": "MUI Babel macros. This is an internal package not meant for general use.", "main": "./MuiError.macro.js", @@ -23,16 +23,16 @@ "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-babel-macros/**/*.test.{js,ts,tsx}'" }, "dependencies": { - "@babel/helper-module-imports": "^7.22.15", - "@babel/runtime": "^7.23.9", + "@babel/helper-module-imports": "^7.24.3", + "@babel/runtime": "^7.24.4", "babel-plugin-macros": "^3.1.0" }, "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.31", "babel-plugin-tester": "^11.0.4", "chai": "^4.4.1" }, diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 31dcb55f0f4088..08c4b94bcca7f6 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.41", + "version": "5.0.0-beta.42", "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.", @@ -41,7 +41,7 @@ "typescript:module-augmentation": "node scripts/testModuleAugmentation.js" }, "dependencies": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.24.4", "@floating-ui/react-dom": "^2.0.8", "@mui/types": "workspace:^", "@mui/utils": "workspace:^", @@ -53,9 +53,9 @@ "@mui-internal/test-utils": "workspace:^", "@mui/internal-babel-macros": "workspace:^", "@mui/types": "workspace:^", - "@testing-library/react": "^14.2.2", + "@testing-library/react": "^14.3.1", "@testing-library/user-event": "^14.5.2", - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/prop-types": "^15.7.12", "@types/react": "18.2.55", "@types/react-dom": "18.2.19", diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 6f2d0529c45f45..ac15226a678a07 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -948,20 +948,65 @@ npx @mui/codemod@next deprecations/pagination-item-classes <path> npx @mui/codemod@next deprecations/slider-props <path> ``` +#### `toggle-button-group-classes` + +JS transforms: + +```diff + import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; + + MuiToggleButtonGroup: { + styleOverrides: { + root: { +- [`& .${toggleButtonGroupClasses.groupedHorizontal}`]: { ++ [`&.${toggleButtonGroupClasses.horizontal} > .${toggleButtonGroupClasses.grouped}`]: { + color: 'red', + }, +- [`& .${toggleButtonGroupClasses.groupedVertical}`]: { ++ [`&.${toggleButtonGroupClasses.vertical} > .${toggleButtonGroupClasses.grouped}`]: { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedHorizontal ++.MuiToggleButtonGroup-root.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped +-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedVertical ++.MuiToggleButtonGroup-root.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped + /> +``` + +```bash +npx @mui/codemod@latest deprecations/toggle-button-group-classes <path> +``` + #### `step-label-props` ```diff <StepLabel - componentsProps={{ label: labelProps }} + slotProps={{ label: labelProps }} +- StepIconComponent={StepIconComponent} ++ slots={{ stepIcon: StepIconComponent }} +- StepIconProps={StepIconProps} ++ slotProps={{ stepIcon: StepIconProps }} /> ``` ```diff MuiStepLabel: { defaultProps: { -- componentsProps={{ label: labelProps }} -+ slotProps={{ label: labelProps }} +- componentsProps:{ label: labelProps } ++ slotProps:{ label: labelProps } +- StepIconComponent:StepIconComponent ++ slots:{ stepIcon: StepIconComponent } +- StepIconProps:StepIconProps ++ slotProps:{ stepIcon: StepIconProps } }, }, ``` @@ -971,6 +1016,42 @@ npx @mui/codemod@latest deprecations/step-label-props <path> ``` +#### `step-connector-classes` + +JS transforms: + +```diff + import { stepConnectorClasses } from '@mui/material/StepConnector'; + + MuiStepConnector: { + styleOverrides: { + root: { +- [`& .${stepConnectorClasses.lineHorizontal}`]: { ++ [`&.${stepConnectorClasses.horizontal} > .${stepConnectorClasses.line}`]: { + color: 'red', + }, +- [`& .${stepConnectorClasses.lineVertical}`]: { ++ [`&.${stepConnectorClasses.vertical} > .${stepConnectorClasses.line}`]: { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +- .MuiStepConnector-lineHorizontal ++.MuiStepConnector-horizontal > .MuiStepConnector-line +- .MuiStepConnector-lineVertical ++.MuiStepConnector-vertical > .MuiStepConnector-line +``` + +```bash +npx @mui/codemod@next deprecations/step-connector-classes <path> +``` + ### v6.0.0 ### v5.0.0 diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json index 4e6565e2cbd415..da49eb953ddce7 100644 --- a/packages/mui-codemod/package.json +++ b/packages/mui-codemod/package.json @@ -1,6 +1,6 @@ { "name": "@mui/codemod", - "version": "6.0.0-alpha.0", + "version": "6.0.0-alpha.1", "bin": "./codemod.js", "private": false, "author": "MUI Team", @@ -30,18 +30,18 @@ "url": "https://opencollective.com/mui-org" }, "dependencies": { - "@babel/core": "^7.23.9", - "@babel/runtime": "^7.23.9", - "@babel/traverse": "^7.23.9", - "jscodeshift": "^0.13.1", + "@babel/core": "^7.24.4", + "@babel/runtime": "^7.24.4", + "@babel/traverse": "^7.24.1", + "jscodeshift": "^0.15.2", "jscodeshift-add-imports": "^1.0.10", "postcss": "^8.4.38", "postcss-cli": "^8.3.1", "yargs": "^17.7.2" }, "devDependencies": { - "@types/chai": "^4.3.12", - "@types/jscodeshift": "0.11.5", + "@types/chai": "^4.3.14", + "@types/jscodeshift": "0.11.11", "chai": "^4.4.1" }, "sideEffects": false, diff --git a/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.js b/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.js index dddc01c2288104..386de541096490 100644 --- a/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.js +++ b/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.js @@ -1,6 +1,5 @@ -import findComponentJSX from '../../util/findComponentJSX'; -import assignObject from '../../util/assignObject'; -import appendAttribute from '../../util/appendAttribute'; +import movePropIntoSlots from '../utils/movePropIntoSlots'; +import movePropIntoSlotProps from '../utils/movePropIntoSlotProps'; /** * @param {import('jscodeshift').FileInfo} file @@ -11,84 +10,18 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - findComponentJSX(j, { root, componentName: 'Accordion' }, (elementPath) => { - let 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), - ]), - }); - } - } - - index = elementPath.node.openingElement.attributes.findIndex( - (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'TransitionProps', - ); - 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 === 'slotProps') { - hasNode = true; - assignObject(j, { - target: attr, - key: 'transition', - expression: removed[0].value.expression, - }); - } - }); - if (!hasNode) { - appendAttribute(j, { - target: elementPath.node, - attributeName: 'slotProps', - 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 === 'MuiAccordion') { - path.replace( - j.property( - 'init', - j.identifier('slots'), - j.objectExpression([j.objectProperty(j.identifier('transition'), path.node.value)]), - ), - ); - } + movePropIntoSlots(j, { + root, + componentName: 'Accordion', + propName: 'TransitionComponent', + slotName: 'transition', }); - root.find(j.ObjectProperty, { key: { name: 'TransitionProps' } }).forEach((path) => { - if (path.parent?.parent?.parent?.parent?.node.key?.name === 'MuiAccordion') { - path.replace( - j.property( - 'init', - j.identifier('slotProps'), - j.objectExpression([j.objectProperty(j.identifier('transition'), path.node.value)]), - ), - ); - } + movePropIntoSlotProps(j, { + root, + componentName: 'Accordion', + propName: 'TransitionProps', + slotName: 'transition', }); return root.toSource(printOptions); diff --git a/packages/mui-codemod/src/deprecations/accordion-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/actual.js index 20ac7fa81a3bb8..9f6a4672656efd 100644 --- a/packages/mui-codemod/src/deprecations/accordion-props/test-cases/actual.js +++ b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/actual.js @@ -23,6 +23,8 @@ import { Accordion as MyAccordion } from '@mui/material'; ...outerSlotProps, }} />; +<Accordion TransitionComponent={ComponentTransition} slots={{ transition: SlotTransition }} />; +<Accordion TransitionProps={{ unmountOnExit: true }} slotProps={{ transition: { id: 'test' } }} />; // should skip non MUI components <NonMuiAccordion TransitionComponent={CustomTransition} diff --git a/packages/mui-codemod/src/deprecations/accordion-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/expected.js index d0f76993c9142a..958ccae7678d05 100644 --- a/packages/mui-codemod/src/deprecations/accordion-props/test-cases/expected.js +++ b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/expected.js @@ -29,6 +29,12 @@ import { Accordion as MyAccordion } from '@mui/material'; ...outerSlotProps, transition: { unmountOnExit: true } }} />; +<Accordion slots={{ transition: SlotTransition }} />; +<Accordion + slotProps={{ transition: { + ...{ unmountOnExit: true }, + ...{ id: 'test' } + } }} />; // should skip non MUI components <NonMuiAccordion TransitionComponent={CustomTransition} diff --git a/packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.actual.js index b21358b649fa77..52eb62267ca642 100644 --- a/packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.actual.js +++ b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.actual.js @@ -6,3 +6,21 @@ fn({ }, }, }); + +fn({ + MuiAccordion: { + defaultProps: { + TransitionComponent: ComponentTransition, + slots: { transition: SlotTransition }, + }, + }, +}); + +fn({ + MuiAccordion: { + defaultProps: { + slotProps: { transition: { id: 'test' } }, + TransitionProps: { unmountOnExit: true }, + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.expected.js index e98f56af5651d5..90cdafa4740d9a 100644 --- a/packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.expected.js +++ b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.expected.js @@ -11,3 +11,22 @@ fn({ }, }, }); + +fn({ + MuiAccordion: { + defaultProps: { + slots: { transition: SlotTransition } + }, + }, +}); + +fn({ + MuiAccordion: { + defaultProps: { + slotProps: { transition: { + ...{ unmountOnExit: true }, + ...{ id: 'test' } + } } + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index cfb4dee847f12c..3a6ca47eeb1072 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -7,8 +7,10 @@ import transformButtonGroupClasses from '../button-group-classes'; import transformChipClasses from '../chip-classes'; import transformPaginationItemClasses from '../pagination-item-classes'; import transformAlertClasses from '../alert-classes'; +import transformToggleButtonGroupClasses from '../toggle-button-group-classes'; import transformStepLabelProps from '../step-label-props'; import transformBackdropProps from '../backdrop-props'; +import transformStepConnectorClasses from '../step-connector-classes'; /** * @param {import('jscodeshift').FileInfo} file @@ -24,8 +26,10 @@ export default function deprecationsAll(file, api, options) { file.source = transformChipClasses(file, api, options); file.source = transformPaginationItemClasses(file, api, options); file.source = transformAlertClasses(file, api, options); + file.source = transformToggleButtonGroupClasses(file, api, options); file.source = transformStepLabelProps(file, api, options); file.source = transformBackdropProps(file, api, options); + file.source = transformStepConnectorClasses(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 67d88d6ac1e777..8e72e2f8b9b462 100644 --- a/packages/mui-codemod/src/deprecations/all/postcss.config.js +++ b/packages/mui-codemod/src/deprecations/all/postcss.config.js @@ -8,6 +8,10 @@ const { plugin: chipClassesPlugin } = require('../chip-classes/postcss-plugin'); const { plugin: paginationItemClassesPlugin, } = require('../pagination-item-classes/postcss-plugin'); +const { plugin: stepConnectorClassesPlugin } = require('../step-connector-classes/postcss-plugin'); +const { + plugin: toggleButtonGroupClassesPlugin, +} = require('../toggle-button-group-classes/postcss-plugin'); module.exports = { plugins: [ @@ -17,5 +21,7 @@ module.exports = { buttonGroupClassesPlugin, chipClassesPlugin, paginationItemClassesPlugin, + stepConnectorClassesPlugin, + toggleButtonGroupClassesPlugin, ], }; diff --git a/packages/mui-codemod/src/deprecations/avatar-props/avatar-props.js b/packages/mui-codemod/src/deprecations/avatar-props/avatar-props.js index e79dcc0256725e..330c59385dcf51 100644 --- a/packages/mui-codemod/src/deprecations/avatar-props/avatar-props.js +++ b/packages/mui-codemod/src/deprecations/avatar-props/avatar-props.js @@ -1,6 +1,4 @@ -import findComponentJSX from '../../util/findComponentJSX'; -import assignObject from '../../util/assignObject'; -import appendAttribute from '../../util/appendAttribute'; +import movePropIntoSlotProps from '../utils/movePropIntoSlotProps'; /** * @param {import('jscodeshift').FileInfo} file @@ -11,45 +9,11 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - findComponentJSX(j, { root, componentName: 'Avatar' }, (elementPath) => { - const index = elementPath.node.openingElement.attributes.findIndex( - (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'imgProps', - ); - 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 === 'slotProps') { - hasNode = true; - assignObject(j, { - target: attr, - key: 'img', - expression: removed[0].value.expression, - }); - } - }); - if (!hasNode) { - appendAttribute(j, { - target: elementPath.node, - attributeName: 'slotProps', - expression: j.objectExpression([ - j.objectProperty(j.identifier('img'), removed[0].value.expression), - ]), - }); - } - } - }); - - root.find(j.ObjectProperty, { key: { name: 'imgProps' } }).forEach((path) => { - if (path.parent?.parent?.parent?.parent?.node.key?.name === 'MuiAvatar') { - path.replace( - j.property( - 'init', - j.identifier('slotProps'), - j.objectExpression([j.objectProperty(j.identifier('img'), path.node.value)]), - ), - ); - } + movePropIntoSlotProps(j, { + root, + componentName: 'Avatar', + propName: 'imgProps', + slotName: 'img', }); return root.toSource(printOptions); diff --git a/packages/mui-codemod/src/deprecations/avatar-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/avatar-props/test-cases/actual.js index e553aae667fd1a..541efaabed3e79 100644 --- a/packages/mui-codemod/src/deprecations/avatar-props/test-cases/actual.js +++ b/packages/mui-codemod/src/deprecations/avatar-props/test-cases/actual.js @@ -13,6 +13,16 @@ import { Avatar as MyAvatar } from '@mui/material'; onLoad: () => {}, }} />; +<MyAvatar + imgProps={{ + onLoad: () => {}, + }} + slotProps={{ + img: { + onError: () => {}, + }, + }} +/>; // should skip non MUI components <NonMuiAvatar diff --git a/packages/mui-codemod/src/deprecations/avatar-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/avatar-props/test-cases/expected.js index e651ca74116c05..30522bd0371a73 100644 --- a/packages/mui-codemod/src/deprecations/avatar-props/test-cases/expected.js +++ b/packages/mui-codemod/src/deprecations/avatar-props/test-cases/expected.js @@ -17,6 +17,18 @@ import { Avatar as MyAvatar } from '@mui/material'; } }} />; +<MyAvatar + slotProps={{ + img: { + ...{ + onLoad: () => {}, + }, + + ...{ + onError: () => {}, + } + }, + }} />; // should skip non MUI components <NonMuiAvatar diff --git a/packages/mui-codemod/src/deprecations/avatar-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/avatar-props/test-cases/theme.actual.js index e28debd498e4e9..09592aa9583a60 100644 --- a/packages/mui-codemod/src/deprecations/avatar-props/test-cases/theme.actual.js +++ b/packages/mui-codemod/src/deprecations/avatar-props/test-cases/theme.actual.js @@ -8,3 +8,18 @@ fn({ }, }, }); + +fn({ + MuiAvatar: { + defaultProps: { + imgProps: { + onLoad: () => {}, + }, + slotProps: { + img: { + onError: () => {}, + }, + }, + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/avatar-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/avatar-props/test-cases/theme.expected.js index a4ac9d4cf5fccb..f1b14e5af41789 100644 --- a/packages/mui-codemod/src/deprecations/avatar-props/test-cases/theme.expected.js +++ b/packages/mui-codemod/src/deprecations/avatar-props/test-cases/theme.expected.js @@ -6,6 +6,24 @@ fn({ onError: () => {}, onLoad: () => {}, } + }, + }, + }, +}); + +fn({ + MuiAvatar: { + defaultProps: { + slotProps: { + img: { + ...{ + onLoad: () => {}, + }, + + ...{ + onError: () => {}, + } + }, } }, }, diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.js b/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.js index c444dfc97b1004..d462ae49ed5b1f 100644 --- a/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.js +++ b/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.js @@ -1,6 +1,4 @@ -import findComponentJSX from '../../util/findComponentJSX'; -import assignObject from '../../util/assignObject'; -import appendAttribute from '../../util/appendAttribute'; +import movePropIntoSlots from '../utils/movePropIntoSlots'; /** * @param {import('jscodeshift').FileInfo} file @@ -11,73 +9,11 @@ export default function transformer(file, api, options) { 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)]), - ), - ); - } - } + movePropIntoSlots(j, { + root, + componentName: 'Backdrop', + propName: 'TransitionComponent', + slotName: 'transition', }); 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 index 4d825b0076014a..13949c52396b08 100644 --- a/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.test.js +++ b/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.test.js @@ -31,7 +31,7 @@ describe('@mui/codemod', () => { const actual = transform( { source: read('./test-cases/theme.actual.js') }, { jscodeshift }, - { printOptions: { trailingComma: true } }, + {}, ); const expected = read('./test-cases/theme.expected.js'); 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 index 8cca730fda99e4..00edff06a072ce 100644 --- a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/actual.js +++ b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/actual.js @@ -8,17 +8,18 @@ import { Backdrop as MyBackdrop } from '@mui/material'; slots={{ root: 'div', }} - slotProps={{ - root: { className: 'foo' }, - }} />; <MyBackdrop TransitionComponent={CustomTransition} slots={{ ...outerSlots, }} - slotProps={{ - ...outerSlotProps, +/>; +<Backdrop + TransitionComponent={ComponentTransition} + slots={{ + root: 'div', + transition: SlotTransition }} />; // 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 index ca22506cedab88..60b85e0d7b2556 100644 --- a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/expected.js +++ b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/expected.js @@ -11,17 +11,16 @@ import { Backdrop as MyBackdrop } from '@mui/material'; slots={{ root: 'div', transition: CustomTransition - }} - slotProps={{ - root: { className: 'foo' }, }} />; <MyBackdrop slots={{ ...outerSlots, transition: CustomTransition - }} - slotProps={{ - ...outerSlotProps, + }} />; +<Backdrop + slots={{ + root: 'div', + transition: SlotTransition }} />; // should skip non MUI components <NonMuiBackdrop TransitionComponent={CustomTransition} />; 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 index a8e62bd3583647..8488ea0176baaa 100644 --- 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 @@ -16,3 +16,15 @@ fn({ }, }, }); + +fn({ + MuiBackdrop: { + defaultProps: { + TransitionComponent: ComponentTransition, + slots: { + root: 'div', + transition: SlotTransition + }, + }, + }, +}); 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 index ccc52bc558129d..46e9175ad5fdab 100644 --- 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 @@ -2,8 +2,8 @@ fn({ MuiBackdrop: { defaultProps: { slots: { - transition: CustomTransition, - }, + transition: CustomTransition + } }, }, }); @@ -12,9 +12,20 @@ fn({ MuiBackdrop: { defaultProps: { slots: { - transition: CustomTransition, root: 'div', - }, + transition: CustomTransition + } + }, + }, +}); + +fn({ + MuiBackdrop: { + defaultProps: { + slots: { + root: 'div', + transition: SlotTransition + } }, }, }); diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/index.js b/packages/mui-codemod/src/deprecations/step-connector-classes/index.js new file mode 100644 index 00000000000000..c4b340dac5ae6d --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/index.js @@ -0,0 +1 @@ +export { default } from './step-connector-classes'; diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/step-connector-classes/postcss-plugin.js new file mode 100644 index 00000000000000..71e512e0678a8c --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/postcss-plugin.js @@ -0,0 +1,33 @@ +const classes = [ + { + deprecatedClass: ' .MuiStepConnector-lineHorizontal', + replacementSelector: '.MuiStepConnector-horizontal > .MuiStepConnector-line', + }, + { + deprecatedClass: ' .MuiStepConnector-lineVertical', + replacementSelector: '.MuiStepConnector-vertical > .MuiStepConnector-line', + }, +]; + +const plugin = () => { + return { + postcssPlugin: `Replace deperecated StepConnector 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/step-connector-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/step-connector-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-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/step-connector-classes/step-connector-classes.js b/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.js new file mode 100644 index 00000000000000..00f08a6c9b49f9 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-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\/StepConnector$/)) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if ( + specifier.type === 'ImportSpecifier' && + specifier.imported.name === 'stepConnectorClasses' + ) { + 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('MuiStepConnector-', '') + .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/step-connector-classes/step-connector-classes.test.js b/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.test.js new file mode 100644 index 00000000000000..ea3ace7ef9d7e4 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-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 './step-connector-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('step-connector-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/step-connector-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.css new file mode 100644 index 00000000000000..a6803c62d2dd52 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.css @@ -0,0 +1,7 @@ +.MuiStepConnector-root .MuiStepConnector-lineHorizontal { + color: red; +} + +.MuiStepConnector-root .MuiStepConnector-lineVertical { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.js new file mode 100644 index 00000000000000..2a3d38d0081cbf --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/actual.js @@ -0,0 +1,6 @@ +import { stepConnectorClasses } from '@mui/material/StepConnector'; + +('& .MuiStepConnector-lineHorizontal'); +('& .MuiStepConnector-lineVertical'); +`& .${stepConnectorClasses.lineHorizontal}`; +`& .${stepConnectorClasses.lineVertical}`; diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css new file mode 100644 index 00000000000000..e57ec5b0540422 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.css @@ -0,0 +1,7 @@ +.MuiStepConnector-root.MuiStepConnector-horizontal > .MuiStepConnector-line { + color: red; +} + +.MuiStepConnector-root.MuiStepConnector-vertical > .MuiStepConnector-line { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.js new file mode 100644 index 00000000000000..5779ddf485b802 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/expected.js @@ -0,0 +1,6 @@ +import { stepConnectorClasses } from '@mui/material/StepConnector'; + +("&.MuiStepConnector-horizontal > .MuiStepConnector-line"); +("&.MuiStepConnector-vertical > .MuiStepConnector-line"); +`&.${stepConnectorClasses.horizontal} > .${stepConnectorClasses.line}`; +`&.${stepConnectorClasses.vertical} > .${stepConnectorClasses.line}`; 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 index d71fbba3a84810..b2fec09fa3b826 100644 --- 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 @@ -1,4 +1,6 @@ import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots'; +import movePropIntoSlots from '../utils/movePropIntoSlots'; +import movePropIntoSlotProps from '../utils/movePropIntoSlotProps'; /** * @param {import('jscodeshift').FileInfo} file @@ -11,5 +13,19 @@ export default function transformer(file, api, options) { replaceComponentsWithSlots(j, { root, componentName: 'StepLabel' }); + movePropIntoSlots(j, { + root, + componentName: 'StepLabel', + propName: 'StepIconComponent', + slotName: 'stepIcon', + }); + + movePropIntoSlotProps(j, { + root, + componentName: 'StepLabel', + propName: 'StepIconProps', + slotName: 'stepIcon', + }); + return root.toSource(printOptions); } 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 index 9caf4e5a411080..20a1428f7b1598 100644 --- 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 @@ -6,3 +6,15 @@ import StepLabel from '@mui/material/StepLabel'; slotProps={{ label: slotLabelProps }} componentsProps={{ label: componentsLabelProps }} />; +<StepLabel componentsProps={{ label: componentsLabelProps }} StepIconProps={StepIconProps} />; +<StepLabel + slots={{ label: SlotsLabel }} + slotProps={{ label: slotLabelProps }} + componentsProps={{ label: componentsLabelProps }} + StepIconComponent={StepIconComponent} + StepIconProps={StepIconProps} +/>; +<StepLabel + StepIconComponent={StepIconComponent} + StepIconProps={StepIconProps} +/>; 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 index b26c217086b36d..3dfec474599baf 100644 --- 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 @@ -7,3 +7,29 @@ import StepLabel from '@mui/material/StepLabel'; ...componentsLabelProps, ...slotLabelProps } }} />; +<StepLabel + slotProps={{ + label: componentsLabelProps, + stepIcon: StepIconProps + }} />; +<StepLabel + slots={{ + label: SlotsLabel, + stepIcon: StepIconComponent + }} + slotProps={{ + label: { + ...componentsLabelProps, + ...slotLabelProps + }, + + stepIcon: StepIconProps + }} />; +<StepLabel + slots={{ + stepIcon: StepIconComponent + }} + slotProps={{ + stepIcon: StepIconProps + }} +/>; 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 index 4f68c1fe687871..68624f70881f49 100644 --- 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 @@ -14,3 +14,23 @@ fn({ }, }, }); + +fn({ + MuiStepLabel: { + defaultProps: { + StepIconComponent: StepIconComponent, + StepIconProps: StepIconProps, + }, + }, +}); + +fn({ + MuiStepLabel: { + defaultProps: { + componentsProps: { label: componentsLabelProps }, + slotProps: { label: slotLabelProps }, + StepIconComponent: StepIconComponent, + StepIconProps: StepIconProps, + }, + }, +}); 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 index c8874c72137cab..3919652d47b97d 100644 --- 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 @@ -20,3 +20,36 @@ fn({ }, }, }); + +fn({ + MuiStepLabel: { + defaultProps: { + slots: { + stepIcon: StepIconComponent + }, + + slotProps: { + stepIcon: StepIconProps + } + }, + }, +}); + +fn({ + MuiStepLabel: { + defaultProps: { + slotProps: { + label: { + ...componentsLabelProps, + ...slotLabelProps + }, + + stepIcon: StepIconProps + }, + + slots: { + stepIcon: StepIconComponent + } + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/index.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/index.js new file mode 100644 index 00000000000000..652d00fe9b9c62 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/index.js @@ -0,0 +1 @@ +export { default } from './toggle-button-group-classes'; diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/postcss-plugin.js new file mode 100644 index 00000000000000..fc59a4a1c8b29a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/postcss-plugin.js @@ -0,0 +1,33 @@ +const classes = [ + { + deprecatedClass: ' .MuiToggleButtonGroup-groupedHorizontal', + replacementSelector: '.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped', + }, + { + deprecatedClass: ' .MuiToggleButtonGroup-groupedVertical', + replacementSelector: '.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped', + }, +]; + +const plugin = () => { + return { + postcssPlugin: `Replace deperecated ToggleButtonGroup 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/toggle-button-group-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-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/toggle-button-group-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/actual.css new file mode 100644 index 00000000000000..2e856c77e5cb7b --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/actual.css @@ -0,0 +1,7 @@ +.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedHorizontal { + color: red; +} + +.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedVertical { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/actual.js new file mode 100644 index 00000000000000..eed30d616d7210 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/actual.js @@ -0,0 +1,6 @@ +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; + +('& .MuiToggleButtonGroup-groupedHorizontal'); +('& .MuiToggleButtonGroup-groupedVertical'); +`& .${toggleButtonGroupClasses.groupedHorizontal}`; +`& .${toggleButtonGroupClasses.groupedVertical}`; diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/expected.css new file mode 100644 index 00000000000000..0a1721efbc7eec --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/expected.css @@ -0,0 +1,7 @@ +.MuiToggleButtonGroup-root.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped { + color: red; +} + +.MuiToggleButtonGroup-root.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/expected.js new file mode 100644 index 00000000000000..b2030174207157 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/expected.js @@ -0,0 +1,6 @@ +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; + +("&.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped"); +("&.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped"); +`&.${toggleButtonGroupClasses.horizontal} > .${toggleButtonGroupClasses.grouped}`; +`&.${toggleButtonGroupClasses.vertical} > .${toggleButtonGroupClasses.grouped}`; diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js new file mode 100644 index 00000000000000..60bec34f754946 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-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\/ToggleButtonGroup$/)) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if ( + specifier.type === 'ImportSpecifier' && + specifier.imported.name === 'toggleButtonGroupClasses' + ) { + 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('MuiToggleButtonGroup-', '') + .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/toggle-button-group-classes/toggle-button-group-classes.test.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.test.js new file mode 100644 index 00000000000000..9769a168e9f86c --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-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 './toggle-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('toggle-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/utils/movePropIntoSlotProps.js b/packages/mui-codemod/src/deprecations/utils/movePropIntoSlotProps.js new file mode 100644 index 00000000000000..2e09e3d1d021cc --- /dev/null +++ b/packages/mui-codemod/src/deprecations/utils/movePropIntoSlotProps.js @@ -0,0 +1,111 @@ +import findComponentJSX from '../../util/findComponentJSX'; +import findComponentDefaultProps from '../../util/findComponentDefaultProps'; +import assignObject from '../../util/assignObject'; +import appendAttribute from '../../util/appendAttribute'; + +function moveJsxPropIntoSlotProps(j, element, propName, slotName) { + const propIndex = element.openingElement.attributes.findIndex( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === propName, + ); + + if (propIndex !== -1) { + const removedValue = element.openingElement.attributes.splice(propIndex, 1)[0].value.expression; + let hasSlotProps = false; + element.openingElement.attributes.forEach((attr) => { + if (attr.name?.name === 'slotProps') { + hasSlotProps = true; + const slots = attr.value.expression; + const slotIndex = slots.properties.findIndex((prop) => prop?.key?.name === slotName); + if (slotIndex === -1) { + assignObject(j, { + target: attr, + key: slotName, + expression: removedValue, + }); + } else { + const slotPropsSlotValue = slots.properties.splice(slotIndex, 1)[0].value; + assignObject(j, { + target: attr, + key: slotName, + expression: j.objectExpression([ + j.spreadElement(removedValue), + j.spreadElement(slotPropsSlotValue), + ]), + }); + } + } + }); + + if (!hasSlotProps) { + appendAttribute(j, { + target: element, + attributeName: 'slotProps', + expression: j.objectExpression([j.objectProperty(j.identifier(slotName), removedValue)]), + }); + } + } +} + +function moveDefaultPropsPropIntoslotProps(j, defaultPropsPathCollection, propName, slotName) { + defaultPropsPathCollection.find(j.ObjectProperty, { key: { name: propName } }).forEach((path) => { + const removedValue = path.value.value; + const defaultProps = path.parent.value; + + let hasSlotProps = false; + defaultProps.properties.forEach((property) => { + if (property.key?.name === 'slotProps') { + hasSlotProps = true; + const slotIndex = property.value.properties.findIndex( + (prop) => prop?.key?.name === slotName, + ); + if (slotIndex === -1) { + property.value.properties.push(j.objectProperty(j.identifier(slotName), removedValue)); + } else { + const slotPropsSlotValue = property.value.properties.splice(slotIndex, 1)[0].value; + property.value.properties.push( + j.objectProperty( + j.identifier(slotName), + j.objectExpression([ + j.spreadElement(removedValue), + j.spreadElement(slotPropsSlotValue), + ]), + ), + ); + } + } + }); + + if (!hasSlotProps) { + defaultProps.properties.push( + j.objectProperty( + j.identifier('slotProps'), + j.objectExpression([j.objectProperty(j.identifier(slotName), removedValue)]), + ), + ); + } + + path.prune(); + }); +} + +/** + * Moves prop into slotProps. + * If the slotProps prop exists, it will merge the prop into the slotProps. + * If there are duplicated values, the values will be spread. + * + * @param {import('jscodeshift')} j + * @param {{ root: import('jscodeshift').Collection; componentName: string, propName: string, slotName: string }} options + * + * @example <Component TransitionProps={value} /> => <Component slotProps={{ transition: value }} /> + */ +export default function movePropIntoSlotProps(j, options) { + const { root, componentName, propName, slotName } = options; + + findComponentJSX(j, { root, componentName }, (elementPath) => { + moveJsxPropIntoSlotProps(j, elementPath.node, propName, slotName); + }); + + const defaultPropsPathCollection = findComponentDefaultProps(j, { root, componentName }); + + moveDefaultPropsPropIntoslotProps(j, defaultPropsPathCollection, propName, slotName); +} diff --git a/packages/mui-codemod/src/deprecations/utils/movePropIntoSlots.js b/packages/mui-codemod/src/deprecations/utils/movePropIntoSlots.js new file mode 100644 index 00000000000000..9910853c3b4949 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/utils/movePropIntoSlots.js @@ -0,0 +1,91 @@ +import findComponentJSX from '../../util/findComponentJSX'; +import findComponentDefaultProps from '../../util/findComponentDefaultProps'; +import assignObject from '../../util/assignObject'; +import appendAttribute from '../../util/appendAttribute'; + +function moveJsxPropIntoSlots(j, element, propName, slotName) { + const index = element.openingElement.attributes.findIndex( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === propName, + ); + + if (index !== -1) { + const removedValue = element.openingElement.attributes.splice(index, 1)[0].value.expression; + let hasSlots = false; + element.openingElement.attributes.forEach((attr) => { + if (attr.name?.name === 'slots') { + hasSlots = true; + const slotIndex = attr.value.expression.properties.findIndex( + (prop) => prop?.key?.name === slotName, + ); + if (slotIndex === -1) { + assignObject(j, { + target: attr, + key: slotName, + expression: removedValue, + }); + } + } + }); + + if (!hasSlots) { + appendAttribute(j, { + target: element, + attributeName: 'slots', + expression: j.objectExpression([j.objectProperty(j.identifier(slotName), removedValue)]), + }); + } + } +} + +function moveDefaultPropsPropIntoSlots(j, defaultPropsPathCollection, propName, slotName) { + defaultPropsPathCollection.find(j.ObjectProperty, { key: { name: propName } }).forEach((path) => { + const removedValue = path.value.value; + const defaultProps = path.parent.value; + + let hasSlots = false; + defaultProps.properties.forEach((property) => { + if (property.key?.name === 'slots') { + hasSlots = true; + const slots = property.value; + const slotIndex = slots.properties.findIndex((prop) => prop?.key?.name === slotName); + if (slotIndex === -1) { + slots.properties.push(j.objectProperty(j.identifier(slotName), removedValue)); + } + } + }); + + if (!hasSlots) { + defaultProps.properties.push( + j.property( + 'init', + j.identifier('slots'), + j.objectExpression([j.objectProperty(j.identifier(slotName), removedValue)]), + ), + ); + } + + path.prune(); + }); +} + +/** + * Moves prop into slots. + * If the slots prop exists, it will add the prop to the slots. + * If there are duplicated values, the slots values will be used. + * + * @param {import('jscodeshift')} j + * @param {{ root: import('jscodeshift').Collection; componentName: string, propName: string, slotName: string }} options + * + * @example <Component TransitionComponent={CustomTransition} /> => <Component slots={{ transition: CustomTransition }} /> + */ +export default function movePropIntoSlots(j, options) { + const { root, componentName, propName, slotName } = options; + + findComponentJSX(j, { root, componentName }, (elementPath) => { + moveJsxPropIntoSlots(j, elementPath.node, propName, slotName); + }); + + const defaultPropsPathCollection = findComponentDefaultProps(j, { root, componentName }); + + moveDefaultPropsPropIntoSlots(j, defaultPropsPathCollection, propName, slotName); +} diff --git a/packages/mui-codemod/src/v5.0.0/base-remove-unstyled-suffix.js b/packages/mui-codemod/src/v5.0.0/base-remove-unstyled-suffix.js index 6d773a08c0f639..6c3e45094df4ec 100644 --- a/packages/mui-codemod/src/v5.0.0/base-remove-unstyled-suffix.js +++ b/packages/mui-codemod/src/v5.0.0/base-remove-unstyled-suffix.js @@ -10,14 +10,13 @@ export default function transformer(file, api) { .find(j.ImportDeclaration) .filter(({ node }) => { const sourceVal = node.source.value; - if (sourceVal.startsWith('@mui/base')) { - node.source.value = sourceVal.replace(/unstyled/im, ''); - node.source.raw = sourceVal.replace(/unstyled/im, ''); - } - return sourceVal.startsWith('@mui/base'); }) .forEach((path) => { + const sourceVal = path.node.source.value; + if (sourceVal.startsWith('@mui/base')) { + path.node.source = j.stringLiteral(sourceVal.replace(/unstyled/im, '')); + } const specifiers = []; path.node.specifiers.forEach((elementNode) => { const importedName = elementNode.imported?.name || ''; diff --git a/packages/mui-codemod/src/v5.0.0/box-sx-prop.test/expected.js b/packages/mui-codemod/src/v5.0.0/box-sx-prop.test/expected.js index 1c5cb573310c52..0a58fec3d56e84 100644 --- a/packages/mui-codemod/src/v5.0.0/box-sx-prop.test/expected.js +++ b/packages/mui-codemod/src/v5.0.0/box-sx-prop.test/expected.js @@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button'; export default function BoxComponent(props) { return ( - <Box + (<Box sx={{ m: 2, border: "1px dashed grey", @@ -25,6 +25,6 @@ export default function BoxComponent(props) { sx={{ p: [1, 2, 4] }} /> - </Box> + </Box>) ); } diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/eighth.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/eighth.expected.js index 65cd75818c0c89..95c31a25fe07e3 100644 --- a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/eighth.expected.js +++ b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/eighth.expected.js @@ -115,7 +115,7 @@ export default function Cart() { }); }; return ( - <Root> + (<Root> <Head title="View cart"> <meta name="robots" content="noindex,nofollow" /> </Head> @@ -208,6 +208,6 @@ export default function Cart() { </OrderBody> </Container> <AppFooter /> - </Root> + </Root>) ); } \ No newline at end of file diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/eleventh.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/eleventh.expected.js index 8fb90973ad75f7..71e28fcea2d4e3 100644 --- a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/eleventh.expected.js +++ b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/eleventh.expected.js @@ -29,9 +29,9 @@ export default function Page() { return ( - <StyledSomeNamespaceSomeComponent> + (<StyledSomeNamespaceSomeComponent> <h1 className={classes.header}></h1> <img className={classes.img}></img> - </StyledSomeNamespaceSomeComponent> + </StyledSomeNamespaceSomeComponent>) ); } \ No newline at end of file diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/fifth.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/fifth.expected.js index 493cbe51da0472..093020d104b1d2 100644 --- a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/fifth.expected.js +++ b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/fifth.expected.js @@ -62,7 +62,7 @@ function SellHero() { return ( - <Root className={classes.root}> + (<Root className={classes.root}> <Container className={classes.container}> <Typography variant="h1" align="center" color="textPrimary" className={classes.title}> Sell themes @@ -87,7 +87,7 @@ function SellHero() { </Button> </div> </Container> - </Root> + </Root>) ); } diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/first.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/first.expected.js index c919a8c97db252..5169edb4b7cd3a 100644 --- a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/first.expected.js +++ b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/first.expected.js @@ -180,7 +180,7 @@ class AppAppBar extends React.Component { const { menuOpen } = this.state; return ( - <StyledAppBar essential={essential} position={position}> + (<StyledAppBar essential={essential} position={position}> <div className={clsx(classes.wrap, { [classes.wrapOpened]: menuOpen })}> <Link to="/" aria-label="Back to homepage" color="inherit"> <Logo color={menuOpen ? 'inherit' : 'textPrimary'} /> @@ -237,7 +237,7 @@ class AppAppBar extends React.Component { </div> )} </div> - </StyledAppBar> + </StyledAppBar>) ); } } diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/fourth.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/fourth.expected.js index cc59b1db8d5abd..714539faff3696 100644 --- a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/fourth.expected.js +++ b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/fourth.expected.js @@ -31,10 +31,10 @@ const StyledCard = styled(Card)(function getStyles( export const MyCard = ((props) => { const { } = props; return ( - <StyledCard className={classes.root}> + (<StyledCard className={classes.root}> <CardActions className={classes.actions}> <Button className={classes.button}>Submit</Button> </CardActions> - </StyledCard> + </StyledCard>) ); }); diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/nineth.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/nineth.expected.js index 8661d681bbb3e8..b2d000ea40311c 100644 --- a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/nineth.expected.js +++ b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/nineth.expected.js @@ -29,9 +29,9 @@ export default function Page() { return ( - <Root> + (<Root> <h1 className={classes.header}></h1> <img className={classes.img}></img> - </Root> + </Root>) ); } \ No newline at end of file diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/second.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/second.expected.js index 30eb0ee2541889..0a5f0311b364c4 100644 --- a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/second.expected.js +++ b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/second.expected.js @@ -63,7 +63,7 @@ function AffiliatesHero() { return ( - <Root className={classes.root}> + (<Root className={classes.root}> <Container className={classes.container}> <Typography variant="h1" align="center" color="textPrimary" className={classes.title}> Affiliate Program @@ -85,7 +85,7 @@ function AffiliatesHero() { </Button> </div> </Container> - </Root> + </Root>) ); } diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/seventh.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/seventh.expected.js index 2715106e6ff16a..2a9c9e35f18226 100644 --- a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/seventh.expected.js +++ b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/seventh.expected.js @@ -86,7 +86,7 @@ function Iframe(props) { }, []); return ( - <Root> + (<Root> {loaded === false ? ( <div className={classes.loader}> <CircularProgress /> @@ -109,7 +109,7 @@ function Iframe(props) { frameBorder="0" {...props} /> - </Root> + </Root>) ); } diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/third.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/third.expected.js index bd072a096a31d8..5525352eb6dfa0 100644 --- a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/third.expected.js +++ b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/third.expected.js @@ -27,10 +27,10 @@ const StyledCard = styled(Card)(( export const MyCard = ((props) => { const { } = props; return ( - <StyledCard className={classes.root}> + (<StyledCard className={classes.root}> <CardActions className={classes.actions}> <Button className={classes.button}>Submit</Button> </CardActions> - </StyledCard> + </StyledCard>) ); }); diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles.expected.tsx b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles.expected.tsx index 63e961a28eff28..3ac787c22c4308 100644 --- a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles.expected.tsx +++ b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles.expected.tsx @@ -19,7 +19,7 @@ const Root = styled('div')(( const MyComponent = (props) => { - return <Root {...props} className={classes.root} />; + return (<Root {...props} className={classes.root} />); }; export default MyComponent; \ No newline at end of file diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles1.expected.tsx b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles1.expected.tsx index 31d6cef054510c..55073749924256 100644 --- a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles1.expected.tsx +++ b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles1.expected.tsx @@ -19,7 +19,7 @@ const Root = styled('div')(( const MyComponent = (props) => { const { } = props; - return <Root {...props} className={classes.root} />; + return (<Root {...props} className={classes.root} />); }; export default (MyComponent); \ No newline at end of file diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles2.expected.tsx b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles2.expected.tsx index 7c5a2d26246fc7..6b84c2a5f090ad 100644 --- a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles2.expected.tsx +++ b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles2.expected.tsx @@ -15,7 +15,7 @@ const Root = styled('div')({ const MyComponent = (props) => { const { } = props; - return <Root {...props} className={classes.root} />; + return (<Root {...props} className={classes.root} />); }; export default (MyComponent); \ No newline at end of file diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles3.expected.tsx b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles3.expected.tsx index d40f46b983f2ce..cbede67798b670 100644 --- a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles3.expected.tsx +++ b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles3.expected.tsx @@ -15,7 +15,7 @@ const Root = styled('div')({ const MyComponent = (props) => { - return <Root {...props} className={classes.root} />; + return (<Root {...props} className={classes.root} />); }; export default MyComponent; \ No newline at end of file diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-typescript-docs-example-params.tsx b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-typescript-docs-example-params.tsx index 11951ce8c1a7c0..af3bb81e8b8343 100644 --- a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-typescript-docs-example-params.tsx +++ b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-typescript-docs-example-params.tsx @@ -1,12 +1,13 @@ import { makeStyles } from 'tss-react/mui'; const useStyles = makeStyles<{color: 'primary' | 'secondary', padding: number}, 'child' | 'small'>({name: 'App'})((theme, { color, padding }, classes) => ({ - root: { + root: ({ padding: padding, + [`&:hover .${classes.child}`]: { backgroundColor: theme.palette[color].main, } - }, + }), small: {}, child: { border: '1px solid black', @@ -28,7 +29,7 @@ function App({classes: classesProp}: {classes?: any}) { }); return ( - <div className={classes.root}> + (<div className={classes.root}> <div className={classes.child}> The Background take the primary theme color when the mouse hovers the parent. </div> @@ -36,7 +37,7 @@ function App({classes: classesProp}: {classes?: any}) { The Background take the primary theme color when the mouse hovers the parent. I am smaller than the other child. </div> - </div> + </div>) ); } diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-typescript-docs-example.tsx b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-typescript-docs-example.tsx index b906d0c65b7665..495a6f1c8853a7 100644 --- a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-typescript-docs-example.tsx +++ b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-typescript-docs-example.tsx @@ -22,7 +22,7 @@ const useStyles = makeStyles<void, 'child' | 'small'>()((theme, _params, classes function App() { const { classes, cx } = useStyles(); return ( - <div className={classes.parent}> + (<div className={classes.parent}> <div className={classes.child}> Background turns red when the mouse hovers over the parent. </div> @@ -30,7 +30,7 @@ function App() { Background turns red when the mouse hovers over the parent. I am smaller than the other child. </div> - </div> + </div>) ); } diff --git a/packages/mui-codemod/src/v5.0.0/preset-safe.test/expected.js b/packages/mui-codemod/src/v5.0.0/preset-safe.test/expected.js index 511a87bcb82936..d65e32b346d5aa 100644 --- a/packages/mui-codemod/src/v5.0.0/preset-safe.test/expected.js +++ b/packages/mui-codemod/src/v5.0.0/preset-safe.test/expected.js @@ -87,7 +87,7 @@ const Header = () => { const classes = useStyles(); const { dark, setDark } = React.useContext(DarkContext); return ( - <AppBar color="default" position="sticky"> + (<AppBar color="default" position="sticky"> <Toolbar> <Typography className={classes.head} variant="h6"> 👋 Hello @@ -110,7 +110,7 @@ const Header = () => { onChange={(event, checked) => setDark(checked)} /> </Toolbar> - </AppBar> + </AppBar>) ); }; @@ -119,7 +119,7 @@ function App() { const handleClose = () => setOpen(false); const { setDark } = React.useContext(DarkContext); const classes = useStyles(); - return <> + return (<> <CssBaseline /> <Header /> <Container> @@ -173,7 +173,7 @@ function App() { </DialogActions> </Dialog> </Container> - </>; + </>); } const withThemeProvider = (Component) => (props) => { @@ -188,7 +188,7 @@ const withThemeProvider = (Component) => (props) => { [dark], ); return ( - <DarkContext.Provider value={{ dark, setDark }}> + (<DarkContext.Provider value={{ dark, setDark }}> <StylesProvider injectFirst> <StyledEngineProvider injectFirst> <ThemeProvider theme={theme}> @@ -196,7 +196,7 @@ const withThemeProvider = (Component) => (props) => { </ThemeProvider> </StyledEngineProvider> </StylesProvider> - </DarkContext.Provider> + </DarkContext.Provider>) ); }; diff --git a/packages/mui-codemod/src/v5.0.0/styled-engine-provider.test/mui-theme-provider.expected.js b/packages/mui-codemod/src/v5.0.0/styled-engine-provider.test/mui-theme-provider.expected.js index 107f5814aa1f23..6826808eedbe0d 100644 --- a/packages/mui-codemod/src/v5.0.0/styled-engine-provider.test/mui-theme-provider.expected.js +++ b/packages/mui-codemod/src/v5.0.0/styled-engine-provider.test/mui-theme-provider.expected.js @@ -5,7 +5,7 @@ import Page from './pages'; const App = () => { return ( - <Providers> + (<Providers> <StyledEngineProvider injectFirst> <MuiThemeProvider theme={createMuiTheme()}> <OtherProvider> @@ -13,7 +13,7 @@ const App = () => { </OtherProvider> </MuiThemeProvider> </StyledEngineProvider> - </Providers> + </Providers>) ); }; diff --git a/packages/mui-codemod/src/v5.0.0/styled-engine-provider.test/theme-provider.expected.js b/packages/mui-codemod/src/v5.0.0/styled-engine-provider.test/theme-provider.expected.js index ce27802818f1fc..b727b543d2728d 100644 --- a/packages/mui-codemod/src/v5.0.0/styled-engine-provider.test/theme-provider.expected.js +++ b/packages/mui-codemod/src/v5.0.0/styled-engine-provider.test/theme-provider.expected.js @@ -6,11 +6,11 @@ import Page from './pages'; const App = () => { return ( <StyledEngineProvider injectFirst> - <ThemeProvider theme={createTheme()}> + (<ThemeProvider theme={createTheme()}> <OtherProvider> <Page /> </OtherProvider> - </ThemeProvider> + </ThemeProvider>) </StyledEngineProvider> ); }; diff --git a/packages/mui-codemod/src/v5.0.0/theme-provider.test/core-import.expected.js b/packages/mui-codemod/src/v5.0.0/theme-provider.test/core-import.expected.js index 15925ec0af83d1..0f5322c1c02a6e 100644 --- a/packages/mui-codemod/src/v5.0.0/theme-provider.test/core-import.expected.js +++ b/packages/mui-codemod/src/v5.0.0/theme-provider.test/core-import.expected.js @@ -2,8 +2,8 @@ import { createTheme, ThemeProvider, Theme } from '@material-ui/core'; function App() { return ( - <ThemeProvider theme={createTheme()}> + (<ThemeProvider theme={createTheme()}> <div data-testid="foo" /> - </ThemeProvider> + </ThemeProvider>) ); } diff --git a/packages/mui-codemod/src/v5.0.0/theme-provider.test/expected.js b/packages/mui-codemod/src/v5.0.0/theme-provider.test/expected.js index 21b87540236096..c90abfb69000d1 100644 --- a/packages/mui-codemod/src/v5.0.0/theme-provider.test/expected.js +++ b/packages/mui-codemod/src/v5.0.0/theme-provider.test/expected.js @@ -2,8 +2,8 @@ import { createTheme, ThemeProvider, Theme } from '@material-ui/core/styles'; function App() { return ( - <ThemeProvider theme={createTheme()}> + (<ThemeProvider theme={createTheme()}> <div data-testid="foo" /> - </ThemeProvider> + </ThemeProvider>) ); } diff --git a/packages/mui-codemod/src/v5.0.0/variant-prop.test/expected.js b/packages/mui-codemod/src/v5.0.0/variant-prop.test/expected.js index e668c182c28d65..7b38552e579f7b 100644 --- a/packages/mui-codemod/src/v5.0.0/variant-prop.test/expected.js +++ b/packages/mui-codemod/src/v5.0.0/variant-prop.test/expected.js @@ -11,7 +11,7 @@ const Select2 = () => <MuiSelect2 variant="standard" />; export default function TextFieldComponent(props) { return ( - <div> + (<div> <TextField variant="standard" {...props} /> <TextField variant="outlined" /> <TextField variant="standard" /> @@ -33,10 +33,9 @@ export default function TextFieldComponent(props) { <SelectedRoute /> <FromToSelect /> <FromToSelectDrawer /> - <MuiTextField2 variant="standard" /> <Select2 /> <MuiFormControl2 variant="standard" /> - </div> + </div>) ); } diff --git a/packages/mui-core-downloads-tracker/package.json b/packages/mui-core-downloads-tracker/package.json index 50d462045792c9..a2aa0d9631db7b 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": "6.0.0-alpha.0", + "version": "6.0.0-alpha.2", "private": false, "author": "MUI Team", "description": "Internal package to track number of downloads of our design system libraries", diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json index 0989ad752368bd..54f3b4c83f9a47 100644 --- a/packages/mui-docs/package.json +++ b/packages/mui-docs/package.json @@ -1,6 +1,6 @@ { "name": "@mui/docs", - "version": "6.0.0-alpha.0", + "version": "6.0.0-alpha.2", "private": false, "author": "MUI Team", "description": "MUI Docs - Documentation building blocks.", @@ -35,24 +35,24 @@ "test": "exit 0" }, "dependencies": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.24.4", "clsx": "^2.1.0", "nprogress": "^0.2.0", "prop-types": "^15.8.1" }, "devDependencies": { - "@mui/material": "workspace:*", "@mui/icons-material": "workspace:*", - "@types/node": "^18.19.25", + "@mui/material": "workspace:*", + "@types/node": "^18.19.31", "@types/prop-types": "^15.7.12", "@types/react": "^18.2.55", "next": "^13.5.1", "react": "^18.2.0" }, "peerDependencies": { - "@mui/material": "^5.0.0", "@mui/base": "*", "@mui/icons-material": "^5.0.0", + "@mui/material": "^5.0.0", "@mui/system": "^5.0.0", "@types/react": "^17.0.0 || ^18.0.0", "next": "^13.5.1 || ^14", diff --git a/packages/mui-docs/src/InfoCard/InfoCard.tsx b/packages/mui-docs/src/InfoCard/InfoCard.tsx index d686fd4f268ee2..56ec11e1f94486 100644 --- a/packages/mui-docs/src/InfoCard/InfoCard.tsx +++ b/packages/mui-docs/src/InfoCard/InfoCard.tsx @@ -23,11 +23,11 @@ export function GlowingIconContainer({ icon }: GlowingIconContainerProps) { 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`, + boxShadow: `0px 0 0 2px ${alpha(theme.palette.primary[500], 0.1)}, 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`, + bgcolor: alpha(theme.palette.primary[900], 0.4), + boxShadow: `0 0 0 2px ${alpha(theme.palette.primary[600], 0.1)}, 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset`, }), })} > @@ -79,7 +79,7 @@ export function InfoCard(props: InfoCardProps) { height: '100%', background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, ...theme.applyDarkStyles({ - bgcolor: 'primaryDark.900', + bgcolor: alpha(theme.palette.primaryDark[800], 0.25), background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, borderColor: 'primaryDark.700', }), diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts index 9a1763026a7b8b..59013ee0e1d539 100644 --- a/packages/mui-docs/src/branding/brandingTheme.ts +++ b/packages/mui-docs/src/branding/brandingTheme.ts @@ -32,8 +32,7 @@ declare module '@mui/material/styles/createPalette' { interface Palette { primaryDark: PaletteColor; gradients: { - lightGrayRadio: string; - stylizedRadio: string; + radioSubtle: string; linearSubtle: string; }; } @@ -91,82 +90,81 @@ declare module '@mui/material/SvgIcon' { 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', + 50: 'hsl(210, 100%, 96%)', + 100: 'hsl(210, 100%, 90%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 70%)', + 400: 'hsl(210, 100%, 60%)', + main: 'hsl(210, 100%, 45%)', + 500: 'hsl(210, 100%, 45%)', + 600: 'hsl(210, 100%, 42%)', + 700: 'hsl(210, 100%, 38%)', + 800: 'hsl(210, 100%, 30%)', + 900: 'hsl(210, 100%, 23%)', }; 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', + 50: 'hsl(210, 14%, 92%)', + 100: 'hsl(210, 14%, 87%)', + 200: 'hsl(210, 14%, 72%)', + 300: 'hsl(210, 14%, 56%)', + main: 'hsl(210, 14%, 56%)', + 400: 'hsl(210, 14%, 36%)', + 500: 'hsl(210, 14%, 28%)', + 600: 'hsl(210, 14%, 22%)', + 700: 'hsl(210, 14%, 13%)', + 800: 'hsl(210, 14%, 9%)', + 900: 'hsl(210, 14%, 7%)', }; 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', + 50: 'hsl(215, 15%, 97%)', + 100: 'hsl(215, 15%, 92%)', + 200: 'hsl(215, 15%, 89%)', + 300: 'hsl(215, 15%, 82%)', + 400: 'hsl(215, 15%, 75%)', + 500: 'hsl(215, 15%, 65%)', + 600: 'hsl(215, 15%, 50%)', + 700: 'hsl(215, 15%, 40%)', + 800: 'hsl(215, 15%, 22%)', + 900: 'hsl(215, 15%, 12%)', }; 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', + 50: 'hsl(355, 98%, 97%)', + 100: 'hsl(355, 98%, 93%)', + 200: 'hsl(355, 98%, 87%)', + 300: 'hsl(355, 98%, 80%)', + 400: 'hsl(355, 98%, 74%)', + 500: 'hsl(355, 98%, 66%)', + main: 'hsl(355, 98%, 66%)', + 600: 'hsl(355, 98%, 46%)', + 700: 'hsl(355, 98%, 39%)', + 800: 'hsl(355, 98%, 29%)', + 900: 'hsl(355, 98%, 17%)', }; export const success = { - 50: '#E9FBF0', - 100: '#C6F6D9', - 200: '#9AEFBC', - 300: '#6AE79C', - 400: '#3EE07F', - 500: '#21CC66', - 600: '#1DB45A', - 700: '#1AA251', - 800: '#178D46', - 900: '#0F5C2E', + 50: 'hsl(144, 72%, 95%)', + 100: 'hsl(144, 72%, 87%)', + 200: 'hsl(144, 72%, 77%)', + 300: 'hsl(144, 72%, 66%)', + 400: 'hsl(144, 72%, 56%)', + 500: 'hsl(144, 72%, 46%)', + 600: 'hsl(144, 72%, 41%)', + 700: 'hsl(144, 72%, 37%)', + 800: 'hsl(144, 72%, 32%)', + 900: 'hsl(144, 72%, 21%)', }; 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 + 50: 'hsl(48, 100%, 96%)', + 100: 'hsl(48, 100%, 88%)', + 200: 'hsl(48, 100%, 82%)', + 300: 'hsl(48, 100%, 64%)', + 400: 'hsl(48, 100%, 48%)', + 500: 'hsl(48, 100%, 44%)', + main: 'hsl(48, 100%, 44%)', + 600: 'hsl(40, 100%, 40%)', + 700: 'hsl(36, 100%, 34%)', + 800: 'hsl(36, 100%, 27%)', + 900: 'hsl(36, 100%, 18%)', }; -// context on the Advanced Perceptual Contrast Algorithm (APCA) used above here: https://github.com/w3c/wcag/issues/695 const systemFont = [ '-apple-system', @@ -209,7 +207,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') => contrastText: blueDark[600], }), }, - divider: mode === 'dark' ? alpha(blueDark[500], 0.2) : grey[100], + divider: mode === 'dark' ? alpha(blueDark[500], 0.3) : grey[100], primaryDark: blueDark, mode, ...(mode === 'dark' && { @@ -219,7 +217,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') => }, }), common: { - black: '#0B0D0E', + black: 'hsl(200, 10%, 4%)', }, text: { ...(mode === 'light' && { @@ -248,20 +246,18 @@ export const getDesignTokens = (mode: 'light' | 'dark') => success: { ...success, ...(mode === 'dark' && { - main: '#1DB45A', // contrast 6.17:1 (blueDark.800) + main: success[600], }), ...(mode === 'light' && { - main: '#1AA251', // contrast 3.31:1 + main: success[700], }), }, warning, gradients: { - lightGrayRadio: - 'radial-gradient(50% 50% at 50% 50%, #F0F7FF 0%, rgba(240, 247, 255, 0.05) 100%)', - stylizedRadio: + radioSubtle: 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%)', + ? `radial-gradient(100% 100% at 100% 100%, transparent 0, ${alpha(blue[900], 0.3)} 300%)` + : `radial-gradient(100% 90% at 50% 0, transparent 0, ${alpha(blue[100], 0.3)} 300%)`, linearSubtle: mode === 'light' ? `linear-gradient(to bottom right, ${alpha(blue[50], 0.3)} 25%, ${alpha(grey[50], 0.2)} 100%)` @@ -718,7 +714,7 @@ export function getThemedComponents(): ThemeOptions { 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`, + boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 2px 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], @@ -728,7 +724,7 @@ export function getThemedComponents(): ThemeOptions { 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`, + 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': { borderColor: (theme.vars || theme).palette.primaryDark[500], background: alpha(theme.palette.primaryDark[700], 0.4), @@ -747,7 +743,7 @@ export function getThemedComponents(): ThemeOptions { 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`, + boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 2px 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], @@ -757,7 +753,7 @@ export function getThemedComponents(): ThemeOptions { 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`, + 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': { color: (theme.vars || theme).palette.primary[400], borderColor: (theme.vars || theme).palette.primaryDark[500], @@ -825,7 +821,7 @@ export function getThemedComponents(): ThemeOptions { root: ({ theme }) => ({ borderColor: (theme.vars || theme).palette.grey[100], ...theme.applyDarkStyles({ - borderColor: alpha(theme.palette.primaryDark[700], 0.8), + borderColor: alpha(theme.palette.primaryDark[500], 0.3), }), }), }, @@ -909,7 +905,7 @@ export function getThemedComponents(): ThemeOptions { ...(variant === 'outlined' && color === 'primary' && { borderColor: (theme.vars || theme).palette.primary[100], - backgroundColor: (theme.vars || theme).palette.primary[50], + backgroundColor: alpha(theme.palette.primary[100], 0.2), ...theme.applyDarkStyles({ color: (theme.vars || theme).palette.primary[300], borderColor: alpha(theme.palette.primary[500], 0.2), @@ -955,6 +951,9 @@ export function getThemedComponents(): ThemeOptions { color: (theme.vars || theme).palette.primary[700], }, }, + '&.Mui-focusVisible': { + backgroundColor: (theme.vars || theme).palette.primary[200], + }, ...theme.applyDarkStyles({ color: (theme.vars || theme).palette.primary[100], backgroundColor: alpha(theme.palette.primary[800], 0.5), @@ -1081,7 +1080,7 @@ export function getThemedComponents(): ThemeOptions { 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`, + boxShadow: `hsl(200, 0%, 100%) 0 2px 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]}`, @@ -1106,7 +1105,7 @@ export function getThemedComponents(): ThemeOptions { 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`, + boxShadow: `${alpha(theme.palette.primaryDark[700], 0.4)} 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': { borderColor: alpha(theme.palette.primary[600], 0.5), boxShadow: `0px 2px 8px ${alpha(theme.palette.primary[900], 0.6)}`, diff --git a/packages/mui-envinfo/package.json b/packages/mui-envinfo/package.json index 32ddd5668876cf..bdaa1fd77cedd4 100644 --- a/packages/mui-envinfo/package.json +++ b/packages/mui-envinfo/package.json @@ -1,6 +1,6 @@ { "name": "@mui/envinfo", - "version": "2.0.19", + "version": "2.0.20", "private": false, "author": "MUI Team", "description": "Logs infos about the environment relevant to @mui/*", @@ -20,10 +20,10 @@ "build": "node scripts/build" }, "dependencies": { - "envinfo": "^7.11.1" + "envinfo": "^7.12.0" }, "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-envinfo/test/package.json b/packages/mui-envinfo/test/package.json index e63819d86b731c..b4a34d9bcff349 100644 --- a/packages/mui-envinfo/test/package.json +++ b/packages/mui-envinfo/test/package.json @@ -4,7 +4,7 @@ "private": true, "dependencies": { "@emotion/react": "^11.11.4", - "@emotion/styled": "^11.11.0", + "@emotion/styled": "^11.11.5", "@mui/base": "5.0.0-beta.30", "@mui/joy": "5.0.0-beta.22", "@mui/material": "5.15.4", diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json index 5842a7c8e13662..b5e4c824365edd 100644 --- a/packages/mui-icons-material/package.json +++ b/packages/mui-icons-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/icons-material", - "version": "6.0.0-alpha.0", + "version": "6.0.0-alpha.2", "private": false, "author": "MUI Team", "description": "Material Design icons distributed as SVG React components.", @@ -46,13 +46,13 @@ "typescript": "tsc -p tsconfig.json" }, "dependencies": { - "@babel/runtime": "^7.23.9" + "@babel/runtime": "^7.24.4" }, "devDependencies": { "@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", diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json index d468f1a2c5bc00..0dabc1fb459b7a 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.33", + "version": "5.0.0-beta.35", "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.", @@ -38,7 +38,7 @@ "typescript:module-augmentation": "node scripts/testModuleAugmentation.js" }, "dependencies": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.24.4", "@mui/base": "workspace:*", "@mui/core-downloads-tracker": "workspace:^", "@mui/system": "workspace:^", @@ -50,7 +50,7 @@ "devDependencies": { "@mui-internal/test-utils": "workspace:^", "@mui/material": "workspace:^", - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/prop-types": "^15.7.12", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx index 75f3d037825f8d..30638d94f6730a 100644 --- a/packages/mui-joy/src/Button/Button.tsx +++ b/packages/mui-joy/src/Button/Button.tsx @@ -139,6 +139,7 @@ export const getButtonStyles = ({ border: 'none', backgroundColor: 'transparent', cursor: 'pointer', + userSelect: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', diff --git a/packages/mui-joy/src/Table/Table.tsx b/packages/mui-joy/src/Table/Table.tsx index cffc5d1c300470..37a50b558621af 100644 --- a/packages/mui-joy/src/Table/Table.tsx +++ b/packages/mui-joy/src/Table/Table.tsx @@ -418,15 +418,11 @@ Table.propTypes /* remove-proptypes */ = { }), /** * If `true`, the footer always appear at the bottom of the overflow table. - * - * ⚠️ It doesn't work with IE11. * @default false */ stickyFooter: PropTypes.bool, /** * If `true`, the header always appear at the top of the overflow table. - * - * ⚠️ It doesn't work with IE11. * @default false */ stickyHeader: PropTypes.bool, diff --git a/packages/mui-joy/src/Table/TableProps.ts b/packages/mui-joy/src/Table/TableProps.ts index e87321e1e4747d..df683c4d344a68 100644 --- a/packages/mui-joy/src/Table/TableProps.ts +++ b/packages/mui-joy/src/Table/TableProps.ts @@ -65,15 +65,11 @@ export interface TableTypeMap<P = {}, D extends React.ElementType = 'table'> { size?: OverridableStringUnion<'sm' | 'md' | 'lg', TablePropsSizeOverrides>; /** * If `true`, the header always appear at the top of the overflow table. - * - * ⚠️ It doesn't work with IE11. * @default false */ stickyHeader?: boolean; /** * If `true`, the footer always appear at the bottom of the overflow table. - * - * ⚠️ It doesn't work with IE11. * @default false */ stickyFooter?: boolean; diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json index 59112f627e2625..4ba2dab61dbfaf 100644 --- a/packages/mui-lab/package.json +++ b/packages/mui-lab/package.json @@ -1,6 +1,6 @@ { "name": "@mui/lab", - "version": "6.0.0-alpha.0", + "version": "6.0.0-alpha.2", "private": false, "author": "MUI Team", "description": "Laboratory for new MUI modules.", @@ -41,7 +41,7 @@ "typescript": "tsc -p tsconfig.json" }, "dependencies": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.24.4", "@mui/base": "workspace:*", "@mui/system": "workspace:^", "@mui/types": "workspace:^", @@ -52,7 +52,7 @@ "devDependencies": { "@mui-internal/test-utils": "workspace:^", "@mui/material": "workspace:*", - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/prop-types": "^15.7.12", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", diff --git a/packages/mui-lab/src/TabPanel/TabPanel.d.ts b/packages/mui-lab/src/TabPanel/TabPanel.d.ts index 235ccbc3d6dc59..378190b80f60e7 100644 --- a/packages/mui-lab/src/TabPanel/TabPanel.d.ts +++ b/packages/mui-lab/src/TabPanel/TabPanel.d.ts @@ -22,6 +22,11 @@ export interface TabPanelProps extends StandardProps<React.HTMLAttributes<HTMLDi * no `value` was passed to `Tab`. */ value: string; + /** + * Always keep the children in the DOM. + * @default false + */ + keepMounted?: boolean; } /** diff --git a/packages/mui-lab/src/TabPanel/TabPanel.js b/packages/mui-lab/src/TabPanel/TabPanel.js index 7e3883cfd2756c..77f8fbc365c1d6 100644 --- a/packages/mui-lab/src/TabPanel/TabPanel.js +++ b/packages/mui-lab/src/TabPanel/TabPanel.js @@ -8,10 +8,10 @@ import { getTabPanelUtilityClass } from './tabPanelClasses'; import { getPanelId, getTabId, useTabContext } from '../TabContext'; const useUtilityClasses = (ownerState) => { - const { classes } = ownerState; + const { classes, hidden } = ownerState; const slots = { - root: ['root'], + root: ['root', hidden && 'hidden'], }; return composeClasses(slots, getTabPanelUtilityClass, classes); @@ -28,7 +28,7 @@ const TabPanelRoot = styled('div', { const TabPanel = React.forwardRef(function TabPanel(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiTabPanel' }); - const { children, className, value, ...other } = props; + const { children, className, value, keepMounted = false, ...other } = props; const ownerState = { ...props, @@ -54,7 +54,7 @@ const TabPanel = React.forwardRef(function TabPanel(inProps, ref) { ownerState={ownerState} {...other} > - {value === context.value && children} + {(keepMounted || value === context.value) && children} </TabPanelRoot> ); }); @@ -76,6 +76,11 @@ TabPanel.propTypes /* remove-proptypes */ = { * @ignore */ className: PropTypes.string, + /** + * Always keep the children in the DOM. + * @default false + */ + keepMounted: PropTypes.bool, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/mui-lab/src/TabPanel/TabPanel.test.tsx b/packages/mui-lab/src/TabPanel/TabPanel.test.tsx index ba0487616e45f9..bf6ec9394c9737 100644 --- a/packages/mui-lab/src/TabPanel/TabPanel.test.tsx +++ b/packages/mui-lab/src/TabPanel/TabPanel.test.tsx @@ -24,14 +24,17 @@ describe('<TabPanel />', () => { ], })); - it('renders a [role="tabpanel"]', () => { - const { getByTestId } = render( + it('renders a [role="tabpanel"] and mounts children', () => { + const { getByTestId, queryByTestId } = render( <TabContext value="0"> - <TabPanel data-testid="tabpanel" value="0" /> + <TabPanel data-testid="tabpanel" value="0"> + <div data-testid="child" /> + </TabPanel> </TabContext>, ); expect(getByTestId('tabpanel')).to.have.attribute('role', 'tabpanel'); + expect(queryByTestId('child')).to.not.equal(null); }); it('is [hidden] when TabPanel#value !== TabContext#value and does not mount children', () => { @@ -47,6 +50,19 @@ describe('<TabPanel />', () => { expect(queryByTestId('child')).to.equal(null); }); + it('is [hidden] when TabPanel#value !== TabContext#value but does mount children when keepMounted', () => { + const { getByTestId, queryByTestId } = render( + <TabContext value="1"> + <TabPanel data-testid="tabpanel" value="0" keepMounted> + <div data-testid="child" /> + </TabPanel> + </TabContext>, + ); + + expect(getByTestId('tabpanel')).to.have.property('hidden', true); + expect(queryByTestId('child')).to.not.equal(null); + }); + it('is accessible when TabPanel#value === TabContext#value', () => { const { getByTestId } = render( <TabContext value="0"> diff --git a/packages/mui-lab/src/TabPanel/tabPanelClasses.ts b/packages/mui-lab/src/TabPanel/tabPanelClasses.ts index 0adc5d0626c42d..cbcff1befa4d5d 100644 --- a/packages/mui-lab/src/TabPanel/tabPanelClasses.ts +++ b/packages/mui-lab/src/TabPanel/tabPanelClasses.ts @@ -4,6 +4,8 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; export interface TabPanelClasses { /** Styles applied to the root element. */ root: string; + /** State class applied to the root `div` element if `hidden={true}`. */ + hidden: string; } export type TabPanelClassKey = keyof TabPanelClasses; @@ -12,6 +14,6 @@ export function getTabPanelUtilityClass(slot: string): string { return generateUtilityClass('MuiTabPanel', slot); } -const tabPanelClasses: TabPanelClasses = generateUtilityClasses('MuiTabPanel', ['root']); +const tabPanelClasses: TabPanelClasses = generateUtilityClasses('MuiTabPanel', ['root', 'hidden']); export default tabPanelClasses; diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json index 32ea01247a202c..6f916e47fe5983 100644 --- a/packages/mui-material-nextjs/package.json +++ b/packages/mui-material-nextjs/package.json @@ -37,7 +37,7 @@ "typescript": "tsc -p tsconfig.json" }, "dependencies": { - "@babel/runtime": "^7.23.9" + "@babel/runtime": "^7.24.4" }, "devDependencies": { "@emotion/cache": "^11.11.0", diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index 92b05ce454811e..f886dbe530351e 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material", - "version": "6.0.0-alpha.0", + "version": "6.0.0-alpha.2", "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.", @@ -42,7 +42,7 @@ "typescript:module-augmentation": "node scripts/testModuleAugmentation.js" }, "dependencies": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.24.4", "@mui/base": "workspace:*", "@mui/core-downloads-tracker": "workspace:^", "@mui/system": "workspace:^", @@ -62,21 +62,21 @@ "@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/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", - "playwright": "^1.42.1", + "playwright": "^1.43.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.21.3", + "react-router-dom": "^6.22.3", "rollup": "^3.29.4", "rollup-plugin-babel": "^4.4.0", "rollup-plugin-commonjs": "^10.1.0", 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/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 7153a43d09ded9..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; @@ -79,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/CircularProgress/CircularProgress.js b/packages/mui-material/src/CircularProgress/CircularProgress.js index 183b589359da0b..2b81f050eb44d5 100644 --- a/packages/mui-material/src/CircularProgress/CircularProgress.js +++ b/packages/mui-material/src/CircularProgress/CircularProgress.js @@ -4,12 +4,12 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import chainPropTypes from '@mui/utils/chainPropTypes'; import composeClasses from '@mui/utils/composeClasses'; -import { keyframes, css } from '@mui/system'; +import { keyframes, css, createUseThemeProps, styled } from '../zero-styled'; import capitalize from '../utils/capitalize'; -import useThemeProps from '../styles/useThemeProps'; -import styled from '../styles/styled'; import { getCircularProgressUtilityClass } from './circularProgressClasses'; +const useThemeProps = createUseThemeProps('MuiCircularProgress'); + const SIZE = 44; const circularRotateKeyframe = keyframes` @@ -39,6 +39,14 @@ const circularDashKeyframe = keyframes` } `; +const rotateAnimation = css` + animation: ${circularRotateKeyframe} 1.4s linear infinite; +`; + +const dashAnimation = css` + animation: ${circularDashKeyframe} 1.4s ease-in-out infinite; +`; + const useUtilityClasses = (ownerState) => { const { classes, variant, color, disableShrink } = ownerState; @@ -63,22 +71,39 @@ const CircularProgressRoot = styled('span', { styles[`color${capitalize(ownerState.color)}`], ]; }, -})( - ({ ownerState, theme }) => ({ - display: 'inline-block', - ...(ownerState.variant === 'determinate' && { - transition: theme.transitions.create('transform'), - }), - ...(ownerState.color !== 'inherit' && { - color: (theme.vars || theme).palette[ownerState.color].main, - }), - }), - ({ ownerState }) => - ownerState.variant === 'indeterminate' && - css` - animation: ${circularRotateKeyframe} 1.4s linear infinite; - `, -); +})(({ theme }) => ({ + display: 'inline-block', + variants: [ + { + props: { + variant: 'determinate', + }, + style: { + transition: theme.transitions.create('transform'), + }, + }, + { + props: { + variant: 'indeterminate', + }, + style: + // For Styled-components v4+: https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12 + rotateAnimation !== 'string' + ? rotateAnimation + : { + animation: `${circularRotateKeyframe} 1.4s linear infinite`, + }, + }, + ...Object.entries(theme.palette) + .filter(([, palette]) => palette.main) + .map(([color]) => ({ + props: { color }, + style: { + color: (theme.vars || theme).palette[color].main, + }, + })), + ], +})); const CircularProgressSVG = styled('svg', { name: 'MuiCircularProgress', @@ -100,27 +125,40 @@ const CircularProgressCircle = styled('circle', { ownerState.disableShrink && styles.circleDisableShrink, ]; }, -})( - ({ ownerState, theme }) => ({ - stroke: 'currentColor', - // Use butt to follow the specification, by chance, it's already the default CSS value. - // strokeLinecap: 'butt', - ...(ownerState.variant === 'determinate' && { - transition: theme.transitions.create('stroke-dashoffset'), - }), - ...(ownerState.variant === 'indeterminate' && { - // Some default value that looks fine waiting for the animation to kicks in. - strokeDasharray: '80px, 200px', - strokeDashoffset: 0, // Add the unit to fix a Edge 16 and below bug. - }), - }), - ({ ownerState }) => - ownerState.variant === 'indeterminate' && - !ownerState.disableShrink && - css` - animation: ${circularDashKeyframe} 1.4s ease-in-out infinite; - `, -); +})(({ theme }) => ({ + stroke: 'currentColor', + variants: [ + { + props: { + variant: 'determinate', + }, + style: { + transition: theme.transitions.create('stroke-dashoffset'), + }, + }, + { + props: { + variant: 'indeterminate', + }, + style: { + // Some default value that looks fine waiting for the animation to kicks in. + strokeDasharray: '80px, 200px', + strokeDashoffset: 0, // Add the unit to fix a Edge 16 and below bug. + }, + }, + { + // For Styled-components v4+: https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12 + props: ({ ownerState }) => + ownerState.variant === 'indeterminate' && !ownerState.disableShrink, + style: + typeof dashAnimation !== 'string' + ? dashAnimation + : { + animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`, + }, + }, + ], +})); /** * ## ARIA diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js index 927c9b0f44e244..b88a9103d01389 100644 --- a/packages/mui-material/src/Dialog/Dialog.js +++ b/packages/mui-material/src/Dialog/Dialog.js @@ -182,6 +182,7 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) { fullWidth = false, maxWidth = 'sm', onBackdropClick, + onClick, onClose, open, PaperComponent = Paper, @@ -211,6 +212,10 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) { backdropClick.current = event.target === event.currentTarget; }; const handleBackdropClick = (event) => { + if (onClick) { + onClick(event); + } + // Ignore the events not coming from the "backdrop". if (!backdropClick.current) { return; @@ -360,6 +365,10 @@ Dialog.propTypes /* remove-proptypes */ = { * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events. */ onBackdropClick: PropTypes.func, + /** + * @ignore + */ + onClick: PropTypes.func, /** * Callback fired when the component requests to be closed. * diff --git a/packages/mui-material/src/Dialog/Dialog.test.js b/packages/mui-material/src/Dialog/Dialog.test.js index 7690dd907bf183..e17f7ac397d7de 100644 --- a/packages/mui-material/src/Dialog/Dialog.test.js +++ b/packages/mui-material/src/Dialog/Dialog.test.js @@ -187,6 +187,28 @@ describe('<Dialog />', () => { expect(onClose.callCount).to.equal(1); }); + it('calls onBackdropClick when onClick callback also exists', () => { + const onBackdropClick = spy(); + const onClick = spy(); + render( + <Dialog + onClick={onClick} + onClose={(event, reason) => { + if (reason === 'backdropClick') { + onBackdropClick(); + } + }} + open + > + foo + </Dialog>, + ); + + clickBackdrop(screen); + expect(onBackdropClick.callCount).to.equal(1); + expect(onClick.callCount).to.equal(1); + }); + it('should ignore the backdrop click if the event did not come from the backdrop', () => { const onBackdropClick = spy(); const { getByRole } = render( diff --git a/packages/mui-material/src/Fab/Fab.js b/packages/mui-material/src/Fab/Fab.js index 10f3ab80910ed0..bf80527ebd2f57 100644 --- a/packages/mui-material/src/Fab/Fab.js +++ b/packages/mui-material/src/Fab/Fab.js @@ -5,9 +5,11 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; -import useThemeProps from '../styles/useThemeProps'; import fabClasses, { getFabUtilityClass } from './fabClasses'; -import styled, { rootShouldForwardProp } from '../styles/styled'; +import { rootShouldForwardProp } from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; + +const useThemeProps = createUseThemeProps('MuiFab'); const useUtilityClasses = (ownerState) => { const { color, variant, classes, size } = ownerState; @@ -46,7 +48,7 @@ const FabRoot = styled(ButtonBase, { ]; }, })( - ({ theme, ownerState }) => ({ + ({ theme }) => ({ ...theme.typography.button, minHeight: 36, transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], { @@ -77,56 +79,79 @@ const FabRoot = styled(ButtonBase, { [`&.${fabClasses.focusVisible}`]: { boxShadow: (theme.vars || theme).shadows[6], }, - ...(ownerState.size === 'small' && { - width: 40, - height: 40, - }), - ...(ownerState.size === 'medium' && { - width: 48, - height: 48, - }), - ...(ownerState.variant === 'extended' && { - borderRadius: 48 / 2, - padding: '0 16px', - width: 'auto', - minHeight: 'auto', - minWidth: 48, - height: 48, - }), - ...(ownerState.variant === 'extended' && - ownerState.size === 'small' && { - width: 'auto', - padding: '0 8px', - borderRadius: 34 / 2, - minWidth: 34, - height: 34, - }), - ...(ownerState.variant === 'extended' && - ownerState.size === 'medium' && { - width: 'auto', - padding: '0 16px', - borderRadius: 40 / 2, - minWidth: 40, - height: 40, - }), - ...(ownerState.color === 'inherit' && { - color: 'inherit', - }), + variants: [ + { + props: { size: 'small' }, + style: { + width: 40, + height: 40, + }, + }, + { + props: { size: 'medium' }, + style: { + width: 48, + height: 48, + }, + }, + { + props: { variant: 'extended' }, + style: { + borderRadius: 48 / 2, + padding: '0 16px', + width: 'auto', + minHeight: 'auto', + minWidth: 48, + height: 48, + }, + }, + { + props: { variant: 'extended', size: 'small' }, + style: { + width: 'auto', + padding: '0 8px', + borderRadius: 34 / 2, + minWidth: 34, + height: 34, + }, + }, + { + props: { variant: 'extended', size: 'medium' }, + style: { + width: 'auto', + padding: '0 16px', + borderRadius: 40 / 2, + minWidth: 40, + height: 40, + }, + }, + { + props: { color: 'inherit' }, + style: { + color: 'inherit', + }, + }, + ], }), - ({ theme, ownerState }) => ({ - ...(ownerState.color !== 'inherit' && - ownerState.color !== 'default' && - (theme.vars || theme).palette[ownerState.color] != null && { - color: (theme.vars || theme).palette[ownerState.color].contrastText, - backgroundColor: (theme.vars || theme).palette[ownerState.color].main, - '&:hover': { - 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, + ({ theme }) => ({ + variants: [ + ...Object.entries(theme.palette) + .filter(([, value]) => value.main && value.dark && value.contrastText) // check all the used fields in the style below + .map(([color]) => ({ + props: { color }, + style: { + color: (theme.vars || theme).palette[color].contrastText, + backgroundColor: (theme.vars || theme).palette[color].main, + '&:hover': { + backgroundColor: (theme.vars || theme).palette[color].dark, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: (theme.vars || theme).palette[color].main, + }, + }, }, - }, - }), + })), + ], }), ({ theme }) => ({ [`&.${fabClasses.disabled}`]: { diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js index 3f51141d0587a9..0b65f22c60f365 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.js +++ b/packages/mui-material/src/PaginationItem/PaginationItem.js @@ -5,7 +5,6 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import { useRtl } from '@mui/system/RtlProvider'; -import useThemeProps from '../styles/useThemeProps'; import paginationItemClasses, { getPaginationItemUtilityClass } from './paginationItemClasses'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; @@ -13,7 +12,9 @@ import FirstPageIcon from '../internal/svg-icons/FirstPage'; import LastPageIcon from '../internal/svg-icons/LastPage'; import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore'; import NavigateNextIcon from '../internal/svg-icons/NavigateNext'; -import styled from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; + +const useThemeProps = createUseThemeProps('MuiPaginationItem'); const overridesResolver = (props, styles) => { const { ownerState } = props; @@ -65,7 +66,7 @@ const PaginationItemEllipsis = styled('div', { name: 'MuiPaginationItem', slot: 'Root', overridesResolver, -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ ...theme.typography.body2, borderRadius: 32 / 2, textAlign: 'center', @@ -78,185 +79,225 @@ const PaginationItemEllipsis = styled('div', { [`&.${paginationItemClasses.disabled}`]: { opacity: (theme.vars || theme).palette.action.disabledOpacity, }, - ...(ownerState.size === 'small' && { - minWidth: 26, - borderRadius: 26 / 2, - margin: '0 1px', - padding: '0 4px', - }), - ...(ownerState.size === 'large' && { - minWidth: 40, - borderRadius: 40 / 2, - padding: '0 10px', - fontSize: theme.typography.pxToRem(15), - }), + variants: [ + { + props: { size: 'small' }, + style: { + minWidth: 26, + borderRadius: 26 / 2, + margin: '0 1px', + padding: '0 4px', + }, + }, + { + props: { size: 'large' }, + style: { + minWidth: 40, + borderRadius: 40 / 2, + padding: '0 10px', + fontSize: theme.typography.pxToRem(15), + }, + }, + ], })); const PaginationItemPage = styled(ButtonBase, { name: 'MuiPaginationItem', slot: 'Root', overridesResolver, -})( - ({ theme, ownerState }) => ({ - ...theme.typography.body2, - borderRadius: 32 / 2, - textAlign: 'center', - boxSizing: 'border-box', - minWidth: 32, - height: 32, - padding: '0 6px', - margin: '0 3px', - color: (theme.vars || theme).palette.text.primary, - [`&.${paginationItemClasses.focusVisible}`]: { - backgroundColor: (theme.vars || theme).palette.action.focus, - }, - [`&.${paginationItemClasses.disabled}`]: { - opacity: (theme.vars || theme).palette.action.disabledOpacity, +})(({ theme }) => ({ + ...theme.typography.body2, + borderRadius: 32 / 2, + textAlign: 'center', + boxSizing: 'border-box', + minWidth: 32, + height: 32, + padding: '0 6px', + margin: '0 3px', + color: (theme.vars || theme).palette.text.primary, + [`&.${paginationItemClasses.focusVisible}`]: { + backgroundColor: (theme.vars || theme).palette.action.focus, + }, + [`&.${paginationItemClasses.disabled}`]: { + opacity: (theme.vars || theme).palette.action.disabledOpacity, + }, + transition: theme.transitions.create(['color', 'background-color'], { + duration: theme.transitions.duration.short, + }), + '&:hover': { + backgroundColor: (theme.vars || theme).palette.action.hover, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', }, - transition: theme.transitions.create(['color', 'background-color'], { - duration: theme.transitions.duration.short, - }), + }, + [`&.${paginationItemClasses.selected}`]: { + backgroundColor: (theme.vars || theme).palette.action.selected, '&:hover': { - backgroundColor: (theme.vars || theme).palette.action.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, + ), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { - backgroundColor: 'transparent', + backgroundColor: (theme.vars || theme).palette.action.selected, }, }, - [`&.${paginationItemClasses.selected}`]: { + [`&.${paginationItemClasses.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, + ), + }, + [`&.${paginationItemClasses.disabled}`]: { + opacity: 1, + color: (theme.vars || theme).palette.action.disabled, backgroundColor: (theme.vars || theme).palette.action.selected, - '&: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, - ), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: (theme.vars || theme).palette.action.selected, - }, + }, + }, + variants: [ + { + props: { size: 'small' }, + style: { + minWidth: 26, + height: 26, + borderRadius: 26 / 2, + margin: '0 1px', + padding: '0 4px', }, - [`&.${paginationItemClasses.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, - ), + }, + { + props: { size: 'large' }, + style: { + minWidth: 40, + height: 40, + borderRadius: 40 / 2, + padding: '0 10px', + fontSize: theme.typography.pxToRem(15), }, - [`&.${paginationItemClasses.disabled}`]: { - opacity: 1, - color: (theme.vars || theme).palette.action.disabled, - backgroundColor: (theme.vars || theme).palette.action.selected, + }, + { + props: { shape: 'rounded' }, + style: { + borderRadius: (theme.vars || theme).shape.borderRadius, }, }, - ...(ownerState.size === 'small' && { - minWidth: 26, - height: 26, - borderRadius: 26 / 2, - margin: '0 1px', - padding: '0 4px', - }), - ...(ownerState.size === 'large' && { - minWidth: 40, - height: 40, - borderRadius: 40 / 2, - padding: '0 10px', - fontSize: theme.typography.pxToRem(15), - }), - ...(ownerState.shape === 'rounded' && { - borderRadius: (theme.vars || theme).shape.borderRadius, - }), - }), - ({ theme, ownerState }) => ({ - ...(ownerState.variant === 'text' && { - [`&.${paginationItemClasses.selected}`]: { - ...(ownerState.color !== 'standard' && { - color: (theme.vars || theme).palette[ownerState.color].contrastText, - backgroundColor: (theme.vars || theme).palette[ownerState.color].main, - '&:hover': { - 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, - }, + { + props: { variant: 'outlined' }, + style: { + border: 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)' + }`, + [`&.${paginationItemClasses.selected}`]: { + [`&.${paginationItemClasses.disabled}`]: { + borderColor: (theme.vars || theme).palette.action.disabledBackground, + color: (theme.vars || theme).palette.action.disabled, }, - [`&.${paginationItemClasses.focusVisible}`]: { - backgroundColor: (theme.vars || theme).palette[ownerState.color].dark, + }, + }, + }, + { + props: { variant: 'text' }, + style: { + [`&.${paginationItemClasses.selected}`]: { + [`&.${paginationItemClasses.disabled}`]: { + color: (theme.vars || theme).palette.action.disabled, }, - }), - [`&.${paginationItemClasses.disabled}`]: { - color: (theme.vars || theme).palette.action.disabled, }, }, - }), - ...(ownerState.variant === 'outlined' && { - border: 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)' - }`, - [`&.${paginationItemClasses.selected}`]: { - ...(ownerState.color !== 'standard' && { - color: (theme.vars || theme).palette[ownerState.color].main, - border: `1px solid ${ - theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` - : alpha(theme.palette[ownerState.color].main, 0.5) - }`, - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${ - theme.vars.palette.action.activatedOpacity - })` - : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity), - '&:hover': { - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${ - theme.vars.palette.action.activatedOpacity - } + ${theme.vars.palette.action.focusOpacity}))` - : alpha( - theme.palette[ownerState.color].main, - theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity, - ), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: 'transparent', + }, + ...Object.entries(theme.palette) + .filter(([, value]) => value.main && value.dark && value.contrastText) + .map(([color]) => ({ + props: { variant: 'text', color }, + style: { + [`&.${paginationItemClasses.selected}`]: { + color: (theme.vars || theme).palette[color].contrastText, + backgroundColor: (theme.vars || theme).palette[color].main, + '&:hover': { + backgroundColor: (theme.vars || theme).palette[color].dark, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: (theme.vars || theme).palette[color].main, + }, + }, + [`&.${paginationItemClasses.focusVisible}`]: { + backgroundColor: (theme.vars || theme).palette[color].dark, + }, + [`&.${paginationItemClasses.disabled}`]: { + color: (theme.vars || theme).palette.action.disabled, }, }, - [`&.${paginationItemClasses.focusVisible}`]: { + }, + })), + ...Object.entries(theme.palette) + .filter(([, value]) => value.main && value.light) + .map(([color]) => ({ + props: { variant: 'outlined', color }, + style: { + [`&.${paginationItemClasses.selected}`]: { + color: (theme.vars || theme).palette[color].main, + border: `1px solid ${ + theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` + : alpha(theme.palette[color].main, 0.5) + }`, backgroundColor: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${ - theme.vars.palette.action.activatedOpacity - } + ${theme.vars.palette.action.focusOpacity}))` - : alpha( - theme.palette[ownerState.color].main, - theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity, - ), + ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` + : alpha(theme.palette[color].main, theme.palette.action.activatedOpacity), + '&:hover': { + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` + : alpha( + theme.palette[color].main, + theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity, + ), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', + }, + }, + [`&.${paginationItemClasses.focusVisible}`]: { + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` + : alpha( + theme.palette[color].main, + theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity, + ), + }, }, - }), - [`&.${paginationItemClasses.disabled}`]: { - borderColor: (theme.vars || theme).palette.action.disabledBackground, - color: (theme.vars || theme).palette.action.disabled, }, - }, - }), - }), -); + })), + ], +})); const PaginationItemPageIcon = styled('div', { name: 'MuiPaginationItem', slot: 'Icon', overridesResolver: (props, styles) => styles.icon, -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ fontSize: theme.typography.pxToRem(20), margin: '0 -8px', - ...(ownerState.size === 'small' && { - fontSize: theme.typography.pxToRem(18), - }), - ...(ownerState.size === 'large' && { - fontSize: theme.typography.pxToRem(22), - }), + variants: [ + { + props: { size: 'small' }, + style: { + fontSize: theme.typography.pxToRem(18), + }, + }, + { + props: { size: 'large' }, + style: { + fontSize: theme.typography.pxToRem(22), + }, + }, + ], })); const PaginationItem = React.forwardRef(function PaginationItem(inProps, ref) { diff --git a/packages/mui-material/src/Select/Select.d.ts b/packages/mui-material/src/Select/Select.d.ts index c39944e1e0ded8..f4984bdc71f84d 100644 --- a/packages/mui-material/src/Select/Select.d.ts +++ b/packages/mui-material/src/Select/Select.d.ts @@ -151,7 +151,8 @@ export interface BaseSelectProps<Value = unknown> variant?: SelectVariants; } -export interface FilledSelectProps extends Omit<FilledInputProps, 'value' | 'onChange'> { +export interface FilledSelectProps + extends Omit<FilledInputProps, 'value' | 'onChange' | 'id' | 'classes' | 'inputProps'> { /** * The variant to use. * @default 'outlined' @@ -159,7 +160,8 @@ export interface FilledSelectProps extends Omit<FilledInputProps, 'value' | 'onC variant: 'filled'; } -export interface StandardSelectProps extends Omit<InputProps, 'value' | 'onChange'> { +export interface StandardSelectProps + extends Omit<InputProps, 'value' | 'onChange' | 'id' | 'classes' | 'inputProps'> { /** * The variant to use. * @default 'outlined' @@ -167,7 +169,8 @@ export interface StandardSelectProps extends Omit<InputProps, 'value' | 'onChang variant: 'standard'; } -export interface OutlinedSelectProps extends Omit<OutlinedInputProps, 'value' | 'onChange'> { +export interface OutlinedSelectProps + extends Omit<OutlinedInputProps, 'value' | 'onChange' | 'id' | 'classes' | 'inputProps'> { /** * The variant to use. * @default 'outlined' @@ -193,8 +196,8 @@ export type SelectProps<Value = unknown> = * - [Select API](https://mui.com/material-ui/api/select/) * - inherits [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/) */ -export default function Select<Value = unknown>( - props: SelectProps<Value>, -): JSX.Element & { +declare const Select: (<Value = unknown>(props: SelectProps<Value>) => JSX.Element) & { muiName: string; }; + +export default Select; diff --git a/packages/mui-material/src/Select/Select.spec.tsx b/packages/mui-material/src/Select/Select.spec.tsx index 78f69c76c606d0..0aaa8004646534 100644 --- a/packages/mui-material/src/Select/Select.spec.tsx +++ b/packages/mui-material/src/Select/Select.spec.tsx @@ -196,3 +196,6 @@ const AppSelect = <T extends string>(props: Props<T>) => { </Select> ); }; + +// test for applying Select's static muiName property type to wrapper components +AppSelect.muiName = Select.muiName; diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index 5b5ed8c9e97f61..f87f34f51bdd68 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -277,6 +277,30 @@ export const SliderThumb = styled('span', { }, }, variants: [ + { + props: { size: 'small' }, + style: { + width: 12, + height: 12, + '&::before': { + boxShadow: 'none', + }, + }, + }, + { + props: { orientation: 'horizontal' }, + style: { + top: '50%', + transform: 'translate(-50%, -50%)', + }, + }, + { + props: { orientation: 'vertical' }, + style: { + left: '50%', + transform: 'translate(-50%, 50%)', + }, + }, ...Object.keys((theme.vars ?? theme).palette) .filter((key) => (theme.vars ?? theme).palette[key].main) .map((color) => ({ @@ -305,30 +329,6 @@ export const SliderThumb = styled('span', { }, }, })), - { - props: { size: 'small' }, - style: { - width: 12, - height: 12, - '&::before': { - boxShadow: 'none', - }, - }, - }, - { - props: { orientation: 'horizontal' }, - style: { - top: '50%', - transform: 'translate(-50%, -50%)', - }, - }, - { - props: { orientation: 'vertical' }, - style: { - left: '50%', - transform: 'translate(-50%, 50%)', - }, - }, ], })); diff --git a/packages/mui-material/src/StepConnector/stepConnectorClasses.ts b/packages/mui-material/src/StepConnector/stepConnectorClasses.ts index 30f6fb2f3fa54f..a7f46ca2880c9f 100644 --- a/packages/mui-material/src/StepConnector/stepConnectorClasses.ts +++ b/packages/mui-material/src/StepConnector/stepConnectorClasses.ts @@ -18,9 +18,13 @@ export interface StepConnectorClasses { disabled: string; /** Styles applied to the line element. */ line: string; - /** Styles applied to the root element if `orientation="horizontal"`. */ + /** Styles applied to the line element if `orientation="horizontal"`. + * @deprecated Combine the [.MuiStepConnector-horizontal](/material-ui/api/step-connector/#step-connector-classes-horizontal) and [.MuiStepConnector-line](/material-ui/api/step-connector/#step-connector-classes-line) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ lineHorizontal: string; - /** Styles applied to the root element if `orientation="vertical"`. */ + /** Styles applied to the line element if `orientation="vertical"`. + * @deprecated Combine the [.MuiStepConnector-vertical](/material-ui/api/step-connector/#step-connector-classes-vertical) and [.MuiStepConnector-line](/material-ui/api/step-connector/#step-connector-classes-line) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ lineVertical: string; } diff --git a/packages/mui-material/src/StepLabel/StepLabel.d.ts b/packages/mui-material/src/StepLabel/StepLabel.d.ts index bd389907657f0d..b47182a67a9623 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.d.ts +++ b/packages/mui-material/src/StepLabel/StepLabel.d.ts @@ -12,12 +12,17 @@ export interface StepLabelSlots { * @default span */ label?: React.ElementType; + /** + * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/). + */ + stepIcon?: React.ElementType<StepIconProps>; } export type StepLabelSlotsAndSlotProps = CreateSlotsAndSlotProps< StepLabelSlots, { label: SlotProps<React.ElementType<React.HTMLProps<HTMLSpanElement>>, {}, StepLabelOwnerState>; + stepIcon: SlotProps<React.ElementType<StepIconProps>, {}, StepLabelOwnerState>; } >; @@ -61,10 +66,12 @@ export interface StepLabelProps optional?: React.ReactNode; /** * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/). + * @deprecated Use `slots.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ StepIconComponent?: React.ElementType<StepIconProps>; /** * Props applied to the [`StepIcon`](/material-ui/api/step-icon/) element. + * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ StepIconProps?: Partial<StepIconProps>; /** diff --git a/packages/mui-material/src/StepLabel/StepLabel.js b/packages/mui-material/src/StepLabel/StepLabel.js index 42efdda24b6a68..585941fad0ecec 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.js +++ b/packages/mui-material/src/StepLabel/StepLabel.js @@ -165,6 +165,7 @@ const StepLabel = React.forwardRef(function StepLabel(inProps, ref) { const externalForwardedProps = { slots, slotProps: { + stepIcon: StepIconProps, ...componentsProps, ...slotProps, }, @@ -176,6 +177,12 @@ const StepLabel = React.forwardRef(function StepLabel(inProps, ref) { ownerState, }); + const [StepIconSlot, stepIconProps] = useSlot('stepIcon', { + elementType: StepIconComponent, + externalForwardedProps, + ownerState, + }); + return ( <StepLabelRoot className={clsx(classes.root, className)} @@ -183,14 +190,14 @@ const StepLabel = React.forwardRef(function StepLabel(inProps, ref) { ownerState={ownerState} {...other} > - {icon || StepIconComponent ? ( + {icon || StepIconSlot ? ( <StepLabelIconContainer className={classes.iconContainer} ownerState={ownerState}> - <StepIconComponent + <StepIconSlot completed={completed} active={active} error={error} icon={icon} - {...StepIconProps} + {...stepIconProps} /> </StepLabelIconContainer> ) : null} @@ -250,6 +257,7 @@ StepLabel.propTypes /* remove-proptypes */ = { */ slotProps: PropTypes.shape({ label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + stepIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), }), /** * The components used for each slot inside. @@ -257,13 +265,16 @@ StepLabel.propTypes /* remove-proptypes */ = { */ slots: PropTypes.shape({ label: PropTypes.elementType, + stepIcon: PropTypes.elementType, }), /** * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/). + * @deprecated Use `slots.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ StepIconComponent: PropTypes.elementType, /** * Props applied to the [`StepIcon`](/material-ui/api/step-icon/) element. + * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ StepIconProps: PropTypes.object, /** diff --git a/packages/mui-material/src/Table/Table.d.ts b/packages/mui-material/src/Table/Table.d.ts index cbc37912c61bbf..4327d327dc68b9 100644 --- a/packages/mui-material/src/Table/Table.d.ts +++ b/packages/mui-material/src/Table/Table.d.ts @@ -28,8 +28,6 @@ export interface TableOwnProps { size?: OverridableStringUnion<'small' | 'medium', TablePropsSizeOverrides>; /** * Set the header sticky. - * - * ⚠️ It doesn't work with IE11. * @default false */ stickyHeader?: boolean; diff --git a/packages/mui-material/src/Table/Table.js b/packages/mui-material/src/Table/Table.js index 33201ca6ae94ab..8690bf2017f2a0 100644 --- a/packages/mui-material/src/Table/Table.js +++ b/packages/mui-material/src/Table/Table.js @@ -122,8 +122,6 @@ Table.propTypes /* remove-proptypes */ = { ]), /** * Set the header sticky. - * - * ⚠️ It doesn't work with IE11. * @default false */ stickyHeader: PropTypes.bool, diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.js b/packages/mui-material/src/ToggleButton/ToggleButton.js index bfa15b63247e6a..c9224e80889d4f 100644 --- a/packages/mui-material/src/ToggleButton/ToggleButton.js +++ b/packages/mui-material/src/ToggleButton/ToggleButton.js @@ -5,16 +5,17 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import resolveProps from '@mui/utils/resolveProps'; import composeClasses from '@mui/utils/composeClasses'; -import { alpha } from '../styles'; +import { alpha } from '@mui/system/colorManipulator'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; -import useThemeProps from '../styles/useThemeProps'; -import styled from '../styles/styled'; +import { createUseThemeProps, styled } from '../zero-styled'; import toggleButtonClasses, { getToggleButtonUtilityClass } from './toggleButtonClasses'; import ToggleButtonGroupContext from '../ToggleButtonGroup/ToggleButtonGroupContext'; import ToggleButtonGroupButtonContext from '../ToggleButtonGroup/ToggleButtonGroupButtonContext'; import isValueSelected from '../ToggleButtonGroup/isValueSelected'; +const useThemeProps = createUseThemeProps('MuiToggleButton'); + const useUtilityClasses = (ownerState) => { const { classes, fullWidth, selected, disabled, size, color } = ownerState; @@ -40,76 +41,105 @@ const ToggleButtonRoot = styled(ButtonBase, { return [styles.root, styles[`size${capitalize(ownerState.size)}`]]; }, -})(({ theme, ownerState }) => { - let selectedColor = - ownerState.color === 'standard' - ? theme.palette.text.primary - : theme.palette[ownerState.color].main; - let selectedColorChannel; - if (theme.vars) { - selectedColor = - ownerState.color === 'standard' - ? theme.vars.palette.text.primary - : theme.vars.palette[ownerState.color].main; - selectedColorChannel = - ownerState.color === 'standard' - ? theme.vars.palette.text.primaryChannel - : theme.vars.palette[ownerState.color].mainChannel; - } - - return { - ...theme.typography.button, - borderRadius: (theme.vars || theme).shape.borderRadius, - padding: 11, - border: `1px solid ${(theme.vars || theme).palette.divider}`, - color: (theme.vars || theme).palette.action.active, - ...(ownerState.fullWidth && { - width: '100%', - }), - [`&.${toggleButtonClasses.disabled}`]: { - color: (theme.vars || theme).palette.action.disabled, - border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`, +})(({ theme }) => ({ + ...theme.typography.button, + borderRadius: (theme.vars || theme).shape.borderRadius, + padding: 11, + border: `1px solid ${(theme.vars || theme).palette.divider}`, + color: (theme.vars || theme).palette.action.active, + [`&.${toggleButtonClasses.disabled}`]: { + color: (theme.vars || theme).palette.action.disabled, + border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`, + }, + '&:hover': { + textDecoration: 'none', + // Reset on mouse devices + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` + : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity), + '@media (hover: none)': { + backgroundColor: 'transparent', }, - '&:hover': { - textDecoration: 'none', - // Reset on mouse devices - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` - : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity), - '@media (hover: none)': { - backgroundColor: 'transparent', + }, + variants: [ + { + props: { color: 'standard' }, + style: { + [`&.${toggleButtonClasses.selected}`]: { + color: (theme.vars || theme).palette.text.primary, + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})` + : alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity), + '&:hover': { + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.text.primaryChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` + : alpha( + theme.palette.text.primary, + theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity, + ), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})` + : alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity), + }, + }, + }, }, }, - [`&.${toggleButtonClasses.selected}`]: { - color: selectedColor, - backgroundColor: theme.vars - ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})` - : alpha(selectedColor, theme.palette.action.selectedOpacity), - '&:hover': { - backgroundColor: theme.vars - ? `rgba(${selectedColorChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` - : alpha( - selectedColor, - theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity, - ), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: theme.vars - ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})` - : alpha(selectedColor, theme.palette.action.selectedOpacity), + ...Object.keys((theme.vars || theme).palette) + .filter((key) => + theme.vars + ? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel + : theme.palette[key].main, + ) + .map((color) => ({ + props: { color }, + style: { + [`&.${toggleButtonClasses.selected}`]: { + color: (theme.vars || theme).palette[color].main, + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.selectedOpacity})` + : alpha(theme.palette[color].main, theme.palette.action.selectedOpacity), + '&:hover': { + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` + : alpha( + theme.palette[color].main, + theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity, + ), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.selectedOpacity})` + : alpha(theme.palette[color].main, theme.palette.action.selectedOpacity), + }, + }, + }, }, + })), + { + props: { fullWidth: true }, + style: { + width: '100%', }, }, - ...(ownerState.size === 'small' && { - padding: 7, - fontSize: theme.typography.pxToRem(13), - }), - ...(ownerState.size === 'large' && { - padding: 15, - fontSize: theme.typography.pxToRem(15), - }), - }; -}); + { + props: { size: 'small' }, + style: { + padding: 7, + fontSize: theme.typography.pxToRem(13), + }, + }, + { + props: { size: 'large' }, + style: { + padding: 15, + fontSize: theme.typography.pxToRem(15), + }, + }, + ], +})); const ToggleButton = React.forwardRef(function ToggleButton(inProps, ref) { // props priority: `inProps` > `contextProps` > `themeDefaultProps` diff --git a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js index 799cf46053b912..73e31065a0c4c1 100644 --- a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js +++ b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js @@ -5,8 +5,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import getValidReactChildren from '@mui/utils/getValidReactChildren'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import capitalize from '../utils/capitalize'; import toggleButtonGroupClasses, { getToggleButtonGroupUtilityClass, @@ -15,11 +14,13 @@ import ToggleButtonGroupContext from './ToggleButtonGroupContext'; import ToggleButtonGroupButtonContext from './ToggleButtonGroupButtonContext'; import toggleButtonClasses from '../ToggleButton/toggleButtonClasses'; +const useThemeProps = createUseThemeProps('MuiToggleButtonGroup'); + const useUtilityClasses = (ownerState) => { const { classes, orientation, fullWidth, disabled } = ownerState; const slots = { - root: ['root', orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth'], + root: ['root', orientation, fullWidth && 'fullWidth'], grouped: ['grouped', `grouped${capitalize(orientation)}`, disabled && 'disabled'], firstButton: ['firstButton'], lastButton: ['lastButton'], @@ -55,47 +56,21 @@ const ToggleButtonGroupRoot = styled('div', { ownerState.fullWidth && styles.fullWidth, ]; }, -})(({ ownerState, theme }) => ({ +})(({ theme }) => ({ display: 'inline-flex', borderRadius: (theme.vars || theme).shape.borderRadius, - ...(ownerState.orientation === 'vertical' && { - flexDirection: 'column', - }), - ...(ownerState.fullWidth && { - width: '100%', - }), - [`& .${toggleButtonGroupClasses.grouped}`]: { - ...(ownerState.orientation === 'horizontal' - ? { - [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: - { - borderLeft: 0, - marginLeft: 0, - }, - } - : { + variants: [ + { + props: { orientation: 'vertical' }, + style: { + flexDirection: 'column', + [`& .${toggleButtonGroupClasses.grouped}`]: { [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: { borderTop: 0, marginTop: 0, }, - }), - }, - ...(ownerState.orientation === 'horizontal' - ? { - [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: - { - borderTopRightRadius: 0, - borderBottomRightRadius: 0, - }, - [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: { - marginLeft: -1, - borderLeft: '1px solid transparent', - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, }, - } - : { [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: { borderBottomLeftRadius: 0, @@ -107,20 +82,46 @@ const ToggleButtonGroupRoot = styled('div', { borderTopLeftRadius: 0, borderTopRightRadius: 0, }, - }), - ...(ownerState.orientation === 'horizontal' - ? { [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: { - borderLeft: '1px solid transparent', + borderTop: '1px solid transparent', }, - } - : { + }, + }, + { + props: { fullWidth: true }, + style: { + width: '100%', + }, + }, + { + props: { orientation: 'horizontal' }, + style: { + [`& .${toggleButtonGroupClasses.grouped}`]: { + [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: + { + borderLeft: 0, + marginLeft: 0, + }, + }, + [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: + { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + }, + [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: { + marginLeft: -1, + borderLeft: '1px solid transparent', + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: { - borderTop: '1px solid transparent', + borderLeft: '1px solid transparent', }, - }), + }, + }, + ], })); const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup(inProps, ref) { diff --git a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.test.js b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.test.js index 142ffc45a3ef5e..385ae149f5d6a7 100644 --- a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.test.js +++ b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.test.js @@ -39,6 +39,15 @@ describe('<ToggleButtonGroup />', () => { expect(getByRole('button')).to.have.class('MuiToggleButtonGroup-groupedVertical'); }); + it('should have horizontal class', () => { + const { getByRole } = render( + <ToggleButtonGroup> + <ToggleButton value="one">1</ToggleButton> + </ToggleButtonGroup>, + ); + expect(getByRole('group')).to.have.class(classes.horizontal); + }); + it('should disable all ToggleButton if disabled prop is passed', () => { render( <ToggleButtonGroup disabled> diff --git a/packages/mui-material/src/ToggleButtonGroup/toggleButtonGroupClasses.ts b/packages/mui-material/src/ToggleButtonGroup/toggleButtonGroupClasses.ts index 75cf854a4d59fc..d4a133d61996f7 100644 --- a/packages/mui-material/src/ToggleButtonGroup/toggleButtonGroupClasses.ts +++ b/packages/mui-material/src/ToggleButtonGroup/toggleButtonGroupClasses.ts @@ -4,15 +4,21 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass'; export interface ToggleButtonGroupClasses { /** Styles applied to the root element. */ root: string; + /** Styles applied to the root element if `orientation="horizontal"`. */ + horizontal: string; /** Styles applied to the root element if `orientation="vertical"`. */ vertical: string; /** State class applied to the root element if `disabled={true}`. */ disabled: string; /** Styles applied to the children. */ grouped: string; - /** Styles applied to the children if `orientation="horizontal"`. */ + /** Styles applied to the children if `orientation="horizontal"`. + * @deprecated Combine the [.MuiToggleButtonGroup-horizontal](/material-ui/api/toggle-button-group/#toggle-button-group-classes-horizontal) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-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 [.MuiToggleButtonGroup-vertical](/material-ui/api/toggle-button-group/#toggle-button-group-classes-vertical) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ groupedVertical: string; /** Styles applied to the root element if `fullWidth={true}`. */ fullWidth: string; @@ -35,6 +41,7 @@ const toggleButtonGroupClasses: ToggleButtonGroupClasses = generateUtilityClasse [ 'root', 'selected', + 'horizontal', 'vertical', 'disabled', 'grouped', diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js index 0f917f9d9a0318..36201f1829f952 100644 --- a/packages/mui-material/src/Typography/Typography.js +++ b/packages/mui-material/src/Typography/Typography.js @@ -46,6 +46,8 @@ export const TypographyRoot = styled('span', { ...(ownerState.variant === 'inherit' && { // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this. font: 'inherit', + lineHeight: 'inherit', + letterSpacing: 'inherit', }), ...(ownerState.variant !== 'inherit' && theme.typography[ownerState.variant]), ...(ownerState.align !== 'inherit' && { diff --git a/packages/mui-material/src/locale/index.ts b/packages/mui-material/src/locale/index.ts index cc37e2429ab0ac..c6c494c16f96f8 100644 --- a/packages/mui-material/src/locale/index.ts +++ b/packages/mui-material/src/locale/index.ts @@ -1864,7 +1864,7 @@ export const isIS: Localization = { }, labelRowsPerPage: 'Raðir á síðu:', labelDisplayedRows: ({ from, to, count }) => - `${from}–${to} af ${count !== -1 ? count : `fleiri enn ${to}`}`, + `${from}–${to} af ${count !== -1 ? count : `fleiri en ${to}`}`, }, }, MuiRating: { diff --git a/packages/mui-material/src/zero-styled/index.ts b/packages/mui-material/src/zero-styled/index.ts index fc74b033f7d4a6..deff4b2bff07a0 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 { css, 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..7bf488f86cb475 100644 --- a/packages/mui-private-theming/package.json +++ b/packages/mui-private-theming/package.json @@ -1,6 +1,6 @@ { "name": "@mui/private-theming", - "version": "5.15.14", + "version": "6.0.0-alpha.1", "private": false, "author": "MUI Team", "description": "Private - The React theme context to be shared between `@mui/styles` and `@mui/material`.", @@ -38,14 +38,14 @@ "typescript": "tsc -p tsconfig.json" }, "dependencies": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.24.4", "@mui/utils": "workspace:^", "prop-types": "^15.8.1" }, "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/package.json b/packages/mui-styled-engine-sc/package.json index 2ba63a9e22c951..5e850007c2b664 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.19", + "version": "6.0.0-alpha.20", "private": false, "author": "MUI Team", "description": "styled() API wrapper package for styled-components.", @@ -38,7 +38,7 @@ "typescript": "tsc -p tsconfig.json" }, "dependencies": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.24.4", "csstype": "^3.1.3", "hoist-non-react-statics": "^3.3.2", "prop-types": "^15.8.1" @@ -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/package.json b/packages/mui-styled-engine/package.json index 1b80bf09f9dc75..3f8e17d2c0f092 100644 --- a/packages/mui-styled-engine/package.json +++ b/packages/mui-styled-engine/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styled-engine", - "version": "6.0.0-alpha.0", + "version": "6.0.0-alpha.1", "private": false, "author": "MUI Team", "description": "styled() API wrapper package for emotion.", @@ -38,17 +38,17 @@ "typescript": "tsc -p tsconfig.json" }, "dependencies": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.24.4", "@emotion/cache": "^11.11.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "devDependencies": { "@emotion/react": "^11.11.4", - "@emotion/styled": "^11.11.0", + "@emotion/styled": "^11.11.5", "@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/package.json b/packages/mui-styles/package.json index e38671a510ee77..25fb2d11243519 100644 --- a/packages/mui-styles/package.json +++ b/packages/mui-styles/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styles", - "version": "6.0.0-alpha.0", + "version": "6.0.0-alpha.2", "private": false, "author": "MUI Team", "description": "MUI Styles - The legacy JSS-based styling solution of Material UI.", @@ -38,7 +38,7 @@ "typescript": "tsc -p tsconfig.json" }, "dependencies": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.24.4", "@emotion/hash": "^0.9.1", "@mui/private-theming": "workspace:^", "@mui/types": "workspace:^", @@ -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/package.json b/packages/mui-system/package.json index 4d390686761376..7a6bb48a0104fe 100644 --- a/packages/mui-system/package.json +++ b/packages/mui-system/package.json @@ -1,6 +1,6 @@ { "name": "@mui/system", - "version": "6.0.0-alpha.0", + "version": "6.0.0-alpha.1", "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.", @@ -40,7 +40,7 @@ "typescript:module-augmentation": "node scripts/testModuleAugmentation.js" }, "dependencies": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.24.4", "@mui/private-theming": "workspace:^", "@mui/styled-engine": "workspace:^", "@mui/types": "workspace:^", @@ -51,11 +51,11 @@ }, "devDependencies": { "@emotion/react": "^11.11.4", - "@emotion/styled": "^11.11.0", + "@emotion/styled": "^11.11.5", "@mui-internal/test-utils": "workspace:^", "@mui/internal-babel-macros": "workspace:^", "@mui/system": "workspace:*", - "@types/chai": "^4.3.12", + "@types/chai": "^4.3.14", "@types/prop-types": "^15.7.12", "@types/react": "^18.2.55", "@types/sinon": "^10.0.20", diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json index 55ba187529fe77..2675ce2917f370 100644 --- a/packages/mui-utils/package.json +++ b/packages/mui-utils/package.json @@ -1,6 +1,6 @@ { "name": "@mui/utils", - "version": "5.15.14", + "version": "6.0.0-alpha.1", "private": false, "author": "MUI Team", "description": "Utility functions for React components.", @@ -39,7 +39,7 @@ "typescript": "tsc -p tsconfig.json" }, "dependencies": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.24.4", "@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.31", "@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 ff9149029c1def..7096e3095ad65c 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.4", + "version": "0.0.6", "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 d4cbe973021384..53e6e62ffdf78e 100644 --- a/packages/pigment-css-nextjs-plugin/src/index.ts +++ b/packages/pigment-css-nextjs-plugin/src/index.ts @@ -53,6 +53,7 @@ export function withPigment(nextConfig: NextConfig, pigmentConfig?: PigmentOptio isServer, outputCss: dev || hasAppDir || !isServer, placeholderCssFile: extractionFile, + projectPath: dir, }, async asyncResolve(what: string, importer: string, stack: string[]) { // Using the same stub file as "next/font". Should be updated in future to @@ -72,6 +73,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/.gitignore b/packages/pigment-css-react/.gitignore index ce2260016524df..3b44608184d983 100644 --- a/packages/pigment-css-react/.gitignore +++ b/packages/pigment-css-react/.gitignore @@ -1,3 +1,4 @@ /processors/ /utils/ LICENSE +/private-runtime/ diff --git a/packages/pigment-css-react/README.md b/packages/pigment-css-react/README.md index 736bc4c3e2c208..6a7190afcb4cac 100644 --- a/packages/pigment-css-react/README.md +++ b/packages/pigment-css-react/README.md @@ -39,7 +39,9 @@ Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling to ### Start with Next.js -Use the following commands to create a new Next.js project with Pigment CSS set up: +#### Quickstart + +Use the following commands to quickly create a new Next.js project with Pigment CSS set up: ```bash curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/pigment-css-nextjs-ts @@ -85,7 +87,9 @@ Finally, import the stylesheet in the root `layout.tsx` file: ### Start with Vite -Use the following commands to create a new Vite project with Pigment CSS set up: +#### Quickstart + +Use the following commands to quickly create a new Vite project with Pigment CSS set up: ```bash curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/pigment-css-vite-ts @@ -188,7 +192,7 @@ function App() { } ``` -The Pigment CSS library differs from "standard" runtime CSS-in-JS libraries in a few ways: +Pigment CSS differs from "standard" runtime CSS-in-JS libraries in a few ways: 1. You never get direct access to props in your styled declarations. This is because prop values are only available at runtime, but the CSS is extracted at build time. See [Styling based on runtime values](#styling-based-on-runtime-values) for a workaround. 2. Your styles must be declarative and must account for all combinations of props that you want to style. @@ -204,11 +208,15 @@ Each variant is an object with `props` and `style` keys. The styles are applied **Example 1** — A button component with `small` and `large` sizes: -```jsx -const Button = styled('button')({ +```tsx +interface ButtonProps { + size?: 'small' | 'large'; +} + +const Button = styled('button')<ButtonProps>({ border: 'none', padding: '0.75rem', - // ...other base styles + // ...other styles variants: [ { props: { size: 'large' }, @@ -300,7 +308,7 @@ const Button = styled('button')({ > 💡 This approach is recommended when the value of a prop is **unknown** ahead of time or possibly unlimited values, for example styling based on the user's input. -There are two ways to acheive this (both involve using a CSS variable): +There are two ways to achieve this (both involve using a CSS variable): 1. Declare a CSS variable directly in the styles and set its value using inline styles: @@ -335,7 +343,7 @@ Pigment CSS replaces the callback with a CSS variable and injects the value thr ```jsx <h1 style={{ - '--Heading_class_akjsdfb-0': ({ isError }) => (isError ? 'red' : 'black'), + '--Heading_class_akjsdfb-0': isError ? 'red' : 'black', }} > Hello @@ -533,7 +541,7 @@ module.exports = withPigment( ); ``` -The `extendTheme` utility goes through the theme and create a `vars` object which represents the tokens that refer to CSS variables. +The `extendTheme` utility goes through the theme and creates a `vars` object which represents the tokens that refer to CSS variables. ```jsx const theme = extendTheme({ @@ -557,7 +565,7 @@ extendTheme({ }); ``` -The generated CSS variables has the `pigment` prefix: +The generated CSS variables have the `pigment` prefix: ```css :root { @@ -806,7 +814,7 @@ const Flex = styled('div')((props) => ({ 2. **Programatically generated styles** -For Emotion and styled-components, the styles is different on each render and instance because the styles are generated at runtime: +For Emotion and styled-components, the styles are different on each render and instance because the styles are generated at runtime: ```js function randomBetween(min: number, max: number) { @@ -854,3 +862,250 @@ function App() { ) } ``` + +## Building reusable components for UI libraries + +The purpose of this guide is to demonstrate how to create reusable components for a UI library that can be shared across multiple projects and used to implement different design systems through custom theming. +The approach outlined here is not necessary when constructing components to be consumed and themed in a single project. +It's most relevant for developers who want to build a component library that could be published as a package to be consumed and themed by other developers. + +The steps below will walk you through how to create a statistics component that could serve as part of a reusable UI library built with Pigment CSS. +This process has three parts: + +1. [Create component slots](#1-create-component-slots). +2. [Compose slots to create the component](#2-create-the-component). +3. [Style slots based on props](#3-style-slots-based-on-props). + +### 1. Create component slots + +Slots let the consumers customize each individual element of the component by targeting its respective name in the [theme's styleOverrides](#themeable-statistics-component). + +This statistics component is composed of three slots: + +- `root`: the container of the component +- `value`: the number to be displayed +- `unit`: the unit or description of the value + +> 💡 Though you can give these slots any names you prefer, we recommend using `root` for the outermost container element for consistency with the rest of the library. + +Use the `styled` API with `name` and `slot` parameters to create the slots, as shown below: + +```js +// /path/to/Stat.js +import * as React from 'react'; +import { styled } from '@pigment-css/react'; + +const StatRoot = styled('div', { + name: 'PigmentStat', // The component name + slot: 'root', // The slot name +})({ + display: 'flex', + flexDirection: 'column', + gap: '1rem', + padding: '0.75rem 1rem', + backgroundColor: '#f9f9f9', + borderRadius: '8px', + boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', + letterSpacing: '-0.025em', + fontWeight: 600, +}); + +const StatValue = styled('div', { + name: 'PigmentStat', + slot: 'value', +})({ + font: '1.2rem "Fira Sans", sans-serif', +}); + +const StatUnit = styled('div', { + name: 'PigmentStat', + slot: 'unit', +})({ + font: '0.875rem "Fira Sans", sans-serif', + color: '#121212', +}); +``` + +### 2. Create the component + +Assemble the component using the slots created in the previous step: + +```js +// /path/to/Stat.js +import * as React from 'react'; + +// ...slot styled-components + +const Stat = React.forwardRef(function Stat(props, ref) { + const { value, unit, ...other } = props; + + return ( + <StatRoot ref={ref} {...other}> + <StatValue>{value}</StatValue> + <StatUnit>{unit}</StatUnit> + </StatRoot> + ); +}); + +export default Stat; +``` + +### 3. Style slots based on props + +In this example, a prop named `variant` is defined to let consumers change the appearance of the `Stat` component. + +Pass down the `variant` prop to `<StatRoot>` to style the `root` slot, as shown below: + +```diff + const Stat = React.forwardRef(function Stat(props, ref) { ++ const { value, unit, variant, ...other } = props; + + return ( +- <StatRoot ref={ref} {...other}> +- <StatValue>{value}</StatValue> +- <StatUnit>{unit}</StatUnit> +- </StatRoot> ++ <StatRoot ref={ref} variant={variant} {...other}> ++ <StatValue>{value}</StatValue> ++ <StatUnit>{unit}</StatUnit> ++ </StatRoot> + ); + }); +``` + +Then you can use Pigment CSS variants API to style it when `variant` prop has a value of `outlined`: + +```diff + const StatRoot = styled('div', { + name: 'PigmentStat', + slot: 'root', + })({ + display: 'flex', + flexDirection: 'column', + gap: '1rem', + padding: '0.75rem 1rem', + backgroundColor: '#f9f9f9', + borderRadius: '8px', + boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', + letterSpacing: '-0.025em', + fontWeight: 600, ++ variants: [ ++ { ++ props: { variant: 'outlined' }, ++ style: { ++ border: `2px solid #e9e9e9`, ++ }, ++ }, ++ ], + }); +``` + +This completes the reusable statistics component. +If this were a real UI library, the component would be ready to upload to a package registry so others could use it. + +### Consumer usage + +Developers using your component must first install your package as well as the Pigment CSS packages that correspond to the [framework](#start-with-nextjs) they're using. + +```bash +npm install your-package-name @pigment-css/react +npm install -D @pigment-css/nextjs-plugin +``` + +Next, they must set up Pigment CSS in their project: + +```js +// framework config file, for example next.config.js +const { withPigment } = require('@pigment-css/nextjs-plugin'); + +module.exports = withPigment( + { + // ... Your nextjs config. + }, + { transformLibraries: ['your-package-name'] }, +); +``` + +Finally, they must import the stylesheet in the root layout file: + +```js +// index.tsx +import '@pigment-css/react/styles.css'; +``` + +Then they can use your component in their project: + +```jsx +import Stat from 'your-package-name/Stat'; + +function App() { + return <Stat value={42} unit="km/h" variant="outlined" />; +} +``` + +### Consumer theming + +Developers can customize the component's styles using the theme's `styleOverrides` key and the component name and slots you defined in [step 2](#2-create-the-component). +For example, the custom theme below sets the background color of the statistics component's root slot to `tomato`: + +```js +module.exports = withPigment( + { ...nextConfig }, + { + theme: { + styleOverrides: { + PigmentStat: { + root: { + backgroundColor: 'tomato', + }, + value: { + color: 'white', + }, + unit: { + color: 'white', + }, + }, + }, + }, + }, +); +``` + +Developers can also access theme values and apply styles based on the component's props using the `variants` key: + +```js +module.exports = withPigment( + { ...nextConfig }, + { + theme: { + // user defined colors + colors: { + primary: 'tomato', + primaryLight: 'lightcoral', + }, + styleOverrides: { + PigmentStat: { + root: ({ theme }) => ({ + backgroundColor: 'tomato', + variants: [ + { + props: { variant: 'outlined' }, + style: { + border: `2px solid ${theme.colors.primary}`, + backgroundColor: theme.colors.primaryLight, + }, + }, + ], + }), + value: { + color: 'white', + }, + unit: { + color: 'white', + }, + }, + }, + }, + }, +); +``` diff --git a/packages/pigment-css-react/exports/sx-plugin.js b/packages/pigment-css-react/exports/sx-plugin.js index dad557a6deab17..5aaf3ba4deb4b8 100644 --- a/packages/pigment-css-react/exports/sx-plugin.js +++ b/packages/pigment-css-react/exports/sx-plugin.js @@ -2,4 +2,4 @@ Object.defineProperty(exports, '__esModule', { value: true, }); -exports.default = require('../utils/pre-linaria-plugin').babelPlugin; +exports.default = require('../utils/sx-plugin').babelPlugin; diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json index 4613a04db77e02..f230f29382a143 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.4", + "version": "0.0.6", "main": "build/index.js", "module": "build/index.mjs", "types": "build/index.d.ts", @@ -31,16 +31,16 @@ "typecheck": "tsc --noEmit -p ." }, "dependencies": { - "@babel/core": "^7.23.9", - "@babel/helper-module-imports": "^7.22.15", - "@babel/helper-plugin-utils": "^7.22.5", - "@babel/parser": "^7.23.9", - "@babel/types": "^7.23.9", + "@babel/core": "^7.24.4", + "@babel/helper-module-imports": "^7.24.3", + "@babel/helper-plugin-utils": "^7.24.0", + "@babel/parser": "^7.24.4", + "@babel/types": "^7.24.0", "@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", + "@emotion/serialize": "^1.1.4", + "@emotion/styled": "^11.11.5", "@mui/system": "workspace:^", "@wyw-in-js/processor-utils": "^0.5.0", "@wyw-in-js/shared": "^0.5.0", @@ -53,19 +53,20 @@ "stylis-plugin-rtl": "^2.1.1" }, "devDependencies": { - "@babel/plugin-syntax-jsx": "^7.23.3", + "@babel/plugin-syntax-jsx": "^7.24.1", "@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.31", "@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": { @@ -126,26 +127,8 @@ "require": "./utils/index.js", "default": "./utils/index.js" }, - "./exports/generateAtomics": { - "default": "./exports/generateAtomics.js" - }, - "./exports/keyframes": { - "default": "./exports/keyframes.js" - }, - "./exports/styled": { - "default": "./exports/styled.js" - }, - "./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" - }, - "./exports/createUseThemeProps": { - "default": "./exports/createUseThemeProps.js" + "./exports/*": { + "default": "./exports/*.js" }, "./Box": { "types": "./build/Box.d.ts", @@ -164,6 +147,15 @@ }, "require": "./build/RtlProvider.js", "default": "./build/RtlProvider.js" + }, + "./private-runtime": { + "types": "./private-runtime/index.d.ts", + "import": { + "types": "./private-runtime/index.d.mts", + "default": "./private-runtime/index.mjs" + }, + "require": "./private-runtime/index.js", + "default": "./private-runtime/index.js" } }, "nx": { diff --git a/packages/pigment-css-react/src/Box.d.ts b/packages/pigment-css-react/src/Box.d.ts index 8cfb27534aa6d4..0fe8b89db82c79 100644 --- a/packages/pigment-css-react/src/Box.d.ts +++ b/packages/pigment-css-react/src/Box.d.ts @@ -23,4 +23,4 @@ export interface PolymorphicComponent<BaseProps extends BaseDefaultProps> declare const Box: PolymorphicComponent<{}>; -export { Box }; +export default Box; diff --git a/packages/pigment-css-react/src/Box.jsx b/packages/pigment-css-react/src/Box.jsx index 235cb67cf10210..de32424c204c3b 100644 --- a/packages/pigment-css-react/src/Box.jsx +++ b/packages/pigment-css-react/src/Box.jsx @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ import * as React from 'react'; -export const Box = React.forwardRef( +const Box = React.forwardRef( ( { as = 'div', @@ -50,3 +50,5 @@ export const Box = React.forwardRef( return <Component ref={ref} className={classes} style={styles} {...rest} />; }, ); + +export default Box; diff --git a/packages/pigment-css-react/src/private-runtime/ForwardSx.js b/packages/pigment-css-react/src/private-runtime/ForwardSx.js new file mode 100644 index 00000000000000..2201ae8a94936c --- /dev/null +++ b/packages/pigment-css-react/src/private-runtime/ForwardSx.js @@ -0,0 +1,32 @@ +import * as React from 'react'; +import clsx from 'clsx'; + +function useSx(sx, className, style) { + const sxClass = typeof sx === 'string' ? sx : sx?.className; + const sxVars = sx && typeof sx !== 'string' ? sx.vars : undefined; + const varStyles = {}; + + if (sxVars) { + Object.entries(sxVars).forEach(([cssVariable, [value, isUnitLess]]) => { + if (typeof value === 'string' || isUnitLess) { + varStyles[`--${cssVariable}`] = value; + } else { + varStyles[`--${cssVariable}`] = `${value}px`; + } + }); + } + + return { + className: clsx(sxClass, className), + style: { + ...varStyles, + ...style, + }, + }; +} + +/* eslint-disable-next-line react/prop-types */ +export const ForwardSx = React.forwardRef(({ sx, sxComponent, className, style, ...rest }, ref) => { + const Component = sxComponent; + return <Component ref={ref} {...rest} {...useSx(sx, className, style)} />; +}); diff --git a/packages/pigment-css-react/src/private-runtime/index.ts b/packages/pigment-css-react/src/private-runtime/index.ts new file mode 100644 index 00000000000000..b8e8215a9be903 --- /dev/null +++ b/packages/pigment-css-react/src/private-runtime/index.ts @@ -0,0 +1 @@ +export * from './ForwardSx'; diff --git a/packages/pigment-css-react/src/processors/sx.ts b/packages/pigment-css-react/src/processors/sx.ts index b0293aa8c58f93..141c470ed8c1ae 100644 --- a/packages/pigment-css-react/src/processors/sx.ts +++ b/packages/pigment-css-react/src/processors/sx.ts @@ -11,6 +11,31 @@ import { processCssObject } from '../utils/processCssObject'; import { cssFnValueToVariable } from '../utils/cssFnValueToVariable'; import BaseProcessor from './base-processor'; +// @TODO: Maybe figure out a better way allow imports. +const allowedSxTransformImports = [`${process.env.PACKAGE_NAME}/Box`]; + +/** + * Specifically looks for whether the sx prop should be transformed or not. + * If it's a Pigment CSS styled component, the value of `argumentValue` will + * be a string className starting with "." + * In other cases, it explicitly checks if the import is allowed for sx transformation. + */ +function allowSxTransform(argumentExpression: ExpressionValue, argumentValue?: string) { + if (!argumentExpression) { + return false; + } + if ( + argumentExpression.kind === ValueType.LAZY && + argumentExpression.importedFrom?.some((i) => allowedSxTransformImports.includes(i)) + ) { + return true; + } + if (argumentValue && argumentValue[0] === '.') { + return true; + } + return false; +} + export class SxProcessor extends BaseProcessor { sxArguments: ExpressionValue[] = []; @@ -41,7 +66,7 @@ export class SxProcessor extends BaseProcessor { } } - if (!this.elementClassName || this.elementClassName[0] !== '.') { + if (!allowSxTransform(elementClassExpression, this.elementClassName)) { return; } @@ -95,7 +120,7 @@ export class SxProcessor extends BaseProcessor { doRuntimeReplacement() { const t = this.astService; // do not replace if sx prop is not a Pigment styled component - if (!this.elementClassName) { + if (this.artifacts.length === 0) { return; } if (this.collectedVariables.length) { diff --git a/packages/pigment-css-react/src/utils/pre-linaria-plugin.ts b/packages/pigment-css-react/src/utils/pre-linaria-plugin.ts deleted file mode 100644 index 22503a07aaa879..00000000000000 --- a/packages/pigment-css-react/src/utils/pre-linaria-plugin.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { addNamed } from '@babel/helper-module-imports'; -import { declare } from '@babel/helper-plugin-utils'; -import { NodePath } from '@babel/core'; -import * as Types from '@babel/types'; -import { sxPropConverter } from './sxPropConverter'; - -function replaceNodePath( - expressionPath: NodePath<Types.Expression>, - namePath: NodePath<Types.JSXIdentifier | Types.Identifier>, - importName: string, - t: typeof Types, - tagName: NodePath<Types.JSXIdentifier | Types.Identifier>, -) { - const sxIdentifier = addNamed(namePath, importName, process.env.PACKAGE_NAME as string); - - const wrapWithSxCall = (expPath: NodePath<Types.Expression>) => { - expPath.replaceWith( - t.callExpression(sxIdentifier, [expPath.node, t.identifier(tagName.node.name)]), - ); - }; - - sxPropConverter(expressionPath, wrapWithSxCall); -} - -export const babelPlugin = declare<{ propName?: string; importName?: string }>( - (api, { propName = 'sx', importName = 'sx' }) => { - api.assertVersion(7); - const { types: t } = api; - return { - name: '@pigmentcss/sx-plugin', - visitor: { - JSXAttribute(path) { - const namePath = path.get('name'); - const openingElement = path.findParent((p) => p.isJSXOpeningElement()); - if ( - !openingElement || - !openingElement.isJSXOpeningElement() || - !namePath.isJSXIdentifier() || - namePath.node.name !== propName - ) { - return; - } - const tagName = openingElement.get('name'); - if (!tagName.isJSXIdentifier()) { - return; - } - const valuePath = path.get('value'); - if (!valuePath.isJSXExpressionContainer()) { - return; - } - const expressionPath = valuePath.get('expression'); - if (!expressionPath.isExpression()) { - return; - } - replaceNodePath(expressionPath, namePath, importName, t, tagName); - }, - ObjectProperty(path) { - // @TODO - Maybe add support for React.createElement calls as well. - // Right now, it only checks for jsx(),jsxs(),jsxDEV() and jsxsDEV() calls. - const keyPath = path.get('key'); - if (!keyPath.isIdentifier() || keyPath.node.name !== propName) { - return; - } - const valuePath = path.get('value'); - if (!valuePath.isObjectExpression() && !valuePath.isArrowFunctionExpression()) { - return; - } - const parentJsxCall = path.findParent((p) => p.isCallExpression()); - if (!parentJsxCall || !parentJsxCall.isCallExpression()) { - return; - } - const callee = parentJsxCall.get('callee'); - if (!callee.isIdentifier() || !callee.node.name.includes('jsx')) { - return; - } - const jsxElement = parentJsxCall.get('arguments')[0] as NodePath<Types.Identifier>; - replaceNodePath(valuePath, keyPath, importName, t, jsxElement); - }, - }, - }; - }, -); 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 index 703fe989b249a9..de48af2ae2d0ba 100644 --- a/packages/pigment-css-react/src/utils/remove-prop-types-plugin.ts +++ b/packages/pigment-css-react/src/utils/remove-prop-types-plugin.ts @@ -11,11 +11,15 @@ export const removePropTypesPlugin = declare<{}>((api) => { return; } const property = left.get('property'); - if (!property.isIdentifier({ name: 'propTypes' })) { + const isPropTypes = property.isIdentifier({ name: 'propTypes' }); + const isMuiName = property.isIdentifier({ name: 'muiName' }); + + if (!isPropTypes && !isMuiName) { return; } - if (path.parentPath.isExpressionStatement()) { - path.parentPath.remove(); + const parentExpression = path.findParent((p) => p.isExpressionStatement()); + if (parentExpression) { + parentExpression.remove(); } }, }, diff --git a/packages/pigment-css-react/src/utils/sx-plugin.ts b/packages/pigment-css-react/src/utils/sx-plugin.ts new file mode 100644 index 00000000000000..4265dcfb77ae33 --- /dev/null +++ b/packages/pigment-css-react/src/utils/sx-plugin.ts @@ -0,0 +1,166 @@ +import { addNamed } from '@babel/helper-module-imports'; +import { declare } from '@babel/helper-plugin-utils'; +import { NodePath } from '@babel/core'; +import * as Types from '@babel/types'; + +import { sxPropConverter } from './sxPropConverter'; + +function convertJsxMemberExpressionToMemberExpression( + t: typeof Types, + nodePath: NodePath<Types.JSXMemberExpression>, +): Types.MemberExpression { + const object = nodePath.get('object'); + const property = nodePath.get('property'); + + if (object.isJSXMemberExpression()) { + return t.memberExpression( + convertJsxMemberExpressionToMemberExpression(t, object), + t.identifier(property.node.name), + ); + } + return t.memberExpression( + t.identifier((object.node as Types.JSXIdentifier).name), + t.identifier(property.node.name), + ); +} + +function wrapWithSxComponent( + t: typeof Types, + tagNamePath: NodePath<Types.JSXIdentifier | Types.JSXMemberExpression | Types.JSXNamespacedName>, + sxComponentName: string, +) { + const sxComponent = addNamed( + tagNamePath, + sxComponentName, + `${process.env.PACKAGE_NAME}/private-runtime`, + ); + const jsxElement = tagNamePath.findParent((p) => p.isJSXElement()); + if (!jsxElement?.isJSXElement()) { + return; + } + const component = t.jsxIdentifier(sxComponent.name); + + const newChildren = (jsxElement.get('children') ?? []).map((child) => child.node); + let sxComponentValue: Types.Identifier | Types.MemberExpression | null = null; + + if (tagNamePath.isJSXIdentifier()) { + sxComponentValue = t.identifier(tagNamePath.node.name); + } else if (tagNamePath.isJSXMemberExpression()) { + sxComponentValue = convertJsxMemberExpressionToMemberExpression(t, tagNamePath); + } + + const newElement = t.jsxElement( + t.jsxOpeningElement( + component, + [ + t.jsxAttribute( + t.jsxIdentifier('sxComponent'), + t.jsxExpressionContainer(sxComponentValue ?? t.nullLiteral()), + ), + ...jsxElement + .get('openingElement') + .get('attributes') + .map((attr) => attr.node), + ], + !newChildren.length, + ), + newChildren.length ? t.jsxClosingElement(component) : null, + newChildren, + !newChildren.length, + ); + jsxElement.replaceWith(newElement); +} + +function replaceNodePath( + expressionPath: NodePath<Types.Expression>, + namePath: NodePath<Types.JSXIdentifier | Types.Identifier>, + importName: string, + t: typeof Types, + tagNamePath: NodePath< + Types.JSXIdentifier | Types.Identifier | Types.JSXMemberExpression | Types.MemberExpression + >, + sxComponentName: string, +) { + const sxIdentifier = addNamed(namePath, importName, process.env.PACKAGE_NAME as string); + let wasSxTransformed = false; + + const wrapWithSxCall = (expPath: NodePath<Types.Expression>) => { + let tagNameArg: Types.Identifier | Types.MemberExpression | null = null; + if (tagNamePath.isJSXIdentifier()) { + tagNameArg = t.identifier(tagNamePath.node.name); + } else if (tagNamePath.isJSXMemberExpression()) { + tagNameArg = convertJsxMemberExpressionToMemberExpression(t, tagNamePath); + } else { + tagNameArg = tagNamePath.node as Types.Identifier | Types.MemberExpression; + } + expPath.replaceWith(t.callExpression(sxIdentifier, [expPath.node, tagNameArg])); + wasSxTransformed = true; + }; + + sxPropConverter(expressionPath, wrapWithSxCall); + + if (wasSxTransformed) { + if (tagNamePath.isJSXIdentifier() || tagNamePath.isJSXMemberExpression()) { + wrapWithSxComponent(t, tagNamePath, sxComponentName); + } + } +} + +export const babelPlugin = declare<{ + propName?: string; + importName?: string; + sxComponentName?: string; +}>((api, { propName = 'sx', importName = 'sx', sxComponentName = 'ForwardSx' }) => { + api.assertVersion(7); + const { types: t } = api; + return { + name: '@pigmentcss/sx-plugin', + visitor: { + JSXAttribute(path) { + const namePath = path.get('name'); + const openingElement = path.findParent((p) => p.isJSXOpeningElement()); + if ( + !openingElement || + !openingElement.isJSXOpeningElement() || + !namePath.isJSXIdentifier() || + namePath.node.name !== propName + ) { + return; + } + const tagName = openingElement.get('name'); + const valuePath = path.get('value'); + if (!valuePath.isJSXExpressionContainer()) { + return; + } + const expressionPath = valuePath.get('expression'); + if (!expressionPath.isExpression()) { + return; + } + // @ts-ignore + replaceNodePath(expressionPath, namePath, importName, t, tagName, sxComponentName); + }, + ObjectProperty(path) { + // @TODO - Maybe add support for React.createElement calls as well. + // Right now, it only checks for jsx(),jsxs(),jsxDEV() and jsxsDEV() calls. + const keyPath = path.get('key'); + if (!keyPath.isIdentifier() || keyPath.node.name !== propName) { + return; + } + const valuePath = path.get('value'); + if (!valuePath.isObjectExpression() && !valuePath.isArrowFunctionExpression()) { + return; + } + const parentJsxCall = path.findParent((p) => p.isCallExpression()); + if (!parentJsxCall || !parentJsxCall.isCallExpression()) { + return; + } + const callee = parentJsxCall.get('callee'); + if (!callee.isIdentifier() || !callee.node.name.includes('jsx')) { + return; + } + const jsxElement = parentJsxCall.get('arguments')[0] as NodePath<Types.Identifier>; + replaceNodePath(valuePath, keyPath, importName, t, jsxElement, sxComponentName); + }, + }, + }; +}); diff --git a/packages/pigment-css-react/tests/Box/box.test.tsx b/packages/pigment-css-react/tests/Box/box.test.tsx new file mode 100644 index 00000000000000..a5a33298b875b4 --- /dev/null +++ b/packages/pigment-css-react/tests/Box/box.test.tsx @@ -0,0 +1,13 @@ +import path from 'node:path'; +import { runTransformation, expect } from '../testUtils'; + +describe('Pigment CSS - Box', () => { + it('should transform and render sx prop', async () => { + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/box.input.js'), + ); + + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); + }); +}); diff --git a/packages/pigment-css-react/tests/Box/fixtures/box.input.js b/packages/pigment-css-react/tests/Box/fixtures/box.input.js new file mode 100644 index 00000000000000..b8548e7690dc31 --- /dev/null +++ b/packages/pigment-css-react/tests/Box/fixtures/box.input.js @@ -0,0 +1,20 @@ +import Box from '@pigment-css/react/Box'; + +export function App() { + return ( + <Box + as="ul" + sx={{ + margin: 0, + marginBlock: '1rem', + padding: 0, + paddingLeft: '1.5rem', + display: 'flex', + flexDirection: 'column', + gap: '0.5rem', + }} + > + Hello Box + </Box> + ); +} diff --git a/packages/pigment-css-react/tests/Box/fixtures/box.output.css b/packages/pigment-css-react/tests/Box/fixtures/box.output.css new file mode 100644 index 00000000000000..eb1554a5a0285f --- /dev/null +++ b/packages/pigment-css-react/tests/Box/fixtures/box.output.css @@ -0,0 +1,9 @@ +._1yemdgw { + margin: 0; + margin-block: 1rem; + padding: 0; + padding-left: 1.5rem; + display: flex; + flex-direction: column; + gap: 0.5rem; +} diff --git a/packages/pigment-css-react/tests/Box/fixtures/box.output.js b/packages/pigment-css-react/tests/Box/fixtures/box.output.js new file mode 100644 index 00000000000000..4f231e1a80fc4d --- /dev/null +++ b/packages/pigment-css-react/tests/Box/fixtures/box.output.js @@ -0,0 +1,10 @@ +import { sx as _sx2 } from '@pigment-css/react'; +import { ForwardSx as _ForwardSx } from '@pigment-css/react/private-runtime'; +import Box from '@pigment-css/react/Box'; +export function App() { + return ( + <_ForwardSx sxComponent={Box} as="ul" sx={'_1yemdgw'}> + Hello Box + </_ForwardSx> + ); +} 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..d06b7864ff96d4 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,20 @@ const SliderRail2 = styled.span` display: none; } `; + +export function App() { + return ( + <Component> + <SliderRail /> + <SliderRail2 /> + </Component> + ); +} + +process.env.NODE_ENV !== 'production' + ? (App.propTypes = { + children: PropTypes.element, + }) + : void 0; + +process.env.NODE_ENV !== 'production' ? (App.muiName = 'App') : 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 dab3d187f4b191..3e3eae8b2f3244 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,8 +1,29 @@ 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 ( + <Component> + <SliderRail /> + <SliderRail2 /> + </Component> + ); +} +process.env.NODE_ENV !== 'production' + ? (App.propTypes = { + children: PropTypes.element, + }) + : void 0; +process.env.NODE_ENV !== 'production' ? (App.muiName = 'App') : void 0; 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..355ba897b1d1f4 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,18 @@ const SliderRail2 = styled.span` display: none; } `; + +export function App() { + return ( + <Component> + <SliderRail /> + <SliderRail2 /> + </Component> + ); +} + +App.propTypes = { + children: PropTypes.element, +}; + +App.muiName = 'App'; 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 c57ec6223df072..5ae7640121516f 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled.output.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled.output.js @@ -1,5 +1,6 @@ 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'], }); @@ -12,3 +13,15 @@ export const SliderRail = /*#__PURE__*/ _styled2('span', { const SliderRail2 = /*#__PURE__*/ _styled3('span')({ classes: ['shdkmm7'], }); +export function App() { + return ( + <Component> + <SliderRail /> + <SliderRail2 /> + </Component> + ); +} +App.propTypes = { + children: PropTypes.element, +}; +App.muiName = 'App'; diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.css b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.css index c7f2c2d52a85d5..6d7384b2e1627f 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.css +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.css @@ -9,20 +9,20 @@ .sjfloo5-1 { font-size: 3rem; } -.sjfloo5.s1o8xp19 { +.sjfloo5._1o8xp19 { color: red; } -.sjfloo5.s1xbsywq { - color: var(--s1xbsywq-0); +.sjfloo5._1xbsywq { + color: var(--_1xbsywq-0); } -.sjfloo5.s1wnk6s5 { +.sjfloo5._1wnk6s5 { background-color: blue; color: white; } -.sjfloo5.stzaibv { - color: var(--stzaibv-0); +.sjfloo5._tzaibv { + color: var(--_tzaibv-0); } -.sjfloo5.sazg8ol { +.sjfloo5._azg8ol { margin-bottom: 8px; text-align: center; } diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js index 1f60cb6e1b5aa9..5aefa5d93cda52 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js @@ -1,4 +1,11 @@ -import { styled as _styled } from '@pigment-css/react'; +import { sx as _sx8, styled as _styled } from '@pigment-css/react'; +import { ForwardSx as _ForwardSx4 } from '@pigment-css/react/private-runtime'; +import { sx as _sx6 } from '@pigment-css/react'; +import { ForwardSx as _ForwardSx3 } from '@pigment-css/react/private-runtime'; +import { sx as _sx4 } from '@pigment-css/react'; +import { ForwardSx as _ForwardSx2 } from '@pigment-css/react/private-runtime'; +import { sx as _sx2 } from '@pigment-css/react'; +import { ForwardSx as _ForwardSx } from '@pigment-css/react/private-runtime'; export const SliderRail = /*#__PURE__*/ _styled('span', { name: 'MuiSlider', slot: 'Rail', @@ -6,32 +13,34 @@ export const SliderRail = /*#__PURE__*/ _styled('span', { classes: ['sjfloo5', 'sjfloo5-1'], }); function App() { - return <SliderRail sx={'s1o8xp19'} />; + return <_ForwardSx sxComponent={SliderRail} sx={'_1o8xp19'} />; } function App2(props) { return ( - <SliderRail + <_ForwardSx2 + sxComponent={SliderRail} sx={ props.variant === 'secondary' ? { - className: 's1xbsywq', + className: '_1xbsywq', vars: { - 's1xbsywq-0': [props.isRed ? 'red' : 'blue', false], + '_1xbsywq-0': [props.isRed ? 'red' : 'blue', false], }, } - : 's1wnk6s5' + : '_1wnk6s5' } /> ); } function App3(props) { return ( - <SliderRail + <_ForwardSx3 + sxComponent={SliderRail} sx={ props.variant === 'secondary' && { - className: 'stzaibv', + className: '_tzaibv', vars: { - 'stzaibv-0': [props.isRed ? 'red' : 'blue', false], + '_tzaibv-0': [props.isRed ? 'red' : 'blue', false], }, } } @@ -39,5 +48,5 @@ function App3(props) { ); } function App4(props) { - return <SliderRail sx={'sazg8ol'} />; + return <_ForwardSx4 sxComponent={SliderRail} sx={'_azg8ol'} />; } 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 6835baeca846d9..34370216509ab8 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js @@ -16,6 +16,10 @@ const SliderRail = styled('span', { font-size: ${({ theme }) => (theme.vars ?? theme).size.font.h1}; `; +const A = { + SliderRail, +}; + function App(props) { return ( <SliderRail @@ -47,7 +51,7 @@ function App2() { function App3(props) { return ( - <SliderRail + <A.SliderRail sx={({ theme }) => ({ color: (theme.vars || theme).palette.primary.main, fontSize: props.isRed ? 'h1-fontSize' : 'h2-fontSize', 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 55afb9b4d87acc..90b60e9eba1a27 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css @@ -9,38 +9,38 @@ .sdbmcs3-1 { font-size: 3rem; } -.sdbmcs3.si7ulc4 { +.sdbmcs3._i7ulc4 { margin-bottom: 8px; } @media (prefers-color-scheme: dark) { - .sdbmcs3.si7ulc4 { + .sdbmcs3._i7ulc4 { color: white; } } -.sdbmcs3.sliig2s { +.sdbmcs3._liig2s { border-radius: 8px; margin: 5px; } -.sdbmcs3.sliig2s.MuiAutocomplete-option { +.sdbmcs3._liig2s.MuiAutocomplete-option { padding: 8px; } -.sdbmcs3.so956n { +.sdbmcs3._o956n { color: red; - font-size: var(--so956n-0); + font-size: var(--_o956n-0); } @media (min-width: 0px) { - .sdbmcs3.so956n :hover { + .sdbmcs3._o956n :hover { background-color: red; } } @media (min-width: 600px) { - .sdbmcs3.so956n :hover { + .sdbmcs3._o956n :hover { background-color: blue; color: red; } } @media (min-width: 900px) { - .sdbmcs3.so956n :hover { + .sdbmcs3._o956n :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 39a69d867ec8b3..7c8a5ca1d23900 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js @@ -1,23 +1,32 @@ -import { styled as _styled } from '@pigment-css/react'; +import { sx as _sx6, styled as _styled } from '@pigment-css/react'; +import { ForwardSx as _ForwardSx3 } from '@pigment-css/react/private-runtime'; +import { sx as _sx4 } from '@pigment-css/react'; +import { ForwardSx as _ForwardSx2 } from '@pigment-css/react/private-runtime'; +import { sx as _sx2 } from '@pigment-css/react'; +import { ForwardSx as _ForwardSx } from '@pigment-css/react/private-runtime'; const SliderRail = /*#__PURE__*/ _styled('span', { name: 'MuiSlider', slot: 'Rail', })({ classes: ['sdbmcs3', 'sdbmcs3-1'], }); +const A = { + SliderRail, +}; function App(props) { - return <SliderRail sx={'si7ulc4'} />; + return <_ForwardSx sxComponent={SliderRail} sx={'_i7ulc4'} />; } function App2() { - return <SliderRail sx={'sliig2s'} component="li" {...props} />; + return <_ForwardSx2 sxComponent={SliderRail} sx={'_liig2s'} component="li" {...props} />; } function App3(props) { return ( - <SliderRail + <_ForwardSx3 + sxComponent={A.SliderRail} sx={{ - className: 'so956n', + className: '_o956n', vars: { - 'so956n-0': [props.isRed ? 'h1-fontSize' : 'h2-fontSize', false], + '_o956n-0': [props.isRed ? 'h1-fontSize' : 'h2-fontSize', false], }, }} /> diff --git a/packages/pigment-css-react/tests/testUtils.ts b/packages/pigment-css-react/tests/testUtils.ts index 66008fc628f609..fd7db17ced5380 100644 --- a/packages/pigment-css-react/tests/testUtils.ts +++ b/packages/pigment-css-react/tests/testUtils.ts @@ -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}`); }, }; diff --git a/packages/pigment-css-react/tests/theme/fixtures/themed-component.input.js b/packages/pigment-css-react/tests/theme/fixtures/themed-component.input.js new file mode 100644 index 00000000000000..b162403d9824e6 --- /dev/null +++ b/packages/pigment-css-react/tests/theme/fixtures/themed-component.input.js @@ -0,0 +1,53 @@ +import * as React from 'react'; +import { styled } from '@pigment-css/react'; + +const StatRoot = styled('div', { + name: 'PigmentStat', // The component name + slot: 'root', // The slot name +})(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + gap: '1rem', + padding: '0.75rem 1rem', + backgroundColor: theme.colors.primary.background, + borderRadius: theme.radius.xs, + boxShadow: theme.shadow.sm, + letterSpacing: '-0.025em', + fontWeight: 600, + variants: [ + { + props: { variant: 'outlined' }, + style: { + border: `2px solid #e9e9e9`, + }, + }, + ], +})); + +const StatValue = styled('div', { + name: 'PigmentStat', + slot: 'value', +})(({ theme }) => ({ + ...theme.typography.h3, +})); + +const StatUnit = styled('div', { + name: 'PigmentStat', + slot: 'unit', +})(({ theme }) => ({ + ...theme.typography.body2, + color: theme.colors.neutral.foreground, +})); + +const Stat = React.forwardRef(function Stat(props, ref) { + const { value, unit, ...other } = props; + + return ( + <StatRoot ref={ref} {...other}> + <StatValue>{value}</StatValue> + <StatUnit>{unit}</StatUnit> + </StatRoot> + ); +}); + +export default Stat; diff --git a/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.css b/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.css new file mode 100644 index 00000000000000..78a83f48768ee9 --- /dev/null +++ b/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.css @@ -0,0 +1,21 @@ +.si9gu6v { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 0.75rem 1rem; + background-color: #ebf5ff; + border-radius: 0.25rem; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + letter-spacing: -0.025em; + font-weight: 600; +} +.si9gu6v-1 { + border: 2px solid #e9e9e9; +} +.sbfbm5t { + font-size: 2rem; +} +.s1xscf0o { + font-size: 1rem; + color: #6f7f95; +} diff --git a/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.js b/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.js new file mode 100644 index 00000000000000..98cafa341251ad --- /dev/null +++ b/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.js @@ -0,0 +1,44 @@ +import { styled as _styled3 } from '@pigment-css/react'; +import _theme3 from '@pigment-css/react/theme'; +import { styled as _styled2 } from '@pigment-css/react'; +import _theme2 from '@pigment-css/react/theme'; +import { styled as _styled } from '@pigment-css/react'; +import _theme from '@pigment-css/react/theme'; +import * as React from 'react'; +const StatRoot = /*#__PURE__*/ _styled('div', { + name: 'PigmentStat', + // The component name + slot: 'root', // The slot name +})({ + classes: ['si9gu6v'], + variants: [ + { + props: { + variant: 'outlined', + }, + className: 'si9gu6v-1', + }, + ], +}); +const StatValue = /*#__PURE__*/ _styled2('div', { + name: 'PigmentStat', + slot: 'value', +})({ + classes: ['sbfbm5t'], +}); +const StatUnit = /*#__PURE__*/ _styled3('div', { + name: 'PigmentStat', + slot: 'unit', +})({ + classes: ['s1xscf0o'], +}); +const Stat = React.forwardRef(function Stat(props, ref) { + const { value, unit, ...other } = props; + return ( + <StatRoot ref={ref} {...other}> + <StatValue>{value}</StatValue> + <StatUnit>{unit}</StatUnit> + </StatRoot> + ); +}); +export default Stat; diff --git a/packages/pigment-css-react/tests/theme/theme.test.ts b/packages/pigment-css-react/tests/theme/theme.test.ts new file mode 100644 index 00000000000000..02f71def92da8f --- /dev/null +++ b/packages/pigment-css-react/tests/theme/theme.test.ts @@ -0,0 +1,65 @@ +import path from 'node:path'; +import { runTransformation, expect } from '../testUtils'; + +describe('Pigment CSS - theme', () => { + it('should work with theme', async () => { + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/themed-component.input.js'), + { + themeArgs: { + theme: { + colors: { + primary: { + background: '#EBF5FF', + foreground: '#003A75', + }, + neutral: { + background: '#F3F6F9', + foreground: '#6F7F95', + }, + }, + radius: { + xs: '0.25rem', + }, + shadow: { + sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', + }, + typography: { + h3: { + fontSize: '2rem', + }, + body2: { + fontSize: '1rem', + }, + }, + components: { + MuiStat: { + styleOverrides: { + root: ({ theme }) => ({ + variants: [ + { + props: { variant: 'outlined' }, + style: { + borderColor: theme.colors.primary.background, + }, + }, + ], + }), + title: { + letterSpacing: '0.1rem', + }, + value: { + lineHeight: 1.7, + }, + }, + }, + }, + }, + }, + }, + ); + + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); + }); +}); diff --git a/packages/pigment-css-react/tsup.config.ts b/packages/pigment-css-react/tsup.config.ts index 1d29f3b572e390..fe170a407cde54 100644 --- a/packages/pigment-css-react/tsup.config.ts +++ b/packages/pigment-css-react/tsup.config.ts @@ -26,9 +26,14 @@ export default defineConfig([ ...baseConfig, entry: [ './src/utils/index.ts', - './src/utils/pre-linaria-plugin.ts', + './src/utils/sx-plugin.ts', './src/utils/remove-prop-types-plugin.ts', ], outDir: 'utils', }, + { + ...baseConfig, + entry: ['./src/private-runtime/index.ts'], + outDir: 'private-runtime', + }, ]); diff --git a/packages/pigment-css-unplugin/.eslintrc b/packages/pigment-css-unplugin/.eslintrc new file mode 100644 index 00000000000000..5abd34a395bc37 --- /dev/null +++ b/packages/pigment-css-unplugin/.eslintrc @@ -0,0 +1,5 @@ +{ + "rules": { + "import/prefer-default-export": "off" + } +} diff --git a/packages/pigment-css-unplugin/package.json b/packages/pigment-css-unplugin/package.json index 9dff04d1e21d7f..ecddb0af7ccd3e 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.4", + "version": "0.0.6", "main": "build/index.js", "module": "build/index.mjs", "types": "build/index.d.ts", @@ -25,10 +25,12 @@ "watch": "tsup --watch --tsconfig tsconfig.build.json", "copy-license": "node ../../scripts/pigment-license.mjs", "build": "tsup --tsconfig tsconfig.build.json", - "typecheck": "tsc --noEmit -p ." + "typecheck": "tsc --noEmit -p .", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/pigment-css-unplugin/**/*.test.{js,ts,tsx}'", + "test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/pigment-css-unplugin mocha 'packages/pigment-css-unplugin/**/*.test.{js,ts,tsx}'" }, "dependencies": { - "@babel/core": "^7.23.9", + "@babel/core": "^7.24.4", "@pigment-css/react": "workspace:^", "@wyw-in-js/shared": "^0.5.0", "@wyw-in-js/transform": "^0.5.0", @@ -36,7 +38,10 @@ "unplugin": "^1.7.1" }, "devDependencies": { - "@types/babel__core": "^7.20.5" + "@types/babel__core": "^7.20.5", + "@types/chai": "^4.3.14", + "@types/mocha": "^10.0.6", + "chai": "^4.4.1" }, "sideEffects": false, "publishConfig": { diff --git a/packages/pigment-css-unplugin/src/index.ts b/packages/pigment-css-unplugin/src/index.ts index bd8a047609fd4c..cbddd39982e4d7 100644 --- a/packages/pigment-css-unplugin/src/index.ts +++ b/packages/pigment-css-unplugin/src/index.ts @@ -21,15 +21,19 @@ import { generateThemeTokens, extendTheme, type Theme as BaseTheme, + type PluginCustomOptions, } from '@pigment-css/react/utils'; import type { ResolvePluginInstance } from 'webpack'; +import { handleUrlReplacement, type AsyncResolver } from './utils'; + type NextMeta = { type: 'next'; dev: boolean; isServer: boolean; outputCss: boolean; placeholderCssFile: string; + projectPath: string; }; type ViteMeta = { @@ -41,7 +45,6 @@ type WebpackMeta = { }; type Meta = NextMeta | ViteMeta | WebpackMeta; -export type AsyncResolver = (what: string, importer: string, stack: string[]) => Promise<string>; export type PigmentOptions<Theme extends BaseTheme = BaseTheme> = { theme?: Theme; @@ -52,7 +55,8 @@ export type PigmentOptions<Theme extends BaseTheme = BaseTheme> = { meta?: Meta; asyncResolve?: (...args: Parameters<AsyncResolver>) => Promise<string | null>; transformSx?: boolean; -} & Partial<WywInJsPluginOptions>; +} & Partial<WywInJsPluginOptions> & + Omit<PluginCustomOptions, 'themeArgs'>; const extensions = ['.js', '.jsx', '.mjs', '.cjs', '.ts', '.tsx', '.mts', '.cts']; @@ -100,13 +104,14 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => { theme, meta, transformLibraries = [], - preprocessor = basePreprocessor, + preprocessor, asyncResolve: asyncResolveOpt, debug = false, sourceMap = false, transformSx = true, overrideContext, tagResolver, + css, ...rest } = options; const cache = new TransformCacheCollection(); @@ -116,7 +121,7 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => { const isNext = meta?.type === 'next'; const outputCss = isNext && meta.outputCss; const babelTransformPlugin: UnpluginOptions = { - name: 'zero-plugin-transform-babel', + name: 'pigment-css-plugin-transform-babel', enforce: 'post', transformInclude(id) { return isZeroRuntimeProcessableFile(id, transformLibraries); @@ -137,6 +142,7 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => { }; }, }; + const projectPath = meta?.type === 'next' ? meta.projectPath : process.cwd(); let webpackResolver: AsyncResolver; @@ -151,8 +157,12 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => { return asyncResolveFallback(what, importer, stack); }; + const withRtl = (selector: string, cssText: string) => { + return basePreprocessor(selector, cssText, css); + }; + const wywInJSTransformPlugin: UnpluginOptions = { - name: 'zero-plugin-transform-wyw-in-js', + name: 'pigment-css-plugin-transform-wyw-in-js', enforce: 'post', buildEnd() { onDone(process.cwd()); @@ -188,12 +198,13 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => { compiler.options.resolve.plugins = compiler.options.resolve.plugins || []; compiler.options.resolve.plugins.push(resolverPlugin); }, - async transform(code, id) { + async transform(code, filePath) { + const [id] = filePath.split('?'); const transformServices = { options: { filename: id, root: process.cwd(), - preprocessor, + preprocessor: preprocessor ?? withRtl, pluginOptions: { ...rest, themeArgs: { @@ -246,8 +257,15 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => { map: result.sourceMap, }; } - const slug = slugify(cssText); - const cssFilename = `${slug}.zero.css`; + + if (isNext) { + // Handle url() replacement in css. Only handled in Next.js as the css is injected + // through the use of a placeholder CSS file that lies in the nextjs plugin package. + // So url paths can't be resolved relative to that file. + if (cssText && cssText.includes('url(')) { + cssText = await handleUrlReplacement(cssText, id, asyncResolve, projectPath); + } + } if (sourceMap && result.cssSourceMapText) { const map = Buffer.from(result.cssSourceMapText).toString('base64'); @@ -255,12 +273,13 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => { } // Virtual modules do not work consistently in Next.js (the build is done at least - // thrice) resulting in error in subsequent builds. So we use a placeholder CSS - // file with the actual CSS content as part of the query params. + // thrice with different combination of parameters) resulting in error in + // subsequent builds. So we use a placeholder CSS file with the actual CSS content + // as part of the query params. if (isNext) { const data = `${meta.placeholderCssFile}?${encodeURIComponent( JSON.stringify({ - filename: cssFilename, + filename: id.split('/').pop(), source: cssText, }), )}`; @@ -270,9 +289,13 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => { map: result.sourceMap, }; } + + const slug = slugify(cssText); + const cssFilename = `${slug}.pigment.css`; const cssId = `./${cssFilename}`; cssFileLookup.set(cssId, cssFilename); cssLookup.set(cssFilename, cssText); + return { code: `${result.code}\nimport ${JSON.stringify(`./${cssFilename}`)};`, map: result.sourceMap, @@ -287,7 +310,7 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => { const plugins: Array<UnpluginOptions> = [ { - name: 'zero-plugin-theme-tokens', + name: 'pigment-css-plugin-theme-tokens', enforce: 'pre', webpack(compiler) { compiler.hooks.normalModuleFactory.tap(pluginName, (nmf) => { @@ -295,7 +318,7 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => { pluginName, // @ts-expect-error CreateData is typed as 'object'... (createData: { matchResource?: string; settings: { sideEffects?: boolean } }) => { - if (createData.matchResource && createData.matchResource.endsWith('.zero.css')) { + if (createData.matchResource && createData.matchResource.endsWith('.pigment.css')) { createData.settings.sideEffects = true; } }, @@ -361,13 +384,13 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => { // This is already handled separately for Next.js using `placeholderCssFile` if (!isNext) { plugins.push({ - name: 'zero-plugin-load-output-css', + name: 'pigment-css-plugin-load-output-css', enforce: 'pre', resolveId(source: string) { return cssFileLookup.get(source); }, loadInclude(id) { - return id.endsWith('.zero.css'); + return id.endsWith('.pigment.css'); }, load(id) { return cssLookup.get(id) ?? ''; @@ -382,4 +405,4 @@ export const webpack = plugin.webpack as unknown as UnpluginFactoryOutput< WebpackPluginInstance >; -export { extendTheme }; +export { type AsyncResolver, extendTheme }; diff --git a/packages/pigment-css-unplugin/src/utils.ts b/packages/pigment-css-unplugin/src/utils.ts new file mode 100644 index 00000000000000..da108320f607b2 --- /dev/null +++ b/packages/pigment-css-unplugin/src/utils.ts @@ -0,0 +1,66 @@ +import * as path from 'node:path'; + +export type AsyncResolver = (what: string, importer: string, stack: string[]) => Promise<string>; + +/** + * There might be a better way to do this in future, but due to the async + * nature of the resolver, this is the best way currently to replace url() + * content references with the absolute path of the referenced file. + * This is because WyW-in-JS's preprocessor is a sync call. So we can't resolve + * paths in this call asyncronously. + * The upside is that we can use aliases in the url() references as well + * alongside relative paths. + */ +export const handleUrlReplacement = async ( + cssText: string, + filename: string, + asyncResolver: AsyncResolver, + projectPath: string, +) => { + // [0] [1][2] [3] [4] + const urlRegex = /\b(url\((["']?))(\.?[^)]+?)(\2\))/g; + let newCss = ''; + let match = urlRegex.exec(cssText); + let lastIndex = 0; + while (match) { + newCss += cssText.substring(lastIndex, match.index); + const mainItem = match[3]; + // no need to handle data uris or absolute paths + if ( + mainItem.startsWith('data:') || + mainItem.startsWith('http:') || + mainItem.startsWith('https:') + ) { + newCss += `url(${mainItem})`; + } else if (mainItem[0] === '/') { + const newPath = mainItem.replace(projectPath, '').split(path.sep).join('/'); + if (newPath === mainItem) { + // absolute path unrelated to files in the project or in public directory + newCss += `url(${mainItem})`; + } else { + // absolute path to files in the project + newCss += `url(~${mainItem.replace(projectPath, '').split(path.sep).join('/')})`; + } + } else { + // eslint-disable-next-line no-await-in-loop + const resolvedAbsolutePath = await asyncResolver(mainItem, filename, []); + if (!resolvedAbsolutePath) { + newCss += `url(${mainItem})`; + } else { + let pathFromRoot = resolvedAbsolutePath.replace(projectPath, ''); + // Need to do this for Windows paths + pathFromRoot = pathFromRoot.split(path.sep).join('/'); + // const relativePathToProjectRoot = path.relative() + // Next.js expects the path to be relative to the project root and starting with ~ + newCss += `url(~${pathFromRoot})`; + } + } + lastIndex = match.index + match[0].length; + match = urlRegex.exec(cssText); + } + newCss += cssText.substring(lastIndex); + if (!newCss) { + return cssText; + } + return newCss; +}; diff --git a/packages/pigment-css-unplugin/tests/utils.test.ts b/packages/pigment-css-unplugin/tests/utils.test.ts new file mode 100644 index 00000000000000..c0f8a4bd97ee4f --- /dev/null +++ b/packages/pigment-css-unplugin/tests/utils.test.ts @@ -0,0 +1,88 @@ +import { expect } from 'chai'; +import { handleUrlReplacement } from '../src/utils'; + +const DATA_URI = + 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIwLjUgMTMuN2'; +const HTML_LOGO_URL = 'https://mui.com/static/logo.svg'; +const ABSOLUTE_PATH = '/static/logo.svg'; +const dummyResolver = (url: string) => { + return Promise.resolve(url); +}; + +describe('utils', () => { + describe('handleUrlReplacement', () => { + it('should not replace http/data/absolute urls', async () => { + [DATA_URI, HTML_LOGO_URL, ABSOLUTE_PATH].forEach(async (url) => { + const cssString1 = `.className { + background-image: url(${url}); + }`; + const cssString2 = `.className { + background-image: url('${url}'); + }`; + expect( + await handleUrlReplacement( + cssString1, + '/path/to/project/filename.ts', + dummyResolver, + '/path/to/project', + ), + ).to.equal(cssString1); + expect( + await handleUrlReplacement( + cssString2, + '/path/to/project/filename.ts', + dummyResolver, + '/path/to/project', + ), + ).to.equal(cssString1); + }); + }); + + it('should replace relative or aliased paths with paths relative to the current working directory', async () => { + const projectPath = '/path/to/project'; + const filePath = `${projectPath}/src/components/Slider.tsx`; + const resolver = (url: string): Promise<string> => { + return new Promise((resolve) => { + if (url.startsWith('@/')) { + resolve(`${projectPath}/src${url.slice(1)}`); + } else if (url.startsWith('../../')) { + resolve(`${projectPath}/src/${url.replace('../../', '')}`); + } else if (url.startsWith('/')) { + resolve(url); + } + }); + }; + const cssString = `.className_c17ksbvo{ + background-color:var(--mui-palette-background-default, #fff); + color:var(--mui-palette-text-primary, rgba(0, 0, 0, 0.87)); + background-image: url('${DATA_URI}'); + background-image: url('${HTML_LOGO_URL}'); + background-image: url(${ABSOLUTE_PATH}); + background-image: url('../../assets/mui.svg'); + background-image: url('@/assets/mui.svg'); + background-image: url('${projectPath}/src/assets/mui.svg'); + background-image: url('/assets/mui.svg'); + background-image: url('@/assets/mui.svg'); + display: flex; + position: absolute; + }`; + const expectedCssString = `.className_c17ksbvo{ + background-color:var(--mui-palette-background-default, #fff); + color:var(--mui-palette-text-primary, rgba(0, 0, 0, 0.87)); + background-image: url(${DATA_URI}); + background-image: url(${HTML_LOGO_URL}); + background-image: url(${ABSOLUTE_PATH}); + background-image: url(~/src/assets/mui.svg); + background-image: url(~/src/assets/mui.svg); + background-image: url(~/src/assets/mui.svg); + background-image: url(/assets/mui.svg); + background-image: url(~/src/assets/mui.svg); + display: flex; + position: absolute; + }`; + expect(await handleUrlReplacement(cssString, filePath, resolver, projectPath)).to.equal( + expectedCssString, + ); + }); + }); +}); diff --git a/packages/pigment-css-unplugin/tsconfig.json b/packages/pigment-css-unplugin/tsconfig.json index aa7c7cb0fab5b0..76104e9ff8ee6d 100644 --- a/packages/pigment-css-unplugin/tsconfig.json +++ b/packages/pigment-css-unplugin/tsconfig.json @@ -11,7 +11,8 @@ "@mui/utils/*": ["./packages/mui-utils/src/*"], "@pigment-css/react": ["./packages/pigment-css-react/src"], "@pigment-css/react/*": ["./packages/pigment-css-react/src/*"] - } + }, + "types": ["node", "mocha", "chai"] }, "include": ["src/**/*.ts"], "exclude": ["./tsup.config.ts"] diff --git a/packages/pigment-css-vite-plugin/package.json b/packages/pigment-css-vite-plugin/package.json index 9a76867d55c749..866082e607cfe5 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.4", + "version": "0.0.6", "main": "build/index.js", "module": "build/index.mjs", "types": "build/index.d.ts", @@ -28,8 +28,8 @@ "typecheck": "tsc --noEmit -p ." }, "dependencies": { - "@babel/core": "^7.23.9", - "@babel/preset-typescript": "^7.23.3", + "@babel/core": "^7.24.4", + "@babel/preset-typescript": "^7.24.1", "@pigment-css/react": "workspace:^", "@wyw-in-js/shared": "^0.5.0", "@wyw-in-js/transform": "^0.5.0", @@ -37,7 +37,7 @@ }, "devDependencies": { "@types/babel__core": "^7.20.5", - "vite": "^5.0.12" + "vite": "^5.2.8" }, "peerDependencies": { "vite": "^4.0.0 || ^5.0.0" diff --git a/packages/pigment-css-vite-plugin/src/index.ts b/packages/pigment-css-vite-plugin/src/index.ts index 20bb2d6c39b716..a3772fce0f726e 100644 --- a/packages/pigment-css-vite-plugin/src/index.ts +++ b/packages/pigment-css-vite-plugin/src/index.ts @@ -9,16 +9,11 @@ import { import { transformAsync } from '@babel/core'; import baseWywPluginPlugin, { type VitePluginOptions } from './vite-plugin'; -export interface PigmentOptions extends VitePluginOptions { +export interface PigmentOptions extends Omit<VitePluginOptions, 'themeArgs'> { /** * The theme object that you want to be passed to the `styled` function */ theme: Theme; - /** - * Whether the css variables for the default theme should target the :root selector or not. - * @default true - */ - injectDefaultThemeInRoot?: boolean; } const VIRTUAL_CSS_FILE = `\0zero-runtime-styles.css`; diff --git a/packages/rsc-builder/package.json b/packages/rsc-builder/package.json index 8e9a60d6c178e2..8960baa67a5402 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.31" } } diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json index e9574b5a71ece2..5bd16cd571c856 100644 --- a/packages/test-utils/package.json +++ b/packages/test-utils/package.json @@ -18,15 +18,15 @@ "./setupKarma": "./src/setupKarma.js" }, "dependencies": { - "@babel/plugin-transform-modules-commonjs": "^7.23.3", - "@babel/preset-typescript": "^7.23.3", + "@babel/plugin-transform-modules-commonjs": "^7.24.1", + "@babel/preset-typescript": "^7.24.1", "@babel/register": "^7.23.7", - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.24.4", "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.4", "@mnajdova/enzyme-adapter-react-18": "^0.2.0", "@testing-library/dom": "^9.3.4", - "@testing-library/react": "^14.2.2", + "@testing-library/react": "^14.3.1", "chai": "^4.4.1", "chai-dom": "^1.12.0", "dom-accessibility-api": "^0.6.3", @@ -35,14 +35,14 @@ "fs-extra": "^11.2.0", "jsdom": "^24.0.0", "lodash": "^4.17.21", - "mocha": "^10.3.0", - "playwright": "^1.42.1", + "mocha": "^10.4.0", + "playwright": "^1.43.1", "prop-types": "^15.8.1", "react-test-renderer": "^18.2.0", "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", @@ -51,7 +51,7 @@ "@types/react-dom": "^18.2.19", "@types/react-test-renderer": "^18.0.7", "@types/sinon": "^10.0.20", - "typescript": "^5.4.3" + "typescript": "^5.4.5" }, "peerDependencies": { "react": "^18.2.0", diff --git a/packages/zero-runtime/src/RtlProvider/index.ts b/packages/zero-runtime/src/RtlProvider/index.ts deleted file mode 100644 index 811b0c2c514f04..00000000000000 --- a/packages/zero-runtime/src/RtlProvider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as RtlProvider, useRtl } from '@mui/system/RtlProvider'; diff --git a/patches/@wyw-in-js__transform@0.5.0.patch b/patches/@wyw-in-js__transform@0.5.0.patch new file mode 100644 index 00000000000000..2c8676be1898aa --- /dev/null +++ b/patches/@wyw-in-js__transform@0.5.0.patch @@ -0,0 +1,44 @@ +diff --git a/esm/module.js b/esm/module.js +index 527070166142e7fda5ed14e1f3465052c82f2a2b..122061e0d481066a2b5fd0c7ab2a8b1d523b1ef1 100644 +--- a/esm/module.js ++++ b/esm/module.js +@@ -119,7 +119,7 @@ export class Module { + this.services = services; + this.moduleImpl = moduleImpl; + this.cache = services.cache; +- this.#entrypointRef = new WeakRef(entrypoint); ++ this.#entrypointRef = entrypoint; + this.idx = entrypoint.idx; + this.id = entrypoint.name; + this.filename = entrypoint.name; +@@ -143,7 +143,7 @@ export class Module { + this.debug('the whole exports was overridden with %O', value); + } + get entrypoint() { +- const entrypoint = this.#entrypointRef.deref(); ++ const entrypoint = this.#entrypointRef; + invariant(entrypoint, `Module ${this.idx} is disposed`); + return entrypoint; + } +diff --git a/lib/module.js b/lib/module.js +index d2f2644c2469ac7ad0dbd1b9f58099eda4084b80..b8bad9c43c35bef14c3f6a277f8c9974607b2a00 100644 +--- a/lib/module.js ++++ b/lib/module.js +@@ -127,7 +127,7 @@ class Module { + this.services = services; + this.moduleImpl = moduleImpl; + this.cache = services.cache; +- this.#entrypointRef = new WeakRef(entrypoint); ++ this.#entrypointRef = entrypoint; + this.idx = entrypoint.idx; + this.id = entrypoint.name; + this.filename = entrypoint.name; +@@ -151,7 +151,7 @@ class Module { + this.debug('the whole exports was overridden with %O', value); + } + get entrypoint() { +- const entrypoint = this.#entrypointRef.deref(); ++ const entrypoint = this.#entrypointRef; + (0, _tsInvariant.invariant)(entrypoint, `Module ${this.idx} is disposed`); + return entrypoint; + } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ccdc319d95bb87..08af18d8d31af1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,28 +5,33 @@ settings: excludeLinksFromLockfile: false overrides: - '@babel/core': ^7.23.9 - '@babel/code-frame': ^7.23.5 + '@babel/core': ^7.24.4 + '@babel/code-frame': ^7.24.2 '@babel/plugin-proposal-class-properties': ^7.18.6 '@babel/plugin-proposal-object-rest-spread': ^7.20.7 '@babel/plugin-proposal-nullish-coalescing-operator': ^7.18.6 '@babel/plugin-proposal-numeric-separator': ^7.18.6 '@babel/plugin-proposal-optional-chaining': ^7.21.0 '@babel/plugin-transform-destructuring': npm:@minh.nguyen/plugin-transform-destructuring@^7.5.2 - '@babel/plugin-transform-runtime': ^7.23.9 - '@babel/preset-env': ^7.23.9 - '@babel/preset-react': ^7.23.3 - '@babel/preset-typescript': ^7.23.3 - '@babel/runtime': ^7.23.9 - '@babel/types': ^7.23.9 - '@definitelytyped/header-parser': ^0.2.8 + '@babel/plugin-transform-runtime': ^7.24.3 + '@babel/preset-env': ^7.24.4 + '@babel/preset-react': ^7.24.1 + '@babel/preset-typescript': ^7.24.1 + '@babel/runtime': ^7.24.4 + '@babel/types': ^7.24.0 + '@definitelytyped/header-parser': ^0.2.9 '@definitelytyped/typescript-versions': ^0.1.1 - '@definitelytyped/utils': ^0.1.5 - '@types/node': ^18.19.25 + '@definitelytyped/utils': ^0.1.6 + '@types/node': ^18.19.31 '@types/react': 18.2.55 '@types/react-dom': 18.2.19 cross-fetch: ^4.0.0 +patchedDependencies: + '@wyw-in-js/transform@0.5.0': + hash: zicb4vap2prvslgwedcxhpcmvy + path: patches/@wyw-in-js__transform@0.5.0.patch + importers: .: @@ -51,47 +56,47 @@ importers: specifier: ^1.5.5 version: 1.5.5 '@babel/cli': - specifier: ^7.23.9 - version: 7.23.9(@babel/core@7.24.3) + specifier: ^7.24.1 + version: 7.24.1(@babel/core@7.24.4) '@babel/core': - specifier: ^7.23.9 - version: 7.24.3 + specifier: ^7.24.4 + version: 7.24.4 '@babel/node': specifier: ^7.23.9 - version: 7.23.9(@babel/core@7.24.3) + version: 7.23.9(@babel/core@7.24.4) '@babel/plugin-proposal-class-properties': specifier: ^7.18.6 - version: 7.18.6(@babel/core@7.24.3) + version: 7.18.6(@babel/core@7.24.4) '@babel/plugin-proposal-object-rest-spread': specifier: ^7.20.7 - version: 7.20.7(@babel/core@7.24.3) + version: 7.20.7(@babel/core@7.24.4) '@babel/plugin-proposal-private-methods': specifier: ^7.18.6 - version: 7.18.6(@babel/core@7.24.3) + version: 7.18.6(@babel/core@7.24.4) '@babel/plugin-proposal-private-property-in-object': specifier: ^7.21.11 - version: 7.21.11(@babel/core@7.24.3) + version: 7.21.11(@babel/core@7.24.4) '@babel/plugin-transform-object-assign': - specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.24.3) + specifier: ^7.24.1 + version: 7.24.1(@babel/core@7.24.4) '@babel/plugin-transform-react-constant-elements': - specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.24.3) + specifier: ^7.24.1 + version: 7.24.1(@babel/core@7.24.4) '@babel/plugin-transform-runtime': - specifier: ^7.23.9 - version: 7.24.3(@babel/core@7.24.3) + specifier: ^7.24.3 + version: 7.24.3(@babel/core@7.24.4) '@babel/preset-env': - specifier: ^7.23.9 - version: 7.24.3(@babel/core@7.24.3) + specifier: ^7.24.4 + version: 7.24.4(@babel/core@7.24.4) '@babel/preset-react': - specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.24.3) + specifier: ^7.24.1 + version: 7.24.1(@babel/core@7.24.4) '@babel/preset-typescript': - specifier: ^7.23.3 - version: 7.24.1(@babel/core@7.24.3) + specifier: ^7.24.1 + version: 7.24.1(@babel/core@7.24.4) '@babel/register': specifier: ^7.23.7 - version: 7.23.7(@babel/core@7.24.3) + version: 7.23.7(@babel/core@7.24.4) '@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,17 +125,17 @@ importers: specifier: workspace:^ version: link:packages/mui-utils/build '@next/eslint-plugin-next': - specifier: ^14.1.4 - version: 14.1.4 + specifier: ^14.2.1 + version: 14.2.1 '@octokit/rest': - specifier: ^20.0.2 - version: 20.0.2 + specifier: ^20.1.0 + version: 20.1.0 '@pigment-css/react': specifier: workspace:^ version: link:packages/pigment-css-react '@playwright/test': - specifier: 1.42.1 - version: 1.42.1 + specifier: 1.43.1 + version: 1.43.1 '@types/enzyme': specifier: ^3.10.18 version: 3.10.18 @@ -144,8 +149,8 @@ importers: specifier: ^10.0.6 version: 10.0.6 '@types/node': - specifier: ^18.19.25 - version: 18.19.26 + specifier: ^18.19.31 + version: 18.19.31 '@types/prettier': specifier: ^2.7.3 version: 2.7.3 @@ -156,14 +161,14 @@ importers: 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.57.0)(typescript@5.4.3) + specifier: ^6.21.0 + version: 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.5) '@typescript-eslint/parser': - specifier: ^6.19.1 - version: 6.19.1(eslint@8.57.0)(typescript@5.4.3) + specifier: ^6.21.0 + version: 6.21.0(eslint@8.57.0)(typescript@5.4.5) babel-loader: specifier: ^9.1.3 - version: 9.1.3(@babel/core@7.24.3)(webpack@5.90.3) + version: 9.1.3(@babel/core@7.24.4)(webpack@5.90.3) babel-plugin-istanbul: specifier: ^6.1.1 version: 6.1.1 @@ -214,7 +219,7 @@ importers: 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.57.0) + version: 17.1.0(@typescript-eslint/eslint-plugin@6.21.0)(@typescript-eslint/parser@6.21.0)(eslint-plugin-import@2.29.1)(eslint@8.57.0) eslint-config-prettier: specifier: ^9.1.0 version: 9.1.0(eslint@8.57.0) @@ -229,7 +234,7 @@ importers: 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.57.0) + version: 2.29.1(@typescript-eslint/parser@6.21.0)(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.57.0) @@ -237,8 +242,8 @@ importers: specifier: workspace:^ version: link:packages/eslint-plugin-material-ui eslint-plugin-mocha: - specifier: ^10.4.1 - version: 10.4.1(eslint@8.57.0) + specifier: ^10.4.2 + version: 10.4.2(eslint@8.57.0) eslint-plugin-react: specifier: ^7.34.1 version: 7.34.1(eslint@8.57.0) @@ -285,11 +290,11 @@ importers: specifier: ^4.17.21 version: 4.17.21 markdownlint-cli2: - specifier: ^0.12.1 - version: 0.12.1 + specifier: ^0.13.0 + version: 0.13.0 mocha: - specifier: ^10.3.0 - version: 10.3.0 + specifier: ^10.4.0 + version: 10.4.0 nx: specifier: ^17.3.2 version: 17.3.2 @@ -334,22 +339,22 @@ 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.38)(typescript@5.4.3) + version: 8.0.2(postcss@8.4.38)(typescript@5.4.5) tsx: - specifier: ^4.7.1 - version: 4.7.1 + specifier: ^4.7.2 + version: 4.7.2 typescript: - specifier: ^5.4.3 - version: 5.4.3 + specifier: ^5.4.5 + version: 5.4.5 webpack: specifier: ^5.90.3 version: 5.90.3(esbuild@0.19.11)(webpack-cli@5.1.4) webpack-bundle-analyzer: - specifier: ^4.10.1 - version: 4.10.1 + specifier: ^4.10.2 + version: 4.10.2 webpack-cli: specifier: ^5.1.4 - version: 5.1.4(webpack-bundle-analyzer@4.10.1)(webpack@5.90.3) + version: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.90.3) yargs: specifier: ^17.7.2 version: 17.7.2 @@ -371,6 +376,9 @@ importers: '@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 @@ -391,7 +399,7 @@ importers: 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) + version: 14.2.1(@babel/core@7.24.4)(@playwright/test@1.43.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -403,8 +411,8 @@ importers: specifier: workspace:^ version: link:../../packages/pigment-css-nextjs-plugin '@types/node': - specifier: ^18.19.25 - version: 18.19.26 + specifier: ^18.19.31 + version: 18.19.31 '@types/react': specifier: 18.2.55 version: 18.2.55 @@ -415,8 +423,8 @@ importers: specifier: ^8.57.0 version: 8.57.0 typescript: - specifier: ^5.4.3 - version: 5.4.3 + specifier: ^5.4.5 + version: 5.4.5 apps/pigment-css-vite-app: dependencies: @@ -426,6 +434,9 @@ importers: '@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 @@ -454,18 +465,18 @@ importers: specifier: ^4.0.13 version: 4.0.13(react@18.2.0) react-router: - specifier: ^6.22.1 - version: 6.22.1(react@18.2.0) + 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) + specifier: ^6.22.3 + version: 6.22.3(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) + specifier: ^7.24.1 + version: 7.24.1(@babel/core@7.24.4) '@babel/preset-typescript': - specifier: ^7.23.3 - version: 7.24.1(@babel/core@7.24.3) + specifier: ^7.24.1 + version: 7.24.1(@babel/core@7.24.4) '@pigment-css/vite-plugin': specifier: workspace:^ version: link:../../packages/pigment-css-vite-plugin @@ -477,7 +488,7 @@ importers: version: 18.2.19 '@vitejs/plugin-react': specifier: ^4.2.1 - version: 4.2.1(vite@5.2.2) + version: 4.2.1(vite@5.2.8) postcss: specifier: ^8.4.38 version: 8.4.38 @@ -485,17 +496,17 @@ importers: specifier: ^1.0.1 version: 1.0.1 vite: - specifier: 5.2.2 - version: 5.2.2(@types/node@18.19.26) + specifier: 5.2.8 + version: 5.2.8(@types/node@18.19.31) vite-plugin-pages: - specifier: ^0.32.0 - version: 0.32.0(vite@5.2.2) + specifier: ^0.32.1 + version: 0.32.1(vite@5.2.8) benchmark: dependencies: '@chakra-ui/system': specifier: ^2.6.2 - version: 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0) + version: 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.2.0) '@emotion/react': specifier: ^11.11.4 version: 11.11.4(@types/react@18.2.55)(react@18.2.0) @@ -503,8 +514,8 @@ importers: specifier: ^11.11.0 version: 11.11.0 '@emotion/styled': - specifier: ^11.11.0 - version: 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) + specifier: ^11.11.5 + version: 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) '@mui/material': specifier: workspace:^ version: link:../packages/mui-material/build @@ -524,7 +535,7 @@ importers: specifier: workspace:^ version: link:../docs express: - specifier: ^4.18.3 + specifier: ^4.19.2 version: 4.19.2 fs-extra: specifier: ^11.2.0 @@ -533,8 +544,8 @@ importers: specifier: ^10.10.0 version: 10.10.0 playwright: - specifier: ^1.42.1 - version: 1.42.1 + specifier: ^1.43.1 + version: 1.43.1 prop-types: specifier: ^15.8.1 version: 15.8.1 @@ -575,17 +586,17 @@ importers: docs: dependencies: '@babel/core': - specifier: ^7.23.9 - version: 7.24.3 + specifier: ^7.24.4 + version: 7.24.4 '@babel/plugin-transform-object-assign': - specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.24.3) + specifier: ^7.24.1 + version: 7.24.1(@babel/core@7.24.4) '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 '@babel/runtime-corejs2': - specifier: ^7.23.9 - version: 7.23.9 + specifier: ^7.24.4 + version: 7.24.4 '@docsearch/react': specifier: ^3.6.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) @@ -599,17 +610,17 @@ importers: specifier: ^11.11.0 version: 11.11.0 '@emotion/styled': - specifier: ^11.11.0 - version: 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) + specifier: ^11.11.5 + version: 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) '@fortawesome/fontawesome-svg-core': - specifier: ^6.5.1 - version: 6.5.1 + specifier: ^6.5.2 + version: 6.5.2 '@fortawesome/free-solid-svg-icons': - specifier: ^6.5.1 - version: 6.5.1 + specifier: ^6.5.2 + version: 6.5.2 '@fortawesome/react-fontawesome': specifier: ^0.2.0 - version: 0.2.0(@fortawesome/fontawesome-svg-core@6.5.1)(react@18.2.0) + version: 0.2.0(@fortawesome/fontawesome-svg-core@6.5.2)(react@18.2.0) '@mui/base': specifier: workspace:* version: link:../packages/mui-base/build @@ -651,31 +662,31 @@ importers: version: link:../packages/mui-utils/build '@mui/x-charts': 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) + version: 6.19.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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 - 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) + specifier: 7.2.0 + version: 7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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 - 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) + specifier: 7.2.0 + version: 7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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 - 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) + specifier: 7.2.0 + version: 7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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 - 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) + specifier: 7.2.0 + version: 7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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.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) + specifier: 6.19.9 + version: 6.19.9(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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.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) + specifier: 6.19.9 + version: 6.19.9(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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) '@mui/x-tree-view': specifier: 6.17.0 - version: 6.17.0(@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) + version: 6.17.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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) '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 @@ -758,14 +769,14 @@ importers: specifier: ^1.5.0 version: 1.5.0 markdown-to-jsx: - specifier: ^7.4.5 - version: 7.4.5(react@18.2.0) + specifier: ^7.4.7 + version: 7.4.7(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) + specifier: ^5.1.0 + version: 5.1.0(@mui/material@packages+mui-material+build)(react@18.2.0) next: specifier: ^13.5.1 - version: 13.5.1(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) + version: 13.5.1(@babel/core@7.24.4)(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) @@ -794,20 +805,20 @@ importers: specifier: ^6.5.9 version: 6.5.9(final-form@4.20.10)(react@18.2.0) react-imask: - specifier: ^7.5.0 - version: 7.5.0(react@18.2.0) + specifier: ^7.6.0 + version: 7.6.0(react@18.2.0) react-intersection-observer: - specifier: ^9.8.1 - version: 9.8.1(react-dom@18.2.0)(react@18.2.0) + specifier: ^9.8.2 + version: 9.8.2(react-dom@18.2.0)(react@18.2.0) react-is: specifier: ^18.2.0 version: 18.2.0 react-number-format: - specifier: ^5.3.3 - version: 5.3.3(react-dom@18.2.0)(react@18.2.0) + specifier: ^5.3.4 + version: 5.3.4(react-dom@18.2.0)(react@18.2.0) react-router-dom: - specifier: ^6.21.3 - version: 6.22.1(react-dom@18.2.0)(react@18.2.0) + specifier: ^6.22.3 + version: 6.22.3(react-dom@18.2.0)(react@18.2.0) react-runner: specifier: ^1.0.3 version: 1.0.3(react-dom@18.2.0)(react@18.2.0) @@ -827,8 +838,8 @@ importers: specifier: ^4.4.5 version: 4.4.5(react-dom@18.2.0)(react@18.2.0) react-virtuoso: - specifier: ^4.7.2 - version: 4.7.2(react-dom@18.2.0)(react@18.2.0) + specifier: ^4.7.8 + version: 4.7.8(react-dom@18.2.0)(react@18.2.0) react-window: specifier: ^1.8.10 version: 1.8.10(react-dom@18.2.0)(react@18.2.0) @@ -848,15 +859,15 @@ importers: specifier: ^3.0.1 version: 3.0.1(react@18.2.0) webpack-bundle-analyzer: - specifier: ^4.10.1 - version: 4.10.1 + specifier: ^4.10.2 + version: 4.10.2 devDependencies: '@babel/plugin-transform-react-constant-elements': - specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.24.3) + specifier: ^7.24.1 + version: 7.24.1(@babel/core@7.24.4) '@babel/preset-typescript': - specifier: ^7.23.3 - version: 7.24.1(@babel/core@7.24.3) + specifier: ^7.24.1 + version: 7.24.1(@babel/core@7.24.4) '@mui-internal/test-utils': specifier: workspace:^ version: link:../packages/test-utils @@ -870,8 +881,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 @@ -879,8 +890,8 @@ importers: specifier: ^0.2.2 version: 0.2.2 '@types/node': - specifier: ^18.19.25 - version: 18.19.26 + specifier: ^18.19.31 + version: 18.19.31 '@types/prop-types': specifier: ^15.7.12 version: 15.7.12 @@ -918,14 +929,14 @@ importers: specifier: ^5.1.2 version: 5.1.2 playwright: - specifier: ^1.42.1 - version: 1.42.1 + specifier: ^1.43.1 + version: 1.43.1 prettier: specifier: ^3.2.5 version: 3.2.5 tailwindcss: - specifier: ^3.4.1 - version: 3.4.1 + specifier: ^3.4.3 + version: 3.4.3 yargs: specifier: ^17.7.2 version: 17.7.2 @@ -936,25 +947,25 @@ importers: specifier: ^5.0.5 version: 5.0.5 typescript: - specifier: ^5.4.3 - version: 5.4.3 + specifier: ^5.4.5 + version: 5.4.5 packages-internal/scripts: dependencies: '@babel/core': - specifier: ^7.23.9 - version: 7.24.3 + specifier: ^7.24.4 + version: 7.24.4 '@babel/plugin-syntax-class-properties': specifier: ^7.12.13 - version: 7.12.13(@babel/core@7.24.3) + version: 7.12.13(@babel/core@7.24.4) '@babel/plugin-syntax-jsx': - specifier: ^7.23.3 - version: 7.24.1(@babel/core@7.24.3) + specifier: ^7.24.1 + version: 7.24.1(@babel/core@7.24.4) '@babel/plugin-syntax-typescript': - specifier: ^7.23.3 - version: 7.24.1(@babel/core@7.24.3) + specifier: ^7.24.1 + version: 7.24.1(@babel/core@7.24.4) '@babel/types': - specifier: ^7.23.9 + specifier: ^7.24.0 version: 7.24.0 '@mui/internal-docs-utils': specifier: workspace:^ @@ -966,21 +977,21 @@ importers: specifier: ^4.17.21 version: 4.17.21 typescript: - specifier: ^5.4.3 - version: 5.4.3 + specifier: ^5.4.5 + version: 5.4.5 uuid: specifier: ^9.0.1 version: 9.0.1 devDependencies: '@babel/register': specifier: ^7.23.7 - version: 7.23.7(@babel/core@7.24.3) + version: 7.23.7(@babel/core@7.24.4) '@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 @@ -988,8 +999,8 @@ importers: specifier: ^4.17.0 version: 4.17.0 '@types/node': - specifier: ^18.19.25 - version: 18.19.26 + specifier: ^18.19.31 + version: 18.19.31 '@types/prettier': specifier: ^2.7.3 version: 2.7.3 @@ -1015,13 +1026,13 @@ importers: packages/api-docs-builder: dependencies: '@babel/core': - specifier: ^7.23.9 - version: 7.24.3 + specifier: ^7.24.4 + version: 7.24.4 '@babel/preset-typescript': - specifier: ^7.23.3 - version: 7.24.1(@babel/core@7.24.3) + specifier: ^7.24.1 + version: 7.24.1(@babel/core@7.24.4) '@babel/traverse': - specifier: ^7.23.9 + specifier: ^7.24.1 version: 7.24.1 '@mui/internal-docs-utils': specifier: workspace:^ @@ -1057,8 +1068,8 @@ importers: specifier: ^13.0.0 version: 13.0.0 typescript: - specifier: ^5.4.3 - version: 5.4.3 + specifier: ^5.4.5 + version: 5.4.5 unist-util-visit: specifier: ^2.0.3 version: 2.0.3 @@ -1070,8 +1081,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 @@ -1082,8 +1093,8 @@ importers: specifier: ^10.0.6 version: 10.0.6 '@types/node': - specifier: ^18.19.25 - version: 18.19.26 + specifier: ^18.19.31 + version: 18.19.31 '@types/react-docgen': specifier: workspace:* version: link:../react-docgen-types @@ -1113,14 +1124,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.26 + specifier: ^18.19.31 + version: 18.19.31 '@types/sinon': specifier: ^10.0.20 version: 10.0.20 @@ -1131,8 +1142,8 @@ importers: specifier: ^15.2.0 version: 15.2.0 typescript: - specifier: ^5.4.3 - version: 5.4.3 + specifier: ^5.4.5 + version: 5.4.5 packages/eslint-plugin-material-ui: dependencies: @@ -1141,11 +1152,11 @@ importers: version: 10.3.0 devDependencies: '@types/eslint': - specifier: ^8.56.6 - version: 8.56.6 + specifier: ^8.56.9 + version: 8.56.9 '@typescript-eslint/parser': - specifier: ^6.19.1 - version: 6.19.1(eslint@8.57.0)(typescript@5.4.3) + specifier: ^6.21.0 + version: 6.21.0(eslint@8.57.0)(typescript@5.4.5) eslint: specifier: ^8.57.0 version: 8.57.0 @@ -1160,8 +1171,8 @@ importers: version: 9.0.1 optionalDependencies: aws-sdk: - specifier: ^2.1579.0 - version: 2.1585.0 + specifier: ^2.1599.0 + version: 2.1599.0 devDependencies: claudia: specifier: ^5.14.1 @@ -1170,8 +1181,8 @@ importers: packages/markdown: dependencies: '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 lodash: specifier: ^4.17.21 version: 4.17.21 @@ -1183,8 +1194,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 @@ -1192,14 +1203,14 @@ importers: packages/mui-babel-macros: dependencies: '@babel/helper-module-imports': - specifier: ^7.22.15 + specifier: ^7.24.3 version: 7.24.3 '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 '@mui/utils': specifier: ^5.0.0 - version: link:../mui-utils/build + version: 5.15.14(@types/react@18.2.55)(react@18.2.0) babel-plugin-macros: specifier: ^3.1.0 version: 3.1.0 @@ -1211,17 +1222,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.26 + specifier: ^18.19.31 + version: 18.19.31 babel-plugin-tester: specifier: ^11.0.4 - version: 11.0.4(@babel/core@7.24.3) + version: 11.0.4(@babel/core@7.24.4) chai: specifier: ^4.4.1 version: 4.4.1 @@ -1229,8 +1240,8 @@ importers: packages/mui-base: dependencies: '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 '@floating-ui/react-dom': specifier: ^2.0.8 version: 2.0.8(react-dom@18.2.0)(react@18.2.0) @@ -1257,14 +1268,14 @@ importers: specifier: workspace:^ version: link:../mui-babel-macros '@testing-library/react': - specifier: ^14.2.2 - version: 14.2.2(react-dom@18.2.0)(react@18.2.0) + specifier: ^14.3.1 + version: 14.3.1(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.12 version: 15.7.12 @@ -1300,20 +1311,20 @@ importers: packages/mui-codemod: dependencies: '@babel/core': - specifier: ^7.23.9 - version: 7.24.3 + specifier: ^7.24.4 + version: 7.24.4 '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 '@babel/traverse': - specifier: ^7.23.9 + specifier: ^7.24.1 version: 7.24.1 jscodeshift: - specifier: ^0.13.1 - version: 0.13.1(@babel/preset-env@7.24.3) + specifier: ^0.15.2 + version: 0.15.2(@babel/preset-env@7.24.4) jscodeshift-add-imports: specifier: ^1.0.10 - version: 1.0.10(jscodeshift@0.13.1) + version: 1.0.10(jscodeshift@0.15.2) postcss: specifier: ^8.4.38 version: 8.4.38 @@ -1325,11 +1336,11 @@ importers: 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 + specifier: 0.11.11 + version: 0.11.11 chai: specifier: ^4.4.1 version: 4.4.1 @@ -1341,14 +1352,14 @@ importers: packages/mui-docs: dependencies: '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 '@mui/base': specifier: '*' version: link:../mui-base/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) + version: 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.55)(react@18.2.0) clsx: specifier: ^2.1.0 version: 2.1.0 @@ -1366,8 +1377,8 @@ importers: specifier: workspace:* version: link:../mui-material/build '@types/node': - specifier: ^18.19.25 - version: 18.19.26 + specifier: ^18.19.31 + version: 18.19.31 '@types/prop-types': specifier: ^15.7.12 version: 15.7.12 @@ -1376,7 +1387,7 @@ importers: version: 18.2.55 next: specifier: ^13.5.1 - version: 13.5.1(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) + version: 13.5.1(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -1385,12 +1396,12 @@ importers: packages/mui-envinfo: dependencies: envinfo: - specifier: ^7.11.1 - version: 7.11.1 + specifier: ^7.12.0 + version: 7.12.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 @@ -1404,17 +1415,17 @@ importers: specifier: ^11.11.4 version: 11.11.4(@types/react@18.2.55)(react@18.2.0) '@emotion/styled': - specifier: ^11.11.0 - version: 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) + specifier: ^11.11.5 + version: 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) '@mui/base': specifier: 5.0.0-beta.30 version: 5.0.0-beta.30(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/joy': specifier: 5.0.0-beta.22 - version: 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) + version: 5.0.0-beta.22(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/material': specifier: 5.15.4 - version: 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) + version: 5.15.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -1429,8 +1440,8 @@ importers: packages/mui-icons-material: dependencies: '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 devDependencies: '@mui/icons-material': specifier: workspace:* @@ -1442,8 +1453,8 @@ 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 version: 18.2.55 @@ -1488,14 +1499,14 @@ importers: packages/mui-joy: dependencies: '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 '@emotion/react': specifier: ^11.5.0 version: 11.11.4(@types/react@18.2.55)(react@18.2.0) '@emotion/styled': specifier: ^11.3.0 - version: 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) + version: 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) '@mui/base': specifier: workspace:* version: link:../mui-base/build @@ -1525,8 +1536,8 @@ 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.12 version: 15.7.12 @@ -1550,7 +1561,7 @@ importers: version: 4.17.21 next: specifier: ^13.4.19 - version: 13.5.1(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) + version: 13.5.1(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -1565,14 +1576,14 @@ importers: packages/mui-lab: dependencies: '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 '@emotion/react': specifier: ^11.5.0 version: 11.11.4(@types/react@18.2.55)(react@18.2.0) '@emotion/styled': specifier: ^11.3.0 - version: 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) + version: 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) '@mui/base': specifier: workspace:* version: link:../mui-base/build @@ -1599,8 +1610,8 @@ 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.12 version: 15.7.12 @@ -1630,14 +1641,14 @@ importers: packages/mui-material: dependencies: '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 '@emotion/react': specifier: ^11.5.0 version: 11.11.4(@types/react@18.2.55)(react@18.2.0) '@emotion/styled': specifier: ^11.3.0 - version: 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) + version: 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) '@mui/base': specifier: workspace:* version: link:../mui-base/build @@ -1691,8 +1702,8 @@ 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.12 version: 15.7.12 @@ -1712,7 +1723,7 @@ importers: specifier: ^0.1.2 version: 0.1.2 express: - specifier: ^4.18.3 + specifier: ^4.19.2 version: 4.19.2 fast-glob: specifier: ^3.3.2 @@ -1724,8 +1735,8 @@ importers: specifier: ^4.17.21 version: 4.17.21 playwright: - specifier: ^1.42.1 - version: 1.42.1 + specifier: ^1.43.1 + version: 1.43.1 react: specifier: ^18.2.0 version: 18.2.0 @@ -1733,14 +1744,14 @@ importers: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) react-router-dom: - specifier: ^6.21.3 - version: 6.22.1(react-dom@18.2.0)(react@18.2.0) + specifier: ^6.22.3 + version: 6.22.3(react-dom@18.2.0)(react@18.2.0) rollup: specifier: ^3.29.4 version: 3.29.4 rollup-plugin-babel: specifier: ^4.4.0 - version: 4.4.0(@babel/core@7.24.3)(rollup@3.29.4) + version: 4.4.0(@babel/core@7.24.4)(rollup@3.29.4) rollup-plugin-commonjs: specifier: ^10.1.0 version: 10.1.0(rollup@3.29.4) @@ -1761,8 +1772,8 @@ importers: packages/mui-material-nextjs: dependencies: '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 '@mui/material': specifier: workspace:^ version: link:../mui-material/build @@ -1781,7 +1792,7 @@ importers: version: 18.2.55 next: specifier: 13.5.1 - version: 13.5.1(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) + version: 13.5.1(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -1790,8 +1801,8 @@ importers: packages/mui-private-theming: dependencies: '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 '@mui/utils': specifier: workspace:^ version: link:../mui-utils/build @@ -1806,8 +1817,8 @@ 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 version: 18.2.55 @@ -1822,8 +1833,8 @@ importers: packages/mui-styled-engine: dependencies: '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 '@emotion/cache': specifier: ^11.11.0 version: 11.11.0 @@ -1838,8 +1849,8 @@ importers: specifier: ^11.11.4 version: 11.11.4(@types/react@18.2.55)(react@18.2.0) '@emotion/styled': - specifier: ^11.11.0 - version: 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) + specifier: ^11.11.5 + version: 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) '@mui-internal/test-utils': specifier: workspace:^ version: link:../test-utils @@ -1847,8 +1858,8 @@ 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 version: 18.2.55 @@ -1863,8 +1874,8 @@ importers: packages/mui-styled-engine-sc: dependencies: '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 csstype: specifier: ^3.1.3 version: 3.1.3 @@ -1882,8 +1893,8 @@ 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 @@ -1904,8 +1915,8 @@ importers: packages/mui-styles: dependencies: '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 '@emotion/hash': specifier: ^0.9.1 version: 0.9.1 @@ -1962,8 +1973,8 @@ 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 version: 18.2.55 @@ -1990,8 +2001,8 @@ importers: packages/mui-system: dependencies: '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 '@mui/private-theming': specifier: workspace:^ version: link:../mui-private-theming/build @@ -2018,8 +2029,8 @@ importers: specifier: ^11.11.4 version: 11.11.4(@types/react@18.2.55)(react@18.2.0) '@emotion/styled': - specifier: ^11.11.0 - version: 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) + specifier: ^11.11.5 + version: 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) '@mui-internal/test-utils': specifier: workspace:^ version: link:../test-utils @@ -2030,8 +2041,8 @@ 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.12 version: 15.7.12 @@ -2074,8 +2085,8 @@ importers: packages/mui-utils: dependencies: '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 '@types/prop-types': specifier: ^15.7.12 version: 15.7.12 @@ -2096,14 +2107,14 @@ 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.26 + specifier: ^18.19.31 + version: 18.19.31 '@types/react': specifier: 18.2.55 version: 18.2.55 @@ -2144,24 +2155,24 @@ importers: devDependencies: next: specifier: ^13.5.1 - version: 13.5.1(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) + version: 13.5.1(@babel/core@7.24.4)(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.24.3 + specifier: ^7.24.4 + version: 7.24.4 '@babel/helper-module-imports': - specifier: ^7.22.15 + specifier: ^7.24.3 version: 7.24.3 '@babel/helper-plugin-utils': - specifier: ^7.22.5 + specifier: ^7.24.0 version: 7.24.0 '@babel/parser': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 '@babel/types': - specifier: ^7.23.9 + specifier: ^7.24.0 version: 7.24.0 '@emotion/css': specifier: ^11.11.2 @@ -2173,11 +2184,11 @@ importers: specifier: ^11.11.4 version: 11.11.4(@types/react@18.2.55)(react@18.2.0) '@emotion/serialize': - specifier: ^1.1.3 - version: 1.1.3 + specifier: ^1.1.4 + version: 1.1.4 '@emotion/styled': - specifier: ^11.11.0 - version: 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) + specifier: ^11.11.5 + version: 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) '@mui/system': specifier: workspace:^ version: link:../mui-system/build @@ -2189,7 +2200,7 @@ importers: version: 0.5.0 '@wyw-in-js/transform': specifier: ^0.5.0 - version: 0.5.0 + version: 0.5.0(patch_hash=zicb4vap2prvslgwedcxhpcmvy) clsx: specifier: ^2.1.0 version: 2.1.0 @@ -2210,8 +2221,8 @@ importers: version: 2.1.1(stylis@4.3.1) devDependencies: '@babel/plugin-syntax-jsx': - specifier: ^7.23.3 - version: 7.24.1(@babel/core@7.24.3) + specifier: ^7.24.1 + version: 7.24.1(@babel/core@7.24.4) '@types/babel__core': specifier: ^7.20.5 version: 7.20.5 @@ -2222,8 +2233,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 @@ -2234,8 +2245,8 @@ importers: specifier: ^10.0.6 version: 10.0.6 '@types/node': - specifier: ^18.19.25 - version: 18.19.26 + specifier: ^18.19.31 + version: 18.19.31 '@types/react': specifier: 18.2.55 version: 18.2.55 @@ -2248,6 +2259,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 @@ -2255,8 +2269,8 @@ importers: packages/pigment-css-unplugin: dependencies: '@babel/core': - specifier: ^7.23.9 - version: 7.24.3 + specifier: ^7.24.4 + version: 7.24.4 '@pigment-css/react': specifier: workspace:^ version: link:../pigment-css-react @@ -2265,7 +2279,7 @@ importers: version: 0.5.0 '@wyw-in-js/transform': specifier: ^0.5.0 - version: 0.5.0 + version: 0.5.0(patch_hash=zicb4vap2prvslgwedcxhpcmvy) babel-plugin-define-var: specifier: ^0.1.0 version: 0.1.0 @@ -2276,15 +2290,24 @@ importers: '@types/babel__core': specifier: ^7.20.5 version: 7.20.5 + '@types/chai': + specifier: ^4.3.14 + version: 4.3.14 + '@types/mocha': + specifier: ^10.0.6 + version: 10.0.6 + chai: + specifier: ^4.4.1 + version: 4.4.1 packages/pigment-css-vite-plugin: dependencies: '@babel/core': - specifier: ^7.23.9 - version: 7.24.3 + specifier: ^7.24.4 + version: 7.24.4 '@babel/preset-typescript': - specifier: ^7.23.3 - version: 7.24.1(@babel/core@7.24.3) + specifier: ^7.24.1 + version: 7.24.1(@babel/core@7.24.4) '@pigment-css/react': specifier: workspace:^ version: link:../pigment-css-react @@ -2293,7 +2316,7 @@ importers: version: 0.5.0 '@wyw-in-js/transform': specifier: ^0.5.0 - version: 0.5.0 + version: 0.5.0(patch_hash=zicb4vap2prvslgwedcxhpcmvy) babel-plugin-define-var: specifier: ^0.1.0 version: 0.1.0 @@ -2302,8 +2325,8 @@ importers: specifier: ^7.20.5 version: 7.20.5 vite: - specifier: ^5.0.12 - version: 5.2.2(@types/node@18.19.26) + specifier: ^5.2.8 + version: 5.2.8(@types/node@18.19.31) packages/react-docgen-types: devDependencies: @@ -2324,23 +2347,23 @@ importers: specifier: ^10.0.6 version: 10.0.6 '@types/node': - specifier: ^18.19.25 - version: 18.19.26 + specifier: ^18.19.31 + version: 18.19.31 packages/test-utils: dependencies: '@babel/plugin-transform-modules-commonjs': - specifier: ^7.23.3 - version: 7.24.1(@babel/core@7.24.3) + specifier: ^7.24.1 + version: 7.24.1(@babel/core@7.24.4) '@babel/preset-typescript': - specifier: ^7.23.3 - version: 7.24.1(@babel/core@7.24.3) + specifier: ^7.24.1 + version: 7.24.1(@babel/core@7.24.4) '@babel/register': specifier: ^7.23.7 - version: 7.23.7(@babel/core@7.24.3) + version: 7.23.7(@babel/core@7.24.4) '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 '@emotion/cache': specifier: ^11.11.0 version: 11.11.0 @@ -2354,8 +2377,8 @@ importers: specifier: ^9.3.4 version: 9.3.4 '@testing-library/react': - specifier: ^14.2.2 - version: 14.2.2(react-dom@18.2.0)(react@18.2.0) + specifier: ^14.3.1 + version: 14.3.1(react-dom@18.2.0)(react@18.2.0) chai: specifier: ^4.4.1 version: 4.4.1 @@ -2381,11 +2404,11 @@ importers: specifier: ^4.17.21 version: 4.17.21 mocha: - specifier: ^10.3.0 - version: 10.3.0 + specifier: ^10.4.0 + version: 10.4.0 playwright: - specifier: ^1.42.1 - version: 1.42.1 + specifier: ^1.43.1 + version: 1.43.1 prop-types: specifier: ^15.8.1 version: 15.8.1 @@ -2403,8 +2426,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 @@ -2430,16 +2453,16 @@ importers: specifier: ^10.0.20 version: 10.0.20 typescript: - specifier: ^5.4.3 - version: 5.4.3 + specifier: ^5.4.5 + version: 5.4.5 packages/waterfall: {} test: devDependencies: '@babel/runtime': - specifier: ^7.23.9 - version: 7.24.1 + specifier: ^7.24.4 + version: 7.24.4 '@emotion/cache': specifier: ^11.11.0 version: 11.11.0 @@ -2471,14 +2494,14 @@ importers: specifier: workspace:^ version: link:../packages/mui-utils/build '@playwright/test': - specifier: 1.42.1 - version: 1.42.1 + specifier: 1.43.1 + version: 1.43.1 '@testing-library/dom': 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 version: 18.2.55 @@ -2507,8 +2530,8 @@ importers: specifier: ^4.17.21 version: 4.17.21 playwright: - specifier: ^1.42.1 - version: 1.42.1 + specifier: ^1.43.1 + version: 1.43.1 prop-types: specifier: ^15.8.1 version: 15.8.1 @@ -2522,8 +2545,8 @@ importers: specifier: ^18.2.0 version: 18.2.0 react-router-dom: - specifier: ^6.21.3 - version: 6.22.1(react-dom@18.2.0)(react@18.2.0) + specifier: ^6.22.3 + version: 6.22.3(react-dom@18.2.0)(react@18.2.0) sinon: specifier: ^15.2.0 version: 15.2.0 @@ -2757,14 +2780,14 @@ packages: engines: {node: '>=16.0.0'} dev: true - /@babel/cli@7.23.9(@babel/core@7.24.3): - resolution: {integrity: sha512-vB1UXmGDNEhcf1jNAHKT9IlYk1R+hehVTLFlCLHBi8gfuHQGP6uRjgXVYU0EVlI/qwAWpstqkBdf2aez3/z/5Q==} + /@babel/cli@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-HbmrtxyFUr34LwAlV9jS+sSIjUp4FpdtIMGwgufY3AsxrIfsh/HxlMTywsONAZsU0RMYbZtbZFpUCrSGs7o0EA==} engines: {node: '>=6.9.0'} hasBin: true peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@jridgewell/trace-mapping': 0.3.25 commander: 4.1.1 convert-source-map: 2.0.0 @@ -2784,21 +2807,21 @@ packages: '@babel/highlight': 7.24.2 picocolors: 1.0.0 - /@babel/compat-data@7.24.1: - resolution: {integrity: sha512-Pc65opHDliVpRHuKfzI+gSA4zcgr65O4cl64fFJIWEEh8JoHIHh0Oez1Eo8Arz8zq/JhgKodQaxEwUPRtZylVA==} + /@babel/compat-data@7.24.4: + resolution: {integrity: sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==} engines: {node: '>=6.9.0'} - /@babel/core@7.24.3: - resolution: {integrity: sha512-5FcvN1JHw2sHJChotgx8Ek0lyuh4kCKelgMTTqhYJJtloNvUfpAFMeNQUtdlIaktwrSV9LtCdqwk48wL2wBacQ==} + /@babel/core@7.24.4: + resolution: {integrity: sha512-MBVlMXP+kkl5394RBLSxxk/iLTeVGuXTV3cIDXavPpMMqnSnt6apKgan/U8O3USWZCWZT/TbgfEpKa4uMgN4Dg==} engines: {node: '>=6.9.0'} dependencies: '@ampproject/remapping': 2.3.0 '@babel/code-frame': 7.24.2 - '@babel/generator': 7.24.1 + '@babel/generator': 7.24.4 '@babel/helper-compilation-targets': 7.23.6 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.3) - '@babel/helpers': 7.24.1 - '@babel/parser': 7.24.1 + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.4) + '@babel/helpers': 7.24.4 + '@babel/parser': 7.24.4 '@babel/template': 7.24.0 '@babel/traverse': 7.24.1 '@babel/types': 7.24.0 @@ -2810,8 +2833,8 @@ packages: transitivePeerDependencies: - supports-color - /@babel/generator@7.24.1: - resolution: {integrity: sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==} + /@babel/generator@7.24.4: + resolution: {integrity: sha512-Xd6+v6SnjWVx/nus+y0l1sxMOTOMBkyL4+BIdbALyatQnAe/SRVjANeDPSCYaX+i1iJmuGSKf3Z+E+V/va1Hvw==} engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.24.0 @@ -2835,46 +2858,46 @@ packages: resolution: {integrity: sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/compat-data': 7.24.1 + '@babel/compat-data': 7.24.4 '@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.24.1(@babel/core@7.24.3): - resolution: {integrity: sha512-1yJa9dX9g//V6fDebXoEfEsxkZHk3Hcbm+zLhyu6qVgYFLvmTALTeV+jNU9e5RnYtioBrGEOdoI2joMSNQ/+aA==} + /@babel/helper-create-class-features-plugin@7.24.4(@babel/core@7.24.4): + resolution: {integrity: sha512-lG75yeuUSVu0pIcbhiYMXBXANHrpUPaOfu7ryAzskCgKUHuAxRQI5ssrtmF0X9UXldPlvT0XM/A4F44OXRt6iQ==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@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.24.1(@babel/core@7.24.3) + '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.4) '@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.24.3): + /@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.24.4): resolution: {integrity: sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-annotate-as-pure': 7.22.5 regexpu-core: 5.3.2 semver: 6.3.1 - /@babel/helper-define-polyfill-provider@0.6.1(@babel/core@7.24.3): + /@babel/helper-define-polyfill-provider@0.6.1(@babel/core@7.24.4): resolution: {integrity: sha512-o7SDgTJuvx5vLKD6SFvkydkSMBvahDKGiNJzG22IZYXhiqoe9efY7zocICBgzHV4IRg5wdgl2nEL/tulKIEIbA==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-compilation-targets': 7.23.6 '@babel/helper-plugin-utils': 7.24.0 debug: 4.3.4(supports-color@8.1.1) @@ -2912,13 +2935,13 @@ packages: dependencies: '@babel/types': 7.24.0 - /@babel/helper-module-transforms@7.23.3(@babel/core@7.24.3): + /@babel/helper-module-transforms@7.23.3(@babel/core@7.24.4): resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-module-imports': 7.24.3 '@babel/helper-simple-access': 7.22.5 @@ -2935,24 +2958,24 @@ packages: resolution: {integrity: sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==} engines: {node: '>=6.9.0'} - /@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.24.3): + /@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.24.4): resolution: {integrity: sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@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.24.1(@babel/core@7.24.3): + /@babel/helper-replace-supers@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-member-expression-to-functions': 7.23.0 '@babel/helper-optimise-call-expression': 7.22.5 @@ -2995,8 +3018,8 @@ packages: '@babel/template': 7.24.0 '@babel/types': 7.24.0 - /@babel/helpers@7.24.1: - resolution: {integrity: sha512-BpU09QqEe6ZCHuIHFphEFgvNSrubve1FtyMton26ekZ85gRGi6LrTF7zArARp2YvyFxloeiRmtSCq5sjh1WqIg==} + /@babel/helpers@7.24.4: + resolution: {integrity: sha512-FewdlZbSiwaVGlgT1DPANDuCHaDMiOo+D/IDYRFYjHOuv66xMSJ7fQwwODwRNAPkADIO/z1EoF/l2BCWlWABDw==} engines: {node: '>=6.9.0'} dependencies: '@babel/template': 7.24.0 @@ -3014,15 +3037,15 @@ packages: js-tokens: 4.0.0 picocolors: 1.0.0 - /@babel/node@7.23.9(@babel/core@7.24.3): + /@babel/node@7.23.9(@babel/core@7.24.4): resolution: {integrity: sha512-/d4ju/POwlGIJlZ+NqWH1qu61wt6ZlTZZZutrK2MOSdaH1JCh726nLw/GSvAjG+LTY6CO9SsB8uWcttnFKm6yg==} engines: {node: '>=6.9.0'} hasBin: true peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/register': 7.23.7(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/register': 7.23.7(@babel/core@7.24.4) commander: 4.1.1 core-js: 3.32.1 node-environment-flags: 1.0.6 @@ -3030,1105 +3053,1116 @@ packages: v8flags: 3.2.0 dev: true - /@babel/parser@7.24.1: - resolution: {integrity: sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==} + /@babel/parser@7.24.4: + resolution: {integrity: sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==} engines: {node: '>=6.0.0'} hasBin: true dependencies: '@babel/types': 7.24.0 - /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.24.1(@babel/core@7.24.3): + /@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.24.4(@babel/core@7.24.4): + resolution: {integrity: sha512-qpl6vOOEEzTLLcsuqYYo8yDtrTocmu2xkGvgNebvPjT9DTtfFYGmgDqY+rBYXNlqL4s9qLDn6xkrJv4RxAPiTA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.24.4 + dependencies: + '@babel/core': 7.24.4 + '@babel/helper-environment-visitor': 7.22.20 + '@babel/helper-plugin-utils': 7.24.0 + + /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-y4HqEnkelJIOQGd+3g1bTeKsA5c6qM7eOn7VggGVbBc0y8MLSKHacwcIE2PplNlQSj0PqS9rrXL/nkPVK+kUNg==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.24.1(@babel/core@7.24.3): + /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-Hj791Ii4ci8HqnaKHAlLNs+zaLXb0EzSDhiAWp5VNlyvCNymYfacs64pxTxbH1znW/NcArSmwpmG9IKE/TUVVQ==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.4) - /@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.24.1(@babel/core@7.24.3): + /@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-m9m/fXsXLiHfwdgydIFnpk+7jlVbnvlK5B2EKiPdLUb6WX654ZaaEWJUjk8TftRbZpK0XibovlLWX4KIZhV6jw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.24.3): + /@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.24.4): 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 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-environment-visitor': 7.22.20 '@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/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.4) + '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.4) dev: false - /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.24.3): + /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.24.4): 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 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4) '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-proposal-export-default-from@7.24.1(@babel/core@7.24.3): + /@babel/plugin-proposal-export-default-from@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-+0hrgGGV3xyYIjOrD/bUZk/iUwOIGuoANfRfVg1cPhYBxF+TIXSEcc42DqzBICmWsnAQ+SfKedY0bj8QD+LuMg==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-export-default-from': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-syntax-export-default-from': 7.24.1(@babel/core@7.24.4) dev: false - /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.24.3): + /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.24.4): 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 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.4) dev: false - /@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.24.3): + /@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.24.4): 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 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.3) + '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.4) dev: false - /@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.24.3): + /@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.24.4): 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 + '@babel/core': ^7.24.4 dependencies: - '@babel/compat-data': 7.24.1 - '@babel/core': 7.24.3 + '@babel/compat-data': 7.24.4 + '@babel/core': 7.24.4 '@babel/helper-compilation-targets': 7.23.6 '@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-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.24.4) - /@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.24.3): + /@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.24.4): 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 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.4) dev: false - /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.24.3): + /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.24.4): 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 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@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.24.3) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.4) dev: false - /@babel/plugin-proposal-private-methods@7.18.6(@babel/core@7.24.3): + /@babel/plugin-proposal-private-methods@7.18.6(@babel/core@7.24.4): 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 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4) '@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.24.3): + /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.4): resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 - /@babel/plugin-proposal-private-property-in-object@7.21.11(@babel/core@7.24.3): + /@babel/plugin-proposal-private-property-in-object@7.21.11(@babel/core@7.24.4): 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 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3) + '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4) '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.3) + '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.4) dev: true - /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.24.3): + /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.24.4): resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.24.3): + /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.24.4): resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.24.3): + /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.24.4): resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.24.3): + /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.24.4): resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-export-default-from@7.24.1(@babel/core@7.24.3): + /@babel/plugin-syntax-export-default-from@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-cNXSxv9eTkGUtd0PsNMK8Yx5xeScxfpWOUAxE+ZPAXXEcAMOC3fk7LRdXq5fvpra2pLx2p1YtkAhpUbB2SwaRA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 dev: false - /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.24.3): + /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.24.4): resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-flow@7.24.1(@babel/core@7.24.3): + /@babel/plugin-syntax-flow@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-sxi2kLTI5DeW5vDtMUsk4mTPwvlUDbjOnoWayhynCwrw4QXRld4QEYwqzY8JmQXaJUtgUuCIurtSRH5sn4c7mA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 dev: false - /@babel/plugin-syntax-import-assertions@7.24.1(@babel/core@7.24.3): + /@babel/plugin-syntax-import-assertions@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-IuwnI5XnuF189t91XbxmXeCDz3qs6iDRO7GJ++wcfgeXNs/8FmIlKcpDSXNVyuLQxlwvskmI3Ct73wUODkJBlQ==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-import-attributes@7.24.1(@babel/core@7.24.3): + /@babel/plugin-syntax-import-attributes@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-zhQTMH0X2nVLnb04tz+s7AMuasX8U0FnpE+nHTOhSOINjWMnopoZTxtIKsd45n4GQ/HIZLyfIpoul8e2m0DnRA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.24.3): + /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.24.4): resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.24.3): + /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.24.4): resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-jsx@7.24.1(@babel/core@7.24.3): + /@babel/plugin-syntax-jsx@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.24.3): + /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.24.4): resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.24.3): + /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.24.4): resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.24.3): + /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.24.4): resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.24.3): + /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.24.4): resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.24.3): + /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.24.4): resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.24.3): + /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.24.4): resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.24.3): + /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.24.4): resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.24.3): + /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.24.4): resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-typescript@7.24.1(@babel/core@7.24.3): + /@babel/plugin-syntax-typescript@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.24.3): + /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.24.4): resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4) '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-arrow-functions@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-arrow-functions@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-ngT/3NkRhsaep9ck9uj2Xhv9+xB1zShY3tM3g6om4xxCELwCDN4g4Aq5dRn48+0hasAql7s2hdBOysCfNpr4fw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-async-generator-functions@7.24.3(@babel/core@7.24.3): + /@babel/plugin-transform-async-generator-functions@7.24.3(@babel/core@7.24.4): resolution: {integrity: sha512-Qe26CMYVjpQxJ8zxM1340JFNjZaF+ISWpr1Kt/jGo+ZTUzKkfw/pphEWbRCb+lmSM6k/TOgfYLvmbHkUQ0asIg==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-environment-visitor': 7.22.20 '@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/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.4) + '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.4) - /@babel/plugin-transform-async-to-generator@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-async-to-generator@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-AawPptitRXp1y0n4ilKcGbRYWfbbzFWz2NqNu7dacYDtFtz0CMjG64b3LQsb3KIgnf4/obcUL78hfaOS7iCUfw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@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/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.4) - /@babel/plugin-transform-block-scoped-functions@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-block-scoped-functions@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-TWWC18OShZutrv9C6mye1xwtam+uNi2bnTOCBUd5sZxyHOiWbU6ztSROofIMrK84uweEZC219POICK/sTYwfgg==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-block-scoping@7.24.1(@babel/core@7.24.3): - resolution: {integrity: sha512-h71T2QQvDgM2SmT29UYU6ozjMlAt7s7CSs5Hvy8f8cf/GM/Z4a2zMfN+fjVGaieeCrXR3EdQl6C4gQG+OgmbKw==} + /@babel/plugin-transform-block-scoping@7.24.4(@babel/core@7.24.4): + resolution: {integrity: sha512-nIFUZIpGKDf9O9ttyRXpHFpKC+X3Y5mtshZONuEUYBomAKoM4y029Jr+uB1bHGPhNmK8YXHevDtKDOLmtRrp6g==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-class-properties@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-class-properties@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-OMLCXi0NqvJfORTaPQBwqLXHhb93wkBKZ4aNwMl6WtehO7ar+cmp+89iPEQPqxAnxsOKTaMcs3POz3rKayJ72g==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4) '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-class-static-block@7.24.1(@babel/core@7.24.3): - resolution: {integrity: sha512-FUHlKCn6J3ERiu8Dv+4eoz7w8+kFLSyeVG4vDAikwADGjUCoHw/JHokyGtr8OR4UjpwPVivyF+h8Q5iv/JmrtA==} + /@babel/plugin-transform-class-static-block@7.24.4(@babel/core@7.24.4): + resolution: {integrity: sha512-B8q7Pz870Hz/q9UgP8InNpY01CSLDSCyqX7zcRuv3FcPl87A2G17lASroHWaCtbdIcbYzOZ7kWmXFKbijMSmFg==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4) '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.3) + '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.4) - /@babel/plugin-transform-classes@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-classes@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-ZTIe3W7UejJd3/3R4p7ScyyOoafetUShSf4kCqV0O7F/RiHxVj/wRaRnQlrGwflvcehNA8M42HkAiEDYZu2F1Q==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@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.24.0 - '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.3) + '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.4) '@babel/helper-split-export-declaration': 7.22.6 globals: 11.12.0 - /@babel/plugin-transform-computed-properties@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-computed-properties@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-5pJGVIUfJpOS+pAqBQd+QMaTD2vCL/HcePooON6pDpHgRp4gNRmzyHTPIkXntwKsq3ayUFVfJaIKPw2pOkOcTw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 '@babel/template': 7.24.0 - /@babel/plugin-transform-dotall-regex@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-dotall-regex@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-p7uUxgSoZwZ2lPNMzUkqCts3xlp8n+o05ikjy7gbtFJSt9gdU88jAmtfmOxHM14noQXBxfgzf2yRWECiNVhTCw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4) '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-duplicate-keys@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-duplicate-keys@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-msyzuUnvsjsaSaocV6L7ErfNsa5nDWL1XKNnDePLgmz+WdU4w/J8+AxBMrWfi9m4IxfL5sZQKUPQKDQeeAT6lA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-dynamic-import@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-dynamic-import@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-av2gdSTyXcJVdI+8aFZsCAtR29xJt0S5tas+Ef8NvBNmD1a+N/3ecMLeMBgfcK+xzsjdLDT6oHt+DFPyeqUbDA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.4) - /@babel/plugin-transform-exponentiation-operator@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-exponentiation-operator@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-U1yX13dVBSwS23DEAqU+Z/PkwE9/m7QQy8Y9/+Tdb8UWYaGNDYwTLi19wqIAiROr8sXVum9A/rtiH5H0boUcTw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-builder-binary-assignment-operator-visitor': 7.22.15 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-export-namespace-from@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-export-namespace-from@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-Ft38m/KFOyzKw2UaJFkWG9QnHPG/Q/2SkOrRk4pNBPg5IPZ+dOxcmkK5IyuBcxiNPyyYowPGUReyBvrvZs7IlQ==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.4) - /@babel/plugin-transform-flow-strip-types@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-flow-strip-types@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-iIYPIWt3dUmUKKE10s3W+jsQ3icFkw0JyRVyY1B7G4yK/nngAOHLVx8xlhA6b/Jzl/Y0nis8gjqhqKtRDQqHWQ==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.4) dev: false - /@babel/plugin-transform-for-of@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-for-of@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-OxBdcnF04bpdQdR3i4giHZNZQn7cm8RQKcSwA17wAAqEELo1ZOwp5FFgeptWUQXFyT9kwHo10aqqauYkRZPCAg==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - /@babel/plugin-transform-function-name@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-function-name@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-BXmDZpPlh7jwicKArQASrj8n22/w6iymRnvHYYd2zO30DbE277JO20/7yXJT3QxDPtiQiOxQBbZH4TpivNXIxA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-compilation-targets': 7.23.6 '@babel/helper-function-name': 7.23.0 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-json-strings@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-json-strings@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-U7RMFmRvoasscrIFy5xA4gIp8iWnWubnKkKuUGJjsuOH7GfbMkB+XZzeslx2kLdEGdOJDamEmCqOks6e8nv8DQ==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.4) - /@babel/plugin-transform-literals@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-literals@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-zn9pwz8U7nCqOYIiBaOxoQOtYmMODXTJnkxG4AtX8fPmnCRYWBOHD0qcpwS9e2VDSp1zNJYpdnFMIKb8jmwu6g==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-logical-assignment-operators@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-logical-assignment-operators@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-OhN6J4Bpz+hIBqItTeWJujDOfNP+unqv/NJgyhlpSqgBTPm37KkMmZV6SYcOj+pnDbdcl1qRGV/ZiIjX9Iy34w==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.3) + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.4) - /@babel/plugin-transform-member-expression-literals@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-member-expression-literals@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-4ojai0KysTWXzHseJKa1XPNXKRbuUrhkOPY4rEGeR+7ChlJVKxFa3H3Bz+7tWaGKgJAXUWKOGmltN+u9B3+CVg==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-modules-amd@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-modules-amd@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-lAxNHi4HVtjnHd5Rxg3D5t99Xm6H7b04hUS7EHIXcUl2EV4yl1gWdqZrNzXnSrHveL9qMdbODlLF55mvgjAfaQ==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.4) '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-modules-commonjs@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-modules-commonjs@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-szog8fFTUxBfw0b98gEWPaEqF42ZUD/T3bkynW/wtgx2p/XCP55WEsb+VosKceRSd6njipdZvNogqdtI4Q0chw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.4) '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-simple-access': 7.22.5 - /@babel/plugin-transform-modules-systemjs@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-modules-systemjs@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-mqQ3Zh9vFO1Tpmlt8QPnbwGHzNz3lpNEMxQb1kAemn/erstyqw1r9KeOlOfo3y6xAnFEcOv2tSyrXfmMk+/YZA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-hoist-variables': 7.22.5 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.3) + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.4) '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-validator-identifier': 7.22.20 - /@babel/plugin-transform-modules-umd@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-modules-umd@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-tuA3lpPj+5ITfcCluy6nWonSL7RvaG0AOTeAuvXqEKS34lnLzXpDb0dcP6K8jD0zWZFNDVly90AGFJPnm4fOYg==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.4) '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.24.3): + /@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.24.4): resolution: {integrity: sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4) '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-new-target@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-new-target@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-/rurytBM34hYy0HKZQyA0nHbQgQNFm4Q/BOc9Hflxi2X3twRof7NaE5W46j4kQitm7SvACVRXsa6N/tSZxvPug==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-nullish-coalescing-operator@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-nullish-coalescing-operator@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-iQ+caew8wRrhCikO5DrUYx0mrmdhkaELgFa+7baMcVuhxIkN7oxt06CZ51D65ugIb1UWRQ8oQe+HXAVM6qHFjw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.4) - /@babel/plugin-transform-numeric-separator@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-numeric-separator@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-7GAsGlK4cNL2OExJH1DzmDeKnRv/LXq0eLUSvudrehVA5Rgg4bIrqEUW29FbKMBRT0ztSqisv7kjP+XIC4ZMNw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.3) + '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.4) - /@babel/plugin-transform-object-assign@7.23.3(@babel/core@7.24.3): - resolution: {integrity: sha512-TPJ6O7gVC2rlQH2hvQGRH273G1xdoloCj9Pc07Q7JbIZYDi+Sv5gaE2fu+r5E7qK4zyt6vj0FbZaZTRU5C3OMA==} + /@babel/plugin-transform-object-assign@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-I1kctor9iKtupb7jv7FyjApHCuKLBKCblVAeHVK9PB6FW7GI0ac6RtobC3MwwJy8CZ1JxuhQmnbrsqI5G8hAIg==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-object-rest-spread@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-object-rest-spread@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-XjD5f0YqOtebto4HGISLNfiNMTTs6tbkFf2TOqJlYKYmbo+mN9Dnpl4SRoofiziuOWMIyq3sZEUqLo3hLITFEA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-compilation-targets': 7.23.6 '@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-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.24.4) - /@babel/plugin-transform-object-super@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-object-super@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-oKJqR3TeI5hSLRxudMjFQ9re9fBVUU0GICqM3J1mi8MqlhVr6hC/ZN4ttAyMuQR6EZZIY6h/exe5swqGNNIkWQ==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.3) + '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.4) - /@babel/plugin-transform-optional-catch-binding@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-optional-catch-binding@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-oBTH7oURV4Y+3EUrf6cWn1OHio3qG/PVwO5J03iSJmBg6m2EhKjkAu/xuaXaYwWW9miYtvbWv4LNf0AmR43LUA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.3) + '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.4) - /@babel/plugin-transform-optional-chaining@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-optional-chaining@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-n03wmDt+987qXwAgcBlnUUivrZBPZ8z1plL0YvgQalLm+ZE5BMhGm94jhxXtA1wzv1Cu2aaOv1BM9vbVttrzSg==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@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.24.3) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.4) - /@babel/plugin-transform-parameters@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-parameters@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-8Jl6V24g+Uw5OGPeWNKrKqXPDw2YDjLc53ojwfMcKwlEoETKU9rU0mHUtcg9JntWI/QYzGAXNWEcVHZ+fR+XXg==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-private-methods@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-private-methods@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-tGvisebwBO5em4PaYNqt4fkw56K2VALsAbAakY0FjTYqJp7gfdrgr7YX76Or8/cpik0W6+tj3rZ0uHU9Oil4tw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4) '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-private-property-in-object@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-private-property-in-object@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-pTHxDVa0BpUbvAgX3Gat+7cSciXqUcY9j2VZKTbSB6+VQGpNgNO9ailxTGHSXlqOnX1Hcx1Enme2+yv7VqP9bg==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3) + '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4) '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.3) + '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.4) - /@babel/plugin-transform-property-literals@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-property-literals@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-LetvD7CrHmEx0G442gOomRr66d7q8HzzGGr4PMHGr+5YIm6++Yke+jxj246rpvsbyhJwCLxcTn6zW1P1BSenqA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-react-constant-elements@7.23.3(@babel/core@7.24.3): - resolution: {integrity: sha512-zP0QKq/p6O42OL94udMgSfKXyse4RyJ0JqbQ34zDAONWjyrEsghYEyTSK5FIpmXmCpB55SHokL1cRRKHv8L2Qw==} + /@babel/plugin-transform-react-constant-elements@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-QXp1U9x0R7tkiGB0FOk8o74jhnap0FlZ5gNkRIWdG3eP+SvMFg118e1zaWewDzgABb106QSKpVsD3Wgd8t6ifA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-react-display-name@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-react-display-name@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-mvoQg2f9p2qlpDQRBC7M3c3XTr0k7cp/0+kFKKO/7Gtu0LSw16eKB+Fabe2bDT/UpsyasTBBkAnbdsLrkD5XMw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-react-jsx-development@7.22.5(@babel/core@7.24.3): + /@babel/plugin-transform-react-jsx-development@7.22.5(@babel/core@7.24.4): resolution: {integrity: sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.4) dev: true - /@babel/plugin-transform-react-jsx-self@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-react-jsx-self@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-kDJgnPujTmAZ/9q2CN4m2/lRsUUPDvsG3+tSHWUJIzMGTt5U/b/fwWd3RO3n+5mjLrsBrVa5eKFRVSQbi3dF1w==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-react-jsx-source@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-react-jsx-source@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-1v202n7aUq4uXAieRTKcwPzNyphlCuqHHDcdSNc+vdhoTEZcFMh+L5yZuCmGaIO7bs1nJUNfHB89TZyoL48xNA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.24.3): + /@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.24.4): resolution: {integrity: sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-annotate-as-pure': 7.22.5 '@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/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.4) '@babel/types': 7.24.0 - /@babel/plugin-transform-react-pure-annotations@7.23.3(@babel/core@7.24.3): - resolution: {integrity: sha512-qMFdSS+TUhB7Q/3HVPnEdYJDQIk57jkntAwSuz9xfSE4n+3I+vHYCli3HoHawN1Z3RfCz/y1zXA/JXjG6cVImQ==} + /@babel/plugin-transform-react-pure-annotations@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-+pWEAaDJvSm9aFvJNpLiM2+ktl2Sn2U5DdyiWdZBxmLc6+xGt88dvFqsHiAiDS+8WqUwbDfkKz9jRxK3M0k+kA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-annotate-as-pure': 7.22.5 '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-regenerator@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-regenerator@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-sJwZBCzIBE4t+5Q4IGLaaun5ExVMRY0lYwos/jNecjMrVCygCdph3IKv0tkP5Fc87e/1+bebAmEAGBfnRD+cnw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 regenerator-transform: 0.15.2 - /@babel/plugin-transform-reserved-words@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-reserved-words@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-JAclqStUfIwKN15HrsQADFgeZt+wexNQ0uLhuqvqAUFoqPMjEcFCYZBhq0LUdz6dZK/mD+rErhW71fbx8RYElg==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-runtime@7.24.3(@babel/core@7.24.3): + /@babel/plugin-transform-runtime@7.24.3(@babel/core@7.24.4): resolution: {integrity: sha512-J0BuRPNlNqlMTRJ72eVptpt9VcInbxO6iP3jaxr+1NPhC0UkKL+6oeX6VXMEYdADnuqmMmsBspt4d5w8Y/TCbQ==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@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) + babel-plugin-polyfill-corejs2: 0.4.10(@babel/core@7.24.4) + babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.24.4) + babel-plugin-polyfill-regenerator: 0.6.1(@babel/core@7.24.4) semver: 6.3.1 transitivePeerDependencies: - supports-color - /@babel/plugin-transform-shorthand-properties@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-shorthand-properties@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-LyjVB1nsJ6gTTUKRjRWx9C1s9hE7dLfP/knKdrfeH9UPtAGjYGgxIbFfx7xyLIEWs7Xe1Gnf8EWiUqfjLhInZA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-spread@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-spread@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-KjmcIM+fxgY+KxPVbjelJC6hrH1CgtPmTvdXAfn3/a9CnWGSTY7nH4zm5+cjmWJybdcPSsD0++QssDsjcpe47g==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - /@babel/plugin-transform-sticky-regex@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-sticky-regex@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-9v0f1bRXgPVcPrngOQvLXeGNNVLc8UjMVfebo9ka0WF3/7+aVUHmaJVT3sa0XCzEFioPfPHZiOcYG9qOsH63cw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-template-literals@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-template-literals@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-WRkhROsNzriarqECASCNu/nojeXCDTE/F2HmRgOzi7NGvyfYGq1NEjKBK3ckLfRgGc6/lPAqP0vDOSw3YtG34g==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-typeof-symbol@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-typeof-symbol@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-CBfU4l/A+KruSUoW+vTQthwcAdwuqbpRNB8HQKlZABwHRhsdHZ9fezp4Sn18PeAlYxTNiLMlx4xUBV3AWfg1BA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-typescript@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-typescript@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-liYSESjX2fZ7JyBFkYG78nfvHlMKE6IpNdTVnxmlYUR+j5ZLsitFbaAE+eJSK2zPPkNWNw4mXL51rQ8WrvdK0w==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3) + '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4) '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-typescript': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-syntax-typescript': 7.24.1(@babel/core@7.24.4) - /@babel/plugin-transform-unicode-escapes@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-unicode-escapes@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-RlkVIcWT4TLI96zM660S877E7beKlQw7Ig+wqkKBiWfj0zH5Q4h50q6er4wzZKRNSYpfo6ILJ+hrJAGSX2qcNw==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-unicode-property-regex@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-unicode-property-regex@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-Ss4VvlfYV5huWApFsF8/Sq0oXnGO+jB+rijFEFugTd3cwSObUSnUi88djgR5528Csl0uKlrI331kRqe56Ov2Ng==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4) '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-unicode-regex@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-unicode-regex@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-2A/94wgZgxfTsiLaQ2E36XAOdcZmGAaEEgVmxQWwZXWkGhvoHbaqXcKnU8zny4ycpu3vNqg0L/PcCiYtHtA13g==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4) '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-unicode-sets-regex@7.24.1(@babel/core@7.24.3): + /@babel/plugin-transform-unicode-sets-regex@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-fqj4WuzzS+ukpgerpAoOnMfQXwUHFxXUZUE84oL2Kao2N8uSlvcpnAidKASgsNgzZHBsHWvcm8s9FPWUhAb8fA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4) '@babel/helper-plugin-utils': 7.24.0 - /@babel/preset-env@7.24.3(@babel/core@7.24.3): - resolution: {integrity: sha512-fSk430k5c2ff8536JcPvPWK4tZDwehWLGlBp0wrsBUjZVdeQV6lePbwKWZaZfK2vnh/1kQX1PzAJWsnBmVgGJA==} + /@babel/preset-env@7.24.4(@babel/core@7.24.4): + resolution: {integrity: sha512-7Kl6cSmYkak0FK/FXjSEnLJ1N9T/WA2RkMhu17gZ/dsxKJUuTYNIylahPTzqpLyJN4WhDif8X0XK1R8Wsguo/A==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/compat-data': 7.24.1 - '@babel/core': 7.24.3 + '@babel/compat-data': 7.24.4 + '@babel/core': 7.24.4 '@babel/helper-compilation-targets': 7.23.6 '@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.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) + '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.24.4(@babel/core@7.24.4) + '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.4) + '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.4) + '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.24.4) + '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.4) + '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-import-assertions': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-syntax-import-attributes': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.4) + '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.4) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.4) + '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.4) + '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.24.4) + '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.24.4) + '@babel/plugin-transform-arrow-functions': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-async-generator-functions': 7.24.3(@babel/core@7.24.4) + '@babel/plugin-transform-async-to-generator': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-block-scoped-functions': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-block-scoping': 7.24.4(@babel/core@7.24.4) + '@babel/plugin-transform-class-properties': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-class-static-block': 7.24.4(@babel/core@7.24.4) + '@babel/plugin-transform-classes': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-computed-properties': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-destructuring': /@minh.nguyen/plugin-transform-destructuring@7.5.2(@babel/core@7.24.4) + '@babel/plugin-transform-dotall-regex': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-duplicate-keys': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-dynamic-import': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-exponentiation-operator': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-export-namespace-from': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-for-of': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-function-name': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-json-strings': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-literals': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-logical-assignment-operators': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-member-expression-literals': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-modules-amd': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-modules-systemjs': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-modules-umd': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.24.4) + '@babel/plugin-transform-new-target': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-numeric-separator': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-object-rest-spread': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-object-super': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-optional-catch-binding': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-private-property-in-object': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-property-literals': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-regenerator': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-reserved-words': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-shorthand-properties': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-spread': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-sticky-regex': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-template-literals': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-typeof-symbol': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-unicode-escapes': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-unicode-property-regex': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-unicode-regex': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-unicode-sets-regex': 7.24.1(@babel/core@7.24.4) + '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.24.4) + babel-plugin-polyfill-corejs2: 0.4.10(@babel/core@7.24.4) + babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.24.4) + babel-plugin-polyfill-regenerator: 0.6.1(@babel/core@7.24.4) core-js-compat: 3.36.1 semver: 6.3.1 transitivePeerDependencies: - supports-color - /@babel/preset-flow@7.24.1(@babel/core@7.24.3): + /@babel/preset-flow@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-sWCV2G9pcqZf+JHyv/RyqEIpFypxdCSxWIxQjpdaQxenNog7cN1pr76hg8u0Fz8Qgg0H4ETkGcJnXL8d4j0PPA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-validator-option': 7.23.5 - '@babel/plugin-transform-flow-strip-types': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-flow-strip-types': 7.24.1(@babel/core@7.24.4) dev: false - /@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.24.3): + /@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.24.4): resolution: {integrity: sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@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.24.3): - resolution: {integrity: sha512-tbkHOS9axH6Ysf2OUEqoSZ6T3Fa2SrNH6WTWSPBboxKzdxNc9qOICeLXkNG0ZEwbQ1HY8liwOce4aN/Ceyuq6w==} + /@babel/preset-react@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-eFa8up2/8cZXLIpkafhaADTXSnl7IsUFCYenRWrARBz0/qZwcT0RBXpys0LJU4+WfPoF2ZG6ew6s2V6izMCwRA==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-validator-option': 7.23.5 - '@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) + '@babel/plugin-transform-react-display-name': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.4) + '@babel/plugin-transform-react-jsx-development': 7.22.5(@babel/core@7.24.4) + '@babel/plugin-transform-react-pure-annotations': 7.24.1(@babel/core@7.24.4) dev: true - /@babel/preset-typescript@7.24.1(@babel/core@7.24.3): + /@babel/preset-typescript@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-1DBaMmRDpuYQBPWD8Pf/WEwCrtgRHxsZnP4mIy9G/X+hFfbI47Q2G4t1Paakld84+qsk2fSsUPMKg71jkoOOaQ==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-validator-option': 7.23.5 - '@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/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-typescript': 7.24.1(@babel/core@7.24.4) - /@babel/register@7.23.7(@babel/core@7.24.3): + /@babel/register@7.23.7(@babel/core@7.24.4): resolution: {integrity: sha512-EjJeB6+kvpk+Y5DAkEAmbOBEFkh9OASx0huoEkqYTFxAZHzOAX2Oh5uwAUuL2rUddqfM0SA+KPXV2TbzoZ2kvQ==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 clone-deep: 4.0.1 find-cache-dir: 2.1.0 make-dir: 2.1.0 @@ -4138,24 +4172,24 @@ packages: /@babel/regjsgen@0.8.0: resolution: {integrity: sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==} - /@babel/runtime-corejs2@7.23.9: - resolution: {integrity: sha512-lwwDy5QfMkO2rmSz9AvLj6j2kWt5a4ulMi1t21vWQEO0kNCFslHoszat8reU/uigIQSUDF31zraZG/qMkcqAlw==} + /@babel/runtime-corejs2@7.24.4: + resolution: {integrity: sha512-ZCKqyUKt/Coimg+3Kafu43yNetgYnTXzNbEGAgxc81J5sI0qFNbQ613w7PNny+SmijAmGVroL0GDvx5rG/JI5Q==} engines: {node: '>=6.9.0'} dependencies: core-js: 2.6.12 regenerator-runtime: 0.14.0 dev: false - /@babel/runtime-corejs3@7.24.0: - resolution: {integrity: sha512-HxiRMOncx3ly6f3fcZ1GVKf+/EROcI9qwPgmij8Czqy6Okm/0T37T4y2ZIlLUuEUFjtM7NRsfdCO8Y3tAiJZew==} + /@babel/runtime-corejs3@7.24.4: + resolution: {integrity: sha512-VOQOexSilscN24VEY810G/PqtpFvx/z6UqDIjIWbDe2368HhDLkYN5TYwaEz/+eRCUkhJ2WaNLLmQAlxzfWj4w==} engines: {node: '>=6.9.0'} dependencies: core-js-pure: 3.32.1 regenerator-runtime: 0.14.0 dev: false - /@babel/runtime@7.24.1: - resolution: {integrity: sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==} + /@babel/runtime@7.24.4: + resolution: {integrity: sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==} engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.14.0 @@ -4165,7 +4199,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/code-frame': 7.24.2 - '@babel/parser': 7.24.1 + '@babel/parser': 7.24.4 '@babel/types': 7.24.0 /@babel/traverse@7.24.1: @@ -4173,12 +4207,12 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/code-frame': 7.24.2 - '@babel/generator': 7.24.1 + '@babel/generator': 7.24.4 '@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.24.1 + '@babel/parser': 7.24.4 '@babel/types': 7.24.0 debug: 4.3.4(supports-color@8.1.1) globals: 11.12.0 @@ -4243,7 +4277,7 @@ packages: lodash.mergewith: 4.6.2 dev: false - /@chakra-ui/system@2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0): + /@chakra-ui/system@2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.2.0): resolution: {integrity: sha512-EGtpoEjLrUu4W1fHD+a62XR+hzC5YfsWm+6lO0Kybcga3yYEij9beegO0jZgug27V+Rf7vns95VPVP6mFd/DEQ==} peerDependencies: '@emotion/react': ^11.0.0 @@ -4257,7 +4291,7 @@ packages: '@chakra-ui/theme-utils': 2.0.21 '@chakra-ui/utils': 2.0.15 '@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) + '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) react: 18.2.0 react-fast-compare: 3.2.2 dev: false @@ -4382,10 +4416,10 @@ packages: resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==} dependencies: '@babel/helper-module-imports': 7.24.3 - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@emotion/hash': 0.9.1 '@emotion/memoize': 0.8.1 - '@emotion/serialize': 1.1.3 + '@emotion/serialize': 1.1.4 babel-plugin-macros: 3.1.0 convert-source-map: 1.8.0 escape-string-regexp: 4.0.0 @@ -4407,7 +4441,7 @@ packages: dependencies: '@emotion/babel-plugin': 11.11.0 '@emotion/cache': 11.11.0 - '@emotion/serialize': 1.1.3 + '@emotion/serialize': 1.1.4 '@emotion/sheet': 1.2.2 '@emotion/utils': 1.2.1 dev: false @@ -4461,10 +4495,10 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@emotion/babel-plugin': 11.11.0 '@emotion/cache': 11.11.0 - '@emotion/serialize': 1.1.3 + '@emotion/serialize': 1.1.4 '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0) '@emotion/utils': 1.2.1 '@emotion/weak-memoize': 0.3.1 @@ -4472,8 +4506,8 @@ packages: hoist-non-react-statics: 3.3.2 react: 18.2.0 - /@emotion/serialize@1.1.3: - resolution: {integrity: sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==} + /@emotion/serialize@1.1.4: + resolution: {integrity: sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==} dependencies: '@emotion/hash': 0.9.1 '@emotion/memoize': 0.8.1 @@ -4497,8 +4531,8 @@ packages: /@emotion/sheet@1.2.2: resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==} - /@emotion/styled@11.11.0(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0): - resolution: {integrity: sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==} + /@emotion/styled@11.11.5(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==} peerDependencies: '@emotion/react': ^11.0.0-rc.0 '@types/react': '*' @@ -4507,11 +4541,11 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@emotion/babel-plugin': 11.11.0 '@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/serialize': 1.1.4 '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0) '@emotion/utils': 1.2.1 '@types/react': 18.2.55 @@ -4967,7 +5001,7 @@ packages: /@fast-csv/format@4.3.5: resolution: {integrity: sha512-8iRn6QF3I8Ak78lNAa+Gdl5MJJBM5vRHivFtMRUWINdevNo00K7OXxS2PshawLKTejVwieIlPmK5YlLu6w4u8A==} dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 lodash.escaperegexp: 4.1.2 lodash.isboolean: 3.0.3 lodash.isequal: 4.5.0 @@ -4978,7 +5012,7 @@ packages: /@fast-csv/parse@4.3.6: resolution: {integrity: sha512-uRsLYksqpbDmWaSmzvJcuApSEe38+6NQZBUsuAyMZKqHxH0g1wcJgsKUvN3WC8tewaqFjBMMGrkHmC+T7k8LvA==} dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 lodash.escaperegexp: 4.1.2 lodash.groupby: 4.6.0 lodash.isfunction: 3.0.9 @@ -5015,35 +5049,35 @@ packages: resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==} dev: false - /@fortawesome/fontawesome-common-types@6.5.1: - resolution: {integrity: sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==} + /@fortawesome/fontawesome-common-types@6.5.2: + resolution: {integrity: sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==} engines: {node: '>=6'} requiresBuild: true dev: false - /@fortawesome/fontawesome-svg-core@6.5.1: - resolution: {integrity: sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==} + /@fortawesome/fontawesome-svg-core@6.5.2: + resolution: {integrity: sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==} engines: {node: '>=6'} requiresBuild: true dependencies: - '@fortawesome/fontawesome-common-types': 6.5.1 + '@fortawesome/fontawesome-common-types': 6.5.2 dev: false - /@fortawesome/free-solid-svg-icons@6.5.1: - resolution: {integrity: sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==} + /@fortawesome/free-solid-svg-icons@6.5.2: + resolution: {integrity: sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==} engines: {node: '>=6'} requiresBuild: true dependencies: - '@fortawesome/fontawesome-common-types': 6.5.1 + '@fortawesome/fontawesome-common-types': 6.5.2 dev: false - /@fortawesome/react-fontawesome@0.2.0(@fortawesome/fontawesome-svg-core@6.5.1)(react@18.2.0): + /@fortawesome/react-fontawesome@0.2.0(@fortawesome/fontawesome-svg-core@6.5.2)(react@18.2.0): resolution: {integrity: sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==} peerDependencies: '@fortawesome/fontawesome-svg-core': ~1 || ~6 react: '>=16.3' dependencies: - '@fortawesome/fontawesome-svg-core': 6.5.1 + '@fortawesome/fontawesome-svg-core': 6.5.2 prop-types: 15.8.1 react: 18.2.0 dev: false @@ -5170,7 +5204,7 @@ packages: dependencies: '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 18.19.26 + '@types/node': 18.19.31 jest-mock: 29.7.0 dev: false @@ -5180,7 +5214,7 @@ packages: dependencies: '@jest/types': 29.6.3 '@sinonjs/fake-timers': 10.3.0 - '@types/node': 18.19.26 + '@types/node': 18.19.31 jest-message-util: 29.7.0 jest-mock: 29.7.0 jest-util: 29.7.0 @@ -5198,7 +5232,7 @@ packages: dependencies: '@types/istanbul-lib-coverage': 2.0.6 '@types/istanbul-reports': 3.0.4 - '@types/node': 18.19.26 + '@types/node': 18.19.31 '@types/yargs': 15.0.19 chalk: 4.1.2 dev: false @@ -5210,7 +5244,7 @@ packages: '@jest/schemas': 29.6.3 '@types/istanbul-lib-coverage': 2.0.6 '@types/istanbul-reports': 3.0.4 - '@types/node': 18.19.26 + '@types/node': 18.19.31 '@types/yargs': 17.0.32 chalk: 4.1.2 dev: false @@ -5329,12 +5363,12 @@ packages: '@types/react': 18.2.55 dev: true - /@minh.nguyen/plugin-transform-destructuring@7.5.2(@babel/core@7.24.3): + /@minh.nguyen/plugin-transform-destructuring@7.5.2(@babel/core@7.24.4): resolution: {integrity: sha512-DIzWFKl5nzSk9Hj9ZsEXAvvgHiyuAsw52queJMuKqfZOk1BOr9u1i2h0tc6tPF3rQieubP+eX4DPLTKSMpbyMg==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@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): @@ -5369,7 +5403,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@floating-ui/react-dom': 2.0.8(react-dom@18.2.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) @@ -5392,7 +5426,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@floating-ui/react-dom': 2.0.8(react-dom@18.2.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) @@ -5415,7 +5449,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@floating-ui/react-dom': 2.0.8(react-dom@18.2.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) @@ -5431,7 +5465,7 @@ packages: 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): + /@mui/joy@5.0.0-beta.22(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-XFJd/cWXqt9MMlaUh10QQH893YaRw2CORYRhQovXvaJk7mmt/Sc4q3Fb7ANCXf4xMUPdwqdnvawLkAOAKVHuXg==} engines: {node: '>=12.0.0'} peerDependencies: @@ -5448,12 +5482,12 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@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) + '@emotion/styled': 11.11.5(@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.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/system': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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 @@ -5463,7 +5497,7 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /@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): + /@mui/material@5.15.4(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-T/LGRAC+M0c+D3+y67eHwIN5bSje0TxbcJCWR0esNvU11T0QwrX3jedXItPNBwMupF2F5VWCDHBVLlFnN3+ABA==} engines: {node: '>=12.0.0'} peerDependencies: @@ -5480,12 +5514,12 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@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) + '@emotion/styled': 11.11.5(@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.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/system': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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 @@ -5509,14 +5543,14 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@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.14(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0): + /@mui/styled-engine@5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.2.0): resolution: {integrity: sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==} engines: {node: '>=12.0.0'} peerDependencies: @@ -5529,16 +5563,16 @@ packages: '@emotion/styled': optional: true dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@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) + '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) csstype: 3.1.3 prop-types: 15.8.1 react: 18.2.0 dev: false - /@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/system@5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.55)(react@18.2.0): resolution: {integrity: sha512-auXLXzUaCSSOLqJXmsAaq7P96VPRXg2Rrz6OHNV7lr+kB8lobUF+/N84Vd9C4G/wvCXYPs5TYuuGBRhcGbiBGg==} engines: {node: '>=12.0.0'} peerDependencies: @@ -5554,11 +5588,11 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@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) + '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@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/styled-engine': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(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 @@ -5589,7 +5623,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@types/prop-types': 15.7.12 '@types/react': 18.2.55 prop-types: 15.8.1 @@ -5597,7 +5631,7 @@ packages: react-is: 18.2.0 dev: false - /@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): + /@mui/x-charts@6.19.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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: @@ -5613,9 +5647,9 @@ packages: '@emotion/styled': optional: true dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@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) + '@emotion/styled': 11.11.5(@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 @@ -5632,19 +5666,19 @@ packages: - '@types/react' dev: false - /@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==} + /@mui/x-data-grid-generator@7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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-lBA60trUaidVk85ndfYN9rvha1rwDFp51PjosY1nb0Ravb1ShGpLrbTzYN+tSRZZdtN9fRuI3WAW3mA9kZh5Og==} engines: {node: '>=14.0.0'} peerDependencies: '@mui/icons-material': ^5.4.1 '@mui/material': ^5.15.14 react: ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@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(@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.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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 @@ -5656,21 +5690,21 @@ packages: - react-dom dev: false - /@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==} + /@mui/x-data-grid-premium@7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-VQuXD289RuSKs5bz4fwHg6WTo1Rmh2QFokCAU66+yJ5ZTpqljp371y9pfvn+OMdGx4C7EkNad73VUKfP/xo1xQ==} engines: {node: '>=14.0.0'} peerDependencies: '@mui/material': ^5.15.14 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@mui/material': link:packages/mui-material/build - '@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/system': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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) + '@mui/x-data-grid': 7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-license': 7.2.0(@types/react@18.2.55)(react@18.2.0) '@types/format-util': 1.0.4 clsx: 2.1.0 exceljs: 4.4.0 @@ -5684,20 +5718,20 @@ packages: - '@types/react' dev: false - /@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==} + /@mui/x-data-grid-pro@7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-QZG30g0OspTaD9oRfLDIJGROQwpalZUhI//DVpvTZW2ZvAJAkfR1t38MJzRMdnksPmCE6sdSWUFru8eSvNg1Cg==} engines: {node: '>=14.0.0'} peerDependencies: '@mui/material': ^5.15.14 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@mui/material': link:packages/mui-material/build - '@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/system': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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) + '@mui/x-data-grid': 7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-license': 7.2.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 @@ -5710,17 +5744,17 @@ packages: - '@types/react' dev: false - /@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==} + /@mui/x-data-grid@7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-WKmFo0eKhj3W7Fv8u5n2XP4UcdzuJ+mEYALiMUDAYsah/hPBH9mA1miXn9DjXF3i3dxgzrTjdJemTgTJxAQZKg==} engines: {node: '>=14.0.0'} peerDependencies: '@mui/material': ^5.15.14 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@mui/material': link:packages/mui-material/build - '@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/system': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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 @@ -5733,8 +5767,8 @@ packages: - '@types/react' dev: false - /@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==} + /@mui/x-date-pickers-pro@6.19.9(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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-0EmWiRoZUc3ZGin3EdJaYNuCS5PA45KHEc9HkCmkT6sAnPeXMVpXrl8TFJvJxFVV6Vp7IYV8RZHC5gSZcfIrfQ==} engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.9.0 @@ -5770,14 +5804,14 @@ packages: moment-jalaali: optional: true dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@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) + '@emotion/styled': 11.11.5(@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.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-date-pickers': 6.19.9(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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 @@ -5790,8 +5824,8 @@ packages: - '@types/react' dev: false - /@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==} + /@mui/x-date-pickers@6.19.9(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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-B2m4Fv/fOme5qmV6zuE3QnWQSvj3zKtI2OvikPz5prpiCcIxqpeytkQ7VfrWH3/Aqd5yhG1Yr4IgbqG0ymIXGg==} engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.9.0 @@ -5827,9 +5861,9 @@ packages: moment-jalaali: optional: true dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@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) + '@emotion/styled': 11.11.5(@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 @@ -5852,27 +5886,27 @@ packages: peerDependencies: react: ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@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(@types/react@18.2.55)(react@18.2.0): - resolution: {integrity: sha512-WR9OkroKKGmnIno6tw4RzuyCQqI/Y+nbzt1r9sKtBgDQG/LvoBI45lC6zNtVosi8HhGWuXVsHDC7NYsEh31suA==} + /@mui/x-license@7.2.0(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-z9mqsfNPVFqjfxcPgz15o29Vb3FupSImwpMd5CFjZqNasJu3ptLpKxbIUnTtJMUicRdhsVfm3d93Z5XQkq1JuQ==} engines: {node: '>=14.0.0'} peerDependencies: react: ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@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-tree-view@6.17.0(@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-tree-view@6.17.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@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-09dc2D+Rjg2z8KOaxbUXyPi0aw7fm2jurEtV8Xw48xJ00joLWd5QJm1/v4CarEvaiyhTQzHImNqdgeJW8ZQB6g==} engines: {node: '>=14.0.0'} peerDependencies: @@ -5883,9 +5917,9 @@ packages: react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@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) + '@emotion/styled': 11.11.5(@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 @@ -5923,12 +5957,12 @@ packages: /@next/env@13.5.1: resolution: {integrity: sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==} - /@next/env@14.1.4: - resolution: {integrity: sha512-e7X7bbn3Z6DWnDi75UWn+REgAbLEqxI8Tq2pkFOFAMpWAWApz/YCUhtWMWn410h8Q2fYiYL7Yg5OlxMOCfFjJQ==} + /@next/env@14.2.1: + resolution: {integrity: sha512-qsHJle3GU3CmVx7pUoXcghX4sRN+vINkbLdH611T8ZlsP//grzqVW87BSUgOZeSAD4q7ZdZicdwNe/20U2janA==} dev: false - /@next/eslint-plugin-next@14.1.4: - resolution: {integrity: sha512-n4zYNLSyCo0Ln5b7qxqQeQ34OZKXwgbdcx6kmkQbywr+0k6M3Vinft0T72R6CDAcDrne2IAgSud4uWCzFgc5HA==} + /@next/eslint-plugin-next@14.2.1: + resolution: {integrity: sha512-Fp+mthEBjkn8r9qd6o4JgxKp0IDEzW0VYHD8ZC05xS5/lFNwHKuOdr2kVhWG7BQCO9L6eeepshM1Wbs2T+LgSg==} dependencies: glob: 10.3.10 dev: true @@ -5941,8 +5975,8 @@ packages: requiresBuild: true optional: true - /@next/swc-darwin-arm64@14.1.4: - resolution: {integrity: sha512-ubmUkbmW65nIAOmoxT1IROZdmmJMmdYvXIe8211send9ZYJu+SqxSnJM4TrPj9wmL6g9Atvj0S/2cFmMSS99jg==} + /@next/swc-darwin-arm64@14.2.1: + resolution: {integrity: sha512-kGjnjcIJehEcd3rT/3NAATJQndAEELk0J9GmGMXHSC75TMnvpOhONcjNHbjtcWE5HUQnIHy5JVkatrnYm1QhVw==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -5958,8 +5992,8 @@ packages: requiresBuild: true optional: true - /@next/swc-darwin-x64@14.1.4: - resolution: {integrity: sha512-b0Xo1ELj3u7IkZWAKcJPJEhBop117U78l70nfoQGo4xUSvv0PJSTaV4U9xQBLvZlnjsYkc8RwQN1HoH/oQmLlQ==} + /@next/swc-darwin-x64@14.2.1: + resolution: {integrity: sha512-dAdWndgdQi7BK2WSXrx4lae7mYcOYjbHJUhvOUnJjMNYrmYhxbbvJ2xElZpxNxdfA6zkqagIB9He2tQk+l16ew==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -5975,8 +6009,8 @@ packages: requiresBuild: true optional: true - /@next/swc-linux-arm64-gnu@14.1.4: - resolution: {integrity: sha512-457G0hcLrdYA/u1O2XkRMsDKId5VKe3uKPvrKVOyuARa6nXrdhJOOYU9hkKKyQTMru1B8qEP78IAhf/1XnVqKA==} + /@next/swc-linux-arm64-gnu@14.2.1: + resolution: {integrity: sha512-2ZctfnyFOGvTkoD6L+DtQtO3BfFz4CapoHnyLTXkOxbZkVRgg3TQBUjTD/xKrO1QWeydeo8AWfZRg8539qNKrg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -5992,8 +6026,8 @@ packages: requiresBuild: true optional: true - /@next/swc-linux-arm64-musl@14.1.4: - resolution: {integrity: sha512-l/kMG+z6MB+fKA9KdtyprkTQ1ihlJcBh66cf0HvqGP+rXBbOXX0dpJatjZbHeunvEHoBBS69GYQG5ry78JMy3g==} + /@next/swc-linux-arm64-musl@14.2.1: + resolution: {integrity: sha512-jazZXctiaanemy4r+TPIpFP36t1mMwWCKMsmrTRVChRqE6putyAxZA4PDujx0SnfvZHosjdkx9xIq9BzBB5tWg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -6009,8 +6043,8 @@ packages: requiresBuild: true optional: true - /@next/swc-linux-x64-gnu@14.1.4: - resolution: {integrity: sha512-BapIFZ3ZRnvQ1uWbmqEGJuPT9cgLwvKtxhK/L2t4QYO7l+/DxXuIGjvp1x8rvfa/x1FFSsipERZK70pewbtJtw==} + /@next/swc-linux-x64-gnu@14.2.1: + resolution: {integrity: sha512-VjCHWCjsAzQAAo8lkBOLEIkBZFdfW+Z18qcQ056kL4KpUYc8o59JhLDCBlhg+hINQRgzQ2UPGma2AURGOH0+Qg==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -6026,8 +6060,8 @@ packages: requiresBuild: true optional: true - /@next/swc-linux-x64-musl@14.1.4: - resolution: {integrity: sha512-mqVxTwk4XuBl49qn2A5UmzFImoL1iLm0KQQwtdRJRKl21ylQwwGCxJtIYo2rbfkZHoSKlh/YgztY0qH3wG1xIg==} + /@next/swc-linux-x64-musl@14.2.1: + resolution: {integrity: sha512-7HZKYKvAp4nAHiHIbY04finRqjeYvkITOGOurP1aLMexIFG/1+oCnqhGogBdc4lao/lkMW1c+AkwWSzSlLasqw==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -6043,8 +6077,8 @@ packages: requiresBuild: true optional: true - /@next/swc-win32-arm64-msvc@14.1.4: - resolution: {integrity: sha512-xzxF4ErcumXjO2Pvg/wVGrtr9QQJLk3IyQX1ddAC/fi6/5jZCZ9xpuL9Tzc4KPWMFq8GGWFVDMshZOdHGdkvag==} + /@next/swc-win32-arm64-msvc@14.2.1: + resolution: {integrity: sha512-YGHklaJ/Cj/F0Xd8jxgj2p8po4JTCi6H7Z3Yics3xJhm9CPIqtl8erlpK1CLv+HInDqEWfXilqatF8YsLxxA2Q==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -6060,8 +6094,8 @@ packages: requiresBuild: true optional: true - /@next/swc-win32-ia32-msvc@14.1.4: - resolution: {integrity: sha512-WZiz8OdbkpRw6/IU/lredZWKKZopUMhcI2F+XiMAcPja0uZYdMTZQRoQ0WZcvinn9xZAidimE7tN9W5v9Yyfyw==} + /@next/swc-win32-ia32-msvc@14.2.1: + resolution: {integrity: sha512-o+ISKOlvU/L43ZhtAAfCjwIfcwuZstiHVXq/BDsZwGqQE0h/81td95MPHliWCnFoikzWcYqh+hz54ZB2FIT8RA==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] @@ -6077,8 +6111,8 @@ packages: requiresBuild: true optional: true - /@next/swc-win32-x64-msvc@14.1.4: - resolution: {integrity: sha512-4Rto21sPfw555sZ/XNLqfxDUNeLhNYGO2dlPqsnuCg8N8a2a9u1ltqBOPQ4vj1Gf7eJC0W2hHG2eYUHuiXgY2w==} + /@next/swc-win32-x64-msvc@14.2.1: + resolution: {integrity: sha512-GmRoTiLcvCLifujlisknv4zu9/C4i9r0ktsA8E51EMqJL4bD4CpO7lDYr7SrUxCR0tS4RVcrqKmCak24T0ohaw==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -6352,15 +6386,15 @@ packages: - encoding dev: true - /@octokit/core@5.0.0: - resolution: {integrity: sha512-YbAtMWIrbZ9FCXbLwT9wWB8TyLjq9mxpKdgB3dUNxQcIVTf9hJ70gRPwAcqGZdY6WdJPZ0I7jLaaNDCiloGN2A==} + /@octokit/core@5.2.0: + resolution: {integrity: sha512-1LFfa/qnMQvEOAdzlQymH0ulepxbxnCYAKJZfMci/5XJyIHWgEYnDmgnKakbTh7CH2tFQ5O60oYDvns4i9RAIg==} engines: {node: '>= 18'} dependencies: '@octokit/auth-token': 4.0.0 - '@octokit/graphql': 7.0.1 - '@octokit/request': 8.1.1 - '@octokit/request-error': 5.0.0 - '@octokit/types': 11.1.0 + '@octokit/graphql': 7.1.0 + '@octokit/request': 8.3.1 + '@octokit/request-error': 5.1.0 + '@octokit/types': 13.1.0 before-after-hook: 2.2.2 universal-user-agent: 6.0.0 dev: true @@ -6382,12 +6416,11 @@ packages: universal-user-agent: 6.0.0 dev: true - /@octokit/endpoint@9.0.0: - resolution: {integrity: sha512-szrQhiqJ88gghWY2Htt8MqUDO6++E/EIXqJ2ZEp5ma3uGS46o7LZAzSLt49myB7rT+Hfw5Y6gO3LmOxGzHijAQ==} + /@octokit/endpoint@9.0.5: + resolution: {integrity: sha512-ekqR4/+PCLkEBF6qgj8WqJfvDq65RH85OAgrtnVp1mSxaXF03u2xW/hUdweGS5654IlC0wkNYC18Z50tSYTAFw==} engines: {node: '>= 18'} dependencies: - '@octokit/types': 11.1.0 - is-plain-object: 5.0.0 + '@octokit/types': 13.1.0 universal-user-agent: 6.0.0 dev: true @@ -6412,12 +6445,12 @@ packages: - encoding dev: true - /@octokit/graphql@7.0.1: - resolution: {integrity: sha512-T5S3oZ1JOE58gom6MIcrgwZXzTaxRnxBso58xhozxHpOqSTgDS6YNeEUvZ/kRvXgPrRz/KHnZhtb7jUMRi9E6w==} + /@octokit/graphql@7.1.0: + resolution: {integrity: sha512-r+oZUH7aMFui1ypZnAvZmn0KSqAUgE1/tUXIWaqUCa1758ts/Jio84GZuzsvUkme98kv0WFY8//n0J1Z+vsIsQ==} engines: {node: '>= 18'} dependencies: - '@octokit/request': 8.1.1 - '@octokit/types': 11.1.0 + '@octokit/request': 8.3.1 + '@octokit/types': 13.1.0 universal-user-agent: 6.0.0 dev: true @@ -6433,8 +6466,12 @@ packages: resolution: {integrity: sha512-V8GImKs3TeQRxRtXFpG2wl19V7444NIOTDF24AWuIbmNaNYOQMWRbjcGDXV5B+0n887fgDcuMNOmlul+k+oJtw==} dev: true - /@octokit/openapi-types@19.0.2: - resolution: {integrity: sha512-8li32fUDUeml/ACRp/njCWTsk5t17cfTM1jp9n08pBrqs5cDFJubtjsSnuz56r5Tad6jdEPJld7LxNp9dNcyjQ==} + /@octokit/openapi-types@20.0.0: + resolution: {integrity: sha512-EtqRBEjp1dL/15V7WiX5LJMIxxkdiGJnabzYx5Apx4FkQIFgAfKumXeYAqqJCj1s+BMX4cPFIFC4OLCR6stlnA==} + dev: true + + /@octokit/openapi-types@21.2.0: + resolution: {integrity: sha512-xx+Xd6I7rYvul/hgUDqv6TeGX0IOGnhSg9IOeYgd/uI7IAqUy6DE2B6Ipv2M4mWoxaMcWjIzgTIcv8pMO3F3vw==} dev: true /@octokit/plugin-enterprise-rest@6.0.1: @@ -6461,14 +6498,14 @@ packages: '@octokit/types': 9.3.2 dev: true - /@octokit/plugin-paginate-rest@9.1.2(@octokit/core@5.0.0): - resolution: {integrity: sha512-euDbNV6fxX6btsCDnZoZM4vw3zO1nj1Z7TskHAulO6mZ9lHoFTpwll6farf+wh31mlBabgU81bBYdflp0GLVAQ==} + /@octokit/plugin-paginate-rest@9.2.1(@octokit/core@5.2.0): + resolution: {integrity: sha512-wfGhE/TAkXZRLjksFXuDZdmGnJQHvtU/joFQdweXUgzo1XwvBCD4o4+75NtFfjfLK5IwLf9vHTfSiU3sLRYpRw==} engines: {node: '>= 18'} peerDependencies: - '@octokit/core': '>=5' + '@octokit/core': '5' dependencies: - '@octokit/core': 5.0.0 - '@octokit/types': 12.1.1 + '@octokit/core': 5.2.0 + '@octokit/types': 12.6.0 dev: true /@octokit/plugin-request-log@1.0.4(@octokit/core@3.6.0): @@ -6487,23 +6524,23 @@ packages: '@octokit/core': 4.2.4 dev: true - /@octokit/plugin-request-log@4.0.0(@octokit/core@5.0.0): + /@octokit/plugin-request-log@4.0.0(@octokit/core@5.2.0): resolution: {integrity: sha512-2uJI1COtYCq8Z4yNSnM231TgH50bRkheQ9+aH8TnZanB6QilOnx8RMD2qsnamSOXtDj0ilxvevf5fGsBhBBzKA==} engines: {node: '>= 18'} peerDependencies: '@octokit/core': '>=5' dependencies: - '@octokit/core': 5.0.0 + '@octokit/core': 5.2.0 dev: true - /@octokit/plugin-rest-endpoint-methods@10.1.2(@octokit/core@5.0.0): - resolution: {integrity: sha512-JztgZ82CY4JNlPTuF0jh4iWuuGpEi5czFCoXyAbMg4F2XyFBbG5DWAKfa3odRvdZww6Df1tQgBKnqpd9X0WF9g==} + /@octokit/plugin-rest-endpoint-methods@10.4.1(@octokit/core@5.2.0): + resolution: {integrity: sha512-xV1b+ceKV9KytQe3zCVqjg+8GTGfDYwaT1ATU5isiUyVtlVAO3HNdzpS4sr4GBx4hxQ46s7ITtZrAsxG22+rVg==} engines: {node: '>= 18'} peerDependencies: - '@octokit/core': '>=5' + '@octokit/core': '5' dependencies: - '@octokit/core': 5.0.0 - '@octokit/types': 12.1.1 + '@octokit/core': 5.2.0 + '@octokit/types': 12.6.0 dev: true /@octokit/plugin-rest-endpoint-methods@5.16.2(@octokit/core@3.6.0): @@ -6543,11 +6580,11 @@ packages: once: 1.4.0 dev: true - /@octokit/request-error@5.0.0: - resolution: {integrity: sha512-1ue0DH0Lif5iEqT52+Rf/hf0RmGO9NWFjrzmrkArpG9trFfDM/efx00BJHdLGuro4BR/gECxCU2Twf5OKrRFsQ==} + /@octokit/request-error@5.1.0: + resolution: {integrity: sha512-GETXfE05J0+7H2STzekpKObFe765O5dlAKUTLNGeH+x47z7JjXHfsHKo5z21D/o/IOZTUEI6nyWyR+bZVP/n5Q==} engines: {node: '>= 18'} dependencies: - '@octokit/types': 11.1.0 + '@octokit/types': 13.1.0 deprecation: 2.3.1 once: 1.4.0 dev: true @@ -6579,14 +6616,13 @@ packages: - encoding dev: true - /@octokit/request@8.1.1: - resolution: {integrity: sha512-8N+tdUz4aCqQmXl8FpHYfKG9GelDFd7XGVzyN8rc6WxVlYcfpHECnuRkgquzz+WzvHTK62co5di8gSXnzASZPQ==} + /@octokit/request@8.3.1: + resolution: {integrity: sha512-fin4cl5eHN5Ybmb/gtn7YZ+ycyUlcyqqkg5lfxeSChqj7sUt6TNaJPehREi+0PABKLREYL8pfaUhH3TicEWNoA==} engines: {node: '>= 18'} dependencies: - '@octokit/endpoint': 9.0.0 - '@octokit/request-error': 5.0.0 - '@octokit/types': 11.1.0 - is-plain-object: 5.0.0 + '@octokit/endpoint': 9.0.5 + '@octokit/request-error': 5.1.0 + '@octokit/types': 13.1.0 universal-user-agent: 6.0.0 dev: true @@ -6613,14 +6649,14 @@ packages: - encoding dev: true - /@octokit/rest@20.0.2: - resolution: {integrity: sha512-Ux8NDgEraQ/DMAU1PlAohyfBBXDwhnX2j33Z1nJNziqAfHi70PuxkFYIcIt8aIAxtRE7KVuKp8lSR8pA0J5iOQ==} + /@octokit/rest@20.1.0: + resolution: {integrity: sha512-STVO3itHQLrp80lvcYB2UIKoeil5Ctsgd2s1AM+du3HqZIR35ZH7WE9HLwUOLXH0myA0y3AGNPo8gZtcgIbw0g==} engines: {node: '>= 18'} dependencies: - '@octokit/core': 5.0.0 - '@octokit/plugin-paginate-rest': 9.1.2(@octokit/core@5.0.0) - '@octokit/plugin-request-log': 4.0.0(@octokit/core@5.0.0) - '@octokit/plugin-rest-endpoint-methods': 10.1.2(@octokit/core@5.0.0) + '@octokit/core': 5.2.0 + '@octokit/plugin-paginate-rest': 9.2.1(@octokit/core@5.2.0) + '@octokit/plugin-request-log': 4.0.0(@octokit/core@5.2.0) + '@octokit/plugin-rest-endpoint-methods': 10.4.1(@octokit/core@5.2.0) dev: true /@octokit/tsconfig@1.0.2: @@ -6633,16 +6669,16 @@ packages: '@octokit/openapi-types': 18.0.0 dev: true - /@octokit/types@11.1.0: - resolution: {integrity: sha512-Fz0+7GyLm/bHt8fwEqgvRBWwIV1S6wRRyq+V6exRKLVWaKGsuy6H9QFYeBVDV7rK6fO3XwHgQOPxv+cLj2zpXQ==} + /@octokit/types@12.6.0: + resolution: {integrity: sha512-1rhSOfRa6H9w4YwK0yrf5faDaDTb+yLyBUKOCV4xtCDB5VmIPqd/v9yr9o6SAzOAlRxMiRiCic6JVM1/kunVkw==} dependencies: - '@octokit/openapi-types': 18.0.0 + '@octokit/openapi-types': 20.0.0 dev: true - /@octokit/types@12.1.1: - resolution: {integrity: sha512-qnJTldJ1NyGT5MTsCg/Zi+y2IFHZ1Jo5+njNCjJ9FcainV7LjuHgmB697kA0g4MjZeDAJsM3B45iqCVsCLVFZg==} + /@octokit/types@13.1.0: + resolution: {integrity: sha512-nBwAFOYqVUUJ2AZFK4ZzESQptaAVqdTDKk8gE0Xr0o99WuPDSrhUC38x0F40xD9OUxXhOOuZKWNNVVLPSHQDvQ==} dependencies: - '@octokit/openapi-types': 19.0.2 + '@octokit/openapi-types': 21.2.0 dev: true /@octokit/types@6.41.0: @@ -6669,13 +6705,12 @@ packages: requiresBuild: true optional: true - /@playwright/test@1.42.1: - resolution: {integrity: sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ==} + /@playwright/test@1.43.1: + resolution: {integrity: sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==} engines: {node: '>=16'} hasBin: true dependencies: - playwright: 1.42.1 - dev: true + playwright: 1.43.1 /@polka/url@1.0.0-next.21: resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==} @@ -6724,7 +6759,7 @@ packages: chalk: 4.1.2 command-exists: 1.2.9 deepmerge: 4.3.1 - envinfo: 7.11.1 + envinfo: 7.12.0 execa: 5.1.1 hermes-profile-transformer: 0.0.6 node-stream-zip: 1.15.0 @@ -6855,95 +6890,95 @@ packages: engines: {node: '>=18'} dev: false - /@react-native/babel-plugin-codegen@0.73.4(@babel/preset-env@7.24.3): + /@react-native/babel-plugin-codegen@0.73.4(@babel/preset-env@7.24.4): resolution: {integrity: sha512-XzRd8MJGo4Zc5KsphDHBYJzS1ryOHg8I2gOZDAUCGcwLFhdyGu1zBNDJYH2GFyDrInn9TzAbRIf3d4O+eltXQQ==} engines: {node: '>=18'} dependencies: - '@react-native/codegen': 0.73.3(@babel/preset-env@7.24.3) + '@react-native/codegen': 0.73.3(@babel/preset-env@7.24.4) transitivePeerDependencies: - '@babel/preset-env' - supports-color dev: false - /@react-native/babel-preset@0.73.21(@babel/core@7.24.3)(@babel/preset-env@7.24.3): + /@react-native/babel-preset@0.73.21(@babel/core@7.24.4)(@babel/preset-env@7.24.4): resolution: {integrity: sha512-WlFttNnySKQMeujN09fRmrdWqh46QyJluM5jdtDNrkl/2Hx6N4XeDUGhABvConeK95OidVO7sFFf7sNebVXogA==} engines: {node: '>=18'} peerDependencies: - '@babel/core': ^7.23.9 - dependencies: - '@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/core': ^7.24.4 + dependencies: + '@babel/core': 7.24.4 + '@babel/plugin-proposal-async-generator-functions': 7.20.7(@babel/core@7.24.4) + '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.4) + '@babel/plugin-proposal-export-default-from': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.4) + '@babel/plugin-proposal-numeric-separator': 7.18.6(@babel/core@7.24.4) + '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.24.4) + '@babel/plugin-proposal-optional-catch-binding': 7.18.6(@babel/core@7.24.4) + '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.4) + '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-export-default-from': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-transform-arrow-functions': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-async-to-generator': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-block-scoping': 7.24.4(@babel/core@7.24.4) + '@babel/plugin-transform-classes': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-computed-properties': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-destructuring': /@minh.nguyen/plugin-transform-destructuring@7.5.2(@babel/core@7.24.4) + '@babel/plugin-transform-flow-strip-types': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-function-name': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-literals': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.24.4) + '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-private-property-in-object': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-react-display-name': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.4) + '@babel/plugin-transform-react-jsx-self': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-runtime': 7.24.3(@babel/core@7.24.4) + '@babel/plugin-transform-shorthand-properties': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-spread': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-sticky-regex': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-typescript': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-unicode-regex': 7.24.1(@babel/core@7.24.4) '@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-native/babel-plugin-codegen': 0.73.4(@babel/preset-env@7.24.4) + babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.24.4) react-refresh: 0.14.0 transitivePeerDependencies: - '@babel/preset-env' - supports-color dev: false - /@react-native/codegen@0.73.3(@babel/preset-env@7.24.3): + /@react-native/codegen@0.73.3(@babel/preset-env@7.24.4): resolution: {integrity: sha512-sxslCAAb8kM06vGy9Jyh4TtvjhcP36k/rvj2QE2Jdhdm61KvfafCATSIsOfc0QvnduWFcpXUPvAVyYwuv7PYDg==} engines: {node: '>=18'} peerDependencies: - '@babel/preset-env': ^7.23.9 + '@babel/preset-env': ^7.24.4 dependencies: - '@babel/parser': 7.24.1 - '@babel/preset-env': 7.24.3(@babel/core@7.24.3) + '@babel/parser': 7.24.4 + '@babel/preset-env': 7.24.4(@babel/core@7.24.4) flow-parser: 0.206.0 glob: 7.2.3 invariant: 2.2.4 - jscodeshift: 0.14.0(@babel/preset-env@7.24.3) + jscodeshift: 0.14.0(@babel/preset-env@7.24.4) mkdirp: 0.5.6 nullthrows: 1.1.1 transitivePeerDependencies: - supports-color dev: false - /@react-native/community-cli-plugin@0.73.17(@babel/core@7.24.3)(@babel/preset-env@7.24.3): + /@react-native/community-cli-plugin@0.73.17(@babel/core@7.24.4)(@babel/preset-env@7.24.4): resolution: {integrity: sha512-F3PXZkcHg+1ARIr6FRQCQiB7ZAA+MQXGmq051metRscoLvgYJwj7dgC8pvgy0kexzUkHu5BNKrZeySzUft3xuQ==} engines: {node: '>=18'} dependencies: '@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) + '@react-native/metro-babel-transformer': 0.73.15(@babel/core@7.24.4)(@babel/preset-env@7.24.4) chalk: 4.1.2 execa: 5.1.1 metro: 0.80.7 @@ -6997,14 +7032,14 @@ packages: engines: {node: '>=18'} dev: false - /@react-native/metro-babel-transformer@0.73.15(@babel/core@7.24.3)(@babel/preset-env@7.24.3): + /@react-native/metro-babel-transformer@0.73.15(@babel/core@7.24.4)(@babel/preset-env@7.24.4): resolution: {integrity: sha512-LlkSGaXCz+xdxc9819plmpsl4P4gZndoFtpjN3GMBIu6f7TBV0GVbyJAU4GE8fuAWPVSVL5ArOcdkWKSbI1klw==} engines: {node: '>=18'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@react-native/babel-preset': 0.73.21(@babel/core@7.24.3)(@babel/preset-env@7.24.3) + '@babel/core': 7.24.4 + '@react-native/babel-preset': 0.73.21(@babel/core@7.24.4)(@babel/preset-env@7.24.4) hermes-parser: 0.15.0 nullthrows: 1.1.1 transitivePeerDependencies: @@ -7024,7 +7059,7 @@ packages: dependencies: invariant: 2.2.4 nullthrows: 1.1.1 - react-native: 0.73.6(@babel/core@7.24.3)(@babel/preset-env@7.24.3)(react@18.2.0) + react-native: 0.73.6(@babel/core@7.24.4)(@babel/preset-env@7.24.4)(react@18.2.0) dev: false /@react-spring/animated@9.7.3(react@18.2.0): @@ -7075,7 +7110,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.6(@babel/core@7.24.3)(@babel/preset-env@7.24.3)(react@18.2.0) + react-native: 0.73.6(@babel/core@7.24.4)(@babel/preset-env@7.24.4)(react@18.2.0) dev: false /@react-spring/rafz@9.7.3: @@ -7168,7 +7203,7 @@ packages: react-native: optional: true dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@types/react-reconciler': 0.26.7 '@types/webxr': 0.5.14 base64-js: 1.5.1 @@ -7176,7 +7211,7 @@ packages: 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.6(@babel/core@7.24.3)(@babel/preset-env@7.24.3)(react@18.2.0) + react-native: 0.73.6(@babel/core@7.24.4)(@babel/preset-env@7.24.4)(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 @@ -7185,8 +7220,8 @@ packages: zustand: 3.7.2(react@18.2.0) dev: false - /@remix-run/router@1.15.1: - resolution: {integrity: sha512-zcU0gM3z+3iqj8UX45AmWY810l3oUmXM7uH4dt5xtzvMhRtYVhKGOmgOd1877dOPPepfCjUv57w+syamWIYe7w==} + /@remix-run/router@1.15.3: + resolution: {integrity: sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==} engines: {node: '>=14.0.0'} /@rollup/plugin-replace@5.0.5(rollup@3.29.4): @@ -7394,11 +7429,6 @@ packages: engines: {node: '>=10'} dev: true - /@sindresorhus/merge-streams@1.0.0: - resolution: {integrity: sha512-rUV5WyJrJLoloD4NDN1V1+LDMDWOa4OTsT4yYJwQNpTU6FWxkxHpL7eu4w+DmiH8x/EAM1otkPE1+LaspIbplw==} - engines: {node: '>=18'} - dev: true - /@sindresorhus/merge-streams@2.2.1: resolution: {integrity: sha512-255V7MMIKw6aQ43Wbqp9HZ+VHn6acddERTLiiLnlcPLU9PdTq9Aijl12oklAgUEblLWye+vHLzmqBx6f2TGcZw==} engines: {node: '>=18'} @@ -7459,14 +7489,14 @@ packages: resolution: {integrity: sha512-DTuBFbqu4gGfajREEMrkq5jBhcnskinhr4+AnfJEk48zhVeEv3XnUKGIX98B74kxhYsIMfApGGySTn7V3b5yBA==} engines: {node: '>= 12.13.0', npm: '>= 6.12.0'} dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 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.26 + '@types/node': 18.19.31 dev: false /@slack/oauth@2.6.2: @@ -7476,7 +7506,7 @@ packages: '@slack/logger': 3.0.0 '@slack/web-api': 6.12.0 '@types/jsonwebtoken': 8.5.9 - '@types/node': 18.19.26 + '@types/node': 18.19.31 jsonwebtoken: 9.0.0 lodash.isstring: 4.0.1 transitivePeerDependencies: @@ -7489,7 +7519,7 @@ packages: dependencies: '@slack/logger': 3.0.0 '@slack/web-api': 6.12.0 - '@types/node': 18.19.26 + '@types/node': 18.19.31 '@types/p-queue': 2.3.2 '@types/ws': 7.4.7 eventemitter3: 3.1.2 @@ -7515,7 +7545,7 @@ packages: '@slack/logger': 3.0.0 '@slack/types': 2.11.0 '@types/is-stream': 1.1.0 - '@types/node': 18.19.26 + '@types/node': 18.19.31 axios: 1.6.5(debug@4.3.4) eventemitter3: 3.1.2 form-data: 2.5.1 @@ -7616,11 +7646,22 @@ packages: '@styled-system/css': 5.1.5 dev: false + /@swc/counter@0.1.3: + resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==} + dev: false + /@swc/helpers@0.5.2: resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==} dependencies: tslib: 2.6.2 + /@swc/helpers@0.5.5: + resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==} + dependencies: + '@swc/counter': 0.1.3 + tslib: 2.6.2 + dev: false + /@szmarczak/http-timer@4.0.6: resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==} engines: {node: '>=10'} @@ -7633,7 +7674,7 @@ packages: engines: {node: '>=14'} dependencies: '@babel/code-frame': 7.24.2 - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@types/aria-query': 5.0.1 aria-query: 5.1.3 chalk: 4.1.2 @@ -7641,14 +7682,14 @@ packages: lz-string: 1.5.0 pretty-format: 27.5.1 - /@testing-library/react@14.2.2(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-SOUuM2ysCvjUWBXTNfQ/ztmnKDmqaiPV3SvoIuyxMUca45rbSWWAT/qB8CUs/JQ/ux/8JFs9DNdFQ3f6jH3crA==} + /@testing-library/react@14.3.1(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-H99XjUhWQw0lTgyMN05W3xQG1Nh4lq574D8keFf1dDoNTJgp66VbJozRaczoF+wsiaPJNt/TcnfpLGufGxSrZQ==} engines: {node: '>=14'} peerDependencies: react: ^18.0.0 react-dom: ^18.0.0 dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@testing-library/dom': 9.3.4 '@types/react-dom': 18.2.19 react: 18.2.0 @@ -7792,7 +7833,7 @@ packages: /@types/babel__core@7.20.5: resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} dependencies: - '@babel/parser': 7.24.1 + '@babel/parser': 7.24.4 '@babel/types': 7.24.0 '@types/babel__generator': 7.6.4 '@types/babel__template': 7.4.1 @@ -7821,7 +7862,7 @@ packages: /@types/babel__template@7.4.1: resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==} dependencies: - '@babel/parser': 7.24.1 + '@babel/parser': 7.24.4 '@babel/types': 7.24.0 dev: true @@ -7835,7 +7876,7 @@ packages: resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==} dependencies: '@types/connect': 3.4.35 - '@types/node': 18.19.26 + '@types/node': 18.19.31 dev: false /@types/cacheable-request@6.0.2: @@ -7843,30 +7884,30 @@ packages: dependencies: '@types/http-cache-semantics': 4.0.1 '@types/keyv': 3.1.4 - '@types/node': 18.19.26 + '@types/node': 18.19.31 '@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.26 + '@types/node': 18.19.31 dev: true /@types/connect@3.4.35: resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==} dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 dev: false /@types/cookie@0.4.1: @@ -7905,11 +7946,11 @@ packages: /@types/eslint-scope@3.7.4: resolution: {integrity: sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==} dependencies: - '@types/eslint': 8.56.6 + '@types/eslint': 8.56.9 '@types/estree': 1.0.5 - /@types/eslint@8.56.6: - resolution: {integrity: sha512-ymwc+qb1XkjT/gfoQwxIeHZ6ixH23A+tCT2ADSA/DPVKzAjwYkTXBMCQ/f6fe4wEa85Lhp26VPeUxI7wMhAi7A==} + /@types/eslint@8.56.9: + resolution: {integrity: sha512-W4W3KcqzjJ0sHg2vAq9vfml6OhsJ53TcUjUqfzzZf/EChUtwspszj/S0pzMxnfRcO55/iGq47dscXw71Fxc4Zg==} dependencies: '@types/estree': 1.0.5 '@types/json-schema': 7.0.12 @@ -7920,7 +7961,7 @@ packages: /@types/express-serve-static-core@4.17.35: resolution: {integrity: sha512-wALWQwrgiB2AWTT91CB62b6Yt0sNHpznUXeZEcnPU3DRdlDIz74x8Qg1UUYKSVFi+va5vKOLYRBI1bRKiLLKIg==} dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 '@types/qs': 6.9.7 '@types/range-parser': 1.2.4 '@types/send': 0.17.1 @@ -7942,7 +7983,7 @@ packages: resolution: {integrity: sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==} dependencies: '@types/jsonfile': 6.1.1 - '@types/node': 18.19.26 + '@types/node': 18.19.31 dev: true /@types/hoist-non-react-statics@3.3.5: @@ -7966,7 +8007,7 @@ packages: /@types/is-stream@1.1.0: resolution: {integrity: sha512-jkZatu4QVbR60mpIzjINmtS1ZF4a/FqdTUTBeQDVOQ2PYyidtwFKr0B5G6ERukKwliq+7mIXvxyppwzG5EgRYg==} dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 dev: false /@types/istanbul-lib-coverage@2.0.6: @@ -7985,8 +8026,8 @@ packages: '@types/istanbul-lib-report': 3.0.3 dev: false - /@types/jscodeshift@0.11.5: - resolution: {integrity: sha512-7JV0qdblTeWFigevmwFUgROXX395F+MQx6v0YqPn8Bx0B4Sng6alEejz9PENzgLYpG+zL0O4tGdBzc4gKZH8XA==} + /@types/jscodeshift@0.11.11: + resolution: {integrity: sha512-d7CAfFGOupj5qCDqMODXxNz2/NwCv/Lha78ZFbnr6qpk3K98iSB8I+ig9ERE2+EeYML352VMRsjPyOpeA+04eQ==} dependencies: ast-types: 0.14.2 recast: 0.20.5 @@ -8006,19 +8047,19 @@ packages: /@types/jsonfile@6.1.1: resolution: {integrity: sha512-GSgiRCVeapDN+3pqA35IkQwasaCh/0YFH5dEF6S88iDvEn901DjOeH3/QPY+XYP1DFzDZPvIvfeEgk+7br5png==} dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 dev: true /@types/jsonwebtoken@8.5.9: resolution: {integrity: sha512-272FMnFGzAVMGtu9tkr29hRL6bZj4Zs1KZNeHLnKqAvp06tAIcarTMwOh8/8bz4FmKRcMxZhZNeUAQsNLoiPhg==} dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 dev: false /@types/keyv@3.1.4: resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==} dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 dev: true /@types/lodash.mergewith@4.6.7: @@ -8066,8 +8107,8 @@ packages: resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==} dev: true - /@types/node@18.19.26: - resolution: {integrity: sha512-+wiMJsIwLOYCvUqSdKTrfkS8mpTp+MPINe6+Np4TAGFWWRWiBQ5kSq9nZGCSPkzx9mvT+uEukzpX4MOSCydcvw==} + /@types/node@18.19.31: + resolution: {integrity: sha512-ArgCD39YpyyrtFKIqMDvjz79jto5fcI/SVUs2HwB+f0dAzq68yqOdyaSivLiLugSziTpNXLQrVb7RZFmdZzbhA==} dependencies: undici-types: 5.26.5 @@ -8165,13 +8206,13 @@ packages: /@types/resolve@0.0.8: resolution: {integrity: sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==} dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 dev: true /@types/responselike@1.0.0: resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==} dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 dev: true /@types/retry@0.12.0: @@ -8189,7 +8230,7 @@ packages: resolution: {integrity: sha512-Cwo8LE/0rnvX7kIIa3QHCkcuF21c05Ayb0ZfxPiv0W8VRiZiNW/WuRupHKpqqGVGf7SUA44QSOUKaEd9lIrd/Q==} dependencies: '@types/mime': 1.3.2 - '@types/node': 18.19.26 + '@types/node': 18.19.31 dev: false /@types/serve-static@1.15.2: @@ -8197,7 +8238,7 @@ packages: dependencies: '@types/http-errors': 2.0.1 '@types/mime': 3.0.1 - '@types/node': 18.19.26 + '@types/node': 18.19.31 dev: false /@types/sinon@10.0.20: @@ -8253,7 +8294,7 @@ packages: /@types/ws@7.4.7: resolution: {integrity: sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==} dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 dev: false /@types/yargs-parser@21.0.3: @@ -8270,8 +8311,8 @@ packages: dependencies: '@types/yargs-parser': 21.0.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==} + /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.5): + resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha @@ -8282,25 +8323,25 @@ packages: optional: true dependencies: '@eslint-community/regexpp': 4.6.2 - '@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.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 + '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5) + '@typescript-eslint/scope-manager': 6.21.0 + '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.0)(typescript@5.4.5) + '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.5) + '@typescript-eslint/visitor-keys': 6.21.0 debug: 4.3.4(supports-color@8.1.1) 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.4.3) - typescript: 5.4.3 + ts-api-utils: 1.0.1(typescript@5.4.5) + typescript: 5.4.5 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/parser@6.19.1(eslint@8.57.0)(typescript@5.4.3): - resolution: {integrity: sha512-WEfX22ziAh6pRE9jnbkkLGp/4RhTpffr2ZK5bJ18M8mIfA8A+k97U9ZyaXCEJRlmMHh7R9MJZWXp/r73DzINVQ==} + /@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5): + resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^7.0.0 || ^8.0.0 @@ -8309,27 +8350,27 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/scope-manager': 6.19.1 - '@typescript-eslint/types': 6.19.1 - '@typescript-eslint/typescript-estree': 6.19.1(typescript@5.4.3) - '@typescript-eslint/visitor-keys': 6.19.1 + '@typescript-eslint/scope-manager': 6.21.0 + '@typescript-eslint/types': 6.21.0 + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.5) + '@typescript-eslint/visitor-keys': 6.21.0 debug: 4.3.4(supports-color@8.1.1) eslint: 8.57.0 - typescript: 5.4.3 + typescript: 5.4.5 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/scope-manager@6.19.1: - resolution: {integrity: sha512-4CdXYjKf6/6aKNMSly/BP4iCSOpvMmqtDzRtqFyyAae3z5kkqEjKndR5vDHL8rSuMIIWP8u4Mw4VxLyxZW6D5w==} + /@typescript-eslint/scope-manager@6.21.0: + resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==} engines: {node: ^16.0.0 || >=18.0.0} dependencies: - '@typescript-eslint/types': 6.19.1 - '@typescript-eslint/visitor-keys': 6.19.1 + '@typescript-eslint/types': 6.21.0 + '@typescript-eslint/visitor-keys': 6.21.0 dev: true - /@typescript-eslint/type-utils@6.19.1(eslint@8.57.0)(typescript@5.4.3): - resolution: {integrity: sha512-0vdyld3ecfxJuddDjACUvlAeYNrHP/pDeQk2pWBR2ESeEzQhg52DF53AbI9QCBkYE23lgkhLCZNkHn2hEXXYIg==} + /@typescript-eslint/type-utils@6.21.0(eslint@8.57.0)(typescript@5.4.5): + resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^7.0.0 || ^8.0.0 @@ -8338,23 +8379,23 @@ packages: typescript: optional: true dependencies: - '@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) + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.5) + '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.5) debug: 4.3.4(supports-color@8.1.1) eslint: 8.57.0 - ts-api-utils: 1.0.1(typescript@5.4.3) - typescript: 5.4.3 + ts-api-utils: 1.0.1(typescript@5.4.5) + typescript: 5.4.5 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/types@6.19.1: - resolution: {integrity: sha512-6+bk6FEtBhvfYvpHsDgAL3uo4BfvnTnoge5LrrCj2eJN8g3IJdLTD4B/jK3Q6vo4Ql/Hoip9I8aB6fF+6RfDqg==} + /@typescript-eslint/types@6.21.0: + resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==} engines: {node: ^16.0.0 || >=18.0.0} dev: true - /@typescript-eslint/typescript-estree@6.19.1(typescript@5.4.3): - resolution: {integrity: sha512-aFdAxuhzBFRWhy+H20nYu19+Km+gFfwNO4TEqyszkMcgBDYQjmPJ61erHxuT2ESJXhlhrO7I5EFIlZ+qGR8oVA==} + /@typescript-eslint/typescript-estree@6.21.0(typescript@5.4.5): + resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: typescript: '*' @@ -8362,21 +8403,21 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/types': 6.19.1 - '@typescript-eslint/visitor-keys': 6.19.1 + '@typescript-eslint/types': 6.21.0 + '@typescript-eslint/visitor-keys': 6.21.0 debug: 4.3.4(supports-color@8.1.1) globby: 11.1.0 is-glob: 4.0.3 minimatch: 9.0.3 semver: 7.6.0 - ts-api-utils: 1.0.1(typescript@5.4.3) - typescript: 5.4.3 + ts-api-utils: 1.0.1(typescript@5.4.5) + typescript: 5.4.5 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/utils@6.19.1(eslint@8.57.0)(typescript@5.4.3): - resolution: {integrity: sha512-JvjfEZuP5WoMqwh9SPAPDSHSg9FBHHGhjPugSRxu5jMfjvBpq5/sGTD+9M9aQ5sh6iJ8AY/Kk/oUYVEMAPwi7w==} + /@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@5.4.5): + resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^7.0.0 || ^8.0.0 @@ -8384,9 +8425,9 @@ packages: '@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.4.3) + '@typescript-eslint/scope-manager': 6.21.0 + '@typescript-eslint/types': 6.21.0 + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.5) eslint: 8.57.0 semver: 7.6.0 transitivePeerDependencies: @@ -8394,11 +8435,11 @@ packages: - typescript dev: true - /@typescript-eslint/visitor-keys@6.19.1: - resolution: {integrity: sha512-gkdtIO+xSO/SmI0W68DBg4u1KElmIUo3vXzgHyGPs6cxgB0sa3TlptRAAE0hUY1hM6FcDKEv7aIwiTGm76cXfQ==} + /@typescript-eslint/visitor-keys@6.21.0: + resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==} engines: {node: ^16.0.0 || >=18.0.0} dependencies: - '@typescript-eslint/types': 6.19.1 + '@typescript-eslint/types': 6.21.0 eslint-visitor-keys: 3.4.3 dev: true @@ -8406,18 +8447,18 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true - /@vitejs/plugin-react@4.2.1(vite@5.2.2): + /@vitejs/plugin-react@4.2.1(vite@5.2.8): 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) + '@babel/core': 7.24.4 + '@babel/plugin-transform-react-jsx-self': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.4) '@types/babel__core': 7.20.5 react-refresh: 0.14.0 - vite: 5.2.2(@types/node@18.19.26) + vite: 5.2.8(@types/node@18.19.31) transitivePeerDependencies: - supports-color dev: true @@ -8521,7 +8562,7 @@ packages: webpack-cli: 5.x.x dependencies: webpack: 5.90.3(esbuild@0.19.11)(webpack-cli@5.1.4) - webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.1)(webpack@5.90.3) + webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.90.3) /@webpack-cli/info@2.0.2(webpack-cli@5.1.4)(webpack@5.90.3): resolution: {integrity: sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==} @@ -8531,7 +8572,7 @@ packages: webpack-cli: 5.x.x dependencies: webpack: 5.90.3(esbuild@0.19.11)(webpack-cli@5.1.4) - webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.1)(webpack@5.90.3) + webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.90.3) /@webpack-cli/serve@2.0.5(webpack-cli@5.1.4)(webpack@5.90.3): resolution: {integrity: sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==} @@ -8545,13 +8586,13 @@ packages: optional: true dependencies: webpack: 5.90.3(esbuild@0.19.11)(webpack-cli@5.1.4) - webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.1)(webpack@5.90.3) + webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.90.3) /@wyw-in-js/processor-utils@0.5.0: resolution: {integrity: sha512-3sRwuDTMy2GmD+44bhCTcBasCrjBexzYRzhxkmMrX49cpVDmQOH+4O7kX5OMRbmzMXe6Z5MsnxIlDlm3bJlcww==} engines: {node: '>=16.0.0'} dependencies: - '@babel/generator': 7.24.1 + '@babel/generator': 7.24.4 '@wyw-in-js/shared': 0.5.0 transitivePeerDependencies: - supports-color @@ -8568,20 +8609,20 @@ packages: - supports-color dev: false - /@wyw-in-js/transform@0.5.0: + /@wyw-in-js/transform@0.5.0(patch_hash=zicb4vap2prvslgwedcxhpcmvy): resolution: {integrity: sha512-tpa2/FsB30fdXB1E+9MmfxQYbRgLv/+VMKzpBKNraDH39zwnA2eGGAEho5gpqK40cEV7NH6zhVbaBcEnV0HQyw==} engines: {node: '>=16.0.0'} dependencies: - '@babel/core': 7.24.3 - '@babel/generator': 7.24.1 + '@babel/core': 7.24.4 + '@babel/generator': 7.24.4 '@babel/helper-module-imports': 7.24.3 - '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.4) '@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.24.3) + babel-merge: 3.0.0(@babel/core@7.24.4) cosmiconfig: 8.2.0 happy-dom: 12.10.3 source-map: 0.7.4 @@ -8590,6 +8631,7 @@ packages: transitivePeerDependencies: - supports-color dev: false + patched: true /@xtuc/ieee754@1.2.0: resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==} @@ -8983,21 +9025,6 @@ packages: dequal: 2.0.3 dev: true - /arr-diff@4.0.0: - resolution: {integrity: sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==} - engines: {node: '>=0.10.0'} - dev: false - - /arr-flatten@1.1.0: - resolution: {integrity: sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==} - engines: {node: '>=0.10.0'} - dev: false - - /arr-union@3.1.0: - resolution: {integrity: sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==} - engines: {node: '>=0.10.0'} - dev: false - /array-buffer-byte-length@1.0.1: resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==} engines: {node: '>= 0.4'} @@ -9040,11 +9067,6 @@ packages: resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==} engines: {node: '>=8'} - /array-unique@0.3.2: - resolution: {integrity: sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==} - engines: {node: '>=0.10.0'} - dev: false - /array.prototype.filter@1.0.1: resolution: {integrity: sha512-Dk3Ty7N42Odk7PjU/Ci3zT4pLj20YvuVnneG/58ICM6bt4Ij5kZaJTVQ9TSaWaIECX2sFyz4KItkVZqHNnciqw==} engines: {node: '>= 0.4'} @@ -9180,11 +9202,6 @@ packages: /assertion-error@1.1.0: resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==} - /assign-symbols@1.0.0: - resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==} - engines: {node: '>=0.10.0'} - dev: false - /ast-types-flow@0.0.7: resolution: {integrity: sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==} dev: true @@ -9252,12 +9269,6 @@ packages: engines: {node: '>= 4.0.0'} dev: false - /atob@2.1.2: - resolution: {integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==} - engines: {node: '>= 4.5.0'} - hasBin: true - dev: false - /autoprefixer@10.4.19(postcss@8.4.38): resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==} engines: {node: ^10 || ^12 || >=14} @@ -9286,8 +9297,8 @@ packages: dependencies: possible-typed-array-names: 1.0.0 - /aws-sdk@2.1585.0: - resolution: {integrity: sha512-zDJ76hivdnBLH2+hXTO0F5y3Sdx5RRSDCf4EqZILZCUkPLTwaVmKmaU6XO3pyhrMTcWk58m7UBgHFyARE5SCkQ==} + /aws-sdk@2.1599.0: + resolution: {integrity: sha512-jPb1LAN+s1TLTK+VR3TTJLr//sb3AhhT60Bm9jxB5G/fVeeRczXtBtixNpQ00gksQdkstILYLc9S6MuKMsksxA==} engines: {node: '>= 10.0.0'} requiresBuild: true dependencies: @@ -9326,34 +9337,34 @@ packages: resolution: {integrity: sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==} dev: true - /babel-core@7.0.0-bridge.0(@babel/core@7.24.3): + /babel-core@7.0.0-bridge.0(@babel/core@7.24.4): resolution: {integrity: sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 dev: false - /babel-loader@9.1.3(@babel/core@7.24.3)(webpack@5.90.3): + /babel-loader@9.1.3(@babel/core@7.24.4)(webpack@5.90.3): resolution: {integrity: sha512-xG3ST4DglodGf8qSwv0MdeWLhrDsw/32QMdTO5T1ZIp9gQur0HkCyFs7Awskr10JKXFXwpAhiCuYX5oGXnRGbw==} engines: {node: '>= 14.15.0'} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 webpack: '>=5' dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 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.24.3): + /babel-merge@3.0.0(@babel/core@7.24.4): 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 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 deepmerge: 2.2.1 object.omit: 3.0.0 dev: false @@ -9380,7 +9391,7 @@ packages: resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==} engines: {node: '>=10', npm: '>=6'} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 cosmiconfig: 7.0.1 resolve: 1.22.8 @@ -9397,56 +9408,56 @@ packages: /babel-plugin-optimize-clsx@2.6.2: resolution: {integrity: sha512-TxgyjdVb7trTAsg/J5ByqJdbBPTYR8yaWLGQGpSxwygw8IFST5gEc1J9QktCGCHCb+69t04DWg9KOE0y2hN30w==} dependencies: - '@babel/generator': 7.24.1 + '@babel/generator': 7.24.4 '@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.10(@babel/core@7.24.3): + /babel-plugin-polyfill-corejs2@0.4.10(@babel/core@7.24.4): resolution: {integrity: sha512-rpIuu//y5OX6jVU+a5BCn1R5RSZYWAl2Nar76iwaOdycqb6JPxediskWFMMl7stfwNJR4b7eiQvh5fB5TEQJTQ==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/compat-data': 7.24.1 - '@babel/core': 7.24.3 - '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.3) + '@babel/compat-data': 7.24.4 + '@babel/core': 7.24.4 + '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.4) semver: 6.3.1 transitivePeerDependencies: - supports-color - /babel-plugin-polyfill-corejs3@0.10.4(@babel/core@7.24.3): + /babel-plugin-polyfill-corejs3@0.10.4(@babel/core@7.24.4): resolution: {integrity: sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.4) core-js-compat: 3.36.1 transitivePeerDependencies: - supports-color - /babel-plugin-polyfill-regenerator@0.6.1(@babel/core@7.24.3): + /babel-plugin-polyfill-regenerator@0.6.1(@babel/core@7.24.4): resolution: {integrity: sha512-JfTApdE++cgcTWjsiCQlLyFBMbTUft9ja17saCc93lgV33h4tuCVj7tlvu//qpLwaG+3yEz7/KhahGrUMkVq9g==} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 - '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.3) + '@babel/core': 7.24.4 + '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.4) transitivePeerDependencies: - supports-color /babel-plugin-react-remove-properties@0.3.0: resolution: {integrity: sha512-vbxegtXGyVcUkCvayLzftU95vuvpYFV85pRpeMpohMHeEY46Qe0VNWfkVVcCbaZ12CXHzDFOj0esumATcW83ng==} - /babel-plugin-tester@11.0.4(@babel/core@7.24.3): + /babel-plugin-tester@11.0.4(@babel/core@7.24.4): resolution: {integrity: sha512-cqswtpSPo0e++rZB0l/54EG17LL25l9gLgh59yXfnmNxX+2lZTIOpx2zt4YI9QIClVXc8xf63J6yWwKkzy0jNg==} engines: {node: ^14.20.0 || ^16.16.0 || >=18.5.0} peerDependencies: - '@babel/core': ^7.23.9 + '@babel/core': ^7.24.4 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 core-js: 3.32.1 debug: 4.3.4(supports-color@8.1.1) lodash.mergewith: 4.6.2 @@ -9456,10 +9467,10 @@ packages: - supports-color dev: true - /babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.24.3): + /babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.24.4): resolution: {integrity: sha512-g4aaCrDDOsWjbm0PUUeVnkcVd6AKJsVc/MbnPhEotEpkeJQP6b8nzewohQi7+QS8UyPehOhGWn0nOwjvWpmMvQ==} dependencies: - '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.3) + '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.4) transitivePeerDependencies: - '@babel/core' dev: false @@ -9486,19 +9497,6 @@ packages: engines: {node: ^4.5.0 || >= 5.9} dev: true - /base@0.11.2: - resolution: {integrity: sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==} - engines: {node: '>=0.10.0'} - dependencies: - cache-base: 1.0.1 - class-utils: 0.3.6 - component-emitter: 1.3.0 - define-property: 1.0.0 - isobject: 3.0.1 - mixin-deep: 1.3.2 - pascalcase: 0.1.1 - dev: false - /before-after-hook@2.2.2: resolution: {integrity: sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==} dev: true @@ -9593,24 +9591,6 @@ packages: dependencies: balanced-match: 1.0.2 - /braces@2.3.2: - resolution: {integrity: sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==} - engines: {node: '>=0.10.0'} - dependencies: - arr-flatten: 1.1.0 - array-unique: 0.3.2 - extend-shallow: 2.0.1 - fill-range: 4.0.0 - isobject: 3.0.1 - repeat-element: 1.1.4 - snapdragon: 0.8.2 - snapdragon-node: 2.1.1 - split-string: 3.1.0 - to-regex: 3.0.2 - transitivePeerDependencies: - - supports-color - dev: false - /braces@3.0.2: resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==} engines: {node: '>=8'} @@ -9813,21 +9793,6 @@ packages: unique-filename: 3.0.0 dev: true - /cache-base@1.0.1: - resolution: {integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==} - engines: {node: '>=0.10.0'} - dependencies: - collection-visit: 1.0.0 - component-emitter: 1.3.0 - get-value: 2.0.6 - has-value: 1.0.0 - isobject: 3.0.1 - set-value: 2.0.1 - to-object-path: 0.3.0 - union-value: 1.0.1 - unset-value: 1.0.0 - dev: false - /cacheable-lookup@5.0.4: resolution: {integrity: sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==} engines: {node: '>=10.6.0'} @@ -10096,7 +10061,7 @@ packages: engines: {node: '>=12.13.0'} hasBin: true dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 escape-string-regexp: 4.0.0 is-wsl: 2.2.0 lighthouse-logger: 1.4.2 @@ -10111,7 +10076,7 @@ packages: /chromium-edge-launcher@1.0.0: resolution: {integrity: sha512-pgtgjNKZ7i5U++1g1PWv75umkHvhVTDOQIZ+sjeUX9483S7Y6MUvO0lrd7ShGlQlFHMN4SwKTCq/X8hWrbv2KA==} dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 escape-string-regexp: 4.0.0 is-wsl: 2.2.0 lighthouse-logger: 1.4.2 @@ -10129,16 +10094,6 @@ packages: resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==} engines: {node: '>=8'} - /class-utils@0.3.6: - resolution: {integrity: sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==} - engines: {node: '>=0.10.0'} - dependencies: - arr-union: 3.1.0 - define-property: 0.2.5 - isobject: 3.0.1 - static-extend: 0.1.2 - dev: false - /classnames@2.3.2: resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==} dev: false @@ -10153,7 +10108,7 @@ packages: hasBin: true dependencies: archiver: 3.1.1 - aws-sdk: 2.1585.0 + aws-sdk: 2.1599.0 fs-extra: 6.0.1 glob: 7.2.3 gunzip-maybe: 1.4.2 @@ -10283,14 +10238,6 @@ packages: engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} dev: true - /collection-visit@1.0.0: - resolution: {integrity: sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==} - engines: {node: '>=0.10.0'} - dependencies: - map-visit: 1.0.0 - object-visit: 1.0.1 - dev: false - /color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} dependencies: @@ -10405,10 +10352,6 @@ packages: dot-prop: 5.3.0 dev: true - /component-emitter@1.3.0: - resolution: {integrity: sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==} - dev: false - /compress-commons@2.1.1: resolution: {integrity: sha512-eVw6n7CnEMFzc3duyFVrQEuY1BlHR3rYsSztyG32ibGMW722i3C6IizEGMFmfMU+A+fALvBIwxN3czffTcdA+Q==} engines: {node: '>= 6'} @@ -10626,11 +10569,6 @@ packages: resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==} engines: {node: '>= 0.6'} - /copy-descriptor@0.1.1: - resolution: {integrity: sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==} - engines: {node: '>=0.10.0'} - dev: false - /core-js-compat@3.36.1: resolution: {integrity: sha512-Dk997v9ZCt3X/npqzyGdTlq6t7lDBhZwGvV94PKzDArjp7BTRm7WlDAXYd/OWdeFHO8OChQYRJNJvUCqCbrtKA==} dependencies: @@ -10800,7 +10738,7 @@ packages: /css-jss@10.10.0: resolution: {integrity: sha512-YyMIS/LsSKEGXEaVJdjonWe18p4vXLo8CMA4FrW/kcaEyqdIGKCFXao31gbJddXEdIxSXFFURWrenBJPlKTgAA==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 jss: 10.10.0 jss-preset-default: 10.10.0 dev: false @@ -10853,7 +10791,7 @@ packages: /css-vendor@2.0.8: resolution: {integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 is-in-browser: 1.1.3 dev: false @@ -11048,7 +10986,7 @@ packages: resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==} engines: {node: '>=0.11'} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 /date-format@4.0.13: resolution: {integrity: sha512-bnYCwf8Emc3pTD8pXnre+wfnjGtfi5ncMDKy7+cWZXbmRAsdWkOQHrfC1yz/KiwP5thDp2kCHWYWKBX4HP1hoQ==} @@ -11127,6 +11065,7 @@ packages: /decode-uri-component@0.2.2: resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==} engines: {node: '>=0.10'} + dev: true /decompress-response@6.0.0: resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==} @@ -11225,28 +11164,6 @@ packages: has-property-descriptors: 1.0.2 object-keys: 1.1.1 - /define-property@0.2.5: - resolution: {integrity: sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==} - engines: {node: '>=0.10.0'} - dependencies: - is-descriptor: 0.1.6 - dev: false - - /define-property@1.0.0: - resolution: {integrity: sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==} - engines: {node: '>=0.10.0'} - dependencies: - is-descriptor: 1.0.2 - dev: false - - /define-property@2.0.2: - resolution: {integrity: sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==} - engines: {node: '>=0.10.0'} - dependencies: - is-descriptor: 1.0.2 - isobject: 3.0.1 - dev: false - /delay@5.0.0: resolution: {integrity: sha512-ReEBKkIfe4ya47wlPYf/gu5ib6yUG0/Aez0JQZQz94kiWtRQvZIQbTiehsnwHvLSWJnQdhVeqYue7Id1dKr0qw==} engines: {node: '>=10'} @@ -11373,7 +11290,7 @@ packages: /dom-helpers@5.2.1: resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 csstype: 3.1.3 dev: false @@ -11538,7 +11455,7 @@ packages: dependencies: '@types/cookie': 0.4.1 '@types/cors': 2.8.12 - '@types/node': 18.19.26 + '@types/node': 18.19.31 accepts: 1.3.8 base64id: 2.0.0 cookie: 0.4.2 @@ -11592,8 +11509,8 @@ packages: engines: {node: '>=6'} dev: true - /envinfo@7.11.1: - resolution: {integrity: sha512-8PiZgZNIB4q/Lw4AhOvAfB/ityHAd2bli3lESSWmWSzSsl5dKpy5N1d1Rfkd2teq/g9xN90lc6o98DOjMeYHpg==} + /envinfo@7.12.0: + resolution: {integrity: sha512-Iw9rQJBGpJRd3rwXm9ft/JiGoAZmLxxJZELYDQoPRZ4USVhkKtIcNBPw6U+/K2mBpaqM25JSV6Yl4Az9vO2wJg==} engines: {node: '>=4'} hasBin: true @@ -11898,13 +11815,13 @@ packages: dependencies: confusing-browser-globals: 1.0.11 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-import: 2.29.1(@typescript-eslint/parser@6.21.0)(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.57.0): + /eslint-config-airbnb-typescript@17.1.0(@typescript-eslint/eslint-plugin@6.21.0)(@typescript-eslint/parser@6.21.0)(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 @@ -11912,11 +11829,11 @@ 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.57.0)(typescript@5.4.3) - '@typescript-eslint/parser': 6.19.1(eslint@8.57.0)(typescript@5.4.3) + '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.5) + '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5) 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-import: 2.29.1(@typescript-eslint/parser@6.21.0)(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.57.0): @@ -11931,7 +11848,7 @@ packages: dependencies: 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-import: 2.29.1(@typescript-eslint/parser@6.21.0)(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) @@ -11968,7 +11885,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.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) find-root: 1.1.0 hasown: 2.0.2 interpret: 1.4.0 @@ -11982,7 +11899,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.57.0): + /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.21.0)(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: @@ -12003,7 +11920,7 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 6.19.1(eslint@8.57.0)(typescript@5.4.3) + '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5) debug: 3.2.7 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 @@ -12034,7 +11951,7 @@ packages: 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.57.0): + /eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0): resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==} engines: {node: '>=4'} peerDependencies: @@ -12044,7 +11961,7 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 6.19.1(eslint@8.57.0)(typescript@5.4.3) + '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5) array-includes: 3.1.7 array.prototype.findlastindex: 1.2.3 array.prototype.flat: 1.3.2 @@ -12053,7 +11970,7 @@ packages: doctrine: 2.1.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.57.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0)(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 @@ -12075,7 +11992,7 @@ packages: peerDependencies: eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 aria-query: 5.3.0 array-includes: 3.1.7 array.prototype.flatmap: 1.3.2 @@ -12094,8 +12011,8 @@ packages: semver: 6.3.1 dev: true - /eslint-plugin-mocha@10.4.1(eslint@8.57.0): - resolution: {integrity: sha512-G85ALUgKaLzuEuHhoW3HVRgPTmia6njQC3qCG6CEvA8/Ja9PDZnRZOuzekMki+HaViEQXINuYsmhp5WR5/4MfA==} + /eslint-plugin-mocha@10.4.2(eslint@8.57.0): + resolution: {integrity: sha512-cur4dVYnSEWTBwdqIBQFxa/9siAhesu0TX+lbJ4ClE9j0eNMNe6BSx3vkFFNz6tGoveyMyELFXa30f3fvuAVDg==} engines: {node: '>=14.0.0'} peerDependencies: eslint: '>=7.0.0' @@ -12394,21 +12311,6 @@ packages: strip-final-newline: 3.0.0 dev: false - /expand-brackets@2.1.4: - resolution: {integrity: sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==} - engines: {node: '>=0.10.0'} - dependencies: - debug: 2.6.9 - define-property: 0.2.5 - extend-shallow: 2.0.1 - posix-character-classes: 0.1.1 - regex-not: 1.0.2 - snapdragon: 0.8.2 - to-regex: 3.0.2 - transitivePeerDependencies: - - supports-color - dev: false - /expand-template@2.0.3: resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==} engines: {node: '>=6'} @@ -12468,14 +12370,7 @@ packages: engines: {node: '>=0.10.0'} dependencies: is-extendable: 0.1.1 - - /extend-shallow@3.0.2: - resolution: {integrity: sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==} - engines: {node: '>=0.10.0'} - dependencies: - assign-symbols: 1.0.0 - is-extendable: 1.0.1 - dev: false + dev: true /extend@3.0.2: resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==} @@ -12489,22 +12384,6 @@ packages: tmp: 0.0.33 dev: true - /extglob@2.0.4: - resolution: {integrity: sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==} - engines: {node: '>=0.10.0'} - dependencies: - array-unique: 0.3.2 - define-property: 1.0.0 - expand-brackets: 2.1.4 - extend-shallow: 2.0.1 - fragment-cache: 0.2.1 - regex-not: 1.0.2 - snapdragon: 0.8.2 - to-regex: 3.0.2 - transitivePeerDependencies: - - supports-color - dev: false - /extract-comments@1.1.0: resolution: {integrity: sha512-dzbZV2AdSSVW/4E7Ti5hZdHWbA+Z80RJsJhr5uiL10oyjl/gy7/o+HI1HwK4/WSZhlq4SNKU3oUzXlM13Qx02Q==} engines: {node: '>=6'} @@ -12615,16 +12494,6 @@ packages: minimatch: 5.1.0 dev: true - /fill-range@4.0.0: - resolution: {integrity: sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==} - engines: {node: '>=0.10.0'} - dependencies: - extend-shallow: 2.0.1 - is-number: 3.0.0 - repeat-string: 1.6.1 - to-regex-range: 2.1.1 - dev: false - /fill-range@7.0.1: resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==} engines: {node: '>=8'} @@ -12640,7 +12509,7 @@ packages: resolution: {integrity: sha512-TL48Pi1oNHeMOHrKv1bCJUrWZDcD3DIG6AGYVNOnyZPr7Bd/pStN0pL+lfzF5BNoj/FclaoiaLenk4XUIFVYng==} engines: {node: '>=8'} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 dev: false /finalhandler@1.1.2: @@ -12790,11 +12659,6 @@ packages: dependencies: is-callable: 1.2.7 - /for-in@1.0.2: - resolution: {integrity: sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==} - engines: {node: '>=0.10.0'} - dev: false - /foreground-child@2.0.0: resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==} engines: {node: '>=8.0.0'} @@ -12838,13 +12702,6 @@ packages: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} dev: false - /fragment-cache@0.2.1: - resolution: {integrity: sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==} - engines: {node: '>=0.10.0'} - dependencies: - map-cache: 0.2.2 - dev: false - /framesync@6.1.2: resolution: {integrity: sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==} dependencies: @@ -13090,11 +12947,6 @@ packages: resolve-pkg-maps: 1.0.0 dev: true - /get-value@2.0.6: - resolution: {integrity: sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==} - engines: {node: '>=0.10.0'} - dev: false - /git-config-path@1.0.1: resolution: {integrity: sha512-KcJ2dlrrP5DbBnYIZ2nlikALfRhKzNSX0stvv3ImJ+fvC4hXKoV+U+74SV0upg+jlQZbrtQzc0bu6/Zh+7aQbg==} engines: {node: '>=0.10.0'} @@ -13276,18 +13128,6 @@ packages: slash: 4.0.0 dev: true - /globby@14.0.0: - resolution: {integrity: sha512-/1WM/LNHRAOH9lZta77uGbq0dAEQM+XjNesWwhlERDVenqothRbnzTrL3/LrIoEPPjeUHC3vrS6TwoyxeHs7MQ==} - engines: {node: '>=18'} - dependencies: - '@sindresorhus/merge-streams': 1.0.0 - fast-glob: 3.3.2 - ignore: 5.3.1 - path-type: 5.0.0 - slash: 5.1.0 - unicorn-magic: 0.1.0 - dev: true - /globby@14.0.1: resolution: {integrity: sha512-jOMLD2Z7MAhyG8aJpNOpmziMOP4rPLcc95oQPKXBazW82z+CEgPFBQvEpRUa1KeIMUJo4Wsm+q6uzO/Q/4BksQ==} engines: {node: '>=18'} @@ -13480,37 +13320,6 @@ packages: resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==} dev: true - /has-value@0.3.1: - resolution: {integrity: sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==} - engines: {node: '>=0.10.0'} - dependencies: - get-value: 2.0.6 - has-values: 0.1.4 - isobject: 2.1.0 - dev: false - - /has-value@1.0.0: - resolution: {integrity: sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw==} - engines: {node: '>=0.10.0'} - dependencies: - get-value: 2.0.6 - has-values: 1.0.0 - isobject: 3.0.1 - dev: false - - /has-values@0.1.4: - resolution: {integrity: sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ==} - engines: {node: '>=0.10.0'} - dev: false - - /has-values@1.0.0: - resolution: {integrity: sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==} - engines: {node: '>=0.10.0'} - dependencies: - is-number: 3.0.0 - kind-of: 4.0.0 - dev: false - /has@1.0.3: resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==} engines: {node: '>= 0.4.0'} @@ -13840,11 +13649,11 @@ packages: queue: 6.0.2 dev: false - /imask@7.5.0: - resolution: {integrity: sha512-eoTEnw67KAamB1zsiYtU35s0Fj1XYZ8mN2q3ZDGO4ot4FtPmBpw9S6kOTj0kaOILdsEA6ZhNtH2TAMXe/NChmQ==} + /imask@7.6.0: + resolution: {integrity: sha512-6EHsq1q7v5+M4Vas2MGrs2oRpxPRWPwPDiL0HmG1ikBI/0hOwvkxRhVRFQnWIlZcTG7R8iw0az5V+z868qnQ9A==} engines: {npm: '>=4.0.0'} dependencies: - '@babel/runtime-corejs3': 7.24.0 + '@babel/runtime-corejs3': 7.24.4 dev: false /immediate@3.0.6: @@ -13975,22 +13784,6 @@ packages: resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==} engines: {node: '>= 0.10'} - /is-accessor-descriptor@0.1.6: - resolution: {integrity: sha512-e1BM1qnDbMRG3ll2U9dSK0UMHuWOs3pY3AtcFsmvwPtKL3MML/Q86i+GilLfvqEs4GW+ExB91tQ3Ig9noDIZ+A==} - engines: {node: '>=0.10.0'} - deprecated: Please upgrade to v0.1.7 - dependencies: - kind-of: 3.2.2 - dev: false - - /is-accessor-descriptor@1.0.0: - resolution: {integrity: sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==} - engines: {node: '>=0.10.0'} - deprecated: Please upgrade to v1.0.1 - dependencies: - kind-of: 6.0.3 - dev: false - /is-alphabetical@1.0.4: resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==} dev: false @@ -14049,10 +13842,6 @@ packages: call-bind: 1.0.7 has-tostringtag: 1.0.2 - /is-buffer@1.1.6: - resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==} - dev: false - /is-buffer@2.0.5: resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==} engines: {node: '>=4'} @@ -14074,22 +13863,6 @@ packages: dependencies: hasown: 2.0.2 - /is-data-descriptor@0.1.4: - resolution: {integrity: sha512-+w9D5ulSoBNlmw9OHn3U2v51SyoCd0he+bB3xMl62oijhrspxowjU+AIcDY0N3iEJbUEkB15IlMASQsxYigvXg==} - engines: {node: '>=0.10.0'} - deprecated: Please upgrade to v0.1.5 - dependencies: - kind-of: 3.2.2 - dev: false - - /is-data-descriptor@1.0.0: - resolution: {integrity: sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==} - engines: {node: '>=0.10.0'} - deprecated: Please upgrade to v1.0.1 - dependencies: - kind-of: 6.0.3 - dev: false - /is-date-object@1.0.5: resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==} engines: {node: '>= 0.4'} @@ -14104,24 +13877,6 @@ packages: resolution: {integrity: sha512-YDoFpuZWu1VRXlsnlYMzKyVRITXj7Ej/V9gXQ2/pAe7X1J7M/RNOqaIYi6qUn+B7nGyB9pDXrv02dsB58d2ZAQ==} dev: true - /is-descriptor@0.1.6: - resolution: {integrity: sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==} - engines: {node: '>=0.10.0'} - dependencies: - is-accessor-descriptor: 0.1.6 - is-data-descriptor: 0.1.4 - kind-of: 5.1.0 - dev: false - - /is-descriptor@1.0.2: - resolution: {integrity: sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==} - engines: {node: '>=0.10.0'} - dependencies: - is-accessor-descriptor: 1.0.0 - is-data-descriptor: 1.0.0 - kind-of: 6.0.3 - dev: false - /is-directory@0.3.1: resolution: {integrity: sha512-yVChGzahRFvbkscn2MlwGismPO12i9+znNruC5gVEntG3qu0xQMzsGg/JFbrsqDOHtHFPci+V5aP5T9I+yeKqw==} engines: {node: '>=0.10.0'} @@ -14139,6 +13894,7 @@ packages: /is-extendable@0.1.1: resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==} engines: {node: '>=0.10.0'} + dev: true /is-extendable@1.0.1: resolution: {integrity: sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==} @@ -14217,13 +13973,6 @@ packages: dependencies: has-tostringtag: 1.0.2 - /is-number@3.0.0: - resolution: {integrity: sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==} - engines: {node: '>=0.10.0'} - dependencies: - kind-of: 3.2.2 - dev: false - /is-number@7.0.0: resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} engines: {node: '>=0.12.0'} @@ -14256,6 +14005,7 @@ packages: /is-plain-object@5.0.0: resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==} engines: {node: '>=0.10.0'} + dev: true /is-port-reachable@4.0.0: resolution: {integrity: sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==} @@ -14370,6 +14120,7 @@ packages: /is-windows@1.0.2: resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==} engines: {node: '>=0.10.0'} + dev: true /is-wsl@1.1.0: resolution: {integrity: sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==} @@ -14404,13 +14155,6 @@ packages: engines: {node: '>=16'} dev: true - /isobject@2.1.0: - resolution: {integrity: sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==} - engines: {node: '>=0.10.0'} - dependencies: - isarray: 1.0.0 - dev: false - /isobject@3.0.1: resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==} engines: {node: '>=0.10.0'} @@ -14435,7 +14179,7 @@ packages: resolution: {integrity: sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==} engines: {node: '>=8'} dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.0 semver: 6.3.1 @@ -14447,8 +14191,8 @@ packages: resolution: {integrity: sha512-6Lthe1hqXHBNsqvgDzGO6l03XNeu3CrG4RqQ1KM9+l5+jNGpEJfIELx1NS3SEHmJQA8np/u+E4EPRKRiu6m19A==} engines: {node: '>=8'} dependencies: - '@babel/core': 7.24.3 - '@babel/parser': 7.24.1 + '@babel/core': 7.24.4 + '@babel/parser': 7.24.4 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.0 semver: 6.3.1 @@ -14573,7 +14317,7 @@ packages: '@jest/environment': 29.7.0 '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 18.19.26 + '@types/node': 18.19.31 jest-mock: 29.7.0 jest-util: 29.7.0 dev: false @@ -14602,7 +14346,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.6.3 - '@types/node': 18.19.26 + '@types/node': 18.19.31 jest-util: 29.7.0 dev: false @@ -14611,7 +14355,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.6.3 - '@types/node': 18.19.26 + '@types/node': 18.19.31 chalk: 4.1.2 ci-info: 3.9.0 graceful-fs: 4.2.11 @@ -14634,7 +14378,7 @@ packages: resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 merge-stream: 2.0.0 supports-color: 7.2.0 dev: true @@ -14643,7 +14387,7 @@ packages: resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 merge-stream: 2.0.0 supports-color: 8.1.1 @@ -14651,14 +14395,14 @@ packages: resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 jest-util: 29.7.0 merge-stream: 2.0.0 supports-color: 8.1.1 dev: false - /jiti@1.19.1: - resolution: {integrity: sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==} + /jiti@1.21.0: + resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==} hasBin: true dev: true @@ -14706,80 +14450,84 @@ packages: resolution: {integrity: sha512-0wM3YBWtYePOjfyXQH5MWQ8H7sdk5EXSwZvmSLKk2RboVQ2Bu239jycHDz5J/8Blf3K0Qnoy2b6xD+z10MFB+Q==} dev: false - /jscodeshift-add-imports@1.0.10(jscodeshift@0.13.1): + /jscodeshift-add-imports@1.0.10(jscodeshift@0.15.2): resolution: {integrity: sha512-VUe9DJ3zkWIR62zSRQnmsOVeyt77yD8knvYNna/PzRZlF9j799hJw5sqTZu4EX16XLIqS3FxWz3nXuGuiw9iyQ==} peerDependencies: jscodeshift: ^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 dependencies: '@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) + jscodeshift: 0.15.2(@babel/preset-env@7.24.4) + jscodeshift-find-imports: 2.0.4(jscodeshift@0.15.2) transitivePeerDependencies: - supports-color dev: false - /jscodeshift-find-imports@2.0.4(jscodeshift@0.13.1): + /jscodeshift-find-imports@2.0.4(jscodeshift@0.15.2): resolution: {integrity: sha512-HxOzjWDOFFSCf8EKSTQGqCxXeRFqZszOywnZ0HuMB9YPDFHVpxftGRsY+QS+Qq8o2qUojlmNU3JEHts5DWYS1A==} 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.24.3) + jscodeshift: 0.15.2(@babel/preset-env@7.24.4) dev: false - /jscodeshift@0.13.1(@babel/preset-env@7.24.3): - resolution: {integrity: sha512-lGyiEbGOvmMRKgWk4vf+lUrCWO/8YR8sUR3FKF1Cq5fovjZDlIcw3Hu5ppLHAnEXshVffvaM0eyuY/AbOeYpnQ==} + /jscodeshift@0.14.0(@babel/preset-env@7.24.4): + resolution: {integrity: sha512-7eCC1knD7bLUPuSCwXsMZUH51O8jIcoVyKtI6P0XM0IVzlGjckPy3FIwQlorzbN0Sg79oK+RlohN32Mqf/lrYA==} hasBin: true peerDependencies: - '@babel/preset-env': ^7.23.9 - dependencies: - '@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) + '@babel/preset-env': ^7.24.4 + dependencies: + '@babel/core': 7.24.4 + '@babel/parser': 7.24.4 + '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.4) + '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.4) + '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.4) + '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.4) + '@babel/preset-env': 7.24.4(@babel/core@7.24.4) + '@babel/preset-flow': 7.24.1(@babel/core@7.24.4) + '@babel/preset-typescript': 7.24.1(@babel/core@7.24.4) + '@babel/register': 7.23.7(@babel/core@7.24.4) + babel-core: 7.0.0-bridge.0(@babel/core@7.24.4) chalk: 4.1.2 flow-parser: 0.206.0 graceful-fs: 4.2.11 - micromatch: 3.1.10 + micromatch: 4.0.5 neo-async: 2.6.2 node-dir: 0.1.17 - recast: 0.20.5 + recast: 0.21.5 temp: 0.8.4 write-file-atomic: 2.4.3 transitivePeerDependencies: - supports-color dev: false - /jscodeshift@0.14.0(@babel/preset-env@7.24.3): - resolution: {integrity: sha512-7eCC1knD7bLUPuSCwXsMZUH51O8jIcoVyKtI6P0XM0IVzlGjckPy3FIwQlorzbN0Sg79oK+RlohN32Mqf/lrYA==} + /jscodeshift@0.15.2(@babel/preset-env@7.24.4): + resolution: {integrity: sha512-FquR7Okgmc4Sd0aEDwqho3rEiKR3BdvuG9jfdHjLJ6JQoWSMpavug3AoIfnfWhxFlf+5pzQh8qjqz0DWFrNQzA==} hasBin: true peerDependencies: - '@babel/preset-env': ^7.23.9 - dependencies: - '@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) + '@babel/preset-env': ^7.24.4 + peerDependenciesMeta: + '@babel/preset-env': + optional: true + dependencies: + '@babel/core': 7.24.4 + '@babel/parser': 7.24.4 + '@babel/plugin-transform-class-properties': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.4) + '@babel/preset-env': 7.24.4(@babel/core@7.24.4) + '@babel/preset-flow': 7.24.1(@babel/core@7.24.4) + '@babel/preset-typescript': 7.24.1(@babel/core@7.24.4) + '@babel/register': 7.23.7(@babel/core@7.24.4) + babel-core: 7.0.0-bridge.0(@babel/core@7.24.4) chalk: 4.1.2 flow-parser: 0.206.0 graceful-fs: 4.2.11 micromatch: 4.0.5 neo-async: 2.6.2 node-dir: 0.1.17 - recast: 0.21.5 + recast: 0.23.6 temp: 0.8.4 write-file-atomic: 2.4.3 transitivePeerDependencies: @@ -14889,6 +14637,10 @@ packages: resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==} dev: true + /jsonc-parser@3.2.1: + resolution: {integrity: sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==} + dev: true + /jsonfile@4.0.0: resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==} optionalDependencies: @@ -14923,7 +14675,7 @@ packages: /jss-plugin-camel-case@10.10.0: resolution: {integrity: sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 hyphenate-style-name: 1.0.4 jss: 10.10.0 dev: false @@ -14931,7 +14683,7 @@ packages: /jss-plugin-compose@10.10.0: resolution: {integrity: sha512-F5kgtWpI2XfZ3Z8eP78tZEYFdgTIbpA/TMuX3a8vwrNolYtN1N4qJR/Ob0LAsqIwCMLojtxN7c7Oo/+Vz6THow==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 jss: 10.10.0 tiny-warning: 1.0.3 dev: false @@ -14939,21 +14691,21 @@ packages: /jss-plugin-default-unit@10.10.0: resolution: {integrity: sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 jss: 10.10.0 dev: false /jss-plugin-expand@10.10.0: resolution: {integrity: sha512-ymT62W2OyDxBxr7A6JR87vVX9vTq2ep5jZLIdUSusfBIEENLdkkc0lL/Xaq8W9s3opUq7R0sZQpzRWELrfVYzA==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 jss: 10.10.0 dev: false /jss-plugin-extend@10.10.0: resolution: {integrity: sha512-sKYrcMfr4xxigmIwqTjxNcHwXJIfvhvjTNxF+Tbc1NmNdyspGW47Ey6sGH8BcQ4FFQhLXctpWCQSpDwdNmXSwg==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 jss: 10.10.0 tiny-warning: 1.0.3 dev: false @@ -14961,14 +14713,14 @@ packages: /jss-plugin-global@10.10.0: resolution: {integrity: sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 jss: 10.10.0 dev: false /jss-plugin-nested@10.10.0: resolution: {integrity: sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 jss: 10.10.0 tiny-warning: 1.0.3 dev: false @@ -14976,14 +14728,14 @@ packages: /jss-plugin-props-sort@10.10.0: resolution: {integrity: sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 jss: 10.10.0 dev: false /jss-plugin-rule-value-function@10.10.0: resolution: {integrity: sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 jss: 10.10.0 tiny-warning: 1.0.3 dev: false @@ -14991,7 +14743,7 @@ packages: /jss-plugin-rule-value-observable@10.10.0: resolution: {integrity: sha512-ZLMaYrR3QE+vD7nl3oNXuj79VZl9Kp8/u6A1IbTPDcuOu8b56cFdWRZNZ0vNr8jHewooEeq2doy8Oxtymr2ZPA==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 jss: 10.10.0 symbol-observable: 1.2.0 dev: false @@ -14999,7 +14751,7 @@ packages: /jss-plugin-template@10.10.0: resolution: {integrity: sha512-ocXZBIOJOA+jISPdsgkTs8wwpK6UbsvtZK5JI7VUggTD6LWKbtoxUzadd2TpfF+lEtlhUmMsCkTRNkITdPKa6w==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 jss: 10.10.0 tiny-warning: 1.0.3 dev: false @@ -15007,7 +14759,7 @@ packages: /jss-plugin-vendor-prefixer@10.10.0: resolution: {integrity: sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 css-vendor: 2.0.8 jss: 10.10.0 dev: false @@ -15015,7 +14767,7 @@ packages: /jss-preset-default@10.10.0: resolution: {integrity: sha512-GL175Wt2FGhjE+f+Y3aWh+JioL06/QWFgZp53CbNNq6ZkVU0TDplD8Bxm9KnkotAYn3FlplNqoW5CjyLXcoJ7Q==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 jss: 10.10.0 jss-plugin-camel-case: 10.10.0 jss-plugin-compose: 10.10.0 @@ -15043,7 +14795,7 @@ packages: /jss@10.10.0: resolution: {integrity: sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 csstype: 3.1.3 is-in-browser: 1.1.3 tiny-warning: 1.0.3 @@ -15210,25 +14962,6 @@ packages: json-buffer: 3.0.1 dev: true - /kind-of@3.2.2: - resolution: {integrity: sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==} - engines: {node: '>=0.10.0'} - dependencies: - is-buffer: 1.1.6 - dev: false - - /kind-of@4.0.0: - resolution: {integrity: sha512-24XsCxmEbRwEDbz/qz3stgin8TTzZ1ESR56OMCN0ujYg+vRutNSiOj9bHH9u85DKgXguraugV5sFuvbD4FW/hw==} - engines: {node: '>=0.10.0'} - dependencies: - is-buffer: 1.1.6 - dev: false - - /kind-of@5.1.0: - resolution: {integrity: sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==} - engines: {node: '>=0.10.0'} - dev: false - /kind-of@6.0.3: resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} engines: {node: '>=0.10.0'} @@ -15332,7 +15065,7 @@ packages: strong-log-transformer: 2.1.0 tar: 6.1.11 temp-dir: 1.0.0 - typescript: 5.4.3 + typescript: 5.4.5 upath: 2.0.1 uuid: 9.0.1 validate-npm-package-license: 3.0.4 @@ -15423,7 +15156,7 @@ packages: /linkify-it@5.0.0: resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==} dependencies: - uc.micro: 2.0.0 + uc.micro: 2.1.0 dev: true /listenercount@1.0.1: @@ -15814,11 +15547,6 @@ packages: tmpl: 1.0.5 dev: false - /map-cache@0.2.2: - resolution: {integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==} - engines: {node: '>=0.10.0'} - dev: false - /map-obj@1.0.1: resolution: {integrity: sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==} engines: {node: '>=0.10.0'} @@ -15833,15 +15561,8 @@ packages: resolution: {integrity: sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==} dev: true - /map-visit@1.0.0: - resolution: {integrity: sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==} - engines: {node: '>=0.10.0'} - dependencies: - object-visit: 1.0.1 - dev: false - - /markdown-it@14.0.0: - resolution: {integrity: sha512-seFjF0FIcPt4P9U39Bq1JYblX0KZCjDLFFQPHpL5AzHpqPEKtosxmdq/LTVZnjfH7tjt9BxStm+wXcDBNuYmzw==} + /markdown-it@14.1.0: + resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==} hasBin: true dependencies: argparse: 2.0.1 @@ -15849,11 +15570,11 @@ packages: linkify-it: 5.0.0 mdurl: 2.0.0 punycode.js: 2.3.1 - uc.micro: 2.0.0 + uc.micro: 2.1.0 dev: true - /markdown-to-jsx@7.4.5(react@18.2.0): - resolution: {integrity: sha512-c8NB0H/ig+FOWssE9be0PKsYbCDhcWEkicxMnpdfUuHbFljnen4LAdgUShOyR/PgO3/qKvt9cwfQ0U/zQvZ44A==} + /markdown-to-jsx@7.4.7(react@18.2.0): + resolution: {integrity: sha512-0+ls1IQZdU6cwM1yu0ZjjiVWYtkbExSyUIFU2ZeDIFuZM1W42Mh4OlJ4nb4apX4H8smxDHRdFaoIVJGwfv5hkg==} engines: {node: '>= 10'} peerDependencies: react: '>= 0.14.0' @@ -15861,38 +15582,38 @@ packages: react: 18.2.0 dev: false - /markdownlint-cli2-formatter-default@0.0.4(markdownlint-cli2@0.12.1): + /markdownlint-cli2-formatter-default@0.0.4(markdownlint-cli2@0.13.0): resolution: {integrity: sha512-xm2rM0E+sWgjpPn1EesPXx5hIyrN2ddUnUwnbCsD/ONxYtw3PX6LydvdH6dciWAoFDpwzbHM1TO7uHfcMd6IYg==} peerDependencies: markdownlint-cli2: '>=0.0.4' dependencies: - markdownlint-cli2: 0.12.1 + markdownlint-cli2: 0.13.0 dev: true - /markdownlint-cli2@0.12.1: - resolution: {integrity: sha512-RcK+l5FjJEyrU3REhrThiEUXNK89dLYNJCYbvOUKypxqIGfkcgpz8g08EKqhrmUbYfYoLC5nEYQy53NhJSEtfQ==} + /markdownlint-cli2@0.13.0: + resolution: {integrity: sha512-Pg4nF7HlopU97ZXtrcVISWp3bdsuc5M0zXyLp2/sJv2zEMlInrau0ZKK482fQURzVezJzWBpNmu4u6vGAhij+g==} engines: {node: '>=18'} hasBin: true dependencies: - globby: 14.0.0 - jsonc-parser: 3.2.0 - markdownlint: 0.33.0 - markdownlint-cli2-formatter-default: 0.0.4(markdownlint-cli2@0.12.1) + globby: 14.0.1 + js-yaml: 4.1.0 + jsonc-parser: 3.2.1 + markdownlint: 0.34.0 + markdownlint-cli2-formatter-default: 0.0.4(markdownlint-cli2@0.13.0) micromatch: 4.0.5 - yaml: 2.3.4 dev: true - /markdownlint-micromark@0.1.8: - resolution: {integrity: sha512-1ouYkMRo9/6gou9gObuMDnvZM8jC/ly3QCFQyoSPCS2XV1ZClU0xpKbL1Ar3bWWRT1RnBZkWUEiNKrI2CwiBQA==} - engines: {node: '>=16'} + /markdownlint-micromark@0.1.9: + resolution: {integrity: sha512-5hVs/DzAFa8XqYosbEAEg6ok6MF2smDj89ztn9pKkCtdKHVdPQuGMH7frFfYL9mLkvfFe4pTyAMffLbjf3/EyA==} + engines: {node: '>=18'} dev: true - /markdownlint@0.33.0: - resolution: {integrity: sha512-4lbtT14A3m0LPX1WS/3d1m7Blg+ZwiLq36WvjQqFGsX3Gik99NV+VXp/PW3n+Q62xyPdbvGOCfjPqjW+/SKMig==} + /markdownlint@0.34.0: + resolution: {integrity: sha512-qwGyuyKwjkEMOJ10XN6OTKNOVYvOIi35RNvDLNxTof5s8UmyGHlCdpngRHoRGNvQVGuxO3BJ7uNSgdeX166WXw==} engines: {node: '>=18'} dependencies: - markdown-it: 14.0.0 - markdownlint-micromark: 0.1.8 + markdown-it: 14.1.0 + markdownlint-micromark: 0.1.9 dev: true /marked@5.1.2: @@ -15904,21 +15625,20 @@ packages: resolution: {integrity: sha512-q9JtQJKjpsVxCRVgQ+WapguSbKC3SQ5HEzFGPAJMStgh3QjCawp00UKv3MTTAArTmGmmPUvllHZoNbZ3gs0I+Q==} dev: false - /material-ui-popup-state@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): - resolution: {integrity: sha512-gd0DI8skwCSdth/j/yndoIwNkS2eDusosTe5hyPZ3jbrMzDkbQBs+tBbwapQ9hLfgiVLwICd1mwyerUV9Y5Elw==} + /material-ui-popup-state@5.1.0(@mui/material@packages+mui-material+build)(react@18.2.0): + resolution: {integrity: sha512-kG0xGqdPx3WM6AYnq0h7hCb3gk2M1FM/G/NFQN+HahcyABxCx3EFzLj5mdJICu2NYj0etZ2s7VDhAbrAezkxYg==} + engines: {node: '>=16'} peerDependencies: + '@mui/material': ^5.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - '@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) + '@babel/runtime': 7.24.4 + '@mui/material': link:packages/mui-material/build + '@types/prop-types': 15.7.12 + '@types/react': 18.2.55 classnames: 2.3.2 prop-types: 15.8.1 react: 18.2.0 - transitivePeerDependencies: - - '@emotion/react' - - '@emotion/styled' - - '@types/react' - - react-dom dev: false /mathml-tag-names@2.1.3: @@ -16042,7 +15762,7 @@ packages: resolution: {integrity: sha512-b773yA16DsDQiM4OOzCsr1gwEd+iio9au98o3bj7F/bxVyoz1LuYox06BIdsiLL1o4kV5VtzTu3UXSJ2X0ZGXg==} engines: {node: '>=18'} dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 hermes-parser: 0.20.1 nullthrows: 1.1.1 transitivePeerDependencies: @@ -16124,7 +15844,7 @@ packages: resolution: {integrity: sha512-gWqzfm9YQw9I08L23hcLmY7XNx48W0c0vLEkVEF5P7ZNIOSfX9CkEv0JvTTJWshRYkbgIqsdtpMAHq13LJJ6iA==} engines: {node: '>=18'} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 dev: false /metro-source-map@0.80.7: @@ -16162,8 +15882,8 @@ packages: resolution: {integrity: sha512-ENGvQF7wZCtn2rO6jwsYy3XRSPrlm0G/1TgDC8AXdvz0yjfAe1ODSCYWxP8S3JXfjKL5m3b6j9RsV8sQIxsUjQ==} engines: {node: '>=18'} dependencies: - '@babel/core': 7.24.3 - '@babel/generator': 7.24.1 + '@babel/core': 7.24.4 + '@babel/generator': 7.24.4 '@babel/template': 7.24.0 '@babel/traverse': 7.24.1 nullthrows: 1.1.1 @@ -16175,9 +15895,9 @@ packages: resolution: {integrity: sha512-QcgKpx3WZo71jTtXMEeeFuGpA+nG8YuWjxPTIsIYTjgDxcArS8zDDRzS18mmYkP65yyzH4dT94B1FJH9+flRag==} engines: {node: '>=18'} dependencies: - '@babel/core': 7.24.3 - '@babel/generator': 7.24.1 - '@babel/parser': 7.24.1 + '@babel/core': 7.24.4 + '@babel/generator': 7.24.4 + '@babel/parser': 7.24.4 '@babel/types': 7.24.0 metro: 0.80.7 metro-babel-transformer: 0.80.7 @@ -16200,9 +15920,9 @@ packages: hasBin: true dependencies: '@babel/code-frame': 7.24.2 - '@babel/core': 7.24.3 - '@babel/generator': 7.24.1 - '@babel/parser': 7.24.1 + '@babel/core': 7.24.4 + '@babel/generator': 7.24.4 + '@babel/parser': 7.24.4 '@babel/template': 7.24.0 '@babel/traverse': 7.24.1 '@babel/types': 7.24.0 @@ -16258,27 +15978,6 @@ packages: - supports-color dev: false - /micromatch@3.1.10: - resolution: {integrity: sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==} - engines: {node: '>=0.10.0'} - dependencies: - arr-diff: 4.0.0 - array-unique: 0.3.2 - braces: 2.3.2 - define-property: 2.0.2 - extend-shallow: 3.0.2 - extglob: 2.0.4 - fragment-cache: 0.2.1 - kind-of: 6.0.3 - nanomatch: 1.2.13 - object.pick: 1.3.0 - regex-not: 1.0.2 - snapdragon: 0.8.2 - to-regex: 3.0.2 - transitivePeerDependencies: - - supports-color - dev: false - /micromatch@4.0.5: resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==} engines: {node: '>=8.6'} @@ -16479,14 +16178,6 @@ packages: yallist: 4.0.0 dev: true - /mixin-deep@1.3.2: - resolution: {integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==} - engines: {node: '>=0.10.0'} - dependencies: - for-in: 1.0.2 - is-extendable: 1.0.1 - dev: false - /mkdirp-classic@0.5.3: resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==} dev: true @@ -16511,8 +16202,8 @@ packages: ufo: 1.4.0 dev: true - /mocha@10.3.0: - resolution: {integrity: sha512-uF2XJs+7xSLsrmIvn37i/wnc91nw7XjOQB8ccyx5aEgdnohr7n+rEiZP23WkCYHjilR6+EboEnbq/ZQDz4LSbg==} + /mocha@10.4.0: + resolution: {integrity: sha512-eqhGB8JKapEYcC4ytX/xrzKforgEc3j1pGlAXVy3eRwrtAy5/nIfT1SvgGzfN0XZZxeLq0aQWkOUAmqIJiv+bA==} engines: {node: '>= 14.0.0'} hasBin: true dependencies: @@ -16606,25 +16297,6 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true - /nanomatch@1.2.13: - resolution: {integrity: sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==} - engines: {node: '>=0.10.0'} - dependencies: - arr-diff: 4.0.0 - array-unique: 0.3.2 - define-property: 2.0.2 - extend-shallow: 3.0.2 - fragment-cache: 0.2.1 - is-windows: 1.0.2 - kind-of: 6.0.3 - object.pick: 1.3.0 - regex-not: 1.0.2 - snapdragon: 0.8.2 - to-regex: 3.0.2 - transitivePeerDependencies: - - supports-color - dev: false - /napi-build-utils@1.0.2: resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==} dev: true @@ -16653,7 +16325,7 @@ packages: resolution: {integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==} dev: true - /next@13.5.1(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0): + /next@13.5.1(@babel/core@7.24.4)(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 @@ -16675,7 +16347,7 @@ packages: 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.24.3)(babel-plugin-macros@3.1.0)(react@18.2.0) + styled-jsx: 5.1.1(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react@18.2.0) watchpack: 2.4.0 zod: 3.21.4 optionalDependencies: @@ -16692,40 +16364,44 @@ 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==} + /next@14.2.1(@babel/core@7.24.4)(@playwright/test@1.43.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-SF3TJnKdH43PMkCcErLPv+x/DY1YCklslk3ZmwaVoyUfDgHKexuKlf9sEfBQ69w+ue8jQ3msLb+hSj1T19hGag==} engines: {node: '>=18.17.0'} hasBin: true peerDependencies: '@opentelemetry/api': ^1.1.0 + '@playwright/test': ^1.41.2 react: ^18.2.0 react-dom: ^18.2.0 sass: ^1.3.0 peerDependenciesMeta: '@opentelemetry/api': optional: true + '@playwright/test': + optional: true sass: optional: true dependencies: - '@next/env': 14.1.4 - '@swc/helpers': 0.5.2 + '@next/env': 14.2.1 + '@playwright/test': 1.43.1 + '@swc/helpers': 0.5.5 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) + styled-jsx: 5.1.1(@babel/core@7.24.4)(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 + '@next/swc-darwin-arm64': 14.2.1 + '@next/swc-darwin-x64': 14.2.1 + '@next/swc-linux-arm64-gnu': 14.2.1 + '@next/swc-linux-arm64-musl': 14.2.1 + '@next/swc-linux-x64-gnu': 14.2.1 + '@next/swc-linux-x64-musl': 14.2.1 + '@next/swc-win32-arm64-msvc': 14.2.1 + '@next/swc-win32-ia32-msvc': 14.2.1 + '@next/swc-win32-x64-msvc': 14.2.1 transitivePeerDependencies: - '@babel/core' - babel-plugin-macros @@ -17212,15 +16888,6 @@ packages: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} - /object-copy@0.1.0: - resolution: {integrity: sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==} - engines: {node: '>=0.10.0'} - dependencies: - copy-descriptor: 0.1.1 - define-property: 0.2.5 - kind-of: 3.2.2 - dev: false - /object-hash@2.2.0: resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==} engines: {node: '>= 6'} @@ -17247,13 +16914,6 @@ packages: resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==} engines: {node: '>= 0.4'} - /object-visit@1.0.1: - resolution: {integrity: sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==} - engines: {node: '>=0.10.0'} - dependencies: - isobject: 3.0.1 - dev: false - /object.assign@4.1.5: resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==} engines: {node: '>= 0.4'} @@ -17312,13 +16972,6 @@ packages: is-extendable: 1.0.1 dev: false - /object.pick@1.3.0: - resolution: {integrity: sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==} - engines: {node: '>=0.10.0'} - dependencies: - isobject: 3.0.1 - dev: false - /object.values@1.1.7: resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==} engines: {node: '>= 0.4'} @@ -17771,11 +17424,6 @@ packages: tslib: 2.6.2 dev: true - /pascalcase@0.1.1: - resolution: {integrity: sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==} - engines: {node: '>=0.10.0'} - dev: false - /path-exists@3.0.0: resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==} engines: {node: '>=4'} @@ -17940,7 +17588,7 @@ packages: /pkg-types@1.0.3: resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==} dependencies: - jsonc-parser: 3.2.0 + jsonc-parser: 3.2.1 mlly: 1.6.1 pathe: 1.1.2 dev: true @@ -17955,17 +17603,17 @@ packages: resolution: {integrity: sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==} dev: false - /playwright-core@1.42.1: - resolution: {integrity: sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==} + /playwright-core@1.43.1: + resolution: {integrity: sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==} engines: {node: '>=16'} hasBin: true - /playwright@1.42.1: - resolution: {integrity: sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==} + /playwright@1.43.1: + resolution: {integrity: sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==} engines: {node: '>=16'} hasBin: true dependencies: - playwright-core: 1.42.1 + playwright-core: 1.43.1 optionalDependencies: fsevents: 2.3.2 @@ -17975,11 +17623,6 @@ packages: semver-compare: 1.0.0 dev: false - /posix-character-classes@0.1.1: - resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==} - engines: {node: '>=0.10.0'} - dev: false - /possible-typed-array-names@1.0.0: resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==} engines: {node: '>= 0.4'} @@ -18119,7 +17762,7 @@ packages: postcss: ^8.4.21 dependencies: postcss: 8.4.38 - typescript: 5.4.3 + typescript: 5.4.5 dev: true /postcss-value-parser@4.2.0: @@ -18563,9 +18206,9 @@ packages: engines: {node: '>=8.10.0'} hasBin: true dependencies: - '@babel/core': 7.24.3 - '@babel/generator': 7.24.1 - '@babel/runtime': 7.24.1 + '@babel/core': 7.24.4 + '@babel/generator': 7.24.4 + '@babel/runtime': 7.24.4 ast-types: 0.14.2 commander: 2.20.3 doctrine: 3.0.0 @@ -18603,7 +18246,7 @@ packages: peerDependencies: react: '>=16.13.1' dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 react: 18.2.0 dev: false @@ -18612,7 +18255,7 @@ packages: peerDependencies: react: ^16.3.0 dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 prop-types: 15.8.1 react: 18.2.0 warning: 4.0.3 @@ -18628,24 +18271,24 @@ packages: final-form: ^4.20.4 react: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 final-form: 4.20.10 react: 18.2.0 dev: false - /react-imask@7.5.0(react@18.2.0): - resolution: {integrity: sha512-yWExhHphDmNaHvmOsYR+5QcludeBdYk6bXyo8kouIJFAub5sF+O0kLPVupg2yhd7EfTqjLswFZ/tqY1AhKnd9Q==} + /react-imask@7.6.0(react@18.2.0): + resolution: {integrity: sha512-SilPct67Xw4TN+dqn3SM4BVpy+FwNSeT0wblA/DXQ3El2KPBEWwrn4x3gQ39ZohFAphp7yG7w6gSKq5SeR/6Kg==} engines: {npm: '>=4.0.0'} peerDependencies: react: '>=0.14.0' dependencies: - imask: 7.5.0 + imask: 7.6.0 prop-types: 15.8.1 react: 18.2.0 dev: false - /react-intersection-observer@9.8.1(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-QzOFdROX8D8MH3wE3OVKH0f3mLjKTtEN1VX/rkNuECCff+aKky0pIjulDhr3Ewqj5el/L+MhBkM3ef0Tbt+qUQ==} + /react-intersection-observer@9.8.2(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-901naEiiZmse3p+AmtbQ3NL9xx+gQ8TXLiGDc+8GiE3JKJkNV3vP737aGuWTAXBA+1QqxPrDDE+fIEgYpGDlrQ==} peerDependencies: 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 @@ -18671,7 +18314,7 @@ packages: peerDependencies: react: '>=16.8.6' dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@emotion/is-prop-valid': 0.7.3 css-jss: 10.10.0 hoist-non-react-statics: 3.3.2 @@ -18701,7 +18344,7 @@ packages: scheduler: 0.23.0 dev: false - /react-native@0.73.6(@babel/core@7.24.3)(@babel/preset-env@7.24.3)(react@18.2.0): + /react-native@0.73.6(@babel/core@7.24.4)(@babel/preset-env@7.24.4)(react@18.2.0): resolution: {integrity: sha512-oqmZe8D2/VolIzSPZw+oUd6j/bEmeRHwsLn1xLA5wllEYsZ5zNuMsDus235ONOnCRwexqof/J3aztyQswSmiaA==} engines: {node: '>=18'} hasBin: true @@ -18713,8 +18356,8 @@ packages: '@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.24.3) - '@react-native/community-cli-plugin': 0.73.17(@babel/core@7.24.3)(@babel/preset-env@7.24.3) + '@react-native/codegen': 0.73.3(@babel/preset-env@7.24.4) + '@react-native/community-cli-plugin': 0.73.17(@babel/core@7.24.4)(@babel/preset-env@7.24.4) '@react-native/gradle-plugin': 0.73.4 '@react-native/js-polyfills': 0.73.1 '@react-native/normalize-colors': 0.73.2 @@ -18756,8 +18399,8 @@ packages: - utf-8-validate dev: false - /react-number-format@5.3.3(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-maGHWmOvwYzyeRIpL0YC6drWqYaX6iFqjisdJXpZ+HzEtSEJsL6nqw4azTpF5Sm6SAvwUeAr7JY924Ebqq8EdA==} + /react-number-format@5.3.4(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-2hHN5mbLuCDUx19bv0Q8wet67QqYK6xmtLQeY5xx+h7UXiMmRtaCwqko4mMPoKXLc6xAzwRrutg8XbTRlsfjRg==} peerDependencies: react: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 react-dom: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 @@ -18809,7 +18452,7 @@ packages: redux: optional: true dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 '@types/hoist-non-react-statics': 3.3.5 '@types/react': 18.2.55 '@types/use-sync-external-store': 0.0.3 @@ -18825,25 +18468,25 @@ packages: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} engines: {node: '>=0.10.0'} - /react-router-dom@6.22.1(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-iwMyyyrbL7zkKY7MRjOVRy+TMnS/OPusaFVxM2P11x9dzSzGmLsebkCvYirGq0DWB9K9hOspHYYtDz33gE5Duw==} + /react-router-dom@6.22.3(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' react-dom: '>=16.8' dependencies: - '@remix-run/router': 1.15.1 + '@remix-run/router': 1.15.3 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - react-router: 6.22.1(react@18.2.0) + react-router: 6.22.3(react@18.2.0) - /react-router@6.22.1(react@18.2.0): - resolution: {integrity: sha512-0pdoRGwLtemnJqn1K0XHUbnKiX0S4X8CgvVVmHGOWmofESj31msHo/1YiqcJWK7Wxfq2a4uvvtS01KAQyWK/CQ==} + /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.1 + '@remix-run/router': 1.15.3 react: 18.2.0 /react-runner@1.0.3(react-dom@18.2.0)(react@18.2.0): @@ -18904,7 +18547,7 @@ packages: resolution: {integrity: sha512-0W/e9uPweNEOSPjmYtuKSC/SvKKg1sfo+WtPdnxeLF3t2L82h7jjszuOHz9C23fzkvLfdgkaOmcbAxE9w2GEjA==} engines: {node: '>=6.0.0'} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 warning: 4.0.3 dev: false @@ -18912,7 +18555,7 @@ packages: resolution: {integrity: sha512-W+fXBOsDqgFK1/g7MzRMVcDurp3LqO3ksC8UgInh2P/tKgb5DusuuB1geKHFc6o1wKl+4oyER4Zh3Lxmr8xbXA==} engines: {node: '>=6.0.0'} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 keycode: 2.2.1 prop-types: 15.8.1 react-event-listener: 0.6.6(react@18.2.0) @@ -18928,7 +18571,7 @@ packages: peerDependencies: react: ^15.3.0 || ^16.0.0 || ^17.0.0 dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 prop-types: 15.8.1 react: 18.2.0 react-swipeable-views-core: 0.14.0 @@ -18952,7 +18595,7 @@ packages: react: '>=16.6.0' react-dom: '>=16.6.0' dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 dom-helpers: 5.2.1 loose-envify: 1.4.0 prop-types: 15.8.1 @@ -18971,8 +18614,8 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /react-virtuoso@4.7.2(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-xF4es1ajK36Hs9MciaiGA9l16tV2bpkpgxM9JVKh0rJSn6uhdAUrxSQ6FttQOOPAGt4GRG2A4gdjlo18JWhyRw==} + /react-virtuoso@4.7.8(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-P0BHOsLrmfnXv1bY9Nja07nvFciRGNgM7lTRHMcVDteTDb9tLtHzajBapKGUZ5zdyUOEVWvuW6ufQxzdGN2AKw==} engines: {node: '>=10'} peerDependencies: react: '>=16 || >=17 || >= 18' @@ -18989,7 +18632,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.24.1 + '@babel/runtime': 7.24.4 memoize-one: 5.2.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) @@ -19166,6 +18809,7 @@ packages: esprima: 4.0.1 source-map: 0.6.1 tslib: 2.6.2 + dev: true /recast@0.21.5: resolution: {integrity: sha512-hjMmLaUXAm1hIuTqOdeYObMslq/q+Xff6QE3Y2P+uoHAg2nmVlLBps2hzh1UJDdMtDTMXOFewK6ky51JQIeECg==} @@ -19220,7 +18864,7 @@ packages: /redux@4.2.1: resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 dev: false /reflect.getprototypeof@1.0.4: @@ -19256,15 +18900,7 @@ packages: /regenerator-transform@0.15.2: resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==} dependencies: - '@babel/runtime': 7.24.1 - - /regex-not@1.0.2: - resolution: {integrity: sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==} - engines: {node: '>=0.10.0'} - dependencies: - extend-shallow: 3.0.2 - safe-regex: 1.1.0 - dev: false + '@babel/runtime': 7.24.4 /regexp.prototype.flags@1.5.2: resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==} @@ -19356,11 +18992,6 @@ packages: strip-ansi: 6.0.1 dev: true - /repeat-element@1.1.4: - resolution: {integrity: sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==} - engines: {node: '>=0.10.0'} - dev: false - /repeat-string@1.6.1: resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==} engines: {node: '>=0.10'} @@ -19415,11 +19046,6 @@ packages: resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==} dev: true - /resolve-url@0.2.1: - resolution: {integrity: sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==} - deprecated: https://github.com/lydell/resolve-url#deprecated - dev: false - /resolve@1.22.8: resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==} hasBin: true @@ -19513,14 +19139,14 @@ packages: dependencies: glob: 10.3.10 - /rollup-plugin-babel@4.4.0(@babel/core@7.24.3)(rollup@3.29.4): + /rollup-plugin-babel@4.4.0(@babel/core@7.24.4)(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 + '@babel/core': ^7.24.4 rollup: '>=0.60.0 <3' dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-module-imports': 7.24.3 rollup: 3.29.4 rollup-pluginutils: 2.8.2 @@ -19628,7 +19254,7 @@ packages: /rtl-css-js@1.16.0: resolution: {integrity: sha512-Oc7PnzwIEU4M0K1J4h/7qUUaljXhQ0kCObRsZjxs2HjkpKsnoTMvSmvJ4sqgJZd0zBoEfAyTdnK/jMIYvrjySQ==} dependencies: - '@babel/runtime': 7.24.1 + '@babel/runtime': 7.24.4 dev: false /run-async@2.4.1: @@ -19670,12 +19296,6 @@ packages: es-errors: 1.3.0 is-regex: 1.1.4 - /safe-regex@1.1.0: - resolution: {integrity: sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==} - dependencies: - ret: 0.1.15 - dev: false - /safer-buffer@2.1.2: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} @@ -19877,16 +19497,6 @@ packages: functions-have-names: 1.2.3 has-property-descriptors: 1.0.2 - /set-value@2.0.1: - resolution: {integrity: sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==} - engines: {node: '>=0.10.0'} - dependencies: - extend-shallow: 2.0.1 - is-extendable: 0.1.1 - is-plain-object: 2.0.4 - split-string: 3.1.0 - dev: false - /setimmediate@1.0.5: resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==} dev: false @@ -20078,38 +19688,6 @@ packages: engines: {node: '>= 6.0.0', npm: '>= 3.0.0'} dev: true - /snapdragon-node@2.1.1: - resolution: {integrity: sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==} - engines: {node: '>=0.10.0'} - dependencies: - define-property: 1.0.0 - isobject: 3.0.1 - snapdragon-util: 3.0.1 - dev: false - - /snapdragon-util@3.0.1: - resolution: {integrity: sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==} - engines: {node: '>=0.10.0'} - dependencies: - kind-of: 3.2.2 - dev: false - - /snapdragon@0.8.2: - resolution: {integrity: sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==} - engines: {node: '>=0.10.0'} - dependencies: - base: 0.11.2 - debug: 2.6.9 - define-property: 0.2.5 - extend-shallow: 2.0.1 - map-cache: 0.2.2 - source-map: 0.5.7 - source-map-resolve: 0.5.3 - use: 3.1.1 - transitivePeerDependencies: - - supports-color - dev: false - /socket.io-adapter@2.5.4: resolution: {integrity: sha512-wDNHGXGewWAjQPt3pyeYBtpWSq9cLE5UW1ZUPL/2eGK9jtse/FpXib7epSTsz0Q0m+6sg6Y4KtcFTlah1bdOVg==} dependencies: @@ -20189,28 +19767,12 @@ packages: resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} engines: {node: '>=0.10.0'} - /source-map-resolve@0.5.3: - resolution: {integrity: sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==} - deprecated: See https://github.com/lydell/source-map-resolve#deprecated - dependencies: - atob: 2.1.2 - decode-uri-component: 0.2.2 - resolve-url: 0.2.1 - source-map-url: 0.4.1 - urix: 0.1.0 - dev: false - /source-map-support@0.5.21: resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==} dependencies: buffer-from: 1.1.2 source-map: 0.6.1 - /source-map-url@0.4.1: - resolution: {integrity: sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==} - deprecated: See https://github.com/lydell/source-map-url#deprecated - dev: false - /source-map@0.5.7: resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==} engines: {node: '>=0.10.0'} @@ -20279,13 +19841,6 @@ packages: engines: {node: '>=6'} dev: true - /split-string@3.1.0: - resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==} - engines: {node: '>=0.10.0'} - dependencies: - extend-shallow: 3.0.2 - dev: false - /split2@3.2.2: resolution: {integrity: sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==} dependencies: @@ -20339,14 +19894,6 @@ packages: type-fest: 0.7.1 dev: false - /static-extend@0.1.2: - resolution: {integrity: sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==} - engines: {node: '>=0.10.0'} - dependencies: - define-property: 0.2.5 - object-copy: 0.1.0 - dev: false - /statuses@1.5.0: resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==} engines: {node: '>= 0.6'} @@ -20565,7 +20112,7 @@ packages: stylis: 4.3.1 tslib: 2.5.0 - /styled-jsx@5.1.1(@babel/core@7.24.3)(babel-plugin-macros@3.1.0)(react@18.2.0): + /styled-jsx@5.1.1(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react@18.2.0): resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==} engines: {node: '>= 12.0.0'} peerDependencies: @@ -20578,7 +20125,7 @@ packages: babel-plugin-macros: optional: true dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 babel-plugin-macros: 3.1.0 client-only: 0.0.1 react: 18.2.0 @@ -20623,7 +20170,7 @@ packages: /stylelint-processor-styled-components@1.10.0: resolution: {integrity: sha512-g4HpN9rm0JD0LoHuIOcd/FIjTZCJ0ErQ+dC3VTxp+dSvnkV+MklKCCmCQEdz5K5WxF4vPuzfVgdbSDuPYGZhoA==} dependencies: - '@babel/parser': 7.24.1 + '@babel/parser': 7.24.4 '@babel/traverse': 7.24.1 micromatch: 4.0.5 postcss: 7.0.39 @@ -20813,8 +20360,8 @@ packages: strip-ansi: 6.0.1 dev: true - /tailwindcss@3.4.1: - resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==} + /tailwindcss@3.4.3: + resolution: {integrity: sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==} engines: {node: '>=14.0.0'} hasBin: true dependencies: @@ -20826,7 +20373,7 @@ packages: fast-glob: 3.3.2 glob-parent: 6.0.2 is-glob: 4.0.3 - jiti: 1.19.1 + jiti: 1.21.0 lilconfig: 2.1.0 micromatch: 4.0.5 normalize-path: 3.0.0 @@ -21071,37 +20618,12 @@ packages: resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} engines: {node: '>=4'} - /to-object-path@0.3.0: - resolution: {integrity: sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==} - engines: {node: '>=0.10.0'} - dependencies: - kind-of: 3.2.2 - dev: false - - /to-regex-range@2.1.1: - resolution: {integrity: sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==} - engines: {node: '>=0.10.0'} - dependencies: - is-number: 3.0.0 - repeat-string: 1.6.1 - dev: false - /to-regex-range@5.0.1: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} engines: {node: '>=8.0'} dependencies: is-number: 7.0.0 - /to-regex@3.0.2: - resolution: {integrity: sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==} - engines: {node: '>=0.10.0'} - dependencies: - define-property: 2.0.2 - extend-shallow: 3.0.2 - regex-not: 1.0.2 - safe-regex: 1.1.0 - dev: false - /toidentifier@1.0.1: resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==} engines: {node: '>=0.6'} @@ -21159,13 +20681,13 @@ packages: resolution: {integrity: sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==} dev: false - /ts-api-utils@1.0.1(typescript@5.4.3): + /ts-api-utils@1.0.1(typescript@5.4.5): resolution: {integrity: sha512-lC/RGlPmwdrIBFTX59wwNzqh7aR2otPNPR/5brHZm/XKFYKsfqxihXUe9pU3JI+3vGkl+vyCoNNnPhJn3aLK1A==} engines: {node: '>=16.13.0'} peerDependencies: typescript: '>=4.2.0' dependencies: - typescript: 5.4.3 + typescript: 5.4.5 dev: true /ts-interface-checker@0.1.13: @@ -21211,7 +20733,7 @@ packages: engines: {node: '>=0.6.x'} dev: false - /tsup@8.0.2(postcss@8.4.38)(typescript@5.4.3): + /tsup@8.0.2(postcss@8.4.38)(typescript@5.4.5): resolution: {integrity: sha512-NY8xtQXdH7hDUAZwcQdY/Vzlw9johQsaqf7iwZ6g1DOUlFYQ5/AtVAjTvihhEyeRlGo4dLRVHtrRaL35M1daqQ==} engines: {node: '>=18'} hasBin: true @@ -21245,14 +20767,14 @@ packages: source-map: 0.8.0-beta.0 sucrase: 3.34.0 tree-kill: 1.2.2 - typescript: 5.4.3 + typescript: 5.4.5 transitivePeerDependencies: - supports-color - ts-node dev: true - /tsx@4.7.1: - resolution: {integrity: sha512-8d6VuibXHtlN5E3zFkgY8u4DX7Y3Z27zvvPKVmLon/D4AjuKzarkUBTLDBgj9iTQ0hg5xM7c/mYiRVM+HETf0g==} + /tsx@4.7.2: + resolution: {integrity: sha512-BCNd4kz6fz12fyrgCTEdZHGJ9fWTGeUzXmQysh0RVocDY3h4frk05ZNCXSy4kIenF7y/QnrdiVpTsyNRn6vlAw==} engines: {node: '>=18.0.0'} hasBin: true dependencies: @@ -21403,8 +20925,8 @@ packages: resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==} dev: true - /typescript@5.4.3: - resolution: {integrity: sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==} + /typescript@5.4.5: + resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==} engines: {node: '>=14.17'} hasBin: true @@ -21412,8 +20934,8 @@ packages: resolution: {integrity: sha512-s8ax/CeZdK9R/56Sui0WM6y9OFREJarMRHqLB2EwkovemBxNQ+Bqu8GAsUnVcXKgphb++ghr/B2BZx4mahujPw==} dev: true - /uc.micro@2.0.0: - resolution: {integrity: sha512-DffL94LsNOccVn4hyfRe5rdKa273swqeA5DJpMOeFmEn1wCDc7nAbbB0gXlgBCL7TNzeTv6G7XVWzan7iJtfig==} + /uc.micro@2.1.0: + resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==} dev: true /ufo@1.4.0: @@ -21475,16 +20997,6 @@ packages: vfile: 4.2.1 dev: false - /union-value@1.0.1: - resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==} - engines: {node: '>=0.10.0'} - dependencies: - arr-union: 3.1.0 - get-value: 2.0.6 - is-extendable: 0.1.1 - set-value: 2.0.1 - dev: false - /unique-filename@3.0.0: resolution: {integrity: sha512-afXhuC55wkAmZ0P18QsVE6kp8JaxrEokN2HGIoIVv2ijHQd419H0+6EigAFcIzXeMIkcIkNBpB3L/DXB3cTS/g==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -21554,14 +21066,6 @@ packages: webpack-virtual-modules: 0.6.1 dev: false - /unset-value@1.0.0: - resolution: {integrity: sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==} - engines: {node: '>=0.10.0'} - dependencies: - has-value: 0.3.1 - isobject: 3.0.1 - dev: false - /unzipper@0.10.11: resolution: {integrity: sha512-+BrAq2oFqWod5IESRjL3S8baohbevGcVA+teAIOYWM3pDVdseogqbzhhvvmiyQrUNKFUnDMtELW3X8ykbyDCJw==} dependencies: @@ -21604,11 +21108,6 @@ packages: dependencies: punycode: 2.3.1 - /urix@0.1.0: - resolution: {integrity: sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==} - deprecated: Please see https://github.com/lydell/urix#deprecated - dev: false - /url-parse@1.5.10: resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==} dependencies: @@ -21656,11 +21155,6 @@ packages: react: 18.2.0 dev: false - /use@3.1.1: - resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==} - engines: {node: '>=0.10.0'} - dev: false - /util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} @@ -21751,8 +21245,8 @@ packages: vfile-message: 2.0.4 dev: false - /vite-plugin-pages@0.32.0(vite@5.2.2): - resolution: {integrity: sha512-OxS3n0zUo5wsfgNCAuw2FiG/KD1ipgQV+2Flst4RyeI2iPv+m0YueVq+nx41k5NOWJj/zhqEas6I0b7HXveXjA==} + /vite-plugin-pages@0.32.1(vite@5.2.8): + resolution: {integrity: sha512-4oPlIbb+J+zpJGfT2xI/27xqY+qTkRc3MBgWKfbW6IWM3CTcSyybuL9kRMCFRdBHfmgkF28qDs7fqVf/HjH1Xw==} peerDependencies: '@vue/compiler-sfc': ^2.7.0 || ^3.0.0 vite: ^2.0.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0 @@ -21768,18 +21262,18 @@ packages: json5: 2.2.3 local-pkg: 0.5.0 picocolors: 1.0.0 - vite: 5.2.2(@types/node@18.19.26) + vite: 5.2.8(@types/node@18.19.31) yaml: 2.4.1 transitivePeerDependencies: - supports-color dev: true - /vite@5.2.2(@types/node@18.19.26): - resolution: {integrity: sha512-FWZbz0oSdLq5snUI0b6sULbz58iXFXdvkZfZWR/F0ZJuKTSPO7v72QPXt6KqYeMFb0yytNp6kZosxJ96Nr/wDQ==} + /vite@5.2.8(@types/node@18.19.31): + resolution: {integrity: sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: - '@types/node': ^18.19.25 + '@types/node': ^18.19.31 less: '*' lightningcss: ^1.21.0 sass: '*' @@ -21802,7 +21296,7 @@ packages: terser: optional: true dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.31 esbuild: 0.20.2 postcss: 8.4.38 rollup: 4.13.0 @@ -21870,8 +21364,8 @@ packages: engines: {node: '>=12'} dev: false - /webpack-bundle-analyzer@4.10.1: - resolution: {integrity: sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==} + /webpack-bundle-analyzer@4.10.2: + resolution: {integrity: sha512-vJptkMm9pk5si4Bv922ZbKLV8UTT4zib4FPgXMhgzUny0bfDDkLXAVQs3ly3fS4/TN9ROFtb0NFrm04UXFE/Vw==} engines: {node: '>= 10.13.0'} hasBin: true dependencies: @@ -21883,7 +21377,6 @@ packages: escape-string-regexp: 4.0.0 gzip-size: 6.0.0 html-escaper: 2.0.2 - is-plain-object: 5.0.0 opener: 1.5.2 picocolors: 1.0.0 sirv: 2.0.3 @@ -21892,7 +21385,7 @@ packages: - bufferutil - utf-8-validate - /webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.1)(webpack@5.90.3): + /webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.90.3): resolution: {integrity: sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==} engines: {node: '>=14.15.0'} hasBin: true @@ -21916,13 +21409,13 @@ packages: colorette: 2.0.20 commander: 10.0.1 cross-spawn: 7.0.3 - envinfo: 7.11.1 + envinfo: 7.12.0 fastest-levenshtein: 1.0.16 import-local: 3.1.0 interpret: 3.1.1 rechoir: 0.8.0 webpack: 5.90.3(esbuild@0.19.11)(webpack-cli@5.1.4) - webpack-bundle-analyzer: 4.10.1 + webpack-bundle-analyzer: 4.10.2 webpack-merge: 5.9.0 /webpack-merge@4.2.2: @@ -21979,7 +21472,7 @@ packages: tapable: 2.2.1 terser-webpack-plugin: 5.3.10(esbuild@0.19.11)(webpack@5.90.3) watchpack: 2.4.0 - webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.1)(webpack@5.90.3) + webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.90.3) webpack-sources: 3.2.3 transitivePeerDependencies: - '@swc/core' @@ -22325,11 +21818,6 @@ packages: resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==} engines: {node: '>= 6'} - /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'} @@ -22460,20 +21948,20 @@ packages: peerDependencies: react: ^17.0.0 || ^18.0.0 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.4 '@babel/helper-module-imports': 7.24.3 '@babel/helper-plugin-utils': 7.24.0 - '@babel/parser': 7.24.1 + '@babel/parser': 7.24.4 '@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) + '@emotion/serialize': 1.1.4 + '@emotion/styled': 11.11.5(@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 + '@wyw-in-js/transform': 0.5.0(patch_hash=zicb4vap2prvslgwedcxhpcmvy) clsx: 2.1.0 cssesc: 3.0.0 csstype: 3.1.3 diff --git a/scripts/pigmentcss-render-mui-demos.mjs b/scripts/pigmentcss-render-mui-demos.mjs index 0a982601803a37..e40244f0588b46 100644 --- a/scripts/pigmentcss-render-mui-demos.mjs +++ b/scripts/pigmentcss-render-mui-demos.mjs @@ -2,20 +2,14 @@ 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()); -function toPascalCase(string) { - if (typeof string !== 'string') { - throw new Error('`toPascalCase(string)` expects a string argument.'); - } - - return capitalize(string).replace(/-([a-z])/g, (g) => g[1].toUpperCase()); + return result.charAt(0).toUpperCase() + result.slice(1); } function titleCase(str) { @@ -65,7 +59,7 @@ async function run() { return `import ${componentName} from '../../../../../../docs/data/material/components/${dataFolderName}/${componentName}';`; }); - const functionName = toPascalCase(dataFolderName); + const functionName = pascalCase(dataFolderName); const nextFileContent = `'use client'; import * as React from 'react'; @@ -106,7 +100,7 @@ ${viteImports.join('\n')} export default function ${functionName}() { return ( <MaterialUILayout> - <h1>${capitalize(dataFolderName)}</h1> + <h1>${functionName}</h1> ${renders.join('\n')} </MaterialUILayout> ); diff --git a/test/bundling/fixtures/create-react-app/package.json b/test/bundling/fixtures/create-react-app/package.json index c5cfabb1f6c3ae..5021833943974f 100644 --- a/test/bundling/fixtures/create-react-app/package.json +++ b/test/bundling/fixtures/create-react-app/package.json @@ -25,7 +25,7 @@ "devDependencies": { "concurrently": "7.4.0", "cross-env": "7.0.3", - "playwright": "1.42.1", + "playwright": "1.43.1", "serve": "14.0.1" }, "browserslist": { diff --git a/test/bundling/fixtures/esbuild/package.json b/test/bundling/fixtures/esbuild/package.json index b4d19f0ee05829..b81d38d72b3d52 100644 --- a/test/bundling/fixtures/esbuild/package.json +++ b/test/bundling/fixtures/esbuild/package.json @@ -25,7 +25,7 @@ }, "devDependencies": { "concurrently": "7.4.0", - "playwright": "1.42.1", + "playwright": "1.43.1", "serve": "14.0.1" } } diff --git a/test/bundling/fixtures/gatsby/package.json b/test/bundling/fixtures/gatsby/package.json index 712e24e04d31d7..b62769250c79ae 100644 --- a/test/bundling/fixtures/gatsby/package.json +++ b/test/bundling/fixtures/gatsby/package.json @@ -23,6 +23,6 @@ }, "devDependencies": { "concurrently": "7.4.0", - "playwright": "1.42.1" + "playwright": "1.43.1" } } diff --git a/test/bundling/fixtures/next-webpack4/package.json b/test/bundling/fixtures/next-webpack4/package.json index f6d4ab868517b3..01ceda7fb899d4 100644 --- a/test/bundling/fixtures/next-webpack4/package.json +++ b/test/bundling/fixtures/next-webpack4/package.json @@ -23,6 +23,6 @@ }, "devDependencies": { "concurrently": "7.4.0", - "playwright": "1.42.1" + "playwright": "1.43.1" } } diff --git a/test/bundling/fixtures/next-webpack5/package.json b/test/bundling/fixtures/next-webpack5/package.json index 65f197ec50f422..04dc0c0ba911ca 100644 --- a/test/bundling/fixtures/next-webpack5/package.json +++ b/test/bundling/fixtures/next-webpack5/package.json @@ -23,6 +23,6 @@ }, "devDependencies": { "concurrently": "7.4.0", - "playwright": "1.42.1" + "playwright": "1.43.1" } } diff --git a/test/bundling/fixtures/snowpack/package.json b/test/bundling/fixtures/snowpack/package.json index 697bea33ec61a5..0b03041995afd7 100644 --- a/test/bundling/fixtures/snowpack/package.json +++ b/test/bundling/fixtures/snowpack/package.json @@ -24,7 +24,7 @@ }, "devDependencies": { "concurrently": "7.4.0", - "playwright": "1.42.1", + "playwright": "1.43.1", "serve": "14.0.1" } } diff --git a/test/bundling/fixtures/vite/package.json b/test/bundling/fixtures/vite/package.json index 40b4108a0151b6..ad3134dab746fe 100644 --- a/test/bundling/fixtures/vite/package.json +++ b/test/bundling/fixtures/vite/package.json @@ -20,11 +20,11 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-is": "18.2.0", - "vite": "3.2.8" + "vite": "3.2.10" }, "devDependencies": { "concurrently": "7.4.0", - "playwright": "1.42.1", + "playwright": "1.43.1", "serve": "14.0.1" } } diff --git a/test/package.json b/test/package.json index 95c44493b32902..125fe85ee08654 100644 --- a/test/package.json +++ b/test/package.json @@ -6,7 +6,7 @@ "typescript": "tsc -p tsconfig.json" }, "devDependencies": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.24.4", "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.4", "@mui-internal/test-utils": "workspace:^", @@ -17,9 +17,9 @@ "@mui/material": "workspace:^", "@mui/system": "workspace:^", "@mui/utils": "workspace:^", - "@playwright/test": "1.42.1", + "@playwright/test": "1.43.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", @@ -29,12 +29,12 @@ "fs-extra": "^11.2.0", "html-webpack-plugin": "^5.6.0", "lodash": "^4.17.21", - "playwright": "^1.42.1", + "playwright": "^1.43.1", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-is": "^18.2.0", - "react-router-dom": "^6.21.3", + "react-router-dom": "^6.22.3", "sinon": "^15.2.0", "styled-components": "^6.1.8", "stylis": "4.2.0", diff --git a/test/regressions/index.js b/test/regressions/index.js index 29e521fc490585..2d6fe49c0dad6e 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -31,7 +31,6 @@ const blacklist = [ '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 @@ -173,6 +172,13 @@ function excludeDemoFixture(suite, name) { return true; } + // Exclude files that are not images and are not PascalCase + // Tantamount to skipping JS/TS files that are not React components or "index.js" files + // PascalCase starts with a capital letter and has zero or more capital letters in the middle + if (!suite.endsWith('.png') && name !== 'index' && !/^[A-Z][A-Za-z0-9]*$/.test(name)) { + return true; + } + if (suite.includes('docs-joy') && name.match(/(Variables|Usage)$/)) { return true; }